Marquee Hero
A free animated hero section that ends on a scrolling marquee strip.
- Automated axe check
- Reduced-motion tested
- SSR build verified
- GSAP
- 2 runtime packages
Marquee Hero is a free hero section with marquee for Next.js and React: a calm typographic headline, subtitle and calls to action revealed with GSAP, finished by a full width strip of scrolling text under the CTA row. It is styled with Tailwind and composes the Marquee Text component through a registry dependency, so the strip loops seamlessly, pauses on hover and stays scrollable under reduced motion.
You pass a title, an optional subtitle, up to two calls to action and a list of marquee phrases, and the section handles the rest: the four blocks rise in sequence as the hero enters the viewport, then the strip keeps a quiet line of motion running at the bottom of the fold. There is no background effect layer, so the section stays fast and the text keeps full contrast everywhere.
First screens that end on motion
Marquee Hero keeps the opening calm and typographic, then closes the fold with a full width strip of scrolling text under the calls to action, so the page feels alive before anyone scrolls.
Install
Add the @te registry to your components.json once:
{
"registries": {
"@te": "https://templateempire.io/r/{name}.json"
}
}Then install the component:
npx shadcn@latest add @te/hero-marqueeUsage
import { HeroMarquee } from "@/components/hero-marquee";
export default function Page() {
return (
<HeroMarquee
title="First screens that end on motion"
subtitle="A calm typographic hero finished by a full width marquee strip."
cta={{ label: "Get started", href: "/signup" }}
secondaryCta={{ label: "Read the docs", href: "/docs" }}
marqueeItems={[
"Motion-first sections",
"GSAP block reveals",
"Seamless CSS marquee",
"Reduced motion safe",
"Zero layout shift",
]}
/>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | required | Headline copy, rendered as the section's single h1. |
| subtitle | string | undefined | Supporting copy rendered below the headline. |
| cta | { label: string; href: string } | required | Primary call to action, rendered as a real anchor. |
| secondaryCta | { label: string; href: string } | undefined | Optional secondary call to action, rendered as a real anchor. |
| marqueeItems | string[] | required | Phrases rendered as spans inside the marquee track. |
| className | string | undefined | Additional classes merged onto the section root. |
Customisation
Marquee Hero declares no tokens of its own; the strip is themed through the Marquee Text component it installs as a registry dependency. Override --marquee-dur for the loop speed and --marquee-gap for the spacing between phrases, from :root or any ancestor of the hero, to retune the strip without touching the code:
:root {
--marquee-dur: 45s;
--marquee-gap: 4.5rem;
}Frequently asked questions
- Is Marquee Hero free for commercial use?
- Yes. Marquee Hero is MIT licensed, so you can use it in personal and commercial projects without attribution.
- Does Marquee Hero affect performance or accessibility?
- The entrance animates transforms and opacity only, inside space the layout has already reserved, so layout shift is zero, and it runs once when the section enters the viewport. The marquee loop is a single CSS transform animation with no JavaScript timers, it pauses on hover and on keyboard focus inside the strip, and screen readers receive each phrase exactly once because the duplicated loop copy is aria-hidden. Both calls to action are real anchors with visible focus rings, and with reduced motion enabled the full section renders immediately with the strip standing still as a horizontally scrollable row.
- How do I change the speed and spacing of the marquee strip?
- Override the CSS custom properties --marquee-dur and --marquee-gap from :root or any ancestor element. They belong to the Marquee Text component that Marquee Hero installs automatically, so one override themes the strip everywhere it appears.