Word Rotate

The WordRotate component rotates through different words with smooth transitions. It's perfect for creating dynamic text elements that cycle through different options with engaging animations.

Usage

<template>
  <p class="text-xl text-default">
    We
    <MWordRotate
      class="text-primary font-semibold"
      :words="['design', 'build', 'create']"
    />
    amazing experiences.
  </p>
</template>

Examples

Rotating headline

<template>
  <div class="flex flex-col items-center gap-4 p-6 text-center">
    <UBadge
      color="primary"
      variant="subtle"
    >
      New
    </UBadge>
    <h2 class="text-3xl font-semibold text-highlighted sm:text-4xl">
      Ship your ideas
      <MWordRotate
        class="text-primary"
        :words="['faster', 'cleaner', 'together']"
        animation-style="slide-up"
        :duration="2000"
      />
    </h2>
    <p class="max-w-md text-sm text-muted">
      One workflow for the whole team, from first sketch to production.
    </p>
  </div>
</template>

Customize

Props

UI

This component's theme exposes the slots below. Override any of them per instance with the ui prop, or app-wide under ui.wordRotate in app.config.ts.

Accessibility

The rotating word is a plain span with no aria-live region, so assistive technology reads whichever word is in the DOM at the moment it queries the node — it does not re-announce each rotation. When the sequence itself carries meaning, expose it statically: add an aria-label to the surrounding element or render the full list of words somewhere reachable, rather than relying on the visual cycle.

class is applied to the animated word span and containerClass to the root span; neither adds a role or landmark. In the common hero-headline usage the rotation is decorative and the surrounding sentence already conveys the message, which is the safe pattern.

Performance

• One setInterval (word visibility) and one setTimeout (pause) drive the cycle; both are cleared on unmount, so nothing leaks between mounts.
• Only the current word is in the DOM — a single keyed Motion span is swapped per tick, so the node count stays at one rather than growing with words.
• startOnView uses an intersection observer through useElementVisibility, which stays subscribed until unmount; once is enforced by a guard on the start, not by disconnecting the observer.
• There is no scroll or resize listener; the transitions are transform/opacity only and are handed to the browser compositor.