Hero Liquid Metal

Heroes 100

About

Split-layout hero section with an animated liquid-metal shader visual, call-to-action button, and tech-stack badges.

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

Code

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

Usage.tsx

"use client"

import {
  AISDKIcon,
  HeroLiquidMetal,
  HeroLiquidMetalActions,
  HeroLiquidMetalBadges,
  HeroLiquidMetalContainer,
  HeroLiquidMetalContent,
  HeroLiquidMetalDescription,
  HeroLiquidMetalHeading,
  HeroLiquidMetalMobileVisual,
  HeroLiquidMetalRoot,
  HeroLiquidMetalVisual,
  NextjsIcon,
} from "@/components/ui/hero-liquid-metal"

export default function HeroLiquidMetalDemo() {
  return (
    <div className="space-y-16">
      <div className="space-y-4">
        <h3 className="font-medium text-lg flex items-center justify-center">
          Default
        </h3>
        <HeroLiquidMetal />
      </div>

      <div className="space-y-4">
        <h3 className="font-medium text-lg flex items-center justify-center">
          Root-level shader props
        </h3>
        <HeroLiquidMetal
          width={1280}
          height={720}
          image="https://cdn.21st.dev/assets/mirror/48/483b9e388f61026cdcde3f640637eced2a4ff9f13b09a2cdbaf7f65ca4dc54e5.svg"
          colorBack="#ffffff00"
          colorTint="#2c5d72"
          shape={undefined}
          repetition={6}
          softness={0.8}
          shiftRed={1}
          shiftBlue={-1}
          distortion={0.4}
          contour={0.4}
          angle={0}
          speed={1}
          scale={0.6}
          fit="contain"
        />
      </div>

      <div className="space-y-4">
        <h3 className="font-medium text-lg flex items-center justify-center">
          Configured via props
        </h3>
        <HeroLiquidMetalRoot
          ctaProps={{
            href: "#",
            label: "Try NewCopy for marketing",
          }}
          description="Human-in-the-loop marketing copy software that helps teams draft, review, and ship high-converting campaigns with confidence."
          desktopShaderProps={{
            scale: 0.8,
            speed: 0.7,
            repetition: 7,
            softness: 0.9,
            distortion: 0.3,
            colorTint: "#4f46e5",
          }}
          image="https://cdn.21st.dev/assets/mirror/48/483b9e388f61026cdcde3f640637eced2a4ff9f13b09a2cdbaf7f65ca4dc54e5.svg"
          mobileShaderProps={{
            speed: 0.65,
            scale: 0.78,
            colorTint: "#0ea5e9",
          }}
          srTitle="Composable hero"
          subtitle="Marketing"
          techStack={[
            { name: "Next.js", version: "v16" },
            { name: "AI SDK", version: "v6" },
            { name: "Tailwind", version: "v4" },
          ]}
          title="Cursor for"
        >
          <HeroLiquidMetalContainer>
            <HeroLiquidMetalContent>
              <HeroLiquidMetalHeading />
              <HeroLiquidMetalDescription />
              <HeroLiquidMetalActions />
              <div
                className="hidden lg:flex justify-center lg:justify-start"
                data-slot="hero-liquid-metal-badges-wrap"
              >
                <HeroLiquidMetalBadges
                  techStack={[
                    { name: "Next.js", version: "v16", icon: NextjsIcon },
                    { name: "AI SDK", version: "v6", icon: AISDKIcon },
                  ]}
                />
              </div>
            </HeroLiquidMetalContent>
            <HeroLiquidMetalVisual />
          </HeroLiquidMetalContainer>
          <HeroLiquidMetalMobileVisual />
        </HeroLiquidMetalRoot>
      </div>
    </div>
  )
}