mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-05 00:56:23 +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.
96 lines
4.3 KiB
Markdown
96 lines
4.3 KiB
Markdown
# radial-surround
|
|
|
|
Labeled hairline chips assemble around a centered subject on an elliptical
|
|
ring: positions baked once via cos/sin, staggered smooth-settle entries. With
|
|
`close_in` (the default) the chips then converge inward toward the subject
|
|
while a subtle edge vignette dims the stage. The center NEVER moves: the
|
|
subject is surrounded, not zoomed. The classic problem-setup beat ("your team,
|
|
buried under tools").
|
|
|
|
## Files
|
|
|
|
- `radial-surround.html`: the mountable sub-composition (install target:
|
|
`compositions/components/radial-surround.html`).
|
|
- `registry-item.json`: registry metadata and the variables block.
|
|
- `demo.html`: a 1920x1080 host that mounts the primitive with non-default
|
|
variables through `data-composition-src`.
|
|
|
|
## Variables
|
|
|
|
| id | type | default | notes |
|
|
| -------------- | ------- | ------------------------------------------- | ------------------------------------------------------------------------- |
|
|
| `center_label` | string | `Your team` | label on the default center token card |
|
|
| `chips` | string | `Docs,Tickets,Dashboards,Inbox,Chat,Sheets` | comma list of chip labels; up to 12 render |
|
|
| `close_in` | boolean | `true` | converge the ring inward with the edge dim; `false` holds the wide ring |
|
|
| `cues` | string | `""` | comma-separated per-chip entrance seconds; blank entries use the cascade |
|
|
| `accent` | enum | `green` | `green` maps to `--brand`, `blue` to `--accent`, `violet` to `--accent-2` |
|
|
| `exit` | enum | `none` | `none` holds the final frame; `fade` and `up` release the stage |
|
|
|
|
Envelope: IN = center settle + chip cascade (+ close-in when enabled; the
|
|
converge lands at 4.50s at defaults), HOLD is the sole elastic phase (dead
|
|
still), OUT = up to 0.45s only when `exit` is `fade` or `up`. Sync points:
|
|
`ring-assembled` at 2.95s, `surround-closed` at 4.50s (defaults). Cue values
|
|
are clamped so every chip lands before the close-in (or the exit) begins.
|
|
|
|
## The slot mechanism
|
|
|
|
The primitive ships one named slot for the center subject inside its
|
|
`<template>`:
|
|
|
|
```html
|
|
<div class="rs-center" data-slot="center">...</div>
|
|
```
|
|
|
|
The slot is empty by default: the script generates a token card carrying
|
|
`center_label`, so an untouched mount still reads as a tasteful setup. To
|
|
show your own subject, install the component and **place children inside the
|
|
`[data-slot="center"]` element in your installed copy** (the runtime clones
|
|
only the primitive's own template on mount, so slot content lives in the
|
|
component file, not on the host clip). When the slot already has children the
|
|
default card is skipped; chips, cues, `close_in`, and `exit` still apply.
|
|
|
|
Rules:
|
|
|
|
- Direct `img`/`video` children are capped at 34cqw x 30cqh with
|
|
`object-fit: cover` and the contract radius. Arbitrary HTML works too; size
|
|
it in `cqw`/`cqh` and keep it inside roughly 34cqw x 30cqh so the close-in
|
|
ring (20cqw x 23cqh radii) clears it.
|
|
- The center only fades and settles on entrance; it never translates. Do not
|
|
animate the slot content yourself: the surrounding choreography assumes a
|
|
still subject.
|
|
- Leave the chips and vignette alone; they render above the center layer.
|
|
|
|
## Worked example
|
|
|
|
Install, then point the center at a product shot:
|
|
|
|
```bash
|
|
npx hyperframes add radial-surround
|
|
```
|
|
|
|
In `compositions/components/radial-surround.html`, fill the slot:
|
|
|
|
```html
|
|
<div class="rs-center" data-slot="center">
|
|
<img src="../../assets/team-photo.png" alt="" />
|
|
</div>
|
|
```
|
|
|
|
Mount it from a host composition like any sub-composition:
|
|
|
|
```html
|
|
<div
|
|
class="clip"
|
|
data-composition-id="radial-surround"
|
|
data-composition-src="./components/radial-surround.html"
|
|
data-variable-values='{"chips":"Slack,Email,CRM,Tickets,Docs","close_in":true,"accent":"blue"}'
|
|
data-start="2"
|
|
data-duration="5"
|
|
data-track-index="0"
|
|
></div>
|
|
```
|
|
|
|
Chips pop in around the photo on alternating compass points, close in at
|
|
~3.3s, and the crowded frame holds still for the rest of the clip window
|
|
(`exit` defaults to `none`; frame roots own scene transitions).
|