Now flippingReact 18, no other dependencies, MIT

Rotating Text

A 3D flip-on-hover text component for React, with no dependencies beyond React. Hover the name.

Every tiled word on this page is the component, running.Tap the name to see it flip.

$ npm install rotating-text

Examples

Departures

Each row is a preset. Hover or tap a word to run it, or press Try it to load its settings into the playground.

Word	Stagger	Timing	Feel	Status
HOVERME	0.10	0.50	The defaults	On time
SNAP	0.03	0.25	Quick, for buttons	Early
CASCADE	0.14	0.60	A visible wave	On time
DRIFT	0.22	1.20	Slow, for headings	Delayed
RIPPLE	0.06	0.2 → 0.8 → 0.4	Per-letter timing array	On time

Interactive

Playground

Hover or tap the word. The tiles are this page's own CSS; the component ships plain letters you style with className.

Text

One word or a short phrase. Spaces collapse and nothing wraps.

Stagger

Seconds between each letter starting. Default 0.1.

Timing

Seconds per letter: one number, or one per letter separated by commas. Default 0.5.

Size 96px

Not a prop: set it with style or className.

Your snippet

MyApp.tsx

import { RotatingText } from 'rotating-text'
import 'rotating-text/dist/index.css'

function MyApp() {
  return (
    <RotatingText
      text="HOVERME"
      stagger={0.1}
      timing={0.5}
      style={{ fontSize: '96px' }}
    />
  )
}

Getting started

Install and use

Install the package
Terminal
```
npm install rotating-text
```

Import the component and its CSS

MyApp.tsx

import React from 'react'

import { RotatingText } from 'rotating-text'
import 'rotating-text/dist/index.css'

function MyApp() {
  return (
    <RotatingText
      text="HOVERME"
      stagger={0.1}
      timing={0.5}
      className="rotating-text"
      style={{ fontSize: '100px' }}
    />
  )
}

Peer dependency: React 18. Nothing else is installed.

Reference

Props

Prop	Type	Default	Description
text	string	(required)	Text to animate.
stagger	number	0.1	Seconds between each letter starting its animation.
timing	number \| number[]	0.5	Seconds each letter's animation lasts, or one duration per letter.
variant	'roll' \| 'flap'	'roll'	roll turns each letter over like a cube; flap draws split-flap tiles.
className	string	undefined	Class name added to the outer container.
style	React.CSSProperties	undefined	Inline styles applied to the outer container.

Before you ship

Notes

Works best with one word or a short phrase. Text does not wrap, and spaces collapse, so use one component per word.
The flip starts on hover. On touch screens, a tap starts it. A flip always runs to the end.
With reduced motion turned on, the flip becomes a gentle scale.

Rotating TextRRRRROOOOOTTTTTAAAAATTTTTIIIIINNNNNGGGGGTTTTTEEEEEXXXXXTTTTT