Rotating Text Demo

Welcome to the Rotating Text Demo! Update the text, speed, and timing to update the example below. Scroll down to see how to get started or visit here.

HOVERME

Text

Works best with a single word or short phrase. For longer text, consider using multiple Rotating Text components.

Stagger

The time elapsed between each letter. Default is 0.1.

Timing

The duration of each letter animation. Provide a single value or n values (n = number of letters) separated by a comma. Default is 0.5.

Font Size

This is not a prop, but can be changed by passing a className to the component.

Getting Started

npm install rotating-text

You have control over the text content, stagger (time between each letter), timing (duration of each letter animation), and any style customizations through className and styles.

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"
      styles={{ fontSize: '100px' }}
    />
  )
}

Note: Text wrapping is currently not supported.