Components
This shader uses Signed Distance Functions (SDFs) to create several "metaballs" that move, merge, and split in a smooth, liquid-like fashion. The colors are generated procedurally and shift over time, creating a mesmerizing, ever-changing abstract visual.
npx @21st-dev/cli add dhileepkumargm/metaballsLoading preview...
import React from "react";
import ModernPulseShader from "@/components/ui/metaballs";
export default function DemoOne() {
return (
<div className="relative w-screen h-screen bg-background text-foreground font-sans">
{/* Full-screen pulse shader */}
<ModernPulseShader />
{/* 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">Modern Pulse</h1>
<p className="mt-4 text-lg text-muted-foreground max-w-xl">
A dynamic grid of pulsing circles with glow and grain, fully
customizable via props and theme-aware through CSS variables.
</p>
</div>
</div>
);
}