Spinning Text
An animated layout component that renders text along a circular rotating path.
Preview
Installation
pnpm dlx vibe-ui-kit@latest add spinning-text
Concentric Badge
Reverse Direction
Usage
import { SpinningText } from "@/components/ui/spinning-text"<SpinningText>Spinning Text •</SpinningText>Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | string | string[] | "" | The text string to rotate in a circular ring |
radius | number | 5 | Radius of the circular text ring in character units |
duration | number | 10 | Rotation period in seconds per full 360-degree turn |
reverse | boolean | false | Reverses direction of circular rotation |
className | string? | "" | Additional classes for the container |
This SpinningText component places characters in a circular ring and rotates them continuously.
Contributors
JS
Jenish Sabhadiya