motion-arc

Distributes text characters along a partial arc. Perfect for badge lettering, stamps, logotype banners, and curved typographic layouts.

Preview

Import

Usage

Bottom arc

Set align="bottom" to curve the text along the bottom of the arc instead.

Narrow arc

Reduce arc for a subtle curve. This works well for short words or headline accents.

Upright characters

Add upright to keep characters vertically oriented instead of tangent to the arc. Tangent means angled to follow the curve at each point.

Spinning arc

Set speed to a non-zero value to rotate the arc continuously (like motion-circle, but on a partial path).

With slotted content

Place any element inside motion-arc to anchor it at the center of the arc.

Pause on hover

Add pause-on-hover to freeze rotation on mouseenter and resume on mouseleave.

How it works

Characters are distributed evenly across the arc span. Each character is placed using a transform chain: rotate(angle) translateY(-radius). This positions it at the correct point on the circle. The starting angle is computed from align: "top" centers the arc at 270° (the topmost point), "bottom" at 90°.

When upright is set, a counter-rotation is appended so characters remain axis-aligned. When speed is non-zero, the entire arc ring rotates continuously via Motion One's animate with repeat: Infinity.

Properties

JavaScript API

Control the arc programmatically with play(), pause(), finish(), and cancel().

Accessibility

When prefers-reduced-motion is set, the arc does not rotate and text renders statically in its arc position.