Rotating text
Text set on a circle spins around an arrow badge. Hover to push the spin faster; it eases back when you leave.
Text, hover, Motion
Install
npm i clsx motion tailwind-merge && curl -o components/rotating-text.tsx https://motion-brew.com/r/rotating-text.tsxOne self contained file for React and Tailwind CSS: rotating-text.tsx. Or ask your AI agent to add it through the MCP server.
Usage
import { RotatingText } from "@/components/rotating-text";
export default function Page() {
return (
<RotatingText text="Scroll to explore • " size={160} />
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | "Scroll to explore • " | Text on the ring; repeats to fill the circle |
| size | number | 160 | Diameter, px |
| duration | number | 14 | Seconds per turn at rest |
| boost | number | 4 | How much faster it spins on hover |
| label | string | the ring text | Accessible label |
| className | string | Color |
More text
- Shimmer text: The thinking sheen: a bright band sweeps across muted text on a loop, for AI and loading states.
- Annotation text: Hand-drawn pen marks draw themselves around words in view: circles, underlines, boxes and strikes, chained one after another.
- Backspace text: Types a word, holds, backspaces it letter by letter and types the next, with a blinking caret.
- Binary text: Text scrambles into 0s and 1s, then decodes left to right.