Marquee Hover
Marquee Hover is a button in the UI HUB buttons collection. At rest the button shows a static label. On hover, the label slides up and a continuously scrolling marquee of text slides in from below.
The component is driven by 5 documented props (label, marqueeText, className, speed, onClick), so colours, intensity, timing and density can be tuned from the call site instead of being hard-coded.
Implementation notes: Overflow hidden container; Framer Motion y-axis translate on hover; Looping CSS marquee animation.
Preview the button in the browser above, copy the source, and paste it into your project. Buttons components in UI HUB are grouped by category so you can compare effects side by side before choosing one.
What is Marquee Hover?
Hover-reveal marquee text button. It is built as a React and Tailwind CSS component and can be previewed directly on this page.
Marquee Hover at a glance
- Category
- Buttons
- Pricing
- Free to use
- Libraries
- Framer Motion
- Styling
- Tailwind CSS
- Configurable props
- 5
- AI prompts
- Ready for Advance, Antigravity, Claude Code, Cursor, Lovable
How Marquee Hover works
At rest the button shows a static label. On hover, the label slides up and a continuously scrolling marquee of text slides in from below.
Technical information for Marquee Hover
| Category | Buttons |
|---|---|
| Libraries | Framer Motion |
| Styling | Tailwind CSS |
| Rendering | requestAnimationFrame |
| State change | static label to scrolling marquee text on hover |
| Props | 5 configurable |
| Usage example | Included on this page |
What Marquee Hover requires
- Overflow hidden container
- Framer Motion y-axis translate on hover
- Looping CSS marquee animation
- Configurable speed and text
How to use Marquee Hover
- Install the dependencies: npm install framer-motion.
- Copy the usage example from the Source section of this page. It shows the import path and the props the component expects.
- Render <MarqueeHover /> in your page using that import path.
- Pass any of the 5 documented props to change colours, density, speed or behaviour.
Marquee Hover questions
What is Marquee Hover?
Hover-reveal marquee text button. It is built as a React and Tailwind CSS component and can be previewed directly on this page.
How does Marquee Hover work?
At rest the button shows a static label. On hover, the label slides up and a continuously scrolling marquee of text slides in from below.
Which category does Marquee Hover belong to?
Marquee Hover is listed under Buttons in the UI HUB catalog. Call-to-action buttons with real interaction design: magnetic pull on hover, glow and shimmer sweeps, press states and SVG-based shape morphs. Each button accepts its own label, href and colour props, so it drops into an existing layout without forcing a wrapper. Accessible focus states are preserved in every variant.
What does the label prop do in Marquee Hover?
The text shown at rest. It defaults to "Hover Me".
What does the marqueeText prop do in Marquee Hover?
The scrolling text revealed on hover. It defaults to "★ Marquee Text ★".
Is Marquee Hover free to use?
Marquee Hover is a free component on UI HUB. You can preview it in the browser and read the full props table on the component page.
Which libraries does Marquee Hover use?
Marquee Hover uses Framer Motion and is styled with Tailwind CSS.
What does Marquee Hover need to run?
Marquee Hover needs Overflow hidden container, Framer Motion y-axis translate on hover, Looping CSS marquee animation and Configurable speed and text.