Flip text
Text whose lines fade in on scroll and whose letters flip over under the pointer.
Behaviour
- Lines rise a quarter of a line and fade in one after another (60ms apart) the first time the text scrolls into view (even at the very bottom of a page that cannot scroll further); the text is visible without JavaScript.
- Copying the text gives it once, as written. No-break spaces keep their words together.
- A letter flips over on the X axis when the mouse crosses it; a tap flips it on touch, and a swipe that scrolls the page flips nothing. A flip that is running finishes before the letter can flip again.
- Joined scripts (Arabic, Indic marks, emoji sequences and tag flags) flip a word at a time so their letters keep their shapes.
- Reduced motion: lines still fade in, without the rise; letters blink their opacity instead of turning.
Props
| Prop | Type | Description |
|---|---|---|
| text | string | The text. Split into words and letters on screen; read whole by screen readers. |
| className | string | Size, weight and colour of the text. |
Installation
npx shadcn@latest add https://purrfectui.com/r/flip-text.jsonHow to use
import { FlipText } from "@/components/ui/flip-text";
<FlipText text="© Code By Vaibhav Tomar" className="text-xl uppercase" />Source code
Loading…
Credits
Ported from vaibhavtomar.com.
License
MIT. Copy it into your project and change it as you like.