Spinning Text
The Spinning Text component animates text in a circular motion with customizable speed, direction, color, and transitions for dynamic and engaging effects.
learn more • earn more • grow more •
Installation
Usage
import SpinningText from '$lib/components/ori/spinning-text';<SpinningText
text="Hello World • Hello World • "
radius={80}
speed={8}
className="text-sm font-semibold"
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | '' | The text to display in a circular spinning pattern |
| speed | number | 10 | Duration of one full rotation in seconds |
| reverse | boolean | false | Reverses the spin direction |
| radius | number | 100 | Radius of the spinning circle in pixels |
| className | string | '' | Additional CSS classes applied to each character |