Kinetic Text

Text Animations

Reveals text word- or char-by-char with a spring rise-and-mask as it scrolls into view. Static, fully legible fallback under reduced-motion.

Installation

npx shadcn@latest add https://parable-three.vercel.app/r/kinetic-text.json

Runs the shadcn CLI — the component source is copied intocomponents/parable/kinetic-text.tsx. You own it from there.

Usage

The exact code rendering the preview above.

<KineticText
    key={Math.random()}
    as="p"
    className="max-w-md text-center text-2xl font-medium"
    text="Words rise into place, one spring at a time."
  />

Props

KineticTextProps extends React.HTMLAttributes<HTMLSpanElement>

Prop	Type	Default	Description
text*	string	—	The text to reveal, split per word.
stagger	number	0.06	Seconds between each word.
by	"word" \| "char"	"word"	Split unit.
once	boolean	true	Only animate once.
as	React.ElementType	—	Element to render as.

npm dependencies

motion