Add HyperFrames skills
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_011h6NB8JQtfPc6eRCefEzBB
This commit is contained in:
964 files changed
+142321
No files matched your search
@@ -0,0 +1,48 @@
|
||||
# Cinematic mode (pure embed) — one engine, six DNAs
|
||||
|
||||
> Cinematic mode compiles **[../../dna/](../../dna/README.md)** through
|
||||
> **[engine.html](engine.html)** (`make-composition.cjs`). The old per-template HTML
|
||||
> shells are retired — `cinematic-cream` maps to `dna: "cream"` automatically; the other
|
||||
> archived templates (memory-wall / champion / portrait-header, in [\_archive/](_archive/))
|
||||
> remain as design references only.
|
||||
|
||||
Use this mode for pure-embed asks (no rail): brand film, hype, social reel, showcase.
|
||||
The **DNA** locks the visual language (type, palette scheme, blend, motion grammar, hero
|
||||
three-act); **safe-zones v2** parameterizes it to the scene (sampled accent, light-
|
||||
direction contact shadow, depth-match blur); **the agent decides layout only** (planes,
|
||||
blocks, per-line typography within the DNA).
|
||||
|
||||
## Workflow
|
||||
|
||||
1. `bash scripts/prepare.sh <project>` → matte ∥ transcript ∥ envelope → safe-zones v2
|
||||
2. Pick a DNA ([../../dna/README.md](../../dna/README.md)): bright hero band → `ink`,
|
||||
else by register (cream / editorial / keynote / documentary / loud). Recommend, let
|
||||
the user pick.
|
||||
3. Author `<project>/cinematic.json` — `"dna": "<name>"` + thought-blocks (schema:
|
||||
`scripts/make-cinematic.cjs` header)
|
||||
4. `node scripts/make-cinematic.cjs <project>` → plan.json → engine-compiled index.html
|
||||
5. `node scripts/preview-frames.cjs <project>` → § Visual QA (failure checks + the 5
|
||||
positive checks in [../../references/reference-bar.md](../../references/reference-bar.md))
|
||||
6. `bash scripts/render-and-composite.sh <project>` → gates → final.mp4
|
||||
|
||||
## What the engine generates (never author these)
|
||||
|
||||
- word timings from the transcript; accumulate-within-block / page-flip-between-blocks
|
||||
- the hero hand-off + **three-act orchestration** (dim → RMS-coupled per-letter entrance
|
||||
→ breathe + glow), per the DNA's `hero` block
|
||||
- scene tokens: `--accent` (sampled), contact shadow, depth blur
|
||||
- reading order, re-slot from measured heights, hero size/collision post-pass
|
||||
|
||||
## What you DON'T do
|
||||
|
||||
- Override `.cap` color / blend / shadow / filter / motion curves — that's the DNA.
|
||||
Scene fights the look → pick a different DNA (bright → `ink`), never recolor.
|
||||
- Hand-position the hero into a clean margin (it belongs ON the subject, ~30–55%
|
||||
occluded — safe-zones `heroBands.best`).
|
||||
- Add full-frame grades/textures over the footage (hard rule: the video ships untouched).
|
||||
|
||||
## Adding a DNA
|
||||
|
||||
`dna/<name>.json` — copy one, change the voice (see [../../dna/README.md](../../dna/README.md)
|
||||
§ Adding). The engine consumes it with no code change. A DNA must be a distinct voice
|
||||
with a reason to exist, not a recolor.
|
||||
@@ -0,0 +1,98 @@
|
||||
# Template: champion
|
||||
|
||||
**Look:** podcast / interview, upper-side column with intro→phrase→emph
|
||||
beats building toward a center-stage CROWN that crosses the subject's body.
|
||||
"Wimbledon Champion" energy.
|
||||
|
||||
**Visual identity (LOCKED):**
|
||||
|
||||
- 5 typography slots: intro / phrase / emph / dream / crown
|
||||
- `mix-blend-mode: screen` over warm bone color (#fff5df)
|
||||
- Deep text-shadow + brightness boost
|
||||
- Single-caption-swap layout (caps stack at one point in the column)
|
||||
- Center-stage crown crosses the subject for cinematic occlusion
|
||||
|
||||
## When to apply
|
||||
|
||||
✅ **Good fit:**
|
||||
|
||||
- Podcast / interview style with a single seated subject
|
||||
- Cluttered backdrop (bookshelf, props, dark) — screen blend reads through
|
||||
- Subject roughly centered with clear clean zones on one or both sides
|
||||
- Speech has a clear payoff line that can become a "crown" (1-3 short words)
|
||||
- 16:9 landscape, 1920×1080 ideal
|
||||
|
||||
❌ **Wrong fit:**
|
||||
|
||||
- Bright/sky/window backdrop (screen blend washes out)
|
||||
- Subject heavily off-center such that there's no clean column zone
|
||||
- Speech has no clear climax line
|
||||
- Portrait 9:16 → use `portrait-header` template instead
|
||||
|
||||
## Layout decisions agent makes
|
||||
|
||||
| Field | What | Example (1920×1080) |
|
||||
| ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------- |
|
||||
| `plane.top/left/width/height` | Where the side column sits. Pick the side opposite the subject's gaze (looking room) and hug the cleanest backdrop zone. | `{top: 40, left: 40, width: 720, height: 420}` |
|
||||
| `plane.rotateY` | Slight perspective into the wall. Positive for left column (recedes right), negative for right column. Keep small (3-7°). | `4` |
|
||||
| `crown_top` | Y position of the crown. Should fall on the subject's chest/neck so the body occludes the middle letters. | `420` |
|
||||
| `font_scale` | Multiplier on locked sizes. | `1.0` for 1920×1080 |
|
||||
| `crown_enabled` | Whether to render a crown. Skip if the speech has no clean payoff line, or if the subject is too far off-center for a center crown to land. | `true` |
|
||||
|
||||
### Crown placement rules
|
||||
|
||||
Before enabling the crown, verify all 3 conditions:
|
||||
|
||||
1. Subject body center within ±10% of frame horizontal center
|
||||
2. Clean zones ≥15% of frame width on each side of subject
|
||||
3. Crown text width (uppercase 140px × ~chars) > subject body width + 400px
|
||||
|
||||
If any fails: disable the crown OR use a smaller font + place it in the
|
||||
larger clean zone instead of center. See `references/layout-heuristics.md`.
|
||||
|
||||
## Slot assignment
|
||||
|
||||
| Slot | Use for |
|
||||
| ------ | ---------------------------------------------------------- |
|
||||
| intro | Filler / discourse markers ("you know,", "for me,", "so…") |
|
||||
| phrase | Main statement clauses |
|
||||
| emph | Key achievement / superlative line |
|
||||
| dream | Aspirational lines, past-tense reflection |
|
||||
| crown | The single climax line — center-stage payoff |
|
||||
|
||||
Aim for ≤3 slots per video (excluding crown). Don't use all 4 in a 12s clip.
|
||||
|
||||
## Plan.json shape
|
||||
|
||||
```json
|
||||
{
|
||||
"mode": "template",
|
||||
"template": "champion",
|
||||
"duration": 12.08, "fps": 24, "width": 1920, "height": 1080,
|
||||
"plane": {
|
||||
"top": 40, "left": 40, "width": 720, "height": 420,
|
||||
"rotateY": 4
|
||||
},
|
||||
"crown_top": 420,
|
||||
"font_scale": 1.0,
|
||||
"groups": [
|
||||
{ "id": "cg-0", "slot": "intro", "tone": "soft",
|
||||
"in": 0.10, "out": 1.45, "words": [...] },
|
||||
{ "id": "cg-1", "slot": "phrase", "tone": "soft",
|
||||
"in": 1.55, "out": 4.20, "words": [...] },
|
||||
{ "id": "cg-2", "slot": "emph", "tone": "present",
|
||||
"in": 6.50, "out": 8.30, "words": [...] }
|
||||
],
|
||||
"crown_group": {
|
||||
"id": "cg-crown", "tone": "present",
|
||||
"in": 10.85, "out": 12.08,
|
||||
"words": [
|
||||
{"text": "Wimbledon", "start": 10.94, "end": 11.28},
|
||||
{"text": "Champion", "start": 11.38, "end": 11.84}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
`crown_group` always uses the crown slot — no need to specify `slot`.
|
||||
Set `crown_group: null` to disable.
|
||||
@@ -0,0 +1,188 @@
|
||||
<!doctype html>
|
||||
<!--
|
||||
TEMPLATE: champion
|
||||
STYLE LOCKED. LAYOUT OPEN.
|
||||
|
||||
Look: podcast / interview, upper-left column with intro→phrase→emph
|
||||
beats, big center-stage CROWN crossing the subject for the payoff.
|
||||
|
||||
Locked:
|
||||
- 5 typography slots: intro / phrase / emph / dream / crown
|
||||
- mix-blend-mode: screen, color #fff5df, deep text-shadow
|
||||
- Single-caption-swap layout (caps absolute-positioned in left-plane)
|
||||
- GSAP soft/present per-word reveal
|
||||
|
||||
Open via plan.json:
|
||||
- left-plane geometry + perspective
|
||||
- crown_plane top
|
||||
- --font-scale
|
||||
- GROUPS array + slot per group
|
||||
- whether crown is enabled (crown_group)
|
||||
-->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width={{WIDTH}}, height={{HEIGHT}}" />
|
||||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||||
<style>
|
||||
:root { --font-scale: {{FONT_SCALE}}; }
|
||||
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
html, body {
|
||||
margin: 0;
|
||||
width: {{WIDTH}}px; height: {{HEIGHT}}px;
|
||||
overflow: hidden;
|
||||
background: #000;
|
||||
font-family: "Inter", 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;
|
||||
perspective: 2400px;
|
||||
perspective-origin: 25% 50%;
|
||||
pointer-events: none;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
/* LAYOUT */
|
||||
.left-plane {
|
||||
position: absolute;
|
||||
top: {{PLANE_TOP}}px;
|
||||
left: {{PLANE_LEFT}}px;
|
||||
width: {{PLANE_WIDTH}}px;
|
||||
height: {{PLANE_HEIGHT}}px;
|
||||
transform-style: preserve-3d;
|
||||
transform: rotateY({{ROTATE_Y}}deg);
|
||||
transform-origin: left center;
|
||||
padding: 24px 36px;
|
||||
}
|
||||
.left-plane .cap {
|
||||
position: absolute;
|
||||
top: 24px;
|
||||
right: 36px;
|
||||
max-width: calc({{PLANE_WIDTH}}px - 72px);
|
||||
}
|
||||
.crown-plane {
|
||||
position: absolute;
|
||||
top: {{CROWN_TOP}}px;
|
||||
left: {{CROWN_LEFT}}px;
|
||||
right: {{CROWN_RIGHT}}px;
|
||||
text-align: {{CROWN_ALIGN}};
|
||||
pointer-events: none;
|
||||
}
|
||||
.crown-plane .cap-crown {
|
||||
font-size: calc(140px * var(--font-scale) * {{CROWN_SCALE}});
|
||||
}
|
||||
|
||||
/* STYLE (locked) */
|
||||
.cap {
|
||||
display: block;
|
||||
position: relative;
|
||||
line-height: 1.02;
|
||||
opacity: 0;
|
||||
mix-blend-mode: {{BLEND_MODE}};
|
||||
color: {{CAP_COLOR}};
|
||||
text-shadow: {{TEXT_SHADOW}};
|
||||
filter: {{TEXT_FILTER}};
|
||||
will-change: transform, opacity;
|
||||
}
|
||||
.cap .w { display: inline-block; opacity: 0; will-change: opacity, transform; }
|
||||
|
||||
.cap-intro { font-size: calc(52px * var(--font-scale));
|
||||
font-weight: 500; font-style: italic;
|
||||
letter-spacing: -0.005em; }
|
||||
.cap-phrase { font-size: calc(60px * var(--font-scale));
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.015em; }
|
||||
.cap-emph { font-size: calc(70px * var(--font-scale));
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.025em; }
|
||||
.cap-dream { font-size: calc(64px * var(--font-scale));
|
||||
font-weight: 700; font-style: italic;
|
||||
letter-spacing: -0.015em; }
|
||||
.cap-crown { font-size: calc(140px * var(--font-scale));
|
||||
font-weight: 900;
|
||||
letter-spacing: -0.035em; text-transform: uppercase;
|
||||
line-height: 1.0; }
|
||||
</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">
|
||||
<div class="left-plane">{{GROUPS_HTML}}</div>
|
||||
<div class="crown-plane">{{CROWN_HTML}}</div>
|
||||
</div>
|
||||
|
||||
<audio
|
||||
id="a-roll-audio"
|
||||
src="source.mp4"
|
||||
data-start="0"
|
||||
data-duration="{{DURATION}}"
|
||||
data-track-index="3"
|
||||
data-volume="1"
|
||||
></audio>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
window.__timelines = window.__timelines || {};
|
||||
const tl = gsap.timeline({ paused: true });
|
||||
const DUR = {{DURATION}};
|
||||
const GROUPS = {{GROUPS_JSON}};
|
||||
const CROWN = {{CROWN_JSON}};
|
||||
|
||||
function animateGroup(g) {
|
||||
var sel = "#" + g.id;
|
||||
var isSoft = g.tone === "soft";
|
||||
tl.set(sel, { opacity: 1, y: 0 }, Math.max(0, g.in - 0.01));
|
||||
|
||||
g.words.forEach(function (w, i) {
|
||||
var wsel = sel + " .w[data-i='" + i + "']";
|
||||
if (isSoft) {
|
||||
tl.fromTo(wsel,
|
||||
{ opacity: 0, y: 8 },
|
||||
{ opacity: 1, y: 0, duration: 0.42, ease: "power2.out", overwrite: "auto" },
|
||||
w.start);
|
||||
} else {
|
||||
tl.fromTo(wsel,
|
||||
{ opacity: 0, y: 6, scale: 1.04 },
|
||||
{ opacity: 1, y: 0, scale: 1.0, duration: 0.22,
|
||||
ease: "power3.out", overwrite: "auto", transformOrigin: "50% 50%" },
|
||||
w.start);
|
||||
}
|
||||
});
|
||||
|
||||
if (g.out < DUR) {
|
||||
tl.to(sel, { opacity: 0, duration: 0.45, ease: "power2.in", overwrite: "auto" },
|
||||
g.out - 0.45);
|
||||
}
|
||||
tl.set(sel, { opacity: 0, visibility: "hidden" }, g.out);
|
||||
}
|
||||
|
||||
GROUPS.forEach(animateGroup);
|
||||
if (CROWN) animateGroup(CROWN);
|
||||
|
||||
tl.seek(0);
|
||||
window.__timelines["main"] = tl;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,134 @@
|
||||
# Template: memory-wall
|
||||
|
||||
**Look:** introspective monologue, italic poem stacking on a back wall,
|
||||
right-aligned cascade for the climax. Sam Harris / Pico Iyer territory.
|
||||
|
||||
**Visual identity (LOCKED — do not change):**
|
||||
|
||||
- 4-slot typography arc: italic 600 → italic 500 hanging-indent → upright
|
||||
700 pivot → uppercase 900 climax
|
||||
- `mix-blend-mode: screen` over warm-bone color (#fff4dc)
|
||||
- soft text-shadow + brightness boost
|
||||
- Per-word fade with subtle Y-drift (soft tone) or pop+scale (present tone)
|
||||
|
||||
## When to apply
|
||||
|
||||
✅ **Good fit:**
|
||||
|
||||
- Talking-head with a flat back wall (acoustic foam, plain plaster, soft
|
||||
bookshelf) on one side
|
||||
- Single subject, fixed or near-fixed camera
|
||||
- Voice-over feel: introspective, narrative, "I was thinking…"
|
||||
- Mid-tone or dark backdrop (luminance < 180)
|
||||
|
||||
❌ **Wrong fit:**
|
||||
|
||||
- Bright window/sky backdrop → screen blend blows out
|
||||
- Cluttered backdrop with text/graphics → conflicts with caption text
|
||||
- Energetic / vlog / TikTok style → wrong vibe
|
||||
- Multiple speakers / hard cuts → caption arc breaks
|
||||
|
||||
## What agent decides per scene
|
||||
|
||||
| Field | What | Example |
|
||||
| ------------------------------ | ------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------ |
|
||||
| `plane.top/right/width/height` | Where the wall plane sits in frame. Plane should HUG the side of the wall, not float over the subject. | `{top: 90, right: 30, width: 720, height: 520}` for 1280×720 |
|
||||
| `plane.rotateY` | Match the wall's perspective angle. Negative for right-side wall (text recedes left), positive for left-side wall. | `-13` for a right-side wall at slight angle |
|
||||
| `plane.rotateX` | Tiny vertical tilt if wall is angled up/down. Usually 0-2 deg. | `1` |
|
||||
| `font_scale` | Multiplier on the locked cap-N base sizes. Tune for frame height. | `1.0` for 1280×720, `~1.5` for 1920×1080, `~0.7` for 720p portrait |
|
||||
| `groups[].slot` | Which of the 4 typography slots this group uses (1/2/3/4). Drives the arc. | See below |
|
||||
| `groups[].tone` | "soft" or "present" — drives motion curve | `"soft"` for opening lines, `"present"` for pivot+climax |
|
||||
|
||||
## Slot assignment rules
|
||||
|
||||
Aim for ONE arc across the video: `1 → 2 → 3 → 4`. Don't repeat slots if you
|
||||
can avoid it; don't skip slots without reason.
|
||||
|
||||
| Slot | Use for |
|
||||
| ---- | ---------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| 1 | The opener. The "I was thinking" line. Italic, soft entry. |
|
||||
| 2 | The dreamy continuation / modifier. Smaller italic, hanging-indent — feels like the second half of a sentence with some staggered drift. |
|
||||
| 3 | The pivot. Upright (no italic), the syntactic turn. ("but suddenly", "and then…") |
|
||||
| 4 | The climax. Big uppercase 900. The payoff line. Aim for ≤4 short words so the right-aligned cascade naturally wraps to 2-3 lines. |
|
||||
|
||||
If the script is longer than 4 groups, repeat slot 1 or 2 for additional
|
||||
soft lines, but reserve slot 4 for the SINGLE climax.
|
||||
|
||||
## Plan.json shape
|
||||
|
||||
```json
|
||||
{
|
||||
"mode": "template",
|
||||
"template": "memory-wall",
|
||||
"duration": 8.04,
|
||||
"fps": 24,
|
||||
"width": 1280,
|
||||
"height": 720,
|
||||
"plane": {
|
||||
"top": 90,
|
||||
"right": 30,
|
||||
"width": 720,
|
||||
"height": 520,
|
||||
"rotateY": -13,
|
||||
"rotateX": 1
|
||||
},
|
||||
"font_scale": 1.0,
|
||||
"groups": [
|
||||
{
|
||||
"id": "cg-0",
|
||||
"slot": 1,
|
||||
"tone": "soft",
|
||||
"in": 0.2,
|
||||
"out": 4.85,
|
||||
"words": [
|
||||
{ "text": "Some", "start": 0.24, "end": 0.44 },
|
||||
{ "text": "memories", "start": 0.48, "end": 0.82 },
|
||||
{ "text": "feel", "start": 0.92, "end": 1.14 },
|
||||
{ "text": "soft", "start": 1.2, "end": 1.64 }
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "cg-1",
|
||||
"slot": 2,
|
||||
"tone": "soft",
|
||||
"in": 2.55,
|
||||
"out": 4.85,
|
||||
"words": [
|
||||
{ "text": "like", "start": 2.66, "end": 2.78 },
|
||||
{ "text": "old", "start": 2.86, "end": 3.02 },
|
||||
{ "text": "film", "start": 3.16, "end": 3.46 }
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "cg-2",
|
||||
"slot": 3,
|
||||
"tone": "present",
|
||||
"in": 4.9,
|
||||
"out": 8.04,
|
||||
"words": [
|
||||
{ "text": "but", "start": 5.04, "end": 5.18 },
|
||||
{ "text": "suddenly", "start": 5.24, "end": 5.76 }
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "cg-3",
|
||||
"slot": 4,
|
||||
"tone": "present",
|
||||
"in": 6.7,
|
||||
"out": 8.04,
|
||||
"words": [
|
||||
{ "text": "everything", "start": 6.82, "end": 7.14 },
|
||||
{ "text": "is", "start": 7.18, "end": 7.28 },
|
||||
{ "text": "sharp", "start": 7.32, "end": 7.52 },
|
||||
{ "text": "again", "start": 7.58, "end": 7.92 }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## Don't fight the template
|
||||
|
||||
If the user wants different typography, different blend, or different motion:
|
||||
**use Standard mode** (`../../../standard/`). Don't try to override the locked CSS — the
|
||||
template's visual consistency is the whole point.
|
||||
@@ -0,0 +1,179 @@
|
||||
<!doctype html>
|
||||
<!--
|
||||
TEMPLATE: memory-wall
|
||||
STYLE LOCKED. LAYOUT OPEN.
|
||||
|
||||
Locked (do not edit — overriding breaks visual consistency):
|
||||
- cap-1/2/3/4 typography (weights, italic, letter-spacing, padding-right)
|
||||
- mix-blend-mode: screen
|
||||
- color, text-shadow, filter
|
||||
- GSAP motion: container fade-in via tl.set, per-word opacity+y reveal,
|
||||
group fade-out 0.45s before g.out
|
||||
|
||||
Open (agent fills via plan.json):
|
||||
- {{PLANE_TOP}} {{PLANE_RIGHT}} {{PLANE_WIDTH}} {{PLANE_HEIGHT}}
|
||||
- {{ROTATE_Y}} {{ROTATE_X}} (perspective angle on the wall)
|
||||
- --font-scale CSS var (multiplies all cap-N sizes — agent tunes for frame)
|
||||
- GROUPS array (transcript groups, slot assignment 1/2/3/4, in/out/words)
|
||||
|
||||
Style typography is keyed to "slots", semantic positions in the arc:
|
||||
cap-1: opener (italic, soft entry)
|
||||
cap-2: continuation (smaller italic, hanging indent — ragged poem feel)
|
||||
cap-3: pivot (upright, no italic, syntactic turn)
|
||||
cap-4: climax (UPPERCASE 900, the payoff line)
|
||||
-->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width={{WIDTH}}, height={{HEIGHT}}" />
|
||||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||||
<style>
|
||||
:root { --font-scale: {{FONT_SCALE}}; }
|
||||
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
html, body {
|
||||
margin: 0;
|
||||
width: {{WIDTH}}px; height: {{HEIGHT}}px;
|
||||
overflow: hidden;
|
||||
background: #000;
|
||||
font-family: "Inter", 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;
|
||||
perspective: 1400px;
|
||||
perspective-origin: 30% 40%;
|
||||
pointer-events: none;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
/* LAYOUT (agent-tunable via plan.json) */
|
||||
.wall-plane {
|
||||
position: absolute;
|
||||
top: {{PLANE_TOP}}px;
|
||||
right: {{PLANE_RIGHT}}px;
|
||||
width: {{PLANE_WIDTH}}px;
|
||||
height: {{PLANE_HEIGHT}}px;
|
||||
transform-style: preserve-3d;
|
||||
transform: rotateY({{ROTATE_Y}}deg) rotateX({{ROTATE_X}}deg);
|
||||
transform-origin: right center;
|
||||
padding: 24px 32px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: flex-end;
|
||||
text-align: right;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
/* STYLE (locked) */
|
||||
.cap {
|
||||
display: block;
|
||||
position: relative;
|
||||
line-height: 1.05;
|
||||
opacity: 0;
|
||||
mix-blend-mode: {{BLEND_MODE}};
|
||||
color: {{CAP_COLOR}};
|
||||
text-shadow: {{TEXT_SHADOW}};
|
||||
filter: {{TEXT_FILTER}};
|
||||
will-change: transform, opacity;
|
||||
}
|
||||
.cap .w { display: inline-block; opacity: 0; will-change: opacity, transform; }
|
||||
|
||||
.cap-1 { font-size: calc(78px * var(--font-scale));
|
||||
font-weight: 600; font-style: italic;
|
||||
letter-spacing: -0.01em; }
|
||||
.cap-2 { font-size: calc(66px * var(--font-scale));
|
||||
font-weight: 500; font-style: italic;
|
||||
letter-spacing: -0.005em;
|
||||
padding-right: calc(44px * var(--font-scale)); }
|
||||
.cap-3 { font-size: calc(72px * var(--font-scale));
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.015em; }
|
||||
.cap-4 { font-size: calc(90px * var(--font-scale));
|
||||
font-weight: 900;
|
||||
letter-spacing: -0.03em;
|
||||
text-transform: uppercase;
|
||||
line-height: 1.0; }
|
||||
</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">
|
||||
<div class="wall-plane">{{GROUPS_HTML}}</div>
|
||||
</div>
|
||||
|
||||
<audio
|
||||
id="a-roll-audio"
|
||||
src="source.mp4"
|
||||
data-start="0"
|
||||
data-duration="{{DURATION}}"
|
||||
data-track-index="3"
|
||||
data-volume="1"
|
||||
></audio>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
window.__timelines = window.__timelines || {};
|
||||
const tl = gsap.timeline({ paused: true });
|
||||
const DUR = {{DURATION}};
|
||||
const GROUPS = {{GROUPS_JSON}};
|
||||
|
||||
GROUPS.forEach(function (g) {
|
||||
var sel = "#" + g.id;
|
||||
var isSoft = g.tone === "soft";
|
||||
tl.set(sel, { opacity: 1, y: 0 }, Math.max(0, g.in - 0.01));
|
||||
|
||||
g.words.forEach(function (w, i) {
|
||||
var wsel = sel + " .w[data-i='" + i + "']";
|
||||
if (isSoft) {
|
||||
tl.fromTo(wsel,
|
||||
{ opacity: 0, y: 8 },
|
||||
{ opacity: 1, y: 0, duration: 0.45, ease: "power2.out", overwrite: "auto" },
|
||||
w.start);
|
||||
} else {
|
||||
tl.fromTo(wsel,
|
||||
{ opacity: 0, y: 6, scale: 1.04 },
|
||||
{ opacity: 1, y: 0, scale: 1.0, duration: 0.22,
|
||||
ease: "power3.out", overwrite: "auto", transformOrigin: "100% 50%" },
|
||||
w.start);
|
||||
}
|
||||
});
|
||||
|
||||
if (g.out < DUR) {
|
||||
tl.to(sel, { opacity: 0, duration: 0.5, ease: "power2.in", overwrite: "auto" },
|
||||
g.out - 0.5);
|
||||
}
|
||||
tl.set(sel, { opacity: 0, visibility: "hidden" }, g.out);
|
||||
});
|
||||
|
||||
tl.seek(0);
|
||||
window.__timelines["main"] = tl;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,81 @@
|
||||
# Template: portrait-header
|
||||
|
||||
**Look:** 9:16 portrait talking-head with captions on a horizontal strip
|
||||
across the top of the frame, above the subject's head. Optional crown at
|
||||
the bottom for shots that include the subject's waist or below.
|
||||
|
||||
**Visual identity (LOCKED):**
|
||||
|
||||
- 5 typography slots: intro / phrase / emph / dream / crown (centered)
|
||||
- `mix-blend-mode: screen` over warm bone color (#fff5df)
|
||||
- Single-caption swap (caps stack at one position in the header strip)
|
||||
- Per-word fade with subtle Y-drift (soft) or pop+scale (present)
|
||||
|
||||
## When to apply
|
||||
|
||||
✅ **Good fit:**
|
||||
|
||||
- 9:16 portrait video (1080×1920 typical)
|
||||
- Single subject filling the center of the frame
|
||||
- Clean band visible above the head
|
||||
- Speech is relatively dense (many short phrases) — crown only for the
|
||||
one true climax
|
||||
|
||||
❌ **Wrong fit:**
|
||||
|
||||
- Subject's head crops to the very top of frame (no header band exists)
|
||||
- 16:9 landscape → use `champion` or `memory-wall` instead
|
||||
- Multiple speakers / cuts
|
||||
|
||||
## Layout decisions
|
||||
|
||||
| Field | What | Example (1080×1920) |
|
||||
| --------------- | ----------------------------------------------------------------------------------------------------------------------- | ------------------------------------ |
|
||||
| `header.top` | Y of the header strip. Should sit above the subject's head with ~30px breathing room. | `30` if hair top is around y=200 |
|
||||
| `header.height` | Height of the strip. Bigger for longer captions / 2-line wraps. | `280` |
|
||||
| `crown_top` | Y of the crown line (bottom of frame). Skip if no waist visible. | `1620` for a near-full-body shot |
|
||||
| `crown_enabled` | Whether to render a bottom crown. Skip if subject body fills the lower half completely (matte will block crown anyway). | `false` for tight head-and-shoulders |
|
||||
| `font_scale` | Scale multiplier on locked sizes. | `1.0` for 1080×1920 |
|
||||
|
||||
## Slot assignment
|
||||
|
||||
Same arc as champion: intro / phrase / emph / dream / crown.
|
||||
|
||||
For portrait-header specifically, header band is narrow (one strip), so:
|
||||
|
||||
- Most groups fit on 1-2 lines
|
||||
- Don't use crown if it'd be hidden by the body matte (Pausch-style portraits
|
||||
often need to skip crown entirely and promote the climax to `emph` in the
|
||||
header instead)
|
||||
|
||||
## Plan.json shape
|
||||
|
||||
```json
|
||||
{
|
||||
"mode": "template",
|
||||
"template": "portrait-header",
|
||||
"duration": 25.3, "fps": 24, "width": 1080, "height": 1920,
|
||||
"header": { "top": 30, "height": 280 },
|
||||
"crown_top": 1620,
|
||||
"font_scale": 1.0,
|
||||
"groups": [
|
||||
{ "id": "cg-0", "slot": "intro", "tone": "soft",
|
||||
"in": 0.10, "out": 3.20, "words": [...] },
|
||||
{ "id": "cg-1", "slot": "phrase", "tone": "soft",
|
||||
"in": 3.55, "out": 5.80, "words": [...] },
|
||||
{ "id": "cg-2", "slot": "emph", "tone": "present",
|
||||
"in": 17.85, "out": 22.10,
|
||||
"words": [
|
||||
{"text": "Time", "start": 17.94, "end": 18.26},
|
||||
{"text": "is", "start": 18.38, "end": 18.54},
|
||||
{"text": "all", "start": 18.66, "end": 18.80},
|
||||
{"text": "we", "start": 18.92, "end": 19.02},
|
||||
{"text": "have", "start": 19.12, "end": 19.38}
|
||||
]}
|
||||
],
|
||||
"crown_group": null
|
||||
}
|
||||
```
|
||||
|
||||
Set `crown_group: null` if you've checked that a crown would be blocked by
|
||||
the subject body or the shot composition.
|
||||
+170
@@ -0,0 +1,170 @@
|
||||
<!doctype html>
|
||||
<!--
|
||||
TEMPLATE: portrait-header
|
||||
STYLE LOCKED. LAYOUT OPEN.
|
||||
|
||||
Look: 9:16 portrait talking-head, captions on a horizontal strip across
|
||||
the top above the subject. Optional crown at bottom if waist+ visible.
|
||||
|
||||
Locked: 5 typography slots (intro/phrase/emph/dream/crown), screen blend,
|
||||
single-caption swap (caps absolute-positioned in header strip).
|
||||
|
||||
Open via plan.json: header strip top/height, crown enable+top, font_scale.
|
||||
-->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width={{WIDTH}}, height={{HEIGHT}}" />
|
||||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||||
<style>
|
||||
:root { --font-scale: {{FONT_SCALE}}; }
|
||||
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
html, body {
|
||||
margin: 0;
|
||||
width: {{WIDTH}}px; height: {{HEIGHT}}px;
|
||||
overflow: hidden;
|
||||
background: #000;
|
||||
font-family: "Inter", 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;
|
||||
}
|
||||
|
||||
/* LAYOUT */
|
||||
.header-plane {
|
||||
position: absolute;
|
||||
top: {{HEADER_TOP}}px;
|
||||
left: 0; right: 0;
|
||||
height: {{HEADER_HEIGHT}}px;
|
||||
padding: 24px 40px;
|
||||
}
|
||||
.header-plane .cap {
|
||||
position: absolute;
|
||||
top: 24px;
|
||||
left: 40px; right: 40px;
|
||||
max-width: calc(100% - 80px);
|
||||
text-align: center;
|
||||
}
|
||||
.crown-plane {
|
||||
position: absolute;
|
||||
top: {{CROWN_TOP}}px;
|
||||
left: 0; right: 0;
|
||||
text-align: center;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* STYLE (locked) */
|
||||
.cap {
|
||||
display: block;
|
||||
position: relative;
|
||||
line-height: 1.05;
|
||||
opacity: 0;
|
||||
mix-blend-mode: {{BLEND_MODE}};
|
||||
color: {{CAP_COLOR}};
|
||||
text-shadow: {{TEXT_SHADOW}};
|
||||
filter: {{TEXT_FILTER}};
|
||||
will-change: transform, opacity;
|
||||
}
|
||||
.cap .w { display: inline-block; opacity: 0; will-change: opacity, transform; }
|
||||
|
||||
.cap-intro { font-size: calc(72px * var(--font-scale));
|
||||
font-weight: 500; font-style: italic;
|
||||
letter-spacing: -0.005em; line-height: 1.1; }
|
||||
.cap-phrase { font-size: calc(88px * var(--font-scale));
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.015em; line-height: 1.05; }
|
||||
.cap-emph { font-size: calc(104px * var(--font-scale));
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.025em; line-height: 1.0; }
|
||||
.cap-dream { font-size: calc(92px * var(--font-scale));
|
||||
font-weight: 700; font-style: italic;
|
||||
letter-spacing: -0.015em; line-height: 1.05; }
|
||||
.cap-crown { font-size: calc(130px * var(--font-scale));
|
||||
font-weight: 900;
|
||||
letter-spacing: -0.035em; text-transform: uppercase;
|
||||
line-height: 1.0; }
|
||||
</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">
|
||||
<div class="header-plane">{{GROUPS_HTML}}</div>
|
||||
<div class="crown-plane">{{CROWN_HTML}}</div>
|
||||
</div>
|
||||
|
||||
<audio
|
||||
id="a-roll-audio"
|
||||
src="source.mp4"
|
||||
data-start="0"
|
||||
data-duration="{{DURATION}}"
|
||||
data-track-index="3"
|
||||
data-volume="1"
|
||||
></audio>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
window.__timelines = window.__timelines || {};
|
||||
const tl = gsap.timeline({ paused: true });
|
||||
const DUR = {{DURATION}};
|
||||
const GROUPS = {{GROUPS_JSON}};
|
||||
const CROWN = {{CROWN_JSON}};
|
||||
|
||||
function animateGroup(g) {
|
||||
var sel = "#" + g.id;
|
||||
var isSoft = g.tone === "soft";
|
||||
tl.set(sel, { opacity: 1, y: 0 }, Math.max(0, g.in - 0.01));
|
||||
|
||||
g.words.forEach(function (w, i) {
|
||||
var wsel = sel + " .w[data-i='" + i + "']";
|
||||
if (isSoft) {
|
||||
tl.fromTo(wsel,
|
||||
{ opacity: 0, y: 8 },
|
||||
{ opacity: 1, y: 0, duration: 0.42, ease: "power2.out", overwrite: "auto" },
|
||||
w.start);
|
||||
} else {
|
||||
tl.fromTo(wsel,
|
||||
{ opacity: 0, y: 6, scale: 1.04 },
|
||||
{ opacity: 1, y: 0, scale: 1.0, duration: 0.22,
|
||||
ease: "power3.out", overwrite: "auto", transformOrigin: "50% 50%" },
|
||||
w.start);
|
||||
}
|
||||
});
|
||||
|
||||
if (g.out < DUR) {
|
||||
tl.to(sel, { opacity: 0, duration: 0.45, ease: "power2.in", overwrite: "auto" },
|
||||
g.out - 0.45);
|
||||
}
|
||||
tl.set(sel, { opacity: 0, visibility: "hidden" }, g.out);
|
||||
}
|
||||
|
||||
GROUPS.forEach(animateGroup);
|
||||
if (CROWN) animateGroup(CROWN);
|
||||
|
||||
tl.seek(0);
|
||||
window.__timelines["main"] = tl;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,16 @@
|
||||
# cinematic-cream — spec
|
||||
|
||||
The authoritative spec lives in [template.html](template.html)'s header comment (DNA-only:
|
||||
what's LOCKED vs OPEN, the LAYOUT/planes contract, READING ORDER + hand-off, hero sizing).
|
||||
Read that header before authoring plan.json. Quick contract:
|
||||
|
||||
- LOCKED: Inter, soft/present motion, warm-cream palette, screen blend, shadow logic.
|
||||
- OPEN per group (css field): size/weight/style/transform/spacing + position WITHIN a plane.
|
||||
- LAYOUT: run scripts/safe-zones.cjs first. Narration planes HUG the silhouette — use
|
||||
zones.hugLeft/hugRight (2-6% gap from the subject's edge); a plane parked in the far
|
||||
corner reads as disconnected floating text, not an embed. The ONE hero stays BIG
|
||||
(~0.22-0.34·h) centered ON the subject (heroAnchor / heroBands.best), target ~30-55%
|
||||
occlusion. fg is the LAST resort: only when heroBands.feasible=false (no band ≤62%).
|
||||
hero BIG (~0.22-0.34·h) centered ON the subject (heroAnchor), target ~30-55% occlusion.
|
||||
- plan.json: groups[] with per-word transcript timings (use scripts/fill-timings.cjs),
|
||||
fit via scripts/fit-fonts.cjs, compile via scripts/make-composition.cjs.
|
||||
@@ -0,0 +1,217 @@
|
||||
<!doctype html>
|
||||
<!--
|
||||
TEMPLATE: cinematic-cream
|
||||
DNA-ONLY template. No slot structure. No preset typography classes.
|
||||
The agent composes each caption group's typography per-scene via the
|
||||
plan.json `css` field.
|
||||
|
||||
What's LOCKED (DNA — do not override):
|
||||
- font-family: Inter (+ fallback)
|
||||
- Motion vocabulary: per-word soft/present reveal curves from the
|
||||
validated memory-wall timeline (tone: "soft" | "present")
|
||||
- Color palette defaults (cream on dark scenes, deep warm on light)
|
||||
- mix-blend-mode defaults, text-shadow / filter auto-picked from
|
||||
cap_color luminance (via make-composition.py)
|
||||
- Animation: 0.7s container fade-in (at g.in-0.01 via tl.set), per-word
|
||||
reveal at w.start, group fade-out 0.5s before g.out
|
||||
|
||||
What's OPEN per group (agent decides per scene via `css` field):
|
||||
- font-size, font-weight, font-style (italic or not), text-transform
|
||||
(uppercase or not), letter-spacing, line-height
|
||||
- Position: top / left / right / bottom / transform / text-align
|
||||
- Layer: bg (embed via matte) | fg (announcement on top)
|
||||
- Tone: soft | present (motion curve)
|
||||
- scale: optional shortcut for size multiplication
|
||||
|
||||
LAYOUT — FIRST run the safe-zone precompute, THEN compose into PLANES:
|
||||
- Run `node scripts/safe-zones.cjs <project>` and read `safe-zones.json`. From the
|
||||
matte it gives subject coverage%, the clearer side, the largest CLEAN rectangles
|
||||
(left/right/top), and a verdict:
|
||||
· "fg" → subject fills the frame; NO room to embed behind it. Use
|
||||
`caption_layer:"fg"` (screen-blend on top). Do NOT fight it with bg embeds —
|
||||
that's the 9:16 case that costs many failed occlusion rounds.
|
||||
· "embed"→ NARRATION planes go INSIDE the reported clean zones (prefer the clearer
|
||||
side / top). The HERO is the EXCEPTION — see the next bullet. Don't guess
|
||||
narration positions — use the zones safe-zones gives you.
|
||||
- NARRATION: define 2-4 named planes in plan.json `planes {}`, each inside a clean zone
|
||||
from safe-zones.json. Give each narration group a `plane`; groups STACK within it (a
|
||||
plane is a flex column → lines accumulate, aligned + coherent). Narration must be CLEAR.
|
||||
- THE HERO (the one promoted peak word) is the OPPOSITE of narration — BIG, and ON the
|
||||
subject. It is the scarce, earned PEAK; it must feel like it BURSTS, not a polite label:
|
||||
· BIG + dominant — **~0.22–0.34 × frame height**. Give it a WIDE plane (≈ centered,
|
||||
spanning the subject), NEVER a narrow margin column. (fit-fonts won't enlarge — if
|
||||
the hero's box is narrow it stays small; widen the box.)
|
||||
· CENTERED on the subject (use safe-zones `heroAnchor` = the subject's center),
|
||||
CROSSING it so the head/torso occludes the MIDDLE — **target ~30–55% occlusion**.
|
||||
That occlusion IS the effect. A hero shoved into a clean margin (~10% graze) is
|
||||
WRONG — it reads as a small floating word, not an embed behind the subject.
|
||||
· Exactly ONE hero per clip (scarcity = impact). Mark it `"hero": true` in the plan.
|
||||
- Do NOT hand-position every group with its own scattered absolute `top%` — that
|
||||
produces the unbalanced, occluded layouts the gate rejects (many re-tries). Planes
|
||||
first; per-group `css` only fine-tunes WITHIN a plane. (Position fields above apply
|
||||
per-group only when a group is NOT in a plane — the exception, not the default.)
|
||||
|
||||
READING ORDER — on-screen position follows SPOKEN order; a promoted word appears once:
|
||||
- For groups sharing a column/region, vertical (top→bottom) order MUST match spoken
|
||||
order. A promoted hero must NOT sit below words that come after it.
|
||||
(e.g. "judge us by the [ACTIONS] that we take" → ACTIONS reads BETWEEN "by the" and
|
||||
"that we take", NEVER below "that we take".)
|
||||
- The promoted word is lifted OUT of the narration (appears once, as the hero — never
|
||||
also in a narration line). For the words AFTER it, two options, in order:
|
||||
1. PREFERRED — flow them directly BELOW the hero (in reading order) or merge them
|
||||
into the hero's group, IF that area is clean (check safe-zones). One continuous
|
||||
read, no clearing.
|
||||
2. FALLBACK — if below/merge would land on the subject (occluded), do the Standard
|
||||
hand-off: the pre-hero narration CLEARS, then the post-hero words appear fresh
|
||||
(page-flip); the hero may hold across the flip.
|
||||
Prefer promoting a CLAUSE-FINAL word when you can — then nothing follows to place.
|
||||
|
||||
Philosophy:
|
||||
- Number of groups = content decides (3? 7? 12? whatever the speech
|
||||
warrants)
|
||||
- Each group's typography = scene decides (italic for soft moments,
|
||||
uppercase for punch, mixed case for narration — per group)
|
||||
- No more "cap-1 must be italic 600" rules. Those were slots.
|
||||
- The agent reads the scene + transcript and composes. The template
|
||||
only guarantees the DNA feels coherent (Inter family, same motion
|
||||
library, warm-cream or deep-warm palette, same shadow logic).
|
||||
|
||||
See `references/typographic-moves.md` for RECOMMENDED typography
|
||||
combinations (NOT rules) — italic 600 for openers, uppercase 900 for
|
||||
climaxes, etc. These are suggestions the agent can pick from or deviate.
|
||||
-->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width={{WIDTH}}, height={{HEIGHT}}" />
|
||||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||||
<style>
|
||||
:root { --font-scale: {{FONT_SCALE}}; --h: {{HEIGHT}}px; --w: {{WIDTH}}px; }
|
||||
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
html, body {
|
||||
margin: 0;
|
||||
width: {{WIDTH}}px; height: {{HEIGHT}}px;
|
||||
overflow: hidden;
|
||||
background: #000;
|
||||
font-family: "Inter", "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 — everything shared across groups */
|
||||
.cap {
|
||||
display: block;
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
mix-blend-mode: {{BLEND_MODE}};
|
||||
color: {{CAP_COLOR}};
|
||||
text-shadow: {{TEXT_SHADOW}};
|
||||
filter: {{TEXT_FILTER}};
|
||||
line-height: 1.0;
|
||||
will-change: transform, opacity;
|
||||
/* Free-mode defaults (when cap is a direct child of #stage):
|
||||
per-group `top:` positions the element's TOP edge from the
|
||||
frame top. Agent writes top/left/right per group. */
|
||||
top: 50%; left: 0; right: 0; text-align: center;
|
||||
}
|
||||
.cap .w { display: inline-block; opacity: 0; will-change: opacity, transform; }
|
||||
|
||||
/* Plane mode — when .cap is nested inside .plane, switch to flow
|
||||
layout so the plane's flex/grid can own the stacking. Agent writes
|
||||
typography only per group; positions are delegated to the plane.
|
||||
This is the memory-wall / champion architecture: a shared parent
|
||||
container handles spatial coherence, caps inside don't fight for
|
||||
top% values. */
|
||||
.plane { position: absolute; pointer-events: none; }
|
||||
.plane > .cap {
|
||||
position: relative;
|
||||
top: auto; left: auto; right: auto; bottom: auto;
|
||||
}
|
||||
|
||||
{{PLANES_CSS}}
|
||||
|
||||
/* Per-group typography (agent-authored). */
|
||||
{{CUSTOM_CSS}}
|
||||
</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"
|
||||
playsinline
|
||||
data-has-audio="true"
|
||||
data-duration="{{DURATION}}"
|
||||
data-track-index="0"
|
||||
style="z-index: 1"
|
||||
></video>
|
||||
|
||||
<div id="stage">{{GROUPS_HTML}}</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
window.__timelines = window.__timelines || {};
|
||||
const tl = gsap.timeline({ paused: true });
|
||||
const DUR = {{DURATION}};
|
||||
const GROUPS = {{GROUPS_JSON}};
|
||||
|
||||
/* Motion vocabulary — LOCKED.
|
||||
soft: gentle fade with 8px y-drift, 0.45s power2.out
|
||||
present: snappier pop with 6px y + 1.04 scale, 0.22s power3.out
|
||||
Both target per-WORD spans. Container fade-in via tl.set at g.in-0.01. */
|
||||
GROUPS.forEach(function (g) {
|
||||
var sel = "#" + g.id;
|
||||
var isSoft = g.tone === "soft";
|
||||
|
||||
// Enter: reveal opacity at g.in-0.01. The cap has been reserving flex
|
||||
// space all along (opacity: 0 but display: block from CSS), so no
|
||||
// layout reflow when it fades in — matches memory-wall canonical.
|
||||
tl.set(sel, { opacity: 1 }, Math.max(0, g.in - 0.01));
|
||||
|
||||
g.words.forEach(function (w, i) {
|
||||
var wsel = sel + " .w[data-i='" + i + "']";
|
||||
if (isSoft) {
|
||||
tl.fromTo(wsel,
|
||||
{ opacity: 0, y: 8 },
|
||||
{ opacity: 1, y: 0, duration: 0.45, ease: "power2.out", overwrite: "auto" },
|
||||
w.start);
|
||||
} else {
|
||||
tl.fromTo(wsel,
|
||||
{ opacity: 0, y: 6, scale: 1.04 },
|
||||
{ opacity: 1, y: 0, scale: 1.0, duration: 0.22,
|
||||
ease: "power3.out", overwrite: "auto", transformOrigin: "50% 50%" },
|
||||
w.start);
|
||||
}
|
||||
});
|
||||
|
||||
if (g.out < DUR) {
|
||||
tl.to(sel, { opacity: 0, duration: 0.5, ease: "power2.in", overwrite: "auto" },
|
||||
g.out - 0.5);
|
||||
}
|
||||
// Exit: display:none releases flex space so the next sentence-block's
|
||||
// caps can take the top slot. All caps in ONE block share the same
|
||||
// `out` so this fires synchronously for the block — one clean reflow
|
||||
// at the boundary, no per-cap jitter. Plan must share `out` within a
|
||||
// block; staggered per-cap exits are forbidden in plane mode.
|
||||
tl.set(sel, { opacity: 0, display: "none" }, g.out);
|
||||
});
|
||||
|
||||
tl.seek(0);
|
||||
window.__timelines["main"] = tl;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,346 @@
|
||||
<!doctype html>
|
||||
<!--
|
||||
ENGINE — the one Cinematic-mode shell, parameterized by a DNA (dna/<name>.json).
|
||||
Replaces per-template HTML files: the DNA supplies type / palette / blend / motion
|
||||
grammar / hero orchestration; safe-zones v2 supplies scene tokens (accent sampling,
|
||||
contact-shadow direction, depth-match blur); the plan supplies layout + per-group
|
||||
typography. Compiled by make-composition.cjs.
|
||||
|
||||
Contract (unchanged from cinematic-cream — gates depend on it):
|
||||
#root[data-composition-id="main"] · #a-roll · #stage
|
||||
.plane > .cap > .w spans · paused seek-safe GSAP on window.__timelines["main"]
|
||||
container fade via tl.set at g.in−0.01 · exit fade + display:none at g.out
|
||||
no Math.random / Date.now / CSS keyframes / repeat:-1
|
||||
|
||||
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
|
||||
-->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width={{WIDTH}}, height={{HEIGHT}}" />
|
||||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||||
<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;
|
||||
}
|
||||
|
||||
{{DNA_CSS}}
|
||||
|
||||
{{PLANES_CSS}}
|
||||
|
||||
/* Per-group typography (agent-authored). */
|
||||
{{CUSTOM_CSS}}
|
||||
</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"
|
||||
playsinline
|
||||
data-has-audio="true"
|
||||
data-duration="{{DURATION}}"
|
||||
data-track-index="0"
|
||||
style="z-index: 1"
|
||||
></video>
|
||||
|
||||
<div id="stage">{{GROUPS_HTML}}</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
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>
|
||||
Reference in new issue
Block a user