design-infraReport a problem or share feedback← Catalog
Staggered Letter Text Swap
curatedfreemicrokit/staggered-letter-text-swap
A surface-free text interaction with a staggered per-letter upward replacement.
$
npx shadcn@latest add https://microkit.co/r/staggered-letter-text-swap.jsonOur notes
Each 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.- Source
- MicroKit
- Kind
- component
- Categories
- text-effect, button
- Use as
- recipe — technique you apply to your own markup
- Applies to
- buttontext-effectnavigation
- Motion
- on hover · subtle · css · low cost · respects reduced motion
- Tags
- css, hover
- Licence
- MIT ("MIT License — Copyright (c) 2026 Henrique Barone", github.com/henriquegpb/microkit). README credits note that some interactions are adapted from publicly shared examples and Webflow exports.
- Live demo
- microkit.co
- Docs
- microkit.co
Similar
Compare all 4 →- Clerk: User Buttonmotion/clerk-user-buttonA custom Clerk user button built with Motion. The closed avatar expands into an account menu, using Motion's resize() util to animate the container to the menu's measured height.
- Rolling text buttonmotion/rolling-text-buttonButton 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.
- Expanding Icon Tabsmicrokit/expanding-icon-tabsIcon toolbar whose chosen item widens to show its label while siblings slide over; ←/→ move focus, Escape and outside-click collapse it, role=toolbar, motion-reduce handled. Good for compact app toolbars and view switchers. Hard-coded items and light-dark() hex colours — rebuild with your icons and tokens.