Hero Animated

Heroes 197

About

Flexible and customizable hero section component with gradient backgrounds and animated content. ## Features - 🎨 Customizable gradient backgrounds - 📱 Responsive design - ✨ Smooth animations - 🎯 Multiple layout options - ♿ Accessible by default

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

Code

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

Usage.tsx

import {
  Hero,
  BgGradient,
  TextStagger,
  AnimatedContainer,
} from "@/components/ui/hero-animated";

const settings = {
  stagger: 0.05,
  opacity: 0,
  scale: 1,
  x: 0,
  y: 40,
};

export default function Demo(props: Partial<typeof settings>) {
  const s = { ...settings, ...props };
  return (
    <div className="h-screen w-screen">
      <Hero>
        <BgGradient gradientColors="purple" />
        <TextStagger
          as="h1"
          text="Build beautiful animated heroes"
          stagger={s.stagger}
          opacity={s.opacity}
          scale={s.scale}
          x={s.x}
          y={s.y}
          className="z-10 max-w-4xl px-6 text-5xl font-bold text-white md:text-7xl"
        />
        <AnimatedContainer
          opacity={s.opacity}
          scale={s.scale}
          x={s.x}
          y={s.y}
          className="mt-6 max-w-2xl px-6 text-lg text-white/60 md:text-xl"
        >
          Motion-powered staggered text with a radial gradient backdrop, ready
          to drop into any landing page.
        </AnimatedContainer>
      </Hero>
    </div>
  );
}