Components
polar coordinates to create the repeating segments and implemented a high-quality color palette function, as described by Inigo Quilez, to produce the smooth, psychedelic color transitions.
npx @21st-dev/cli add dhileepkumargm/kaleidoscopic-shaderLoading preview...
import KaleidoscopicTunnel from "@/components/ui/kaleidoscopic-shader";
export default function DemoOne() {
return (
<div className="relative w-screen h-screen bg-background text-foreground font-sans">
{/* Kaleidoscopic tunnel shader */}
<KaleidoscopicTunnel segments={8} speed={2} />
{/* 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">Kaleidoscopic Tunnel</h1>
<p className="mt-4 text-lg text-muted-foreground max-w-xl">
A mesmerizing tunnel of mirrored shapes, animated in GLSL/WebGL2 and
fully customizable via props and theme CSS variables.
</p>
</div>
</div>
);
}