Circular Text
Letters set around a circle that turns slowly, like a stamp or a badge. Hover speeds it up, slows it down or pauses it.
import { CircularText } from "pleate/effects/circular-text";Badge and stamp
The second one pauses on hover.
PLEATE • MADE FOR NEXT •
NEW SEASON • NEW SEASON •
2026Props
- text
End it with a separator so the loop reads cleanly.
string- seconds
Seconds per turn.
numberdefault 20- onHover
What hovering does.
"speedUp" | "slowDown" | "pause" | "none"default "speedUp"- size
Diameter in px.
numberdefault 180
Accessibility
- Screen readers get the text once; the rotated letters are hidden from them.
- Reduced motion keeps it still.