Text Flip

A 3D character flip on hover, staggered and springy across every single letter.

textflip3dheadlineanimationtypographyhover

Overview

Text Flip is a React and Tailwind CSS 3D flip text animation where every letter turns like a cube face on hover, click, or both, in Next.js or any React app, with no dependencies. The Web Animations API drives a springy flip per character, staggered from the first, last, center, or a random letter, around either axis. Emoji and accented letters stay whole because text is split by grapheme, and screen readers hear the full string once. Call flip() through a ref or change replayKey to run it from code, and reduced motion leaves the text still.

Installation

Run the following command

~/your-project

pnpm dlx wensity@latest add text-flip

Usage

Import TextFlip from @/components/wensity/text-flip and render it anywhere in your React or Next.js app. The source lands in your own repo, so every prop, class and animation below is yours to edit.

app/example.tsx

 1import { TextFlip } from "@/components/wensity/text-flip";
 2
 3export default function Example() {
 4  return (
 5    <TextFlip
 6      as="h1"
 7      text="Wensity UI"
 8      direction="top"
 9      trigger="hover"
10      className="font-display text-xl font-normal"
11    />
12  );
13}

Props

Prop	Type	Default	Description
`text`	string	-	The string to render.
`as`	keyof React.JSX.IntrinsicElements	"span"	Tag rendered as the outer element.
`direction`	"top" \| "right" \| "bottom" \| "left"	"top"	Axis the characters rotate around when flipping.
`trigger`	"hover" \| "click" \| "both"	"hover"	What starts a flip cycle.
`duration`	number	0.45	Flip duration per character in seconds.
`staggerDuration`	number	0.05	Delay between each character, in seconds.
`staggerFrom`	"first" \| "last" \| "center" \| "random" \| number	"first"	Where the stagger wave originates.
`easing`	string	cubic-bezier(0.34, 1.4, 0.64, 1)	CSS easing. Default approximates a spring overshoot.
`frontColor`	string	theme	Front face color. Omit for theme auto.
`backColor`	string	theme	Back face color. Omit for theme auto.
`disabled`	boolean	false	Disable pointer triggers. Imperative flip() still works.
`replayKey`	string \| number	-	Changing this value forces a flip cycle.

Featured in React hero section components.