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 — useful for short words or headline accents.
Upright characters
Add upright to keep characters vertically oriented rather than tangent to the arc.
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) — which 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
| Attribute | Property | Type | Default | Description |
|---|---|---|---|---|
| | | string | — | Text to arrange along the arc |
| | | number | 100 | Arc radius in px |
| | | number | 180 | Arc span in degrees (180 = semicircle, 360 = full circle) |
| | | "top" | "bottom" | "top" | Whether the arc curves over the top or along the bottom |
| | | number | 0 | Seconds per full rotation (0 = static) |
| | | "cw" | "ccw" | "cw" | Clockwise or counterclockwise spin (only applies when speed > 0) |
| | | boolean | false | Keep characters vertically oriented |
| | | boolean | false | Pause rotation on mouseenter, resume on mouseleave |
Accessibility
When prefers-reduced-motion is set, the arc does not rotate and text renders statically in its arc position.