Rolling Text

Characters roll in place with satisfying 3D physics, like mechanical departure boards at train stations. Each character performs a rotateX animation—the current character flips up and away while the new character rolls in from below. Uses CSS perspective and backface-hidden for realistic 3D depth. Supports scroll-triggered animation via intersection observer, with staggered timing that creates a wave effect across the text. Built with Motion for React. Perfect for hero text reveals, loading states, or anywhere needing that satisfying mechanical flip aesthetic.

Rolling Text preview

Installation

npx shadcn@latest add https://www.shadcn.io/registry/rolling-text.json

npx shadcn@latest add https://www.shadcn.io/registry/rolling-text.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/rolling-text.json

bunx shadcn@latest add https://www.shadcn.io/registry/rolling-text.json

Related Components

FAQ