motion-circle

Positions text characters evenly around a circle and spins them continuously. Great for badges, labels, and decorative type.

Preview

Import

Usage

Counterclockwise

Set direction="ccw" to reverse the spin direction.

Upright characters

Add upright to keep each character vertically oriented instead of radiating outward from the center.

With slotted content

Place any element inside motion-circle to anchor it at the center. The slot content is stationary — only the text ring rotates.

<mc>

Pause on hover

Add pause-on-hover to freeze the rotation when the cursor enters and resume it on leave.

How it works

Each character is wrapped in an absolutely positioned span centered in the container. A CSS transform chain — rotate(angle) translateY(-radius) — places each character at its position on the ring. The .ring container then spins continuously via Motion One's animate with repeat: Infinity and ease: "linear".

When upright is set, a counter-rotation (rotate(-angle)) is appended to each character's transform so characters stay axis-aligned regardless of their position on the ring.

Properties

Attribute	Property	Type	Default	Description
text	text	string	—	Text to arrange around the circle
radius	radius	number	80	Circle radius in px
speed	speed	number	8	Seconds per full rotation
direction	direction	"cw" \| "ccw"	"cw"	Clockwise or counterclockwise spin
upright	upright	boolean	false	Keep characters vertically oriented
pause-on-hover	pauseOnHover	boolean	false	Pause the rotation on mouseenter, resume on mouseleave

Accessibility

When prefers-reduced-motion is set, the ring does not animate and the text renders statically around the circle.