# MotionLoop

> A frame for any looping illustration that runs longer than five seconds: an animated diagram, a drifting backdrop, an endless rotating word.

```ts
import { MotionLoop } from "@sdxc/ui/landing";
```

Wraps looping content and pauses all of it, pseudo-elements included, while its toggle
is checked or the pointer rests on it. Under reduced motion the toggle hides, since the
content is expected to hold still.

## Examples

```tsx
<MotionLoop pauseLabel={t("hero.pause")}>
	<PipelineDiagram />
</MotionLoop>
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `pauseLabel?` | `string` | Accessible name of the toggle. Defaults to "Pause the animation". |
| `placement?` | `"start-start" \| "start-end" \| "end-start" \| "end-end" \| "inline"` | Toggle corner. Defaults to DEFAULT_PLACEMENT. |
| `children` | `RemixNode` | The looping content. |

Also accepts everything in `TagProps<"div">`.


## Types

| Name | Values | What it decides |
| --- | --- | --- |
| `Placement` | `"start-start" \| "start-end" \| "end-start" \| "end-end" \| "inline"` | Corner the toggle sits in, as block then inline edge, so right-to-left pages mirror. |