Animated Hero

Heroes 406

About

Bold hero section featuring a red gradient title and animated dot grid that dynamically follows cursor movement. Ideal for creative portfolios, landing pages, and modern minimal websites to engage users instantly.

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

Code

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

Usage.tsx

import {ParticleHero } from '@/components/ui/animated-hero'
// Demo Component
const ParticleHeroDemo = () => {
  return (
    <div className="min-h-screen w-full">
      <ParticleHero
        title="MINIMAL"
        subtitle="Clean Design"
        description="Less is more with this streamlined approach."
        particleCount={10}
        interactiveHint="Hover to Interact"
        primaryButton={{
          text: "Get Started",
          onClick: () => console.log("Started!")
        }}
      />
    </div>
  );
};

export default ParticleHeroDemo;