Dynamic Hero

Heroes 1.1K

About

Elevate your landing page with this interactive React hero component. It captivates users with a unique arrow animation that tracks mouse movement, pointing towards the main call-to-action. Highly customizable, allowing you to define the heading, tagline, button text, and embed rich media (images or videos) in the designated card section. Seamlessly integrates with Tailwind CSS projects and follows modern React best practices for reusability.

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

Code

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

Usage.tsx

import { HeroSection } from "@/components/ui/dynamic-hero";

const DemoOne = () => {
   const myImage = (
    <img 
      src="https://cdn.21st.dev/assets/mirror/54/5463629f1d5c925ed9edc8714d89f8d639ba720eccaa41d7cb4d5419ff640ec1.jpg" 
      alt="Beautiful Landscape"
      className="w-full h-full object-cover"
    />
  );

  const myVideo = (
    <video 
      src="https://cdn.21st.dev/assets/mirror/3b/3bb938fb70049e3e45f533b37ccae995ae96516e04c2f35b0c1142e47b2a39c1.mp4" // Replace with your video URL
      autoPlay 
      loop 
      muted 
      playsInline
      className="w-full h-full object-cover"
    >
      Your browser does not support the video tag.
    </video>
  );

  return (
    <div>
      <HeroSection
        heading="Dynamic Design, Direct Action"
        tagline="Experience a hero section that not only looks great but actively leads your audience. Get started with a click."
        buttonText="Learn More"
        imageUrl="https://cdn.21st.dev/assets/mirror/54/5463629f1d5c925ed9edc8714d89f8d639ba720eccaa41d7cb4d5419ff640ec1.jpg"
        videoUrl="https://cdn.21st.dev/assets/mirror/3b/3bb938fb70049e3e45f533b37ccae995ae96516e04c2f35b0c1142e47b2a39c1.mp4" // A sample video
      />
    </div>
  );
};

export { DemoOne };