Components
A React UI component that ray-marches an infinite, animated checkered plane using WebGL2 and GLSL.
npx shadcn@latest add https://21st.dev/r/dhileepkumargm/infinite-planeLoading preview...
import InfinitePlaneBg from "@/components/ui/infinite-plane";
export default function DemoOne() {
return (
<div className="relative w-screen h-screen bg-background text-foreground font-sans">
{/* Infinite plane background with moving checkered floor */}
<InfinitePlaneBg planeHeight={0} speed={1} />
{/* 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">Infinite Plane</h1>
<p className="mt-4 text-lg text-muted-foreground max-w-xl">
A ray-marched infinite plane with dynamic checkered pattern and diffuse lighting.
</p>
</div>
</div>
);
}