mirror of https://github.com/heygen-com/hyperframes.git synced 2026-09-01 19:42:03 +00:00

Files

T

Miguel Ángel 9734578e60 feat(registry): bring back the video-primitive moves (#3169 )

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.

2026-08-10 18:46:03 -04:00

3.1 KiB

Raw Permalink Blame History

titlecard-lockup

The calm breather titlecard (intros and reveals). An optional mono kicker fades up, the wordmark settles dead-center with ONE restrained move (scale 0.96 to 1, smooth ease-out), a hairline rule draws left to right beneath it, a mono label fades in under the rule, then the finished lockup holds truly still. Low motion is the payload: no second development phase, no spring chains, no hold drift. The stillness is the confidence.

Install

npx hyperframes add titlecard-lockup

Mount

<div
  class="clip"
  data-composition-id="titlecard-lockup"
  data-composition-src="./components/titlecard-lockup.html"
  data-variable-values='{"wordmark":"NORTHWIND","label":"SECURE AGENTS PLATFORM","kicker":"MEET","accent":"blue"}'
  data-start="0"
  data-duration="4"
  data-track-index="0"
></div>

Variables

Variable	Type	Default	Notes
`wordmark`	string	`HYPERFRAMES`	Display wordmark, auto-fitted to one line by character count.
`label`	string	`WRITE HTML. RENDER VIDEO.`	Mono caption under the rule. Empty string hides it.
`kicker`	string	`INTRODUCING`	Small mono label above the wordmark. Empty string hides it (the schedule keeps its beat of quiet).
`rule`	enum	`show`	`show` or `hide` for the hairline rule and its draw.
`accent`	enum	`green`	`green` maps to `--brand`, `blue` to `--accent`, `violet` to `--accent-2`. Carried by the rule.
`exit`	enum	`none`	`none`, `fade`, or `up`. Frame roots own transitions; holds end films.

Envelope

IN_BASE = 1.80s: kicker (0 to 0.45s), wordmark settle (0.25 to 1.10s), rule draw (0.90 to 1.45s), label (1.30 to 1.80s).
HOLD = max(0, D - IN - OUT): elastic and truly still, no drift, no breath.
OUT_BASE = 0.50s when exit is fade or up, otherwise 0.
If D < IN_BASE + OUT_BASE the phases compress together. The timeline is never time-scaled.

Contract notes

Consumes the theme contract tokens at point of use with exact-value fallbacks (--bg, --fg, --brand, --accent, --accent-2, --font-display, --font-mono, --space-2). The kicker and label ink is derived as color-mix(in srgb, var(--fg) 62%, var(--bg)) so it stays contrast-safe (>= 4.5:1) on both dark and light hosts.
The rule draw measures getTotalLength() and dashes in user units (no pathLength attribute, no non-scaling-stroke).
One paused GSAP timeline registered at window.__timelines["titlecard-lockup"]; deterministic and seek-safe.
Elastic root: no data-width/data-height, container-type: size, cqmin-based sizing.

3.1 KiB Raw Permalink Blame History