Components
A React UI component that renders an infinite, color-shifting warp-speed tunnel using WebGL2 and GLSL shaders.
npx @21st-dev/cli add dhileepkumargm/warp-tunnelLoading preview...
import WarpTunnel from "@/components/ui/warp-tunnel";
export default function DemoOne() {
return (
<div className="relative w-screen h-screen bg-background text-foreground font-sans">
{/* Warp Tunnel Shader */}
<WarpTunnel segments={8} speed={1.5} />
{/* Overlay content */}
<div className="absolute inset-0 z-10 flex flex-col justify-center items-center text-center pointer-events-none px-4">
<h1 className="text-6xl font-black">Warp Tunnel</h1>
<p className="mt-4 text-lg text-muted-foreground max-w-xl">
A mesmerizing, kaleidoscopic warp‐tunnel rendered in GLSL/WebGL2,
fully customizable via props and theme‐aware through CSS variables.
</p>
</div>
</div>
);
}