mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-04 16:42:27 +00:00
WaterrrForever
254fe4bd8a
* feat(registry): say what a promoted template's slots mean, not where they sit
Every declaration described its slot by position — appName was "small credit in the corner
of every banner" — and every editing contract described the supplied brand only by what it
may not touch, chatgpt-exchange going as far as "only the subject discussed inside the
conversation". An agent filling those slots has nothing telling it that the video is an
advertisement for that brand, and remixes shipped with an invented brand instead of the
real one.
Adds `portrays` to the 35 identity-bearing variables across seven templates: what the slot
stands for, as a list, kept orthogonal to `role` (which says which aspect of the
composition a knob affects, not what a value means to a viewer). Rewrites those variables'
descriptions to state meaning, and gives every TEMPLATE.md the affirmative sentence it was
missing. notes-reveal now records honestly that it declares no identity slot at all, which
is why a remix of it cannot carry a brand.
`portrays` is optional metadata: rendering ignores it, the promoted contract still projects
{id, type, role}, and packages that predate it keep working. Variable ids, types, roles,
labels, and defaults are untouched, so installs and renders see the same contract.
* feat(notes-reveal): give the template somewhere to say whose ad it is
This was the one promoted template that declared no identity slot at all, and the
previous commit could only record that honestly. A remix of it could not name the
advertiser, could not carry its domain, and had nowhere to place its mark — so the
ad it produced was unattributable no matter how good the copy was.
The closing card ends at y=1708, leaving 212px of dotted scene. A sign-off strip
lives there: `brandLogo` (portrays subject_logo) above `brandDomain` (portrays
subject_domain), in the card's own plum and Courier Prime. Putting it outside the
card means the hand-lettered headline and the checklist keep the geometry they were
designed with — verified by `hyperframes check`, which reports the same 0 errors and
the same warning counts as origin/main, with one more contrast check (367/367 AA).
No name slot: this template has no text slot that can hold a bare brand name.
`cardTop`'s marker line continues into the fixed words "OF ONE FILE", and a name set
beside a wordmark reads twice — rendering it proved that before this was committed.
The mark plus the domain carry the attribution, which is what the other end-card
templates do.
Rendered to check rather than assumed: the packaged default reads as the HyperFrames
wordmark over hyperframes.heygen.com, and a resolved symbol mark (Notion's cube over
notion.com) sits correctly in the same strip.
* fix(notes-reveal): make the note the ad, and stop the headline leaving the card
Three defects, all visible in the reported gamma remix.
The seven body lines carried their characters as pre-split `<span class="ch">`
elements so the reveal animation could address them by id. That made the note
permanently unwritable: 46% of the 24.9s runtime, and the only place the note
says anything, was fixed copy about making videos with HyperFrames -- shipped
inside an advertisement for a Dutch DIY chain. The spans are now built at
runtime from seven declared variables, keeping the same ids, so the animation
is untouched and the copy is the brand's.
`cardMid` and `cardBottom` ("OF", "ONE FILE") were literals with no variable at
all, so a remix could only ever change the first of the card's three lines.
Every text slot sat at a fixed left edge on one line, guarded only by a
character cap -- the wrong unit. `cardTop` allowed 12 characters; "THE POWER"
(9) fits and "CREATE DECKS" (12) does not, which is why both reported gamma
remixes shipped with the closing headline over the edge of the card. Slots are
now fitted to their box at render time, shrinking type only as far as needed and
never past the designed size. The card headlines also carried
`data-layout-allow-overflow`, switching off the one check that would have caught
it; those waivers are gone. The note's title and body keep theirs, because
`#note-body` is translated across the whole scene and leaves the canvas by
design.
Timing is preserved rather than regenerated: each body line is revealed inside
the frame window the packaged rhythm already used, so `JUMPS` and the hand-tuned
`SCROLLS` curves stay valid and the composition is still 24.867s for any length
of copy. A line whose length matches the packaged copy keeps its rhythm frame
for frame.
Verified: rendered with the packaged defaults, SSIM 1.000000 across all 746
frames against the previous template -- the design is bit-identical. Rendered
with the gamma values that overflowed, and with a stress set of long and
one-word values: both stay inside the card and the note, both still 24.867s.
`hyperframes check` passes, with layout warnings down from 28 to 8 and no new
issue class. Note that `check` takes no variable values, so it guards the
template's defaults and the fit is what guards a remix.
* fix(notes-reveal): make the fit floor and the character caps agree
A cap that admits a string still too wide at the floor font size puts the text
back outside its box -- the exact bug the fit was added for. With the floor at
0.6 and the title cap at 40, a 40-character title still overflowed `#note-body`
by 30px, because "Things nobody told me" is 21 characters and 900px at 88px, so
42.9px per character, and 40 characters need to reach about 0.45 of the design
size to fit.
Floor to 0.45 and the caps in: titles 34, body lines 52, cardTop and cardBottom
16. Every cap is now satisfiable with room to spare, and the common case stays
far from the floor.
Found by probing all eight promoted templates with values about 1.8x the length
of their packaged defaults, which is the length a real remix produces; short
sentinel values only ever prove a slot is wired.
Defaults are unaffected: SSIM 1.000000 across all 746 frames, still 24.867s,
`hyperframes check` still passes.
* fix(exchange): scroll the composer to follow the caret
`prompt` is an editable slot in both templates, but `.comp-text` is a
fixed-width single line with `white-space: pre` inside a composer that clips,
and the packaged prompt already reaches the mic -- it has no headroom at all.
A longer prompt therefore slid under the mic and the send button and lost its
tail, with the caret hidden behind them: the remix read as having typed into
nowhere, cut mid-word.
Both now scroll the typed text left to keep the caret in view, the way a real
single-line input does, on the very per-character times the reveal already uses.
The limit is measured to the opaque round button rather than the mic, because the
packaged prompt's caret already sits 2px past the mic's left edge in
chatgpt-exchange -- measuring to the mic would scroll the packaged composition.
Shrink-to-fit was the other option and it is worse: with no headroom it shrinks
the packaged prompt too, and it still cannot absorb a prompt twice as long
without unreadable type. It was tried, measured, and dropped.
A prompt that fits emits no keyframes and the element is never handed to GSAP at
all -- even a zero translate stamps a transform, which changes how the text
rasterizes.
claude-exchange puts this inside its existing `build()`, which already re-runs on
`document.fonts.ready`, so it measures the final font. chatgpt-exchange builds
once, so its scroll keyframes are kept in a list and rebuilt on the same event.
Verified on the packaged defaults: claude-exchange SSIM 1.000000 across 1284
frames. chatgpt-exchange is not frame-deterministic -- rendering it twice
unchanged gives 0.999959 with 249 frames under 0.9999, and before-vs-after gives
0.999967 with the same 249 -- so the change sits inside its own noise. Durations
unchanged at 14.9s and 21.4s. `hyperframes check` reports byte-identical results
to the unchanged templates.
* fix(notes-reveal): fit the checklist cells instead of counting their characters
The three checklist rows were the only text slots with no width fit, so
their character cap was doing the job a measurement should: it was set to 8
because that was the widest the packaged strings needed, and a gamma.com
remix delivered "DIRECT MEE" and rendered "DIRECT M".
Fit the labels and values like every other text slot -- dividing the
label's scaleX(0.86) back out of its column, since fitWidth measures the
untransformed width -- and return the cap to a backstop at 18.
"DIRECT MEE" needs no shrink at all: it ends at x=694 against a tick at
x=715, so the truncation was never about room. Measured: the packaged
defaults still render at their authored 44px and 50px, and all three values
clear the tick.
* fix(chatgpt-exchange): nest the caret scroll so its rebuild can be undone
`tl.to()` returns the TIMELINE, not the tween it created, so `caretScrollTweens`
held 49 references to the master timeline. The fonts-ready rebuild then called
`.kill()` on the master timeline 49 times and re-added its keyframes on top of
the ones it meant to replace. Measured with an overflowing prompt:
master timeline detached from the global timeline (tl.parent -> null)
scroll tweens on #cge-typed: 49 before the rebuild, 98 after
49 timestamps left with two competing tweens on the same property
GSAP's `Animation.kill()` interrupts and detaches rather than killing children,
so the composition kept rendering under an explicit seek -- which is why the
packaged-defaults SSIM check passed and never saw this. It is still wrong: the
timeline is off the ticker, and the stale keyframes were measured against the
fallback font.
Only an overflowing prompt reaches it, i.e. exactly the remix the scroll exists
for. The packaged prompt emits no steps, so nothing is created and nothing is
killed.
Now one nested child timeline holds the steps: a real object that can be killed
and replaced, and killing it cannot reach `tl`. Children sit at the same absolute
times and the nest is added at 0, so the motion is unchanged.
Verified: overflowing prompt holds at 49 scroll tweens across the rebuild with no
duplicated timestamps and the timeline stays attached. Packaged defaults against
the pre-feature baseline -- SSIM 0.999998 over 894 frames, 13 frames below
0.9999 against a 249-frame noise floor for this template, duration 14.9s
unchanged.
Found by Magi in review of #3562.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
* feat(lint): catch a timeline's return value being treated as a tween
Magi asked for a regression that makes the caret-scroll failure unable to return.
A render fixture cannot be that guard, and neither can a unit test. Both were
measured before choosing this:
- The unit-test DOM has no layout. In happy-dom `getBoundingClientRect()` is
{left: 0, width: 0} and offsetWidth/offsetLeft are 0, so the template's own
guard computes limit = -8 and returns before collecting a single keyframe,
whatever the prompt length. `document.fonts` does not exist there either, so
the rebuild never runs. Both preconditions are unreachable -- the test would
pass on the broken code and the fixed code alike. Rames flagged this; verified.
- A render fixture would not fail either. Rendering the long prompt through the
real pipeline on the broken vs fixed template gives SSIM 0.999994 over 894
frames with ZERO frames below 0.999. The renderer drives the composition by
explicit seek, and the duplicated keyframes are added last so they win, which
is exactly why `.kill()` on the master timeline stayed invisible. A golden mp4
would have cost a fixture and a shard and guarded nothing.
What is testable is the root cause, and it is a static property: `tl.to()` returns
the TIMELINE, `gsap.to()` returns a Tween, and the two read identically. So the
guard is a lint rule, which needs no DOM, fires on the source, and covers every
composition in the registry rather than this one template.
The rule keys on the timeline handles `collectTimelineVarNames` already finds,
which is what keeps `gsap.to()` and `Array.from()` out of it. Pushing a timeline
return into an array is flagged outright -- that is the collect-to-discard shape.
A bound return is flagged only once something tween-scoped is aimed at it, so a
pointless-but-harmless capture stays quiet.
Verified against the real files, not just synthetic ones: the pre-fix
chatgpt-exchange raises exactly one error and names the offending line; the fixed
file is clean. Across all 642 HTML files under registry/ and examples/ the rule
finds nothing, and lint output on the eight promoted blocks is identical to
origin/main error-for-error and warning-for-warning, so error severity costs no
existing template. 540 lint tests pass, 6 of them new.
Requested by Magi in review of #3562; unit-test DOM measurement by Rames Jusso.
32 lines
7.1 KiB
XML
32 lines
7.1 KiB
XML
<svg width="263" height="79" viewBox="0 0 263 79" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M0 16.6738H4.96V23.3838H11.53V16.6738H16.49V35.4538H11.53V27.6738H4.96V35.4538H0V16.6738Z" fill="black"/>
|
|
<path d="M17.8899 28.0137C17.8899 23.4237 21.2399 20.0237 25.7999 20.0237C30.0099 20.0237 32.9399 23.0837 32.9399 27.5637C32.9399 28.2037 32.8599 28.8237 32.8299 29.3337H22.6099C23.0399 31.1337 24.6199 32.1237 27.1399 32.1237C28.7199 32.1237 30.2199 31.7237 31.2999 31.0237V34.6737C30.1699 35.3937 28.2999 35.8537 26.3599 35.8537C21.2599 35.8537 17.8799 32.6037 17.8799 28.0237L17.8899 28.0137ZM28.5699 26.1937C28.4899 24.5337 27.3899 23.5637 25.7499 23.5637C24.1099 23.5637 22.9599 24.5337 22.6099 26.1937H28.5699Z" fill="black"/>
|
|
<path d="M37.85 33.8638L32 20.4238H37.29L40.46 28.1538L43.6 20.4238H48.48L40.33 39.5738H35.26L37.86 33.8638H37.85Z" fill="black"/>
|
|
<path d="M48.1797 26.1138C48.1797 20.4238 52.7097 16.2438 58.9397 16.2438C61.2997 16.2438 63.5297 16.8038 64.8197 17.7238V21.9338C63.5597 20.9138 61.6797 20.2938 59.7497 20.2938C55.7797 20.2938 53.2597 22.6238 53.2597 26.1438C53.2597 29.6638 55.5697 31.8838 58.8897 31.8838C59.6397 31.8838 60.4997 31.7538 61.1997 31.5038V27.8838H57.4697V24.2338H65.5197V33.7038C63.6697 35.0938 61.1997 35.8738 58.5997 35.8738C52.5397 35.8738 48.1897 31.7438 48.1897 26.1138H48.1797Z" fill="black"/>
|
|
<path d="M66.6604 28.0137C66.6604 23.4237 70.0104 20.0237 74.5704 20.0237C78.7804 20.0237 81.7104 23.0837 81.7104 27.5637C81.7104 28.2037 81.6304 28.8237 81.6004 29.3337H71.3804C71.8104 31.1337 73.3904 32.1237 75.9104 32.1237C77.4904 32.1237 78.9904 31.7237 80.0704 31.0237V34.6737C78.9404 35.3937 77.0704 35.8537 75.1304 35.8537C70.0304 35.8537 66.6504 32.6037 66.6504 28.0237L66.6604 28.0137ZM77.3404 26.1937C77.2604 24.5337 76.1604 23.5637 74.5204 23.5637C72.8804 23.5637 71.7304 24.5337 71.3804 26.1937H77.3404Z" fill="black"/>
|
|
<path d="M82.9688 20.4238H87.8488V22.4138C88.7588 20.9638 90.3488 20.1038 92.3288 20.1038C95.4988 20.1038 97.3988 22.3338 97.3988 25.8138V35.4438H92.5188V26.8638C92.5188 25.0438 91.8188 24.1838 90.4788 24.1838C88.9488 24.1838 87.8488 25.3638 87.8488 27.2638V35.4438H82.9688V20.4238Z" fill="black"/>
|
|
<path d="M195.219 26.1937L213.529 38.9937C216.009 40.7237 220.239 38.7637 221.009 35.5337L228.419 4.33374C229.189 1.10374 225.879 -0.856262 222.589 0.873738L198.199 13.6737C192.649 16.5837 191.059 23.2837 195.219 26.1937Z" fill="url(#paint0_linear_2204_3045)"/>
|
|
<path d="M256.97 25.9638L232.58 38.7638C229.28 40.4938 225.98 38.5338 226.75 35.3038L234.16 4.10376C234.93 0.873757 239.16 -1.08624 241.64 0.643757L259.95 13.4438C264.12 16.3538 262.52 23.0538 256.97 25.9638Z" fill="url(#paint1_linear_2204_3045)"/>
|
|
<path d="M252.115 72.502C250.192 72.502 248.268 72.0838 246.93 71.3728V65.6853C247.808 66.3126 248.937 66.689 250.066 66.689C251.739 66.689 252.784 65.8526 252.784 64.5562C252.784 63.8452 252.492 63.0925 251.655 62.0888L249.899 59.956C248.728 58.4923 248.226 56.9031 248.226 55.2721C248.226 51.0065 251.864 48.0791 256.883 48.0791C258.723 48.0791 260.438 48.4555 261.65 49.0828V54.7703C260.898 54.2266 259.768 53.8503 258.723 53.8503C257.092 53.8503 256.046 54.6867 256.046 55.8994C256.046 56.6522 256.423 57.405 257.259 58.4086L258.974 60.4996C260.187 62.047 260.73 63.5943 260.73 65.2671C260.73 69.5746 257.05 72.502 252.115 72.502Z" fill="black"/>
|
|
<path d="M236.338 72.6269C228.392 72.6269 223.123 67.5667 223.123 60.4155C223.123 53.2643 228.351 47.9531 235.46 47.9531C242.026 47.9531 246.584 52.7206 246.584 59.7045C246.584 60.7082 246.459 61.6701 246.417 62.4647H230.483C231.152 65.2666 233.62 66.8139 237.551 66.8139C240.018 66.8139 242.36 66.1866 244.033 65.0993V70.7868C242.277 71.916 239.349 72.6269 236.338 72.6269ZM230.483 57.5717H239.767C239.642 54.9789 237.927 53.4734 235.376 53.4734C232.867 53.4734 231.027 54.9789 230.483 57.5717Z" fill="black"/>
|
|
<path d="M184.998 72.0001V48.5809H192.609V51.6756C193.989 49.4173 196.373 48.0791 199.426 48.0791C202.521 48.0791 204.779 49.5428 206.075 52.052C207.497 49.5846 210.132 48.0791 213.352 48.0791C218.245 48.0791 221.214 51.592 221.214 57.0286V72.0001H213.603V58.5341C213.603 55.774 212.557 54.4357 210.634 54.4357C208.459 54.4357 206.912 56.234 206.912 59.0778V72.0001H199.3V58.5341C199.3 55.774 198.255 54.4357 196.373 54.4357C194.157 54.4357 192.609 56.234 192.609 59.0778V72.0001H184.998Z" fill="black"/>
|
|
<path d="M167.26 72.4602C161.154 72.4602 156.596 67.2745 156.596 60.3324C156.596 53.3066 161.196 48.0791 167.302 48.0791C170.438 48.0791 173.031 49.4173 174.536 51.8429V48.5809H182.148V72.0001H174.536V68.4873C173.031 71.0801 170.438 72.4602 167.26 72.4602ZM169.393 66.1872C172.78 66.1872 174.536 63.3434 174.536 60.876V59.6632C174.536 57.2377 172.78 54.4357 169.393 54.4357C166.298 54.4357 164.207 56.7777 164.207 60.2905C164.207 63.7616 166.298 66.1872 169.393 66.1872Z" fill="black"/>
|
|
<path d="M141.258 72V48.5808H148.827V52.9719C149.831 50.0445 151.796 48.2881 154.306 48.2881C154.975 48.2881 155.602 48.4135 156.02 48.6645V55.8993C155.435 55.5648 154.724 55.4393 153.887 55.4393C150.751 55.4393 148.869 57.6558 148.869 61.2941V72H141.258Z" fill="black"/>
|
|
<path d="M122.643 71.9996V42.7256H139.371V49.124H130.379V54.477H138.911V60.5827H130.379V71.9996H122.643Z" fill="black"/>
|
|
<path d="M105.645 72V48.5808H113.214V52.9719C114.218 50.0445 116.183 48.2881 118.692 48.2881C119.361 48.2881 119.989 48.4135 120.407 48.6645V55.8993C119.822 55.5648 119.111 55.4393 118.274 55.4393C115.138 55.4393 113.256 57.6558 113.256 61.2941V72H105.645Z" fill="black"/>
|
|
<path d="M93.4397 72.6269C85.4939 72.6269 80.2246 67.5667 80.2246 60.4155C80.2246 53.2643 85.4521 47.9531 92.5615 47.9531C99.1273 47.9531 103.686 52.7206 103.686 59.7045C103.686 60.7082 103.56 61.6701 103.518 62.4647H87.5849C88.2541 65.2666 90.7214 66.8139 94.6525 66.8139C97.1199 66.8139 99.4618 66.1866 101.135 65.0993V70.7868C99.3782 71.916 96.4508 72.6269 93.4397 72.6269ZM87.5849 57.5717H96.869C96.7435 54.9789 95.0289 53.4734 92.4779 53.4734C89.9687 53.4734 88.1286 54.9789 87.5849 57.5717Z" fill="black"/>
|
|
<path d="M53.3711 78.4404V48.5809H60.9823V52.052C62.446 49.501 65.0807 48.0791 68.3008 48.0791C74.3647 48.0791 78.9649 53.3066 78.9649 60.2487C78.9649 67.2745 74.3229 72.4602 68.259 72.4602C65.0807 72.4602 62.446 71.1637 60.9823 68.78V78.4404H53.3711ZM66.1262 66.1872C69.2627 66.1872 71.3119 63.7616 71.3119 60.2905C71.3119 56.8195 69.2627 54.4357 66.1262 54.4357C62.7388 54.4357 60.9823 57.2795 60.9823 59.7051V60.9178C60.9823 63.3434 62.7388 66.1872 66.1262 66.1872Z" fill="black"/>
|
|
<path d="M31.9606 78.4405L36.0171 69.5329L26.9004 48.5811H35.1389L40.0737 60.6252L44.9666 48.5811H52.5779L39.8646 78.4405H31.9606Z" fill="black"/>
|
|
<path d="M0 71.9996V42.7256H7.7367V53.1806H17.9826V42.7256H25.7193V71.9996H17.9826V59.8718H7.7367V71.9996H0Z" fill="black"/>
|
|
<defs>
|
|
<linearGradient id="paint0_linear_2204_3045" x1="225.869" y1="-3.06048e-05" x2="222.845" y2="37.4821" gradientUnits="userSpaceOnUse">
|
|
<stop stop-color="#06E3FA"/>
|
|
<stop offset="1" stop-color="#4FDB5E"/>
|
|
</linearGradient>
|
|
<linearGradient id="paint1_linear_2204_3045" x1="230.87" y1="39" x2="244.661" y2="6.30303" gradientUnits="userSpaceOnUse">
|
|
<stop stop-color="#06E3FA"/>
|
|
<stop offset="1" stop-color="#4FDB5E"/>
|
|
</linearGradient>
|
|
</defs>
|
|
</svg>
|