One word in a sentence that changes on its own: "Build it *glass*", then *brutal*, then *soft*.
Import it from rei-kit/motion:
import { TextRotate } from 'rei-kit/motion'
Open TextRotate in the live documentation, where every prop below is a control you can change, in four materials and ten palettes.
<script setup lang="ts">
import { TextRotate } from 'rei-kit/motion'
</script>
<template>
<h1>Build it <TextRotate :words="['glass', 'brutal', 'soft']" /></h1>
</template>
| Prop | Type | Required or default | What it is for |
|---|---|---|---|
words | readonly string[] | yes | The words, in order. The first is the one a server and a still page show. |
interval | number | 2400 | How long each word stays, in milliseconds. |
paused | boolean | false | Holds the current word. For a pause button, or a section out of view. |
rei-kit is an accessible Vue 3 and Tailwind CSS 4 component library: 106 components, themed by role rather than by colour on three independent axes — ten WCAG-checked palettes, four materials and light or dark, each switched with one attribute. Typed, tested, SSR-safe, no runtime dependencies, MIT.