Components
WebGL Blob
The component handles all the WebGL setup, shader compilation, and animation loop internally while exposing the key parameters as props for easy customization.
import { WebGLBlob } from "@/components/ui/web-gl-blob";
export default function DemoOne() {
return (
<div className="relative flex h-full w-full flex-col items-center justify-center overflow-hidden">
<WebGLBlob />
<span className="absolute pointer-events-none z-10 text-center text-7xl leading-none font-semibold tracking-tighter whitespace-pre-wrap text-white">
WebGL Blob
</span>
</div>
)
}