# Marquee

> An endless horizontal ticker for logo walls and short proof lines: the items scroll past under edge-fade masks, stop on hover, focus or a pause toggle, and sit still in a centered wrapping row for visitors who ask for reduced motion.

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

Renders the items twice on one track and scrolls it by exactly one copy, so the loop
has no visible seam. Reduced motion drops the copy, the masks and the toggle, leaving a
centered row that wraps.

## Examples

```tsx
<Marquee aria-label={t("proof.label")}>
	<img src={acme} alt="Acme" />
	<img src={globex} alt="Globex" />
</Marquee>
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `duration?` | `number` | Seconds one pass of the items takes. Defaults to DEFAULT_DURATION. |
| `gap?` | `string` | Space between items, any CSS length. Defaults to DEFAULT_GAP. |
| `pauseLabel?` | `string` | Accessible name of the pause toggle. Defaults to "Pause the scrolling logos". |
| `children` | `RemixNode` | The items, each a direct child: logos, short quotes, badges. Image and SVG items take the landing logo height. They render twice; the copy is `aria-hidden` and `inert`. |

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