ext/hyperframes
2
0
Fork 0
mirror of https://github.com/heygen-com/hyperframes.git synced 2026-09-07 01:56:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(registry): bring back the video-primitive moves (#3169)

Browse Source 
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.
This commit is contained in:
Miguel Ángel
2026-08-10 18:46:03 -04:00
committed by GitHub
parent 0f76305191
commit 9734578e60
1383 changed files with 255573 additions and 5760 deletions
Download Patch File Download Diff File Expand all files Collapse all files
registry/components/testimonial-proof-card/README.md
+87
View File
@@ -0,0 +1,87 @@
# testimonial-proof-card
The proof-and-stats quote card: a testimonial reveals per rendered line
through a soft overflow mask, the byline (avatar disc, mono name and role,
optional company text mark) fades up as the quote lands, and one emphasis
substring gets a hand-drawn accent underline (`getTotalLength` dash, the
marker-highlight law). Then a dead-still hold.
4.5s authored, elastic HOLD, exit `none` by default.
## Files
- `testimonial-proof-card.html`: the mountable sub-composition (install
target: `compositions/components/testimonial-proof-card.html`).
- `registry-item.json`: registry metadata and the variables block.
- `demo.html`: a 1920x1080 host that mounts the primitive with non-default
variables.
## Variables
| id | type | default | notes |
| ---------- | ------ | --------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `quote` | string | `We shipped our launch video in a single afternoon` | Wraps inside the card; each rendered line reveals through its own mask. |
| `name` | string | `Maya Chen` | Attribution name in mono; also seeds the avatar initials. |
| `role` | string | `Head of Product` | Muted mono line under the name. Empty hides it. |
| `company` | string | `NORTHWIND` | Wide-tracked mono text mark at the byline end. Empty hides it. |
| `emphasis` | string | `single afternoon` | First case-insensitive substring match in `quote`, expanded to whole words, gets the accent underline after the quote lands. Empty or unmatched disables the draw. |
| `accent` | enum | `green` | Underline and glyph ink: 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. |
## The avatar slot
The avatar disc is a named slot inside the `<template>`:
```html
<div class="tq-avatar" data-slot="avatar">
<span class="tq-initials"></span>
</div>
```
The default child is the initials span (seeded from `name`). To show a
photo, install the component and **replace the slot's children 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):
```html
<div class="tq-avatar" data-slot="avatar">
<img src="../../assets/maya.jpg" alt="" />
</div>
```
Direct `img`/`video` children are sized to cover the disc automatically
(`object-fit: cover`, clipped to the circle).
## Mount
```html
<div
class="clip"
data-composition-id="testimonial-proof-card"
data-composition-src="./components/testimonial-proof-card.html"
data-variable-values='{"quote":"The render pipeline paid for itself in one week","emphasis":"one week","name":"Ana Ferreira","role":"VP Engineering","company":"LUMENWORKS","accent":"violet"}'
data-start="0"
data-duration="4.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 `testimonial-proof-card`
key.
## Notes
- Envelope: card settle 0.5s, per-line rise 0.6s staggered 0.18s, byline
0.5s overlapping the last line, underline 0.55s after the quote lands,
then HOLD (the only elastic phase), OUT 0.45s only when `exit` is not
`none`. Short durations compress every phase together, never timeScale.
- The underline path is authored wobble in a fixed viewBox stretched with
`preserveAspectRatio="none"`; the anisotropic stroke distortion is the
hand-swiped nib feel, deliberately kept (no `non-scaling-stroke`, no
`pathLength`).
- Line splitting measures the rendered wrap once at mount; the emphasis
phrase is one nowrap token so the underline never breaks across lines.
- Deterministic: no randomness, both dash endpoints explicit, seek-safe in
either direction. Sync point `underline-landed` fires at 1.6s at the
default two-line quote.