# PhoneFan

> Three phones on a landing stage: the front screen readable, two more fanned behind it once the column is wide enough, floating on staggered bobs inside a pausable loop.

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

Lays three phone screens as a fan: side phones hide on a narrow column and tilt out from
`md`, all floating on staggered bobs that MotionLoop can pause.

## Examples

```tsx
<PhoneFan label={t("phones.label")} pauseLabel={t("pause")} start={left} front={hero} end={right} />
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `label` | `string` | Accessible name of the stage as a whole. |
| `pauseLabel?` | `string` | Accessible name of the pause toggle. Forwarded to MotionLoop. |
| `start` | `RemixNode` | Phone behind the front on the inline start, tilted out. |
| `front` | `RemixNode` | Leading phone in the middle of the fan. |
| `end` | `RemixNode` | Phone behind the front on the inline end, tilted out. |

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