# Space

Scoped 3D: children placed at x/y/z, visited by a look-at camera that slerps between beats. Our own ~80-line matrix/quaternion math, no three.js.

```bash
npx shadcn add https://www.reelcn.dev/r/space.json
```

Usage:

```tsx
<Space
  beats={[
    { frame: 0, lookAt: [0, 0, 0], distance: 6 },
    { frame: 60, lookAt: [1.2, 0, 0], distance: 4 },
  ]}
>
  {[
    { x: 0, y: 0, z: 0, children: <Img src={staticFile("a.png")} style={{ width: 200 }} /> },
    { x: 1.4, y: 0, z: -0.4, children: <Img src={staticFile("b.png")} style={{ width: 200 }} /> },
  ]}
</Space>
```

Use for:

- A small product or feature cluster the camera pushes through or reframes around
- A 3D "gallery" of cards or screenshots without CSS 3D's sibling depth-sorting problem

Avoid:

- Scenes with many overlapping opaque volumes. This only depth-sorts flat children, painter's-algorithm style

Dependencies:

- `remotion`


## Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| beats | `SpaceBeat[]` | — |  |
| fov? | `number` | `50` |  |
| children | `SpaceChild[]` | — |  |