Scroll & Motion
Sticky Text Marquee Hero
A pinned centered headline at a deliberately small display size (~22px) sits over a slow horizontal marquee of low-contrast text. Editorial pacing for landing pages that want confidence over shout.
Live preview
No extra dependencies. React 18+ and Tailwind CSS v3+ assumed. Save as StickyTextMarqueeHero.tsx.
Or rebuild it with a prompt
Paste the prompt into the tool you already use. Each version is written specifically for that tool, matched to the same design constraints so the output stays consistent.
Build components/StickyTextMarqueeHero.tsx. Section 100vh with a configurable dark bgColor. Inside: an absolute layer with a large low-opacity horizontal marquee (text at 8vw, semibold, tracking-tight, white/8, whitespace-nowrap) drifting via a CSS keyframe animation. Centered above: a small pinned headline (20-24px responsive, font-semibold tracking-tight text-white max-w-[520px]). Props: headline, marqueeText, bgColor. Pure CSS animation. Reduced-motion pauses. Single default export.
How to use it
- Use as a section header, brand tagline block, or a quiet transition between two content sections.
- Small confident headline over a soft ambient marquee. The background sets tone without stealing attention.
- Pure CSS animation. Reduced-motion pauses the marquee cleanly.
Other components you might like
Scroll & Motion
Word-by-Word Text Reveal Scroll Hero
Scroll-driven word-by-word text reveal hero for React, small headline that arrives one word at a time.
Scroll & Motion
Sticky Kicker Manifesto Hero
Sticky top-of-page kicker label for React manifesto pages, updates its text as reader scrolls sections.
Scroll & Motion
Line-by-Line Text Reveal Scroll Hero
Scroll-driven line-by-line text reveal hero for React essays and story openings.
Related prompts for scroll & motion
Frequently asked questions
How do I use this component in my project?+
Copy the source file from the "Copy code" button and save it into your components folder. Add any listed dependencies (React 18 or later and Tailwind CSS v3 or later are always required, plus framer-motion or gradflow if the component lists them). Import and render the component wherever you want it. Every prop is optional and defaulted.
Can I customise the design and copy?+
Yes. Every component takes props for its content (headline, subtitle, image URL, CTA, and so on) and uses Tailwind classes throughout, so you can restyle without touching the logic. For deeper design changes, paste the prompt into Claude Code, Cursor, Lovable, Replit, or Codex and describe your brand tokens, spacing, or motion tweaks.
Are the components free for commercial use?+
Yes. Everything on this page is free to copy, adapt, and ship in commercial projects. No attribution required. If you post a public showcase we always appreciate a link back.
Which AI coding tool works best for these components?+
All five prompts produce the same design. Claude Code and Codex are best when you want the component slotted into a project with existing conventions. Cursor is ideal for editing inside your IDE with the file open. Lovable and Replit spin up a fresh preview fastest, useful for a quick play.
Do these work with Next.js, Vite, and Remix?+
Yes. The source files are plain React 18 client components. They run on any framework that supports React 18 and Tailwind CSS v3. If a component needs the "use client" directive (all of them do here, since they use hooks), keep the directive at the top of the file when you paste.