Components

Flip Text

Cycles words by flipping them around the X axis: the current word's characters tip away (rotateX → -90°) while the next word's tip in (90° → 0°) under shared perspective, each character 18ms behind the last, and the container's width glides between word widths.

Built to launch.

Install

Copies the component source — plus its small internal deps — into your project. You own the code from the first minute.

terminal

npx lumora-ui@latest add flip-text

Import

Using the workspace package instead? Deep imports keep cold starts lean; the barrel is fully tree-shakable either way.

app/page.tsx

import { FlipText } from "@lumora/ui/components/flip-text";
// or from the barrel:
import { FlipText } from "@lumora/ui";

Props worth knowing

words cycles on a timer; interval is ms each word holds (default 2600). Characters tip away and in around the X axis with an 18ms stagger while the container width glides between words; a sr-only live region announces each word and reduced motion crossfades instead. Props extend the natural HTML element, so className, event handlers, and aria attributes pass straight through.