Flip Words

Cycles words with a springy blur-flip transition.

Make it modern, animated, accessible

Installation

pnpm dlx shadcn@latest add https://paulkeys.org/r/flip-words.json

Adds components/velora/flip-words.tsx, installs motion.

Prop	Type	Default
`words*`	`string[]`	`—`
`duration` ms each word stays on screen	`number`	`2600`
`className`	`string`	`—`

Reduced motion: The first word stays on screen and the words don't cycle. With motion allowed, cycling pauses while the pointer is over the word or focus is inside it.
Keyboard: Decorative — nothing to operate.
Screen readers: All words are exposed once, comma-separated, in an sr-only span; the rotating visual word is aria-hidden, so nothing is announced on change.

Cycles words with a springy blur-flip transition.

Make it modern, animated, accessible

pnpm dlx shadcn@latest add https://paulkeys.org/r/flip-words.json

Adds components/velora/flip-words.tsx, installs motion.

Prop	Type	Default
`words*`	`string[]`	`—`
`duration` ms each word stays on screen	`number`	`2600`
`className`	`string`	`—`

Reduced motion: The first word stays on screen and the words don't cycle. With motion allowed, cycling pauses while the pointer is over the word or focus is inside it.
Keyboard: Decorative — nothing to operate.
Screen readers: All words are exposed once, comma-separated, in an sr-only span; the rotating visual word is aria-hidden, so nothing is announced on change.