design-infraReport a problem or share feedback← Catalog
Rolling text button
curatedfreemotion/rolling-text-button
An example of rolling a duplicate button label into place on hover with Motion for React.
$
pnpm add motion # then adapt the free source from https://motion.dev/examples/react-rolling-text-buttonnpm deps: motion
Our notes
Button whose label rolls to a new word on hover/click — a free alternative to Motion+ text components. Free example (motion is MIT); copy and adapt the source from the example page.- Source
- Motion (motion.dev)
- Kind
- transition
- Categories
- transition, button, text-effect
- Use as
- recipe — technique you apply to your own markup
- Applies to
- button
- Motion
- on hover, press · subtle · motion · low cost
- Tags
- motion, animate, variants
- Licence
- motion / motion/react / motion-v are MIT. Motion+ (premium components, example source, AI Kit pro tools) is paid — one-time Personal licence or per-seat Business.
- Live demo
- motion.dev
- Docs
- motion.dev
Similar
Compare all 4 →- Staggered Letter Text Swapmicrokit/staggered-letter-text-swapEach letter rolls up and is replaced by its twin with a 34ms stagger on hover/focus-visible — pure CSS transitions via a --letter-delay var; the button carries aria-label and the letter spans are aria-hidden; motion-reduce handled. Remove the hard-coded font-[Arial] and light-dark() text colour so it inherits your type and tokens. Nav links and text CTAs.
- Text states swaptransitions/text-states-swapSwapping the text of a status indicator in place — "Processing…" → "Done", "Save" → "Saved". The old text exits up with blur, the new text enters from below.
- Scroll word revealmotion/text-scroll-word-revealWords light up as you scroll through a paragraph — the classic manifesto/hero statement reveal. Free example (motion is MIT); copy and adapt the source from the example page.