Neon 3D Tubes Cursor Trail

This Neon 3D Tubes Cursor Trail brings high-end motion graphics to the web browser. Using the power of WebGL and Three.js, it generates a serpentine trail of glowing 3D geometry that fluidly follows the user’s input. The effect features dynamic lighting that casts soft glows on the tubes, and it includes a built-in interaction where clicking the screen instantly randomizes the color palette, keeping the visual experience fresh.

Core Technique

The complexity of setting up a 3D scene, camera, and render loop is abstracted away by the threejs-components library. The core logic relies on the TubesCursor class.

1. Initialization: The script targets a standard HTML <canvas> element and initializes the WebGL context.
2. Tube Generation: As the mouse moves, the library calculates the trajectory and generates a tube geometry along that path. It essentially “extrudes” a shape along a spline defined by the cursor’s history.
3. Lighting System: The config object defines specific point lights (intensity and colors). These lights interact with the material of the tubes to create the 3D volume and neon glow effect.
4. Color Randomization: A custom helper function randomColors(count) generates hex codes on the fly. When a click event is detected, the app methods setColors and setLightsColors are called to update the shader uniforms instantly without re-initializing the whole scene.

Customization

You can control the visual aesthetics by passing a configuration object to the TubesCursor constructor.

const app = TubesCursor(document.getElementById('canvas'), {
  tubes: {
    // Array of base colors for the tube material
    colors: ["#f967fb", "#53bc28", "#6958d5"], 
    lights: {
      // Brightness of the glow (higher = more bloom)
      intensity: 200, 
      // Colors of the light sources casting onto the tubes
      colors: ["#83f36e", "#fe8a2e", "#ff008a", "#60aed5"]
    }
  }
})

To integrate the randomization into your own UI, you can trigger the update function from any button:

myButton.addEventListener('click', () => {
  // Generate 3 random colors for tubes
  app.tubes.setColors(randomColors(3));
});

Tips

1. Managing Mobile Interaction: The CSS includes touch-action: none; on the body. This is critical for full-screen interactive canvases on mobile devices. Without it, dragging your finger to create a trail would simultaneously scroll the webpage, ruining the experience.

2. Z-Index Layering: Since the canvas is positioned with fixed and covers the viewport, ensure your content (headlines, buttons) has a higher z-index and position: relative (or absolute). Additionally, user-select: none on the text prevents accidental highlighting while users play with the cursor.