# ScrollScene

> A scroll-linked scene: a tall runway whose stage sticks under the header while the reader scrolls through it, publishing a named view timeline the stage's parts animate along with sceneMotion.

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

Renders the runway and a sticky stage centred under `--ui-landing-header-height`, all in CSS
with nothing to hydrate; inside a scroll panel, set `--ui-scroll-scene-viewport` to its height.
Without view timelines, or under reduced motion, the stage sits in normal flow as a still frame.

## Examples

```tsx
<ScrollScene timeline="explode" length={2.6}>
	<div mix={[sceneMotion("explode", { from: { translate: "0 0 0" } }, "contain 5% contain 70%")]} />
</ScrollScene>
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `timeline` | `string` | The view timeline's name without its leading dashes; sceneMotion takes the same. |
| `length?` | `number` | Viewport heights of scroll the stage stays pinned for. A longer runway plays the scene more slowly against the reader's scroll. |
| `children` | `RemixNode` | The stage: the drawing and whatever annotates it, sized to fit under the header. |

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


## Also exported

- `sceneMotion`