mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-04 16:42:27 +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.
79 lines
4.5 KiB
Markdown
79 lines
4.5 KiB
Markdown
# press-ripple
|
|
|
|
Product demo payoff primitive: a cursor decel-arrives from off-stage (power2.out,
|
|
it arrives, it never passes through), lands a few px off-center on a
|
|
caller-positioned target zone, target and cursor compress in lockstep, release
|
|
with two ink ripple rings, then the cursor exits off-stage the way it came. The
|
|
pressed state and the ripple aftermath hold dead-still to the end of the clip;
|
|
the cursor never occludes the label during the hold. 3s authored, elastic HOLD
|
|
(never time-scaled).
|
|
|
|
## Mounting
|
|
|
|
```html
|
|
<div
|
|
class="clip"
|
|
data-composition-id="press-ripple"
|
|
data-composition-src="./components/press-ripple.html"
|
|
data-variable-values='{"label":"Approve run","target_x":62,"target_y":58,"accent":"blue"}'
|
|
data-start="0"
|
|
data-duration="3"
|
|
data-track-index="0"
|
|
></div>
|
|
```
|
|
|
|
## Variables
|
|
|
|
| id | type | default | notes |
|
|
| -------- | ------ | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
| label | string | "Get started" | Text in the default pill. Ignored when the slot is replaced. |
|
|
| target_x | number | 50 | Zone center, percent of host width (8 to 92). |
|
|
| target_y | number | 50 | Zone center, percent of host height (8 to 92). |
|
|
| press_at | number | 1.4 | Seconds from mount start when the compression begins. Clamped so the press tail (release, ripple, cursor exit, ~1.05s) and any exit stay inside the clip duration. |
|
|
| cursor | enum | light | light (white pointer, dark stroke) or dark (inverse). |
|
|
| accent | enum | green | green maps to --brand, blue to --accent, violet to --accent-2. Colors the ripple ink and the pressed fill. |
|
|
| exit | enum | none | none holds the pressed state (frame roots own transitions); fade or up add a 0.45s departure. |
|
|
|
|
## Target slot
|
|
|
|
The element marked `data-slot="target"` is the press surface. Its default child
|
|
is a token-styled pill (`--surface` body, `--border` edge, `--font-body` at
|
|
weight 600) carrying `label`. Replace the slot's children in your installed copy
|
|
to press anything else: an icon button, a card, a toggle.
|
|
|
|
The slot wrapper flips `data-state="idle"` to `data-state="pressed"` at the
|
|
press (seek-safe: scrubbing backwards restores idle). Custom slot content can
|
|
key its own pressed look off that attribute, mirroring the default rule:
|
|
|
|
```css
|
|
.pr-target-slot[data-state="pressed"] .my-thing {
|
|
/* pressed look */
|
|
}
|
|
```
|
|
|
|
## Choreography
|
|
|
|
- 0.00s: target settles in (fade + short rise, power3.out).
|
|
- press_at - 0.94s: cursor departs off-stage bottom-right, decelerating the
|
|
whole way, tip landing slightly below-right of the zone center (human aim).
|
|
- press_at: target and cursor compress to 0.93 in lockstep (cursor scales
|
|
about its tip).
|
|
- press_at + 0.12s: pressed state lands; release springs back (back.out) while
|
|
two thick ink rings (accent mixed toward `--fg` for contrast) ripple out from
|
|
under the slot, 0.11s apart.
|
|
- press_at + 0.5s: the cursor exits off-stage bottom-right (power2.in,
|
|
accelerating away), clearing the label before the hold begins.
|
|
- HOLD: dead still on the pressed state, elastic with the clip duration; the
|
|
pressed control and the ripple aftermath carry the frame, cursor gone.
|
|
|
|
Sync point `press` fires the moment compression starts; align SFX or a
|
|
downstream reveal to it.
|
|
|
|
## Known tripwire
|
|
|
|
The bundler mirrors composition variables as scoped CSS custom properties, so
|
|
this unit's own `accent` variable becomes `--accent: blue` inside its subtree,
|
|
shadowing the contract token (and `blue` is a valid CSS color). The script
|
|
detects the shadow and substitutes the literal contract fallback for the blue
|
|
mapping, so `accent: "blue"` renders the soft contract blue, not pure blue.
|