FORMA

Heroes 11

About

An interactive, liquid-metal background that responds to mouse movement.

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

Code

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

Usage.tsx

import { FerrofluidBackground } from "@/components/ui/forma";

export default function DemoOne() {
  return (
    <div className="h-screen w-screen bg-background text-foreground font-sans cursor-none overflow-hidden">
      <FerrofluidBackground />
      <div className="relative z-10 p-8 flex flex-col h-full box-border">
        <header className="flex justify-between items-center w-full">
          <div className="font-black text-2xl tracking-wider">FORMA</div>
          <button className="border border-border text-muted-foreground px-6 py-2 rounded-lg font-bold hover:bg-accent hover:text-accent-foreground transition-colors">
            Interface
          </button>
        </header>
        <div className="flex-grow flex flex-col justify-center items-center text-center">
          <h1 className="text-7xl md:text-9xl font-black leading-none tracking-tighter">
            Shape the Flow.
          </h1>
          <p className="text-muted-foreground mt-4 text-lg max-w-2xl">
            An interactive protocol for a fluid digital economy.
          </p>
        </div>
        <footer className="text-muted-foreground/50 text-sm text-center">
          <p>&copy; 2025 Forma Protocol</p>
        </footer>
      </div>
    </div>
  );
}