Text

Smooth Stagger Text

On hover, the resting label fades out while replacement text resolves in character by character — each glyph staggers up through a chromatic-aberration shimmer before settling.

All components

hover me

ホバーして

Installation

Coming soon. Components will be available via the registry once checkout goes live.

Usage

<SmoothStaggerText
  mainText="hover me"
  hoverText="ホバーして"
  interval={100}
  colors={["text-rose-400", "text-amber-300", "text-emerald-300"]}
  className="text-6xl text-foreground"
/>

Props

Prop	Type	Default	Description
mainText*	string	—	Text shown at rest. Fades out on hover.
hoverText*	string	—	Text that staggers in character by character on hover.
colors	string[]	[]	Per-character Tailwind text-color classes, index-matched to hoverText. Falls back to text-white.
interval	number	120	Delay between each character's entrance, in ms.
className	string	—	Classes merged onto both text layers — set size, weight, and color here.
trigger	"self" \| "parent"	"self"	How hover is detected. "self" reacts to its own hover; "parent" waits for a .group ancestor to be hovered.

Use cases

Hero headline
A landing-page title that resolves into a tagline on hover with a chromatic shimmer.
Navigation labels
Menu links that swap label-to-destination as the cursor lands, adding playful motion to wayfinding.
Interactive logotype
A wordmark that reveals a hidden message or alternate spelling on hover.
Call-to-action
Buttons or chips where "hover me" transforms into the action verb, rewarding the interaction.