mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-01 19:42:03 +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.
marker-highlight
The corpus emphasis unit: a line of display text settles in, then ONE hand-drawn marker stroke draws over the emphasized word on cue. Four styles, one mechanic: an SVG path revealed by a getTotalLength dash tween.
3.5s authored, elastic HOLD (the lockup sits completely still until the frame cuts), exit none by default.
Variables
| id | type | default | notes |
|---|---|---|---|
text |
string | Ship it with confidence |
Full line; wraps and centers. |
emphasis_word |
string | confidence |
First case-insensitive substring match in text gets the marker. Empty or unmatched renders the line with no marker. Keep it a word or short phrase; it never wraps internally. |
style |
enum | highlight |
highlight (thick swipe behind the word), circle (loop around it), underline (wavy rule beneath), scribble (zigzag across). |
draw_at |
number (s) | 0.9 |
Cue for the draw, relative to mount start. Clamped so the stroke and its settle pop finish before any exit. |
accent |
enum | green |
Ink color: green rides --brand, blue rides --accent, violet rides --accent-2. |
exit |
enum | none |
none holds until the cut; fade and up depart over the final 0.45s. |
Mount
<div
class="clip"
data-composition-id="marker-highlight"
data-composition-src="./marker-highlight.html"
data-variable-values='{"text":"Zero render surprises","emphasis_word":"Zero","style":"circle","accent":"violet"}'
data-start="0"
data-duration="3.5"
data-track-index="0"
></div>
Elastic root: no data-width/data-height; it fills whatever box the host clip gives it. Timeline registers under the literal marker-highlight key.
Notes
- Marker paths are authored wobble in a fixed viewBox stretched with
preserveAspectRatio="none"; the anisotropic stroke distortion is the hand-swiped nib feel, deliberately kept (nonon-scaling-stroke, nopathLength). - Deterministic: no randomness, both dash endpoints explicit, seek-safe in either direction.