Liquid Metal Hero

Heroes 1.4K

About

Liquid metal hero section with nice animations and perfect for any website.

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

Code

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

Usage.tsx

"use client";

import LiquidMetalHero from '@/components/ui/liquid-metal-hero';

export default function LiquidMetalHeroDemo() {
  return (
    <LiquidMetalHero
      badge="✨ Next Generation UI"
      title="Fluid Design Excellence"
      subtitle="Experience the future of web interfaces with liquid metal aesthetics that adapt, flow, and captivate. Built for modern applications that demand both beauty and performance."
      primaryCtaLabel="Start Building"
      secondaryCtaLabel="View Examples"
      onPrimaryCtaClick={() => alert("Primary CTA clicked!")}
      onSecondaryCtaClick={() => alert("Secondary CTA clicked!")}
      features={[
        "Seamless Animations",
        "Responsive Excellence", 
        "Modern Architecture"
      ]}
    />
  );
}