This design introduces a modern and visually stunning interactive light-tubes effect powered by the Three.js library. The animation runs on a full-screen canvas background and reacts dynamically to user interaction, creating a stylish and immersive experience.


The code uses the threejs-components package, which provides ready-made utilities like TubesCursor to generate high-quality 3D effects without complex setup.


Key Features


  1. Full-screen 3D animated background.
  2. Smooth and responsive cursor-based movement.
  3. Auto-changing colors every time the user clicks anywhere on the page.
  4. Clean centered hero section with glowing text.
  5. Lightweight code with no extra heavy dependencies.


How It Works


  1. A full-viewport canvas element is created as the background.
  2. TubesCursor renders animated tubes that follow cursor movement.
  3. When the user clicks, new random colors are generated using the randomColors() function.
  4. These colors are applied instantly to the tubes and lighting system, giving a fresh effect every time.


Customization


You can easily modify:

  • Tube colors
  • Light colors
  • Light intensity
  • Fonts and text styling
  • Hero section layout
  • External component links
  • This makes the effect suitable for many types of modern web interfaces.


Perfect For


  • Landing pages
  • App showcase websites
  • Portfolio websites
  • Creative intros & hero sections
  • Modern UI/UX animated backgrounds


Download


Download