ScrollingHeroMarquee

Heroes 12

About

Animated headline scroller with layered motion and depth perspective for modern hero sections.

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

Code

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

Usage.tsx

import { ScrollingHeroMarquee } from "@/components/ui/scrolling-hero-marquee";

export default function DemoOne() {
   return (
    <div className="bg-white text-black dark:bg-black dark:text-white">
      <ScrollingHeroMarquee
        text="I believe that a good user interface is carefully targeted towards its audience, with the right mixture of simplicity, elegance and innovation."
        durationSec={10}
        rowHeight={150}
        fontSize="clamp(2rem, 6vw, 4rem)"       
      />
    </div>
  );;
}