Components
the hexagonal tiling patterns and glowing effects often seen in advanced shaders on Shadermind and in resources like "The Book of Shaders," I have created an entirely new shader that generates an infinite, animated hexagonal grid.
npx @21st-dev/cli add dhileepkumargm/hexagonal-puls-shaderLoading preview...
import ShaderComponent, { hexagonalPulseShader } from "@/components/ui/hexagonal-puls-shader";
export default function DemoOne() {
return (
<div className="relative w-screen h-screen bg-background text-foreground">
{/* Full-screen hexagonal pulse shader */}
<ShaderComponent
fragmentShader={hexagonalPulseShader}
ariaLabel="Hexagonal pulse shader background"
/>
{/* Overlay content */}
<div className="absolute inset-0 z-10 flex flex-col justify-center items-center text-center pointer-events-none">
<h1 className="text-6xl font-black">21st.dev</h1>
<p className="mt-4 text-lg text-muted-foreground max-w-xl">
A dynamic hexagonal pulse shader, fully customizable via props and
theme-aware through CSS variables.
</p>
</div>
</div>
);
}