mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-07 01:56:04 +00:00
Miguel Ángel
9734578e60
Restores the 208 catalog items reverted after their previews 404'd in production, this time on the payload mechanism rather than the .html files that caused the outage. The generator no longer writes a preview document to docs/public. That writer, and the machinery under it, existed only to produce files the docs host discards, so it is gone rather than bypassed. Items now embed the composition itself via a payload, which is what the previous change already does for the items that were already in the catalog. The variables explorer is parked, not restored: it drove its preview through the same unpublished .html path, so it would have shown an empty frame. Items that declare variables get the live player plus the static variables table, and reconnecting the explorer to payloads is a follow-up.
56 lines
4.2 KiB
Markdown
56 lines
4.2 KiB
Markdown
# state-chip-rail
|
|
|
|
Product-demo primitive: a rail of mono status chips advances a data-state
|
|
snap machine on a cue schedule. Presentation is pure CSS on each chip's
|
|
`[data-state]`; the timeline only flips attributes with `tl.set`, so every
|
|
advance is an instantaneous snap that is exact in both seek directions. The
|
|
active chip is ink on surface, done chips dim, pending chips stay hollow.
|
|
Optional badges pop beside one named state when it activates. Generalizes the
|
|
flagship agent-console status rail (cohere-north frame 04).
|
|
|
|
Authored at 5s with an elastic HOLD: chips cascade in, the machine advances
|
|
on its schedule, and everything after the last advance is still frame until
|
|
the (optional) exit.
|
|
|
|
## Variables
|
|
|
|
| id | type | default | notes |
|
|
| ------------- | ---------------------------------- | ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
| `states` | string | `Queued,Reading,Drafting,Done` | Comma list of chip labels in machine order. 2 to 8 states; extras are dropped. State 0 is active from mount. |
|
|
| `times` | string | `""` | Comma-separated activation times in seconds relative to mount start, one per ADVANCE (state 1, state 2, ...). Blank or invalid entries use the default even rhythm; values are clamped into the mount window and forced monotonic. |
|
|
| `badge_state` | number 0-7 | `1` | Index of the state the badges pop beside. Clamped to the states range. |
|
|
| `badges` | string | `""` | Comma list of badge labels rendered after the `badge_state` chip; they pop in (staggered scale + fade) when that state activates. Empty disables. Up to 4. |
|
|
| `accent` | enum `green` \| `blue` \| `violet` | `green` | Active-chip accent: green rides `--brand`, blue `--accent`, violet `--accent-2`. |
|
|
| `exit` | enum `none` \| `fade` \| `up` | `none` | Frame roots own transitions; the default hold ends the film. |
|
|
|
|
## Usage
|
|
|
|
```html
|
|
<div
|
|
class="clip"
|
|
data-composition-id="state-chip-rail"
|
|
data-composition-src="./components/state-chip-rail.html"
|
|
data-variable-values='{"states":"Queued,Reading,Searching,Drafting,Done","times":"1.0,1.9,2.8,3.7","badges":"Drive,Mail,CRM","badge_state":2,"accent":"blue"}'
|
|
data-start="0"
|
|
data-duration="5"
|
|
data-track-index="0"
|
|
></div>
|
|
```
|
|
|
|
Elastic root: no `data-width`/`data-height`; the rail centers and fits itself
|
|
to whatever box the host clip gives it. Timeline registers under the literal
|
|
`state-chip-rail` key.
|
|
|
|
## Notes
|
|
|
|
- Seek-safe snap machine: `tl.set` attribute flips record the prior value on
|
|
first render in timeline order, so backward seeks restore
|
|
`pending` / `active` exactly (the flagship frame 04 pattern).
|
|
- State dimming rides color (`color-mix`), never opacity, so it cannot
|
|
collide with the entrance opacity tweens.
|
|
- Badges keep their layout slot from mount (held at scale 0), so the rail
|
|
never reflows when they pop.
|
|
|
|
Golden refs: scramble-reveal (token consumption), toggle-flip (mount-contract
|
|
structure).
|