Components
metaballs
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.
"use client";
import ModernPulseShader from "@/components/ui/metaballs";
const settings = {
gridSize: 8,
speed: 1,
grainIntensity: 0.05,
};
export default function Demo(props: Partial<typeof settings>) {
const s = { ...settings, ...props };
return (
<div className="h-screen w-screen">
<ModernPulseShader
gridSize={s.gridSize}
speed={s.speed}
grainIntensity={s.grainIntensity}
/>
</div>
);
}