Word Rotate

WordRotate cycles through a list of words, animating each one in and out with a fade and slide effect.

ExamplesCodeUsageChangelog

Basic usage

We buildproducts

Tailwind v4

<div style="display:flex;gap:8px;">
  <span>We build</span>
  <WordRotate :words="['products', 'experiences', 'software', 'interfaces']" />
</div>

Fast rotation

Fast

Tailwind v4

<WordRotate :words="['Fast', 'Snappy', 'Quick', 'Rapid']" :interval="1000" />

Slow with longer transition

Elegant

Tailwind v4

<WordRotate
  :words="['Elegant', 'Refined', 'Polished']"
  :interval="4000"
  :animation-duration="600"
/>

Props

Prop	Type	Default	Description
words	string[]	—	Array of words to cycle through
interval	number	2500	Milliseconds between rotations
animationDuration	number	300	Transition duration in ms for fade/slide