MetaBall Hero

Heroes

About

Customizable 2d Metaball background visualization

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds MetaBall Hero to your project and fits it to your theme.

Code

How MetaBall Hero is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import MetaBalls from "@/components/ui/meta-ball-hero";

export default function DemoOne() {
  return (
    <div className="relative w-full h-screen bg-background overflow-hidden">
      <div className="absolute inset-0 w-full h-full">
        <MetaBalls
          color="#20f2ff"
          cursorBallColor="#f30010"
          speed={0.95}
          ballCount={7}
          animationSize={22}
          enableMouseInteraction={false}
          enableTransparency={false}
          hoverSmoothness={0.08}
          clumpFactor={0.64}
          cursorBallSize={3}
        />
      </div>

      <div className="relative z-10 flex flex-col items-center justify-center h-full text-center px-4">
        <h1 className="text-6xl md:text-8xl font-bold text-foreground mb-6 mix-blend-difference">
          HERO
        </h1>
        <h2 className="text-4xl md:text-6xl font-light text-foreground mb-8 mix-blend-difference">
          MetaBalls
        </h2>
        <p className="text-lg md:text-xl text-muted-foreground max-w-2xl leading-relaxed mix-blend-difference">
          Experience fluid, organic shapes. Built with WebGL and advanced shader techniques for smooth, real-time animation.
        </p>
      </div>
    </div>
  );
};

export function DemoTwo() {
  return (
    <div className="relative w-full h-screen bg-background overflow-hidden">
      <div className="absolute inset-0 w-full h-full">
        <MetaBalls
          color="#00ffff"
          cursorBallColor="#ff00ff"
          speed={0.5}
          ballCount={5}
          animationSize={35}
          enableMouseInteraction={true}
          enableTransparency={true}
          hoverSmoothness={0.08}
          clumpFactor={0.4}
          cursorBallSize={2}
        />
      </div>
    </div>
  );
};