# Rows build

Component. Use for any list, sheet or spec assembling itself: the children of the rows slot (or plain text items) fade and rise in one after another, top to bottom, with a touch of blur. Sub items marked data-chip stagger inside their row.

## Mount

Fills its host box: give the host element the size and position you want, the component sizes everything in container units (percent of the host). No fixed canvas.

```html
<div data-composition-id="rows-build" data-composition-src="compositions/rows-build.html"
     data-start="0" data-duration="3" data-track-index="2"
     data-variable-values='{ "...": "..." }'
     style="position:absolute;left:300px;top:405px;width:1320px;height:195px"></div>
```

## Slots

- `<template data-slot="rows-build-rows">…</template>` placed anywhere in the host page: its content is cloned into the rows box. Without it the component uses its variables.

## Variables

| Variable | Type | Role | Default | Accepted | What changes |
| --- | --- | --- | --- | --- | --- |
| `items` | string | content | `LAUNCHABLE|Your content on demand|Film on your phone, get an edited reel back.` | Up to 300 characters | Pipe separated text rows used when no rows slot is provided. |
| `at` | number | timing | `0.2` | 0 through 30 | Seconds before the first row. |
| `stagger` | number | timing | `0.09` | 0 through 1 | Seconds between rows. |
| `rise` | number | motion | `1.5` | 0 through 10 | Rise distance as percent of host height. |
| `size` | number | layout | `5` | 1 through 20 | Default rows: font size as percent of host height. |
| `exit` | enum | motion | `none` | `none`, `fade` | none or fade. |
| `ink` | color | style | `#1a1418` | Hex or `transparent` | Text colour. |
| `font` | font | style | `"Instrument Serif",Georgia,serif` | CSS font-family stack | Display face. |
| `ground` | color | style | `transparent` | Hex or `transparent` | Background; transparent to overlay. |

## Package

`index.html` is a demo host at 1920 by 1080; `compositions/rows-build.html` is the template entry; `assets/` holds GSAP, Instrument Serif and demo SVGs. One paused GSAP timeline on `window.__timelines["rows-build"]`. Generated from `_kit/components-*.mjs`; run `node packages/compositions/library/_kit/build-components.mjs` after editing.