motion-arc

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

Preview

Import

import 'motion-components/motion-arc'   // just this one
import 'motion-components'               // or the whole library

Usage

<motion-arc
  text="MOTION COMPONENTS · ARC TEXT ·"
  radius="110"
  arc="200"
  align="top"
></motion-arc>

Bottom arc

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

<motion-arc
  text="BOTTOM ARC · CURVED TYPE ·"
  radius="110"
  arc="200"
  align="bottom"
></motion-arc>

Narrow arc

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

<motion-arc
  text="GENTLE ARC"
  radius="200"
  arc="60"
  align="top"
></motion-arc>

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.

<motion-arc
  text="UPRIGHT · STAMP TEXT ·"
  radius="110"
  arc="200"
  align="top"
  upright
></motion-arc>

Spinning arc

Set duration to a non-zero value to rotate the arc continuously (like motion-circle, but on a partial path). It is the number of seconds per full rotation.

<motion-arc
  text="SPINNING · ARC · TEXT · "
  radius="90"
  arc="270"
  align="top"
  duration="10"
></motion-arc>

With slotted content

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

<motion-arc text="AVAILABLE FOR WORK · HIRE ME ·" radius="110" arc="200" duration="12">
  <img src="avatar.jpg" width="80" height="80" alt="Avatar" />
</motion-arc>

Pause on hover

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

<motion-arc
  text="HOVER TO PAUSE · ARC SPIN ·"
  radius="90"
  arc="270"
  duration="10"
  pause-on-hover
></motion-arc>

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 duration is non-zero, the entire arc ring rotates continuously via Motion'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.