Liquid Chrome

Heroes

About

An animated full-bleed liquid metal shader background with customizable colors and flow speed for landing page heroes.

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

Code

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

Usage.tsx

import LiquidChrome from "@/components/ui/liquid-chrome";

export default function LiquidChromeDemo() {
  return (
    <div className="relative h-[520px] w-full overflow-hidden rounded-xl border">
      <LiquidChrome />
      <div className="pointer-events-none absolute inset-0 flex flex-col items-center justify-center gap-4 px-6 text-center">
        <h1 className="text-5xl font-bold tracking-[0.2em] text-white/80 drop-shadow-[0_2px_12px_rgba(0,0,0,0.35)] md:text-7xl">
          LIQUID CHROME
        </h1>
        <p className="max-w-md text-sm text-white/70 drop-shadow-[0_1px_6px_rgba(0,0,0,0.4)] md:text-base">
          A mesmerizing, shader-driven liquid metal animation ideal for modern
          landing pages.
        </p>
      </div>
    </div>
  );
}