Subchapter 14.65

Engine

Hershey Script Med

Also bundled

Gitignore

CATALOG

dna/11 files

38 more in the appendix

Engine

Raw file

heygen-com/hyperframes

modes/cinematic/engine.html

HTML355 lines17 KB

1<!doctype html>
2<!--
3  ENGINE — the one Cinematic-mode shell, parameterized by a DNA (dna/<name>.json).
4  Replaces per-template HTML files: the DNA supplies type / palette / blend / motion
5  grammar / hero orchestration; safe-zones v2 supplies scene tokens (accent sampling,
6  contact-shadow direction, depth-match blur); the plan supplies layout + per-group
7  typography. Compiled by make-composition.cjs.
8
9  Contract (unchanged from cinematic-cream — gates depend on it):
10    #root[data-composition-id="main"] · #a-roll · #stage · #a-roll-audio
11    .plane > .cap > .w spans · paused seek-safe GSAP on window.__timelines["main"]
12    container fade via tl.set at g.in−0.01 · exit fade + display:none at g.out
13    no Math.random / Date.now / CSS keyframes / repeat:-1

engine.html on GitHub

New in the engine:

- MOTION grammar from the DNA: soft / present / impact tones (+ "burn" reveal)

- HERO three-act orchestration:

act 1 SETUP — co-visible groups dim 0.35s before the hero lands

act 2 IMPACT — entrance (emergence | settle | slam | rise) with per-letter

stagger; amplitude coupled to the spoken word's RMS loudness

act 3 AFTERGLOW — slow breathe scale + glow layer (DNA-gated) until exit

- depth-match blur on embed (bg) captions only; fg stays sharp

- scene-sampled --accent custom property available to per-group CSS

-->

<head>

<style>

:root {

--font-scale: {{FONT_SCALE}};

--h: {{HEIGHT}}px; --w: {{WIDTH}}px;

--accent: {{ACCENT}};

}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {

margin: 0;

width: {{WIDTH}}px; height: {{HEIGHT}}px;

overflow: hidden;

background: #000;

font-family: '{{FONT_FAMILY}}', "Helvetica Neue", system-ui, sans-serif;

}

#a-roll { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

#stage {

position: absolute;

top: 0; left: 0;

width: {{WIDTH}}px; height: {{HEIGHT}}px;

pointer-events: none;

z-index: 2;

}

/* BASE — DNA tokens. bg (embed) captions get the depth-match filter; fg stays sharp. */

.cap {

display: block;

position: absolute;

opacity: 0;

mix-blend-mode: {{BLEND_MODE}};

color: {{CAP_COLOR}};

text-shadow: {{TEXT_SHADOW}};

filter: {{TEXT_FILTER_BG}};

line-height: 1.12; /* contains ink + internal leading — wrapped rows breathe (was 1.0: rows touched) */

will-change: transform, opacity;

top: 50%; left: 0; right: 0; text-align: center;

}

.cap[data-layer="fg"] { filter: {{TEXT_FILTER_FG}}; }

.cap .w { display: inline-block; opacity: 0; will-change: opacity, transform; }

.cap .w .l { display: inline-block; will-change: opacity, transform; }

/* hero glow — same glyphs duplicated UNDER the hero, blurred; opacity driven by GSAP.

em-based blur scales with the hero's font size. Not part of plan.groups → gates skip it.

MUST be out of flow (absolute) — as a flow sibling inside a plane it displaces the hero. */

.hero-glow, .plane > .cap.hero-glow { position: absolute; left: 0; right: 0; top: 0; filter: blur(0.06em); }

/* hero echoes — colored duplicates (RGB fringe / speed trails); position mirrors the

hero via its #id rule, color comes from each echo's own rule */

.hero-echo, .plane > .cap.hero-echo { position: absolute; left: 0; right: 0; top: 0; }

.plane { position: absolute; pointer-events: none; }

.plane > .cap {

position: relative;

top: auto; left: auto; right: auto; bottom: auto;

}

/* Per-group typography (agent-authored). */

</style>

</head>

<body>

<div

id="root"

data-composition-id="main"

data-start="0"

data-duration="{{DURATION}}"

data-width="{{WIDTH}}"

data-height="{{HEIGHT}}"

>

<video

id="a-roll"

src="source.mp4"

muted

playsinline

data-duration="{{DURATION}}"

data-track-index="0"

style="z-index: 1"

></video>

<div id="stage">{{GROUPS_HTML}}</div>

<audio

id="a-roll-audio"

src="source.mp4"

data-start="0"

data-duration="{{DURATION}}"

data-track-index="3"

data-volume="1"

></audio>

</div>

window.__timelines = window.__timelines || {};

const tl = gsap.timeline({ paused: true });

const DUR = {{DURATION}};

const GROUPS = {{GROUPS_JSON}};

const MOTION = {{MOTION_JSON}};

const HEROES = {{HEROES_JSON}};

const HERO_IDS = {};

HEROES.forEach(function (h) { HERO_IDS[h.id] = true; });

/* ── word entrance: the DNA's motion grammar ─────────────────────────

Each tone = {y, x, blur, scale, rot, dur, ease} or {reveal:"burn"}.

rot alternates sign by word index (deterministic percussion); blur is a

filter tween on the word span only (the container's depth-match filter

is a separate element — no conflict, no reflow). */

function wordReveal(wsel, m, at, idx) {

if (m.reveal === "burn") { tl.set(wsel, { opacity: 1 }, at); return; }

if (m.reveal === "flicker") {

/* neon tube igniting — deterministic on/off pattern, phase-shifted by word

index so a line of words doesn't strobe in unison */

var o = (idx % 3) * 0.018;

tl.set(wsel, { opacity: 1 }, at);

tl.set(wsel, { opacity: 0.25 }, at + 0.042 + o);

tl.set(wsel, { opacity: 1 }, at + 0.078 + o);

tl.set(wsel, { opacity: 0.5 }, at + 0.112 + o);

tl.set(wsel, { opacity: 1 }, at + 0.152 + o);

return;

}

var from = { opacity: 0 }, to = { opacity: 1, duration: m.dur || 0.4,

ease: m.ease || "power2.out", overwrite: "auto", transformOrigin: "50% 70%" };

if (m.y) { from.y = m.y; to.y = 0; }

if (m.x) { from.x = m.x; to.x = 0; }

if (m.scale && m.scale !== 1) { from.scale = m.scale; to.scale = 1; }

if (m.stretchX && m.stretchX !== 1) { from.scaleX = m.stretchX; to.scaleX = 1; }

if (m.skewX) { from.skewX = m.skewX; to.skewX = 0; }

if (m.rot) { from.rotation = ((idx % 2) ? 1 : -1) * m.rot; to.rotation = 0; }

if (m.blur) { from.filter = "blur(" + m.blur + "px)"; to.filter = "blur(0px)"; }

tl.fromTo(wsel, from, to, at);

}

var EXIT = MOTION.exit || { dur: 0.5, ease: "power2.in", stagger: 0 };

var LINE_REVEAL = MOTION.lineReveal || null;

/* exit cascade: lines of the same plane sharing one page-flip `out` can leave

top-to-bottom (editorial). Slot layout = absolute positions, so staggered

exits cause no reflow. Every exit still hard-kills at g.out. */

var pageMates = {};

GROUPS.forEach(function (g) {

if (HERO_IDS[g.id]) return;

var key = (g.plane || "free") + "@" + g.out;

(pageMates[key] = pageMates[key] || []).push(g.id);

});

GROUPS.forEach(function (g) {

if (HERO_IDS[g.id]) return; // heroes are orchestrated below

var sel = "#" + g.id;

var m = MOTION[g.tone] || MOTION.soft || {};

tl.set(sel, { opacity: 1 }, Math.max(0, g.in - 0.01));

/* line container reveal (keynote's surgical wipe) — clip-path, not transform.

PHRASE mode: the whole line is set visible up front and the WIPE is the

reveal (slide-title idiom) — wiping an empty container reads as nothing. */

if (LINE_REVEAL && LINE_REVEAL.type === "wipe-x") {

tl.set(sel + " .w", { opacity: 1 }, Math.max(0, g.in - 0.01));

tl.fromTo(sel, { clipPath: "inset(0% 100% 0% 0%)" },

{ clipPath: "inset(0% 0% 0% 0%)", duration: LINE_REVEAL.dur || 0.4,

ease: LINE_REVEAL.ease || "expo.out", overwrite: "auto" },

Math.max(0, g.in - 0.01));

} else {

g.words.forEach(function (w, i) {

wordReveal(sel + " .w[data-i='" + i + "']", m, w.start, i);

});

}

/* exit: DNA grammar — direction + speed + optional per-line cascade */

var mates = pageMates[(g.plane || "free") + "@" + g.out];

var rank = mates.indexOf(g.id);

var lead = (EXIT.stagger || 0) * (mates.length - 1 - rank);

var exitAt = Math.max(g.in + 0.1, g.out - (EXIT.dur || 0.5) - lead);

var to = { opacity: 0, duration: EXIT.dur || 0.5, ease: EXIT.ease || "power2.in", overwrite: "auto" };

if (EXIT.y) to.y = EXIT.y;

if (EXIT.x) to.x = EXIT.x;

if (EXIT.scale && EXIT.scale !== 1) to.scale = EXIT.scale;

if (g.out < DUR) tl.to(sel, to, exitAt);

tl.set(sel, { opacity: 0, display: "none" }, g.out);

});

/* ── HEROES: three-act orchestration, one per promoted beat ──────────── */

HEROES.forEach(function (HERO) {

var hsel = "#" + HERO.id;

var gsel = "#" + HERO.id + "-glow";

var hg = GROUPS.filter(function (g) { return g.id === HERO.id; })[0];

var amp = HERO.amp || 1;

/* act 1 — SETUP: co-visible groups yield (dim) just before the hero lands.

Minor heroes are emphasis-plus: no dim, no ripple, no breathe — the apex

keeps those privileges (that's what makes it the apex). */

if (!HERO.minor && HERO.dimOthers < 1) {

GROUPS.forEach(function (g) {

if (g.id === HERO.id) return;

if (g.in < HERO.in && g.out > HERO.in) {

tl.to("#" + g.id, { opacity: HERO.dimOthers, duration: 0.3, ease: "power2.out", overwrite: "auto" },

Math.max(0, HERO.in - 0.35));

}

});

}

tl.set(hsel, { opacity: 1 }, Math.max(0, HERO.in - 0.01));

/* act 2 — IMPACT: container entrance (amplitude ∝ spoken loudness) */

if (HERO.entrance === "settle") {

tl.fromTo(hsel, { scale: 1 + 0.10 * amp },

{ scale: 1, duration: 0.50, ease: "expo.out", transformOrigin: "50% 60%", overwrite: "auto" }, HERO.in);

} else if (HERO.entrance === "slam") {

/* percussion: ONE unit, violent snap — geometry locks in 0.16s; heat comes after */

tl.fromTo(hsel, { scale: 1 + 0.22 * amp },

{ scale: 1, duration: 0.16, ease: "back.out(2.2)", transformOrigin: "50% 55%", overwrite: "auto" }, HERO.in);

} else if (HERO.entrance === "rise") {

tl.fromTo(hsel, { y: 22 * amp },

{ y: 0, duration: 0.60, ease: "power2.out", overwrite: "auto" }, HERO.in);

} else if (HERO.entrance === "wipe-up") {

/* surgical slide-title reveal — clip-path only (not a transform: can't

collide with the afterglow scale channel), bottom-up behind the subject */

tl.fromTo(hsel, { clipPath: "inset(100% 0% 0% 0%)" },

{ clipPath: "inset(0% 0% 0% 0%)", duration: 0.45, ease: "expo.out", overwrite: "auto" }, HERO.in);

} else if (HERO.entrance === "flicker-on") {

/* neon sign powering up — deterministic strobe, then steady */

tl.set(hsel, { opacity: 1 }, HERO.in);

tl.set(hsel, { opacity: 0.15 }, HERO.in + 0.05);

tl.set(hsel, { opacity: 1 }, HERO.in + 0.095);

tl.set(hsel, { opacity: 0.4 }, HERO.in + 0.14);

tl.set(hsel, { opacity: 1 }, HERO.in + 0.19);

tl.fromTo(hsel, { scale: 1.03 }, { scale: 1, duration: 0.4, ease: "power2.out", overwrite: "auto", transformOrigin: "50% 55%" }, HERO.in + 0.19);

} else if (HERO.entrance === "streak") {

/* speed pass — slides in along its own motion blur (skew rides the velocity) */

tl.fromTo(hsel, { x: -90 * amp, skewX: -12, opacity: 0 },

{ x: 0, skewX: 0, opacity: 1, duration: 0.28, ease: "expo.out", overwrite: "auto", transformOrigin: "50% 80%" }, HERO.in);

} else { /* emergence — grows out from behind the subject */

tl.fromTo(hsel, { scale: Math.max(0.74, 1 - 0.18 * amp) },

{ scale: 1, duration: 0.55, ease: "expo.out", transformOrigin: "50% 62%", overwrite: "auto" }, HERO.in);

}

/* impact ripple (loud): the hero's landing bumps every co-visible caption —

captions only, the footage itself NEVER moves */

if (!HERO.minor && HERO.ripple > 0) {

GROUPS.forEach(function (g) {

if (g.id === HERO.id) return;

if (g.in < HERO.in && g.out > HERO.in + 0.3) {

tl.to("#" + g.id, { y: HERO.ripple, duration: 0.07, ease: "power2.out", overwrite: "auto" }, HERO.in + 0.04);

tl.to("#" + g.id, { y: 0, duration: 0.20, ease: "power2.out", overwrite: "auto" }, HERO.in + 0.11);

}

});

}

/* words / letters */

(hg ? hg.words : []).forEach(function (w, i) {

var wsel = hsel + " .w[data-i='" + i + "']";

if (HERO.perLetter) {

tl.set(wsel, { opacity: 1 }, w.start);

var letters = document.querySelectorAll(wsel + " .l");

for (var li = 0; li < letters.length; li++) {

var lf = { opacity: 0, y: "0.16em", scale: 1.05 };

var lt = { opacity: 1, y: 0, scale: 1, duration: 0.30, ease: "power4.out", overwrite: "auto" };

if (HERO.letterBlur) { lf.filter = "blur(" + HERO.letterBlur + "px)"; lt.filter = "blur(0px)"; }

tl.fromTo(letters[li], lf, lt, w.start + li * (HERO.letterStagger || 0.014));

}

} else {

var m = MOTION.impact || MOTION.present || {};

wordReveal(wsel, m, w.start, i);

}

});

/* glow layer (DNA-gated). Slam = impact THEN heat: glow waits for geometry lock. */

if (HERO.glow > 0) {

var glowAt = HERO.in + (HERO.entrance === "slam" ? 0.17 : 0.08);

var glowPeak = Math.min(0.5, HERO.glow * amp) * (HERO.minor ? 0.5 : 1);

tl.set(gsel + " .w", { opacity: 1 }, Math.max(0, HERO.in - 0.01));

tl.fromTo(gsel, { opacity: 0 },

{ opacity: glowPeak, duration: HERO.entrance === "slam" ? 0.3 : 0.5, ease: "power2.out", overwrite: "auto" },

glowAt);

tl.to(gsel, { opacity: 0, duration: 0.5, ease: "power2.in", overwrite: "auto" }, HERO.out - 0.5);

tl.set(gsel, { opacity: 0, display: "none" }, HERO.out);

}

/* fx: ECHO layers (RGB-split fringe / speed trails) — colored duplicates that

CONVERGE as the word lands, then rest at a small offset until exit */

if (HERO.echoes && HERO.echoes.length) {

HERO.echoes.forEach(function (ec, k) {

var esel = "#" + HERO.id + "-echo-" + k;

tl.set(esel + " .w", { opacity: 1 }, Math.max(0, HERO.in - 0.01));

tl.fromTo(esel,

{ x: (ec.dx || 0) * 4, y: (ec.dy || 0) * 4, opacity: 0 },

{ x: ec.dx || 0, y: ec.dy || 0, opacity: ec.opacity != null ? ec.opacity : 0.5,

duration: 0.22, ease: "power4.out", overwrite: "auto" }, HERO.in);

tl.to(esel, { opacity: 0, duration: 0.4, ease: "power2.in", overwrite: "auto" }, HERO.out - 0.45);

tl.set(esel, { opacity: 0, display: "none" }, HERO.out);

});

}

/* fx: SHEEN — one gradient sweep across the hero during the hold (chrome).

Targets the .w spans (the gradient lives there — see wordCss). Starts as the

entrance settles so the specular hit is visible early in the hold. */

if (HERO.sheen && HERO.out - HERO.in > 0.9) {

tl.fromTo(hsel + " .w", { backgroundPosition: "0% 50%" },

{ backgroundPosition: "200% 50%", duration: Math.min(1.2, HERO.out - HERO.in - 0.5),

ease: "power1.inOut", overwrite: "auto" }, HERO.in + 0.22);

}

/* act 3 — AFTERGLOW: ONE slow scale tween (no loops — deterministic).

loom (slow growth, loud) subsumes breathe — never two transform tweens

on the same element in the same window. wipe-up entrances are clip-path,

so the afterglow scale channel is always free by now. */

var after = HERO.loom > 0 ? HERO.loom : HERO.breathe;

if (!HERO.minor && after > 0 && HERO.out - HERO.in > 1.4) {

tl.fromTo(hsel, { scale: 1 },

{ scale: 1 + after, duration: HERO.out - HERO.in - 1.2, ease: HERO.loom > 0 ? "power1.inOut" : "sine.inOut", overwrite: "auto" },

HERO.in + 0.7);

}

/* exit */

if (HERO.out < DUR) {

tl.to(hsel, { opacity: 0, duration: 0.5, ease: "power2.in", overwrite: "auto" }, HERO.out - 0.5);

}

tl.set(hsel, { opacity: 0, display: "none" }, HERO.out);

});

tl.seek(0);

window.__timelines["main"] = tl;

</script>

</body>

</html>