Planes

Components

Text

Smooth Stagger Text

Free

On hover, the label fades out and new text resolves character by character, each glyph shimmering up before it settles.

All components

hover me

ホバーして

Installation

FreeNo license required.
npx shadcn add https://planes.ashishgogula.in/r/smooth-stagger-text.json
<SmoothStaggerText
  mainText="hover me"
  hoverText="ホバーして"
  interval={100}
  colors={["text-rose-400", "text-amber-300", "text-emerald-300"]}
  className="text-6xl text-foreground"
/>

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.