diff --git a/skills/website-to-hyperframes/references/step-6-build.md b/skills/website-to-hyperframes/references/step-6-build.md index b5ea0d130..7d7704b3c 100644 --- a/skills/website-to-hyperframes/references/step-6-build.md +++ b/skills/website-to-hyperframes/references/step-6-build.md @@ -177,25 +177,27 @@ Rules below came out of two independent website-to-hyperframes builds (2026-04-2 ```html - + -
+
``` @@ -203,25 +205,25 @@ Rules below came out of two independent website-to-hyperframes builds (2026-04-2 ```js // BRITTLE: immediateRender interacts badly with scene boundaries - tl.from(el, {opacity: 0, y: 50, duration: 0.6}, t); + tl.from(el, { opacity: 0, y: 50, duration: 0.6 }, t); // DETERMINISTIC: state is defined at both ends, no immediateRender surprise - tl.fromTo(el, {opacity: 0, y: 50}, {opacity: 1, y: 0, duration: 0.6}, t); + tl.fromTo(el, { opacity: 0, y: 50 }, { opacity: 1, y: 0, duration: 0.6 }, t); ``` - **Ambient pulses must attach to the seekable `tl`, never bare `gsap.to()`.** Auras, shimmers, gentle float loops, logo breathing — all of these must be added to the scene's timeline, not fired standalone. Standalone tweens run on wallclock time and do not scrub with the capture engine, so the effect is absent in the rendered video even though it looks correct in the studio preview: ```js // BAD: lives outside the timeline, never renders in capture - gsap.to(".aura", {scale: 1.08, yoyo: true, repeat: 5, duration: 1.2}); + gsap.to(".aura", { scale: 1.08, yoyo: true, repeat: 5, duration: 1.2 }); // GOOD: seekable, deterministic, renders - tl.to(".aura", {scale: 1.08, yoyo: true, repeat: 5, duration: 1.2}, 0); + tl.to(".aura", { scale: 1.08, yoyo: true, repeat: 5, duration: 1.2 }, 0); ``` - **Hard-kill every scene boundary, not just captions.** The caption hard-kill rule above generalizes: any element whose visibility changes at a beat boundary needs a deterministic `tl.set()` kill after its fade, because later tweens on the same element (or `immediateRender` from a sibling tween) can resurrect it. Apply to every element with an exit animation: ```js - tl.to (el, {opacity: 0, duration: 0.3}, beatEnd); - tl.set(el, {opacity: 0, visibility: "hidden"}, beatEnd + 0.3); // deterministic kill + tl.to(el, { opacity: 0, duration: 0.3 }, beatEnd); + tl.set(el, { opacity: 0, visibility: "hidden" }, beatEnd + 0.3); // deterministic kill ```