Floating Lines Shader

Bending rays of light following the cursor.

Required Dependencies

npm install three @types/three @react-three/fiber

NPM Installation (Recommended)

npx shaderz add

Select "Floating Lines" from the interactive list.

Basic Usage

import FloatingLines from '@/components/shaders/floating-lines/Hero';

export default function App() {
  return (
    <div style={{ width: '100%', height: '500px' }}>
      <FloatingLines />
    </div>
  );
}

Full Screen Hero Background

To use the shader as a background, position it absolutely within a relative container and place your content on top using z-index.

import FloatingLines from '@/components/shaders/floating-lines/Hero';

export default function HeroSection() {
  return (
    <div className="relative w-full h-screen overflow-hidden">
      {/* Shader Background */}
      <div className="absolute inset-0 z-0">
        <FloatingLines />
      </div>

      {/* Content Layer */}
      <div className="relative z-10 flex flex-col items-center justify-center h-full text-white">
        <h1 className="text-6xl font-bold">Your Content Here</h1>
      </div>
    </div>
  );
}

Manual Installation

Alternatively, copy the component code directly into your project at components/shaders/floating-lines/Hero.tsx

Full Component Code

'use client';
import React from 'react';
import FloatingLines from './FloatingLines';

const Hero = () => {
    return (
        <div className="absolute inset-0 w-full h-full bg-black overflow-hidden">
            <FloatingLines
                animationSpeed={1.5}
                lineCount={[4, 5, 4]}
                lineDistance={[3, 4, 3]}
                linesGradient={['#ec4899', '#8b5cf6', '#3b82f6']}
                interactive={true}
            />
        </div>
    );
};

export default Hero;