Louis Studios

Tube Grid

Shaders

About

A grid of glowing electric blue tubes seen end on, stretching toward a drifting vanishing point, with soft breathing light. Move the pointer to steer the tunnel, click to send a pulse of light down every tube.

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

Code

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

Usage.tsx

"use client"

import * as React from "react"
import { TubeGrid } from "@/components/ui/tube-grid"

export default function TubeGridDemo() {
  return (
    <div className="relative h-screen min-h-[560px] w-full bg-black">
      <TubeGrid />
    </div>
  )
}

More by Louis Studios

View all
  • Dot Tiles

    Dot Tiles

    83
  • Lens Clock

    Lens Clock

    30
  • Melt Mark

    Melt Mark

    24
  • Wave Type

    Wave Type

    18
  • Brick Digits

    Brick Digits

    14
  • Effort Slider

    Effort Slider

    4
  • Metaball Loader

    Metaball Loader

    4
  • LED Badges

    LED Badges

    3

More in Shaders

View all
  • Glass Fold

    Glass Fold

    385
  • Shader Animation

    Shader Animation

    3.8K
  • Wave

    Wave

    707
  • Black Hole

    Black Hole

    38
  • Paper design shader Background

    Paper design shader Background

    688
  • Background Shaders

    Background Shaders

    113
  • Oceanic

    Oceanic

    181
  • Swirl

    Swirl

    427