Rotating Text

Animate through a series of words

Use the RotatingText component to display dynamic text that changes through a series of words using animations. They are space efficient and can improve engagement. Use it to highlight key features, services, or taglines, or to display changing headlines or testimonials.

<RotatingText
    words={['Astro', 'Svelte', 'React']}
    colors={['#B545ED', '#FF3E00', '#61DAFB']}
/>

The RotatingText component only requires a words prop that defines a list of words to loop through in the form of an array of strings. You can customize text colors by defining the colors prop. The colors are matched to the index of the words array.

Delay

To customize the animation, you can configure the letter and word delay using the letterDelayAmount and wordDelayAmount props:

<RotatingText
    words={['letterDelayAmount', 'Set to 100 ms']}
    letterDelayAmount={100}
/>

<RotatingText
    words={['wordDelayAmount', 'Set to 2000 ms']}
    wordDelayAmount={2000}
/>

Animation Speed

Similar to configuring letter and word timing, you can also configure the animation timing using the animationInterval prop. The lower the value, the faster the animation becomes:

<RotatingText
    words={['animationInterval', 'Set to 1000 ms']}
    animationInterval={1000}
/>

Customize Animation

The animation can be further customized using the transformOrigin prop. This changes the transform origin property of the letters that are animated using transforms:

<RotatingText
    words={['bottom left 10px', 'transformOrigin']}
    transformOrigin="bottom left 10px"
/>

<RotatingText
    words={['center', 'transformOrigin']}
    transformOrigin="center"
/>

Customize with CSS

The animation can also be customize via CSS. If you want to globally set the transformOrigin prop, remove the prop from your components and override the following CSS variable instead:

html body {
    --w-rotating-text-transform-origin: center center 20px; // Default value
}

API

type RotatingTextProps = {
    words: string[]
    colors?: string[]
    letterDelayAmount?: number
    wordDelayAmount?: number
    animationInterval?: number
    transformOrigin?: string
    className?: string
}