liquid metal

This card features a stunning "liquid metal" layer that covers the main content. As you move your cursor over the card, the liquid surface ripples and parts, revealing the details hidden beneath. This creates a mesmerizing and highly interactive experience, perfect for showcasing portfolio items or product features in a memorable way.

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

import { LiquidRevealCard } from "@/components/ui/liquid-metal";

const settings = {
  width: 380,
  height: 500,
};

export default function DemoOne(props: Partial<typeof settings>) {
  const s = { ...settings, ...props };
  return (
    <LiquidRevealCard
      title="Project Cygnus"
      description="An interstellar journey through generative art and sound, creating a unique experience for every user."
      width={s.width}
      height={s.height}
    />
  );
}