TubeCursor

Component 531

About

An interactive background component that renders glowing animated tubes powered by Three.js. Designed for Next.js + React, it features customizable tube colors, light palettes, intensity, and text overlays. Includes an option to randomize colors on click for a dynamic user experience.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds TubeCursor to your project and fits it to your theme.

Code

How TubeCursor is used: the demo's code. The component's own source comes with a free account.

Usage.tsx


import { TubesCursor } from "@/components/ui/tube-cursor";

export default function DemoOne() {
  return <TubesCursor
        title="Tubes"
        subtitle="Cursor"
        caption="Click to Change- by Rahil Vahora"
        initialColors={["#ff0000", "#00ff00", "#0000ff"]}
        lightColors={["#ffff00", "#ff00ff", "#00ffff", "#ffffff"]}
        lightIntensity={250}
        titleSize="text-[70px]"
        subtitleSize="text-[50px]"
        captionSize="text-lg"
        enableRandomizeOnClick
      />;
}