Get everything for $99, lifetime

Components

Smooth Stagger Text

Free

hover me

ホバーして

Installation

FreeNo license required.
npx shadcn add https://useplanes.com/r/smooth-stagger-text.json
import { SmoothStaggerText } from "@/components/ui/SmoothStaggerText";

<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.