Text Flip

Per-character 3D flip — letters tumble around an axis on hover, mount, or first scroll into view.

text-flip

Hover to flip.

0px

Customize

Edit props; preview updates instantly.

Customize

Trigger

Direction

Stagger from

Stagger (s)

0.04s

Duration (s)

0.55s

Perspective (px)

1000px

Props

Props accepted by TextFlip.

Prop	Type	Default	Description
text	string	—	Text to animate. Words split on spaces; each grapheme is its own motion span.
as	ElementType	"p"	Root element tag — swap to `h1`, `span`, `div`, etc.
direction	"top" \| "right" \| "bottom" \| "left"	"right"	Axis and direction the flip pivots around. `left`/`right` rotate on Y, `top`/`bottom` rotate on X.
stagger	number	0.04	Seconds between character starts. Combined with `staggerFrom` to decide each char's delay.
staggerFrom	"first" \| "last" \| "center" \| number	"first"	Where the stagger originates. `first`/`last` walk one way, `center` ripples outward, a number anchors to a specific index.
duration	number	0.55	Per-character flip duration in seconds.
trigger	"hover" \| "mount" \| "view"	"hover"	What kicks the animation off. `hover` plays on mouse-enter (re-trigger-safe), `mount` plays once on first render, `view` plays the first time the element scrolls into view.
transition	Transition	—	Custom Motion transition. When set, it overrides the per-char duration/delay/easing — apply your own if you need a spring or different curve.
perspective	number	1000	Perspective applied to the root in pixels. Lower values exaggerate the depth.
charClassName	string	—	Class merged onto each character span — handy for per-letter color or shadow.
className	string	—	Extra class names merged onto the root element.

Installation

Choose CLI for the one-line shadcn install, or copy the file manually.

npx shadcn@latest add https://2lazyui.com/r/text-flip.json

Usage

Import the component and drop it into a render.

demo.tsx12 lines

import { TextFlip } from "@/components/lazy-ui/text-animate/text-flip";

export function Demo() {
  return (
    <TextFlip
      text="Hover to flip."
      direction="right"
      stagger={0.04}
      className="text-5xl font-light text-neutral-100"
    />
  );
}