# <motion-arc>

Text laid out along a partial arc. Like `motion-circle` but only fills a
configurable slice. Optional rotation; supports an inner slot for content.

**Use it for:** short labels, badges and headline accents that curve along
part of a circle, with an optional slow rotation set by `duration`.

**Avoid it for:** long text or body copy. For text around a full circle,
use `motion-circle`. For a line of text that moves in a wave, use
`motion-curve`.

**Accessibility:** screen readers read the whole text once from a visually
hidden copy. The positioned letters are `aria-hidden`. Content in the
centre slot is read as normal, so give images an `alt` text (empty if they
are decorative). A rotation never stops on its own, and `pause-on-hover`
works with a mouse only. If people must be able to stop it, add a button
that calls `pause()`.

**Reduced motion:** the arc does not rotate, even when `duration` is set.
The text stays still in its arc shape.

**Common mistakes:** too much text for the `radius` and `arc`. The letters
are spread evenly over `arc` degrees, so long text crowds together; raise
`radius` or `arc`. The element is always a square of twice the `radius`,
even for a small `arc`, so plan for the empty space it leaves.

Docs: https://www.motion-components.dev/docs/text/motion-arc/

## Install

```js
import 'motion-components/motion-arc'
```

Or without a build step:

```html
<script type="module" src="https://cdn.jsdelivr.net/npm/motion-components@1/dist/motion-arc.js/+esm"></script>
```

## Example

```html
<motion-arc text="CURVED HEADLINE" radius="180" arc="160" align="top">
</motion-arc>
```

## Attributes

| Attribute | Type | Default | Description |
| --- | --- | --- | --- |
| `text` | `string \| undefined` |  | Text to lay out along the arc. |
| `radius` | `number` | `100` | Arc radius in pixels. |
| `arc` | `number` | `180` | Total angular span of the arc, in degrees. |
| `align` | `'top' \| 'bottom'` | `'top'` | Where the arc opens: `'top'` (apex up) or `'bottom'` (apex down). |
| `duration` | `number` | `0` | Seconds per full rotation. `0` disables rotation. |
| `direction` | `'cw' \| 'ccw'` | `'cw'` | Rotation direction: `'cw'` or `'ccw'`. |
| `upright` | `boolean` | `false` | When `true`, counter-rotate each glyph so it stays visually upright. |
| `pause-on-hover` | `boolean` | `false` | When `true`, pause the rotation while the cursor is over the element. |

## Properties

| Property | Type | Description |
| --- | --- | --- |
| `playState` | `'idle' \| 'running' \| 'paused' \| 'finished'` | Current state: `'idle'`, `'running'`, `'paused'` or `'finished'`. |
| `finished` | `Promise<void>` | Resolves when the current run settles. A new run replaces the promise. |

## Methods

| Method | Description |
| --- | --- |
| `play()` | Starts the animation, or resumes it when paused. Resolves once the run settles. Under `prefers-reduced-motion: reduce` the final state is applied immediately without animating. |
| `pause()` | Holds the animation at its current position. No-op unless running. |
| `finish()` | Jumps to the final state and settles. Fires `motion-finish`. |
| `cancel()` | Reverts to the initial state and returns to idle. Fires `motion-cancel`. |

## Events

The `motion-*` events bubble and are composed.

| Event | Description |
| --- | --- |
| `motion-start` | When a run starts. |
| `motion-finish` | When a run finishes, or `finish()` jumps to the end. |
| `motion-cancel` | When `cancel()` stops a run and resets it. |

## Slots

| Slot | Description |
| --- | --- |
| (default) | Optional content rendered at the centre of the arc. |