reelson 0.7.0

package/skills/reelson-compose/scripts/zooms.ts

@@ -0,0 +1,333 @@
+/**
+ * Zooms on the framed recording, planned from the cursor and checked against it.
+ *
+ * Rule (style guide #13): a zoom rides along with the cursor and is done before the click.
+ *   1. zoom in while the cursor glides to the first click it frames: start at most
+ *      EARLY s before the glide starts, and finish SETTLE s before the click;
+ *   2. zoom out while the cursor glides to the next target: start at most EARLY s
+ *      before that glide, finish SETTLE s before that click. A later click still in
+ *      view that follows within ABSORB s joins the hold instead (no out-and-back-in);
+ *      a longer pause ends the zoom — widen `clicks` to hold through it. When the next
+ *      glide is more than MAX_IDLE s away, the zoom lingers, then leaves on its own;
+ *   3. never ease during a click or while typing, and every click in the hold is
+ *      inside the zoomed view.
+ *
+ * `planZoom` turns `{ clicks: [a, b], scale }` into a zoom that satisfies this;
+ * `checkZoom` verifies any zoom (planned or manual) and suggests a fix. Pure.
+ */
+import type { Markers, Timeline, ZoomSpec } from './timeline.ts'
+import { round } from './timeline.ts'
+
+export const ZOOM_RULES = {
+    defaultEase: 0.8, // the template's default zoom in/out duration
+    minEase: 0.4, // shorter reads as a jump
+    settle: 0.1, // the zoom is done this long before the click
+    early: 0.35, // may start this long before the glide (not more: no waiting)
+    linger: 1.2, // with no next target, hold this long after the last action
+    absorb: 1.0, // a visible later click whose glide starts within this joins the hold
+    maxIdle: 3.0, // a longer wait for the next glide: linger and zoom out, don't sit zoomed
+    eps: 0.005, // float slack (13.03 + 4.36 must not fail against 17.39)
+    margin: 0.03, // keep clicks this far (fraction of the frame) inside the view
+}
+const R = ZOOM_RULES
+
+/** A zoom on the composition timeline, as the template consumes it. */
+export interface Zoom {
+    at: number
+    duration: number
+    x: number
+    y: number
+    scale: number
+    in: number
+    out: number
+    /**
+     * `follow`: the focus over time, [t, x, y] (transform-origin fractions, composition s),
+     * so the view pans with the cursor. The stage tweens between the points.
+     */
+    path?: [number, number, number][]
+}
+
+/**
+ * How a following zoom pans: sampled every `step` s, easing towards the cursor with `lag` s
+ * of smoothing, aimed `lead` s ahead — where the cursor is going, not where it was (which
+ * also cancels the smoothing's delay, and keeps the zoom-in on the click it glides to).
+ */
+export const FOLLOW = { step: 1 / 15, lag: 0.45, lead: 0.45 }
+
+/**
+ * The focus path of a zoom that follows the cursor: at each sample, the transform-origin
+ * that puts the cursor in the middle of the zoomed view (clamped so the view never leaves
+ * the frame), smoothed so the camera glides instead of jittering. Starts from the planned
+ * focus. Pure; `cursor` is the timeline's cursor layer (composition s, recording px).
+ */
+export function followPath(z: Zoom, cursor: NonNullable<Timeline['cursor']>, viewport: { width: number; height: number }): [number, number, number][] {
+    const at = (t: number): [number, number] => {
+        const path = cursor.path
+        let i = path.findIndex((p) => p[0] > t)
+        if (i === -1) i = path.length
+        const a = path[Math.max(0, i - 1)]
+        const b = path[i]
+        if (!b || i === 0 || b[0] - a[0] > 0.1) {
+            return [a[1], a[2]]
+        }
+        const u = (t - a[0]) / (b[0] - a[0])
+        return [a[1] + (b[1] - a[1]) * u, a[2] + (b[2] - a[2]) * u]
+    }
+    const originFor = (p: number): number => Math.min(1, Math.max(0, (p - 0.5 / z.scale) / (1 - 1 / z.scale)))
+    const alpha = 1 - Math.exp(-FOLLOW.step / FOLLOW.lag)
+    const end = z.at + z.duration
+    let ox = z.x
+    let oy = z.y
+    const out: [number, number, number][] = [[round(z.at), z.x, z.y]]
+    for (let t = z.at + FOLLOW.step; t < end + 1e-9; t += FOLLOW.step) {
+        const [cx, cy] = at(Math.min(t + FOLLOW.lead, end))
+        ox += (originFor(cx / viewport.width) - ox) * alpha
+        oy += (originFor(cy / viewport.height) - oy) * alpha
+        out.push([Math.round(t * 1000) / 1000, Math.round(ox * 10000) / 10000, Math.round(oy * 10000) / 10000])
+    }
+    return out
+}
+
+/** A recorded click placed on the composition timeline. */
+export interface CompClick {
+    /** 1-based position in markers.json `clicks` (what video.json zooms refer to). */
+    index: number
+    kind: 'click' | 'type'
+    /** The click. */
+    comp: number
+    /** The glide towards it starts. */
+    glide: number
+    /** Typing ends (kind 'type'); equals comp for clicks. */
+    until: number
+    /** Position as a fraction of the frame. */
+    fx: number
+    fy: number
+}
+
+export class ZoomError extends Error {}
+
+export function compositionClicks(markers: Markers, timeline: Timeline): CompClick[] {
+    if (!markers.clicks || markers.clicks.some((c) => c.move === undefined)) {
+        return []
+    }
+    return markers.clicks
+        .map((c, i) => ({ c, index: i + 1 }))
+        .filter(({ c }) => c.at >= timeline.mediaStart && c.at <= timeline.mediaEnd)
+        .map(({ c, index }) => ({
+            index,
+            kind: c.kind,
+            comp: timeline.toComposition(c.at),
+            glide: timeline.toComposition(c.move ?? c.at),
+            until: timeline.toComposition(c.until ?? c.at),
+            fx: c.x / timeline.viewport.width,
+            fy: c.y / timeline.viewport.height,
+        }))
+}
+
+/** Resolves a video.json zoom (click-anchored or manual) to composition time. */
+export function planZoom(spec: ZoomSpec, clicks: CompClick[], timeline: Timeline): Zoom {
+    const scale = spec.scale
+    if (!spec.clicks) {
+        if (spec.at === undefined || spec.duration === undefined || spec.x === undefined || spec.y === undefined) {
+            throw new ZoomError('a zoom needs `clicks`, or all of `at`, `duration`, `x`, `y` (manual)')
+        }
+        return {
+            at: timeline.toComposition(spec.at),
+            duration: spec.duration,
+            x: spec.x,
+            y: spec.y,
+            scale,
+            in: spec.in ?? R.defaultEase,
+            out: spec.out ?? R.defaultEase,
+        }
+    }
+    if (spec.at !== undefined || spec.duration !== undefined) {
+        throw new ZoomError('a zoom with `clicks` is timed automatically; drop `at`/`duration` (or drop `clicks` for a manual zoom)')
+    }
+
+    const [a, b = a] = spec.clicks
+    if (b < a) {
+        throw new ZoomError(`clicks [${a}, ${b}]: the first number must not be after the second`)
+    }
+    const byIndex = (n: number): CompClick => {
+        const found = clicks.find((c) => c.index === n)
+        if (!found) {
+            const available = clicks.map((c) => c.index)
+            throw new ZoomError(
+                `click ${n} is not in the trimmed recording (available: ${available.length ? `${available[0]}–${available.at(-1)}` : 'none — re-record to log clicks'})`,
+            )
+        }
+        return found
+    }
+    const first = byIndex(a)
+    byIndex(b)
+    const selected = clicks.filter((c) => c.index >= a && c.index <= b)
+
+    // A following zoom pans to each click, so they need not fit in one view: it starts with
+    // the first click in the middle of the view.
+    const centred = (p: number): number => Math.round(Math.min(1, Math.max(0, (p - 0.5 / scale) / (1 - 1 / scale))) * 10000) / 10000
+    const x = spec.x ?? (spec.follow ? centred(first.fx) : fitFocus(selected.map((c) => c.fx), scale, `clicks ${a}–${b}`, 'wide'))
+    const y = spec.y ?? (spec.follow ? centred(first.fy) : fitFocus(selected.map((c) => c.fy), scale, `clicks ${a}–${b}`, 'tall'))
+    const visible = spec.follow ? () => true : isVisibleIn(viewOf(x, y, scale))
+
+    const zoomIn = spec.in ?? R.defaultEase
+    const at =
+        spec.in !== undefined
+            ? round(first.comp - R.settle - zoomIn)
+            : round(Math.max(first.glide - R.early, first.comp - R.settle - R.defaultEase))
+    const inEase = spec.in ?? round(Math.max(R.minEase, Math.min(R.defaultEase, first.comp - R.settle - at)))
+
+    // The zoom holds its clicks, plus later ones it still shows that follow right away
+    // (zooming out and straight back in would jump); the first other click ends it.
+    let holdEnd = Math.max(...selected.map((c) => c.until))
+    let next: CompClick | undefined
+    for (const c of clicks.filter((c) => c.index > b)) {
+        if (visible(c) && c.glide - holdEnd <= R.absorb) {
+            holdEnd = Math.max(holdEnd, c.until)
+            continue
+        }
+        next = c
+        break
+    }
+
+    // The recording belts out before a hand-off card and fades out at the end.
+    const nextCard = timeline.transitions.find((t) => t.at > first.comp)
+    const limit = Math.min(timeline.clipEnd - 0.1, nextCard ? nextCard.at - timeline.belt : Infinity)
+
+    let outEnd: number
+    let outEase: number
+    if (next && next.comp - R.settle <= limit && next.glide - holdEnd <= R.maxIdle) {
+        outEnd = next.comp - R.settle
+        const outStart = Math.max(next.glide - R.early, outEnd - R.defaultEase, holdEnd + 0.2)
+        outEase = spec.out ?? Math.max(R.minEase, outEnd - outStart)
+    } else {
+        outEase = spec.out ?? R.defaultEase
+        outEnd = Math.min(holdEnd + R.linger + outEase, limit)
+    }
+
+    return {
+        at,
+        duration: round(outEnd - at),
+        x,
+        y,
+        scale,
+        in: round(inEase),
+        out: round(outEase),
+    }
+}
+
+export interface ZoomCheck {
+    problems: string[]
+    framed: CompClick[]
+}
+
+/**
+ * Zooms on screen at the same time (they would fight over the frame): one message per
+ * overlapping pair, keyed by the 0-based index of the later zoom in video.json order.
+ */
+export function zoomOverlaps(zooms: Zoom[]): { index: number; message: string }[] {
+    const found: { index: number; message: string }[] = []
+    zooms.forEach((z, j) => {
+        zooms.forEach((other, i) => {
+            if (i < j && z.at < round(other.at + other.duration) && other.at < round(z.at + z.duration)) {
+                found.push({
+                    index: j,
+                    message: `overlaps zoom ${i + 1} (${other.at}–${round(other.at + other.duration)}s) — one zoom over both click ranges, or drop one`,
+                })
+            }
+        })
+    })
+    return found
+}
+
+/** Verifies a zoom against the clicks; problems carry a copy-paste fix. */
+export function checkZoom(z: Zoom, clicks: CompClick[], timeline: Timeline): ZoomCheck {
+    const end = round(z.at + z.duration)
+    const visible = isVisibleIn(viewOf(z.x, z.y, z.scale))
+    const describe = (c: CompClick): string =>
+        `${c.kind} #${c.index} at ${c.comp}s (glide from ${c.glide}s, ${Math.round(c.fx * 100)}%, ${Math.round(c.fy * 100)}%)`
+
+    const problems: string[] = []
+    const inside = clicks.filter((c) => c.comp >= z.at && c.comp <= end)
+    // A following zoom keeps the cursor in view: every click in it is framed.
+    const framed = z.path ? inside : inside.filter(visible)
+    const first = framed[0]
+    const last = framed.at(-1)
+    const next = clicks.find((c) => c.comp > (last?.comp ?? z.at) && !(c.comp <= end && (z.path || visible(c))))
+
+    if (!first) {
+        problems.push('frames no click — anchor it with `clicks`, or drop the zoom')
+    } else {
+        const fix = ` → use { "clicks": [${first.index}, ${(last ?? first).index}], "scale": ${z.scale} }`
+        if (z.at + z.in > first.comp - R.settle + R.eps) {
+            problems.push(`zoom-in not done before the ${describe(first)}${fix}`)
+        } else if (z.at < first.glide - R.early - R.eps) {
+            problems.push(`zoom-in starts before the cursor moves (the viewer waits)${fix}`)
+        }
+        for (const c of inside) {
+            if (!visible(c) && !z.path) {
+                problems.push(`${describe(c)} is outside the zoomed view${fix}`)
+            } else if (c.comp > end - z.out + R.eps) {
+                problems.push(`${describe(c)} happens while the zoom eases out${fix}`)
+            } else if (c.until > end - z.out + R.eps) {
+                problems.push(`typing (${describe(c)}) is still going when the zoom eases out${fix}`)
+            }
+        }
+        if (next && end > next.comp - R.settle + R.eps && !inside.includes(next)) {
+            problems.push(`zoom-out not done before the ${describe(next)}${fix}`)
+        } else if (next && end - z.out < next.glide - R.early - R.eps && end > next.glide - R.early + R.eps) {
+            // Easing out across the start of the glide without riding it (a zoom that is fully
+            // out before the cursor even moves is fine: it lingered, then left).
+            problems.push(`zoom-out starts before the cursor heads for the next target${fix}`)
+        }
+    }
+    if (z.in < R.minEase || z.out < R.minEase) {
+        problems.push(`ease shorter than ${R.minEase}s reads as a jump — add a beat in the scenario instead`)
+    }
+    if (end > timeline.clipEnd + R.eps) {
+        problems.push(`runs past the end of the recording (${timeline.clipEnd}s)`)
+    }
+    for (const t of timeline.transitions) {
+        if (z.at < t.at && end > t.at - timeline.belt + R.eps) {
+            problems.push(`still zoomed when the recording leaves for the hand-off card at ${t.at}s`)
+        }
+    }
+
+    return { problems, framed }
+}
+
+/** The part of the frame visible at full zoom (transform-origin = focus point). */
+function viewOf(x: number, y: number, scale: number) {
+    return {
+        left: x - x / scale,
+        right: x + (1 - x) / scale,
+        top: y - y / scale,
+        bottom: y + (1 - y) / scale,
+    }
+}
+
+function isVisibleIn(view: ReturnType<typeof viewOf>): (c: CompClick) => boolean {
+    return (c) =>
+        c.fx >= view.left + R.margin - R.eps &&
+        c.fx <= view.right - R.margin + R.eps &&
+        c.fy >= view.top + R.margin - R.eps &&
+        c.fy <= view.bottom - R.margin + R.eps
+}
+
+/**
+ * A focus coordinate (0..1) that keeps every point visible at `scale`, as close
+ * to their centre as possible. With origin o, point p shows iff
+ * o - o/s ≤ p ≤ o + (1 - o)/s.
+ */
+function fitFocus(points: number[], scale: number, what: string, axis: string): number {
+    const p1 = Math.min(...points) - R.margin
+    const p2 = Math.max(...points) + R.margin
+    const lo = Math.max(0, (p2 * scale - 1) / (scale - 1))
+    const hi = Math.min(1, (p1 * scale) / (scale - 1))
+    if (lo > hi + 1e-9) {
+        throw new ZoomError(`${what} are too far apart (${axis}) to show at ${scale}x — lower the scale or split the zoom`)
+    }
+    const mid = (Math.min(...points) + Math.max(...points)) / 2
+
+    return Math.round(Math.min(hi, Math.max(lo, mid)) * 1000) / 1000
+}

package/skills/reelson-compose/sections/README.md

@@ -0,0 +1,5 @@
+# Sections
+
+Intro, recap and outro designs, one folder per `<slot>/<name>/`, mixed and matched on any
+template with `"sections"` in demo.config.json or video.json. The contract (files, tokens,
+script API, timing, placeholders) and how to make one: [../templates/README.md](../templates/README.md).

package/skills/reelson-compose/sections/intro/minimal/section.css

@@ -0,0 +1,27 @@
+#intro { display: flex; align-items: center; padding: 0 220px; }
+#intro .block { display: flex; flex-direction: column; align-items: flex-start; gap: 30px; max-width: 1480px; will-change: transform, opacity, filter; }
+#intro .brand { display: flex; align-items: center; gap: 22px; margin-bottom: 18px; }
+#intro .wordmark { font-size: 46px; }
+#intro .brand-sub { font-size: 20px; letter-spacing: 0.36em; padding-left: 22px; border-left: 2px solid var(--line); }
+#intro .title { font-size: 128px; font-weight: 800; letter-spacing: -0.045em; line-height: 1.0; will-change: transform, opacity; }
+#intro .accent { width: 180px; }
+#intro .subtitle { font-size: 40px; font-weight: 400; color: var(--muted); line-height: 1.35; max-width: 1300px; }
+#intro .meta { margin-top: 8px; }
+
+/* Portrait: the same left-aligned block, narrower and bigger */
+#root.portrait #intro { padding: 0 90px; }
+#root.portrait #intro .block { gap: 36px; max-width: 900px; }
+#root.portrait #intro .wordmark { font-size: 56px; }
+#root.portrait #intro .brand-sub { font-size: 24px; }
+#root.portrait #intro .title { font-size: 116px; }
+#root.portrait #intro .subtitle { font-size: 44px; max-width: 900px; }
+#root.portrait #intro .meta { font-size: 30px; }
+
+/* Square: the same left-aligned block, narrower */
+#root.square #intro { padding: 0 80px; }
+#root.square #intro .block { gap: 28px; max-width: 920px; }
+#root.square #intro .wordmark { font-size: 48px; }
+#root.square #intro .brand-sub { font-size: 21px; }
+#root.square #intro .title { font-size: 96px; }
+#root.square #intro .subtitle { font-size: 38px; max-width: 920px; }
+#root.square #intro .meta { font-size: 26px; }

package/skills/reelson-compose/sections/intro/minimal/section.html

@@ -0,0 +1,12 @@
+<section id="intro" class="clip" data-start="{{START}}" data-duration="{{DURATION}}" data-track-index="{{TRACK}}">
+  <div class="block">
+    <div class="brand">
+      <div class="wordmark" data-text="{{BRAND}}" data-logo="{{BRAND_LOGO}}"></div>
+      <div class="brand-sub">{{BRAND_SUB}}</div>
+    </div>
+    <h1 class="title">{{TITLE}}</h1>
+    <div class="accent"></div>
+    <p class="subtitle">{{SUBTITLE}}</p>
+    <div class="meta" data-chip></div>
+  </div>
+</section>

package/skills/reelson-compose/sections/intro/minimal/section.js

@@ -0,0 +1,16 @@
+// Frame 0 = the poster: brand row and title already legible (70%), a little low. They
+// settle up into place, the accent line grows, subtitle and chip rise in, the block holds,
+// then it softly lifts and fades while the recording fades in behind it.
+// The from-states below ARE the poster — keep them sharp (no blur, no `later` at t=0).
+const m0 = section.start + 0.08;
+tl.fromTo('#intro .brand .l', { opacity: 0.6, y: 10 }, { opacity: 1, y: 0, duration: 0.9, ease: 'sine.inOut', stagger: 0.04 }, m0);
+tl.fromTo('#intro .brand-sub', { opacity: 0.6 }, { opacity: 1, duration: 0.9, ease: 'sine.inOut' }, m0 + 0.2);
+tl.fromTo('#intro .title', { opacity: 0.7, y: 34 }, { opacity: 1, y: 0, duration: 1.2, ease: 'sine.inOut' }, m0);
+tl.fromTo('#intro .accent', { scaleX: 0.3 }, { scaleX: 1, duration: 1.0, ease: 'power3.inOut' }, m0 + 0.2);
+tl.fromTo('#intro .subtitle', { opacity: 0, y: 18 }, { opacity: 1, y: 0, duration: 0.6, ease: 'power3.out', ...later }, section.start + 0.6);
+tl.fromTo('#intro .meta', { opacity: 0, y: 14 }, { opacity: 1, y: 0, duration: 0.5, ease: 'power3.out', ...later }, section.start + 0.8);
+tl.fromTo('#intro .block', { opacity: 1, y: 0, filter: 'blur(0px)' },
+  { opacity: 0, y: -26, filter: 'blur(8px)', duration: 0.5, ease: 'power2.in', ...later }, section.exit - 0.5);
+stage.enter(section.exit, 'fade');
+
+gsap.set(['#intro .subtitle', '#intro .meta'], { opacity: 0 });

package/skills/reelson-compose/sections/intro/minimal/section.json

@@ -0,0 +1,9 @@
+{
+    "description": "Left-aligned and quiet: a small wordmark row, a big title with an accent line, subtitle and steps chip. Legible at frame 0 (the poster), settles in place, then fades into the recording. Shorter than poster.",
+    "timing": {
+        "duration": 2.7,
+        "exit": 2.6
+    },
+    "portrait": true,
+    "square": true
+}

package/skills/reelson-compose/sections/intro/poster/section.css

@@ -0,0 +1,27 @@
+#intro { display: grid; place-items: center; }
+/* gap: room between the tagline and the title, which only rises a little into place */
+#intro .stack { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 115px; will-change: transform, opacity; }
+#intro .top, #intro .bottom { display: flex; flex-direction: column; align-items: center; will-change: transform, opacity; }
+#intro .top { gap: 22px; }
+#intro .bottom { gap: 24px; }
+#intro .wordmark { font-size: 99px; }
+#intro .brand-sub { font-size: 30px; }
+#intro .brand-line { width: 180px; }
+#intro .title { font-size: 92px; font-weight: 800; letter-spacing: -0.04em; line-height: 1.05; max-width: 1380px; will-change: transform, opacity; }
+#intro .subtitle { font-size: 36px; font-weight: 400; color: var(--muted); max-width: 1300px; line-height: 1.35; }
+
+/* Portrait: one centred column, sized for a phone screen */
+#root.portrait #intro .stack { gap: 170px; padding: 0 70px; }
+#root.portrait #intro .wordmark { font-size: 150px; }
+#root.portrait #intro .brand-sub { font-size: 40px; }
+#root.portrait #intro .title { font-size: 124px; max-width: 940px; }
+#root.portrait #intro .subtitle { font-size: 50px; max-width: 900px; }
+#root.portrait #intro .meta { font-size: 34px; padding: 16px 30px; }
+
+/* Square: one centred column that fits the height */
+#root.square #intro .stack { gap: 90px; padding: 0 70px; }
+#root.square #intro .wordmark { font-size: 112px; }
+#root.square #intro .brand-sub { font-size: 32px; }
+#root.square #intro .title { font-size: 88px; max-width: 940px; }
+#root.square #intro .subtitle { font-size: 38px; max-width: 900px; }
+#root.square #intro .meta { font-size: 26px; }

package/skills/reelson-compose/sections/intro/poster/section.html

@@ -0,0 +1,14 @@
+<section id="intro" class="clip" data-start="{{START}}" data-duration="{{DURATION}}" data-track-index="{{TRACK}}">
+  <div class="stack">
+    <div class="top">
+      <div class="wordmark" data-text="{{BRAND}}" data-logo="{{BRAND_LOGO}}"></div>
+      <div class="brand-line"></div>
+      <div class="brand-sub">{{BRAND_SUB}}</div>
+    </div>
+    <div class="bottom">
+      <h1 class="title">{{TITLE}}</h1>
+      <p class="subtitle">{{SUBTITLE}}</p>
+      <div class="meta" data-chip></div>
+    </div>
+  </div>
+</section>

package/skills/reelson-compose/sections/intro/poster/section.js

@@ -0,0 +1,28 @@
+// Frame 0 = the poster: letters, line, sub and title are big (130%) and half-transparent,
+// the letters spread a little. Then everything "breathes" down into place (sine.inOut,
+// letters 60 ms apart from the centre, no snap anywhere), the subtitle and chip rise in,
+// the card holds, and at section.exit the whole stack leaves through the top while the
+// recording arrives from below on the same belt.
+// The from-states below ARE the poster — keep them sharp (no blur, no `later` at t=0).
+const c0 = section.start + 0.08;
+// Portrait and square have no room to spare at the sides: a gentler poster that still fits the width.
+const narrow = DEMO.layout.format !== 'landscape';
+const big = narrow ? 1.08 : 1.3;
+const spread = narrow ? 8 : 26;
+tl.fromTo('#intro .l', { scale: big, opacity: 0.6, x: (i, el, all) => (i - (all.length - 1) / 2) * spread },
+  { scale: 1, opacity: 1, x: 0, duration: 1.4, ease: 'sine.inOut', stagger: { each: 0.06, from: 'center' } }, c0);
+tl.fromTo('#intro .brand-line', { scaleX: big, opacity: 0.6 }, { scaleX: 1, opacity: 1, duration: 1.3, ease: 'sine.inOut' }, c0 + 0.25);
+tl.fromTo('#intro .brand-sub', { scale: big, opacity: 0.6 }, { scale: 1, opacity: 1, duration: 1.3, ease: 'sine.inOut' }, c0 + 0.35);
+tl.fromTo('#intro .title', { scale: big, opacity: 0.65 }, { scale: 1, opacity: 1, duration: 1.4, ease: 'sine.inOut' }, c0 + 0.2);
+tl.fromTo('#intro .stack', { y: 0 }, { y: -30, duration: 1.2, ease: 'power2.out' }, c0);
+tl.fromTo('#intro .top', { y: -24 }, { y: 0, duration: 1.3, ease: 'power2.out' }, c0);
+tl.fromTo('#intro .bottom', { y: 33 }, { y: 0, duration: 1.3, ease: 'power2.out' }, c0 + 0.15);
+tl.fromTo('#intro .subtitle', { opacity: 0, y: 20 }, { opacity: 1, y: 0, duration: 0.6, ease: 'power3.out', ...later }, section.start + 0.9);
+tl.fromTo('#intro .meta', { opacity: 0, y: 16 }, { opacity: 1, y: 0, duration: 0.5, ease: 'power3.out', ...later }, section.start + 1.05);
+// Off through the top of the stage (a zoomed 16:9 card, class "band", moves in its own px),
+// fading as it goes: its text never lingers over the recording riding in.
+const away = (DEMO.layout.stage.height + 70) / (document.getElementById('intro').classList.contains('band') ? DEMO.layout.bandZoom : 1);
+tl.fromTo('#intro .stack', { y: -30, opacity: 1 }, { y: -away, opacity: 0, duration: 0.9, ease: 'power3.inOut', ...later }, section.exit);
+stage.enter(section.exit, 'belt');
+
+gsap.set(['#intro .subtitle', '#intro .meta'], { opacity: 0 });

package/skills/reelson-compose/sections/intro/poster/section.json

@@ -0,0 +1,9 @@
+{
+    "description": "Wordmark, accent line and tagline over the title, subtitle and steps chip, centred. Frame 0 is the poster (everything big and 60% transparent); it breathes into place, holds, and lifts out through the top as the recording rides in on the same belt.",
+    "timing": {
+        "duration": 4.0,
+        "exit": 3.0
+    },
+    "portrait": true,
+    "square": true
+}

package/skills/reelson-compose/sections/intro/split/section.css

@@ -0,0 +1,30 @@
+#intro { display: grid; grid-template-columns: 760px 1fr; align-items: center; }
+#intro .panel { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; padding: 0 60px;
+  background: linear-gradient(160deg, color-mix(in srgb, var(--brand) 82%, #000) 0%, color-mix(in srgb, var(--brand) 45%, var(--bg)) 100%);
+  box-shadow: 30px 0 120px rgba(0, 0, 0, 0.45), inset -1px 0 0 rgba(255, 255, 255, 0.12); will-change: transform; }
+#intro .wordmark { font-size: 96px; color: #fff; will-change: transform; }
+#intro .brand-line { width: 160px; background: linear-gradient(90deg, #fff, var(--brand-soft)); opacity: 0.85; }
+#intro .brand-sub { font-size: 26px; color: rgba(255, 255, 255, 0.72); }
+#intro .text { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; padding: 0 120px 0 130px; will-change: transform, opacity; }
+#intro .title { font-size: 96px; font-weight: 800; letter-spacing: -0.04em; line-height: 1.04; will-change: transform, opacity; }
+#intro .subtitle { font-size: 36px; font-weight: 400; color: var(--muted); line-height: 1.35; }
+
+/* Portrait: the brand panel on top, the text below */
+#root.portrait #intro { grid-template-columns: 1fr; grid-template-rows: 820px 1fr; align-items: stretch; }
+#root.portrait #intro .panel { box-shadow: 0 30px 120px rgba(0, 0, 0, 0.45), inset 0 -1px 0 rgba(255, 255, 255, 0.12); }
+#root.portrait #intro .wordmark { font-size: 120px; }
+#root.portrait #intro .brand-sub { font-size: 32px; }
+#root.portrait #intro .text { justify-content: center; gap: 34px; padding: 0 90px 120px; }
+#root.portrait #intro .title { font-size: 100px; }
+#root.portrait #intro .subtitle { font-size: 42px; }
+#root.portrait #intro .meta { font-size: 30px; }
+
+/* Square: the brand panel on top, the text below */
+#root.square #intro { grid-template-columns: 1fr; grid-template-rows: 400px 1fr; align-items: stretch; }
+#root.square #intro .panel { gap: 20px; box-shadow: 0 30px 120px rgba(0, 0, 0, 0.45), inset 0 -1px 0 rgba(255, 255, 255, 0.12); }
+#root.square #intro .wordmark { font-size: 96px; }
+#root.square #intro .brand-sub { font-size: 26px; }
+#root.square #intro .text { justify-content: center; gap: 24px; padding: 0 80px 20px; }
+#root.square #intro .title { font-size: 78px; }
+#root.square #intro .subtitle { font-size: 34px; }
+#root.square #intro .meta { font-size: 24px; }

package/skills/reelson-compose/sections/intro/split/section.html

@@ -0,0 +1,12 @@
+<section id="intro" class="clip" data-start="{{START}}" data-duration="{{DURATION}}" data-track-index="{{TRACK}}">
+  <div class="panel">
+    <div class="wordmark" data-text="{{BRAND}}" data-logo="{{BRAND_LOGO}}"></div>
+    <div class="brand-line"></div>
+    <div class="brand-sub">{{BRAND_SUB}}</div>
+  </div>
+  <div class="text">
+    <h1 class="title">{{TITLE}}</h1>
+    <p class="subtitle">{{SUBTITLE}}</p>
+    <div class="meta" data-chip></div>
+  </div>
+</section>

package/skills/reelson-compose/sections/intro/split/section.js

@@ -0,0 +1,19 @@
+// Frame 0 = the poster: the panel is already in place with its wordmark a little big and
+// 60% transparent, the title legible at 65% slightly to the right. Both settle, subtitle
+// and chip rise in, the card holds; at section.exit the panel slides out left, the text
+// out right, and the recording grows out of the middle.
+// The from-states below ARE the poster — keep them sharp (no blur, no `later` at t=0).
+const s0 = section.start + 0.08;
+tl.fromTo('#intro .panel .wordmark', { scale: 1.18 }, { scale: 1, duration: 1.3, ease: 'sine.inOut' }, s0);
+tl.fromTo('#intro .panel .l', { opacity: 0.6 }, { opacity: 1, duration: 1.1, ease: 'sine.inOut', stagger: { each: 0.05, from: 'center' } }, s0);
+tl.fromTo('#intro .brand-line', { scaleX: 0.4 }, { scaleX: 1, duration: 1.1, ease: 'power3.inOut' }, s0 + 0.25);
+tl.fromTo('#intro .brand-sub', { opacity: 0.6 }, { opacity: 1, duration: 1.0, ease: 'sine.inOut' }, s0 + 0.3);
+tl.fromTo('#intro .title', { opacity: 0.65, x: 40 }, { opacity: 1, x: 0, duration: 1.3, ease: 'sine.inOut' }, s0 + 0.1);
+tl.fromTo('#intro .subtitle', { opacity: 0, x: 30 }, { opacity: 1, x: 0, duration: 0.6, ease: 'power3.out', ...later }, section.start + 0.8);
+tl.fromTo('#intro .meta', { opacity: 0, x: 24 }, { opacity: 1, x: 0, duration: 0.5, ease: 'power3.out', ...later }, section.start + 1.0);
+// The panels are mostly gone before the frame grows in, so the text never shows through it.
+tl.fromTo('#intro .panel', { x: 0 }, { x: -900, duration: 0.7, ease: 'power3.inOut', ...later }, section.exit - 0.25);
+tl.fromTo('#intro .text', { x: 0, opacity: 1 }, { x: 1300, opacity: 0, duration: 0.7, ease: 'power3.inOut', ...later }, section.exit - 0.25);
+stage.enter(section.exit + 0.2, 'zoom');
+
+gsap.set(['#intro .subtitle', '#intro .meta'], { opacity: 0 });

package/skills/reelson-compose/sections/intro/split/section.json

@@ -0,0 +1,9 @@
+{
+    "description": "A brand-coloured panel on the left with the wordmark (or logo) and tagline; title, subtitle and steps chip on the right. Frame 0 is the poster. At the hand-over the panel slides out left, the text out right, and the recording grows out of the middle.",
+    "timing": {
+        "duration": 4.0,
+        "exit": 3.0
+    },
+    "portrait": true,
+    "square": true
+}

package/skills/reelson-compose/sections/outro/compact/section.css

@@ -0,0 +1,23 @@
+#outro { display: grid; place-items: center; }
+#outro .row { display: flex; align-items: center; gap: 48px; will-change: transform, opacity; }
+#outro .wordmark { font-size: 120px; }
+#outro .divider { width: 6px; height: 132px; border-radius: 3px; background: linear-gradient(180deg, var(--brand), var(--brand-soft)); transform-origin: center; will-change: transform; }
+#outro .right { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; max-width: 820px; will-change: transform, opacity; }
+#outro .title { font-size: 54px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
+#outro .brand-sub { font-size: 22px; letter-spacing: 0.36em; padding-left: 0; }
+
+/* Portrait: wordmark, a short line, then the title — stacked */
+#root.portrait #outro .row { flex-direction: column; gap: 44px; padding: 0 80px; text-align: center; }
+#root.portrait #outro .wordmark { font-size: 132px; }
+#root.portrait #outro .divider { width: 160px; height: 6px; background: linear-gradient(90deg, var(--brand), var(--brand-soft)); }
+#root.portrait #outro .right { align-items: center; max-width: 920px; }
+#root.portrait #outro .title { font-size: 64px; }
+#root.portrait #outro .brand-sub { font-size: 30px; }
+
+/* Square: wordmark, a short line, then the title — stacked */
+#root.square #outro .row { flex-direction: column; gap: 40px; padding: 0 70px; text-align: center; }
+#root.square #outro .wordmark { font-size: 120px; }
+#root.square #outro .divider { width: 160px; height: 6px; background: linear-gradient(90deg, var(--brand), var(--brand-soft)); }
+#root.square #outro .right { align-items: center; max-width: 940px; }
+#root.square #outro .title { font-size: 58px; }
+#root.square #outro .brand-sub { font-size: 26px; }

package/skills/reelson-compose/sections/outro/compact/section.html

@@ -0,0 +1,10 @@
+<section id="outro" class="clip" data-start="{{START}}" data-duration="{{DURATION}}" data-track-index="{{TRACK}}">
+  <div class="row">
+    <div class="wordmark" data-text="{{BRAND}}" data-logo="{{BRAND_LOGO}}"></div>
+    <div class="divider"></div>
+    <div class="right">
+      <div class="title">{{TITLE}}</div>
+      <div class="brand-sub">{{BRAND_SUB}}</div>
+    </div>
+  </div>
+</section>

package/skills/reelson-compose/sections/outro/compact/section.js

@@ -0,0 +1,11 @@
+// Waits out the recap's cross-fade (0.3 s) so the brand never lands on its text, then:
+// letters slide in from the left, the divider grows, the title follows, a short hold,
+// and everything settles at 15% opacity: the last frame still shows the brand.
+const o0 = section.start + 0.3;
+tl.fromTo('#outro .l', { opacity: 0, x: -40 }, { opacity: 1, x: 0, duration: 0.6, ease: 'power3.out', stagger: 0.03, ...later }, o0);
+tl.fromTo('#outro .divider', { scaleY: 0 }, { scaleY: 1, duration: 0.4, ease: 'power3.inOut', ...later }, o0 + 0.2);
+tl.fromTo('#outro .right', { opacity: 0, x: -24 }, { opacity: 1, x: 0, duration: 0.5, ease: 'power3.out', ...later }, o0 + 0.3);
+tl.fromTo('#outro .row', { opacity: 1, scale: 1 }, { opacity: 0.15, scale: 0.97, duration: 0.6, ease: 'power2.in', ...later }, section.start + section.duration - 0.6);
+
+gsap.set(['#outro .l', '#outro .right'], { opacity: 0 });
+gsap.set('#outro .divider', { scaleY: 0 });

package/skills/reelson-compose/sections/outro/compact/section.json

@@ -0,0 +1,8 @@
+{
+    "description": "One line: wordmark (or logo), a brand-coloured divider, then the video title over the tagline. Short; settles at 15% opacity so the last frame still shows the brand.",
+    "timing": {
+        "duration": 2.4
+    },
+    "portrait": true,
+    "square": true
+}