Text arranged in a circle with a continuous spinning animation.
Port By Bhide Svelte •
Installation
Copy the Source Code
Copy and paste the following code into your project:
index.ts
spinning-circular-text.svelte
Usage
usage.svelte
Features
- Adjustable character spacing and font size
- Container size scales automatically to fit the text ring
- Announces the full text to screen readers via hidden content
Props
SpinningCircularText
Circular character layout with a continuously spinning ring.
| Name | Type | Default | Description |
|---|---|---|---|
text | string | required | Text arranged around the circle. |
charSpacing | number | 1 | Spacing multiplier between characters. |
fontSize | string | '1rem' | CSS font size used for each character. |
spinClass | ClassValue | undefined | Classes applied to the spinning character ring. |
renderChar | Snippet<[{ char: string; index: number }]> | undefined | Custom renderer for each positioned character. |
class | ClassValue | undefined | Additional classes applied to the outer container. |
ref | HTMLDivElement | null | null | Bindable reference to the outer container. |