@mevdragon/vidfarm-devcli 0.14.0 → 0.15.0

package/.agents/skills/hyperframes-animation/blueprints-index.md

@@ -0,0 +1,146 @@
+# Blueprints (the proven shapes)
+
+> Entry point to the blueprint layer. Read this to find the shape for a frame; read `blueprints/<id>.md` to instantiate it. The Step-4 method (Reproduce / Adapt / Compose, what to write per frame) lives in `visual-design.md` — this file is the menu + the picker.
+
+A **blueprint** is a product-agnostic, **time-coded shot template** — `Scene N (a–b s): …` with `[slots]` and one named **signature move** — reverse-engineered from 50 golden product-launch clips (plus 13 hyperframes-animation blueprints reverse-translated to the same brief format). It encodes a whole shot across its full duration — reveals paced to the spoken line, not dumped at t=0 — so instantiating one structurally keeps content arriving instead of freezing. The full template lives in `blueprints/<id>.md`. **Step 4 (visual design) instantiates one blueprint per frame** (or composes from the motion vocabulary when none fits).
+
+## The 15 blueprints
+
+<blueprints>
+<blueprint id="kinetic-type-beats" roles="Hook, Problem, Product_Intro, Benefits, CTA, Brand_Outro" duration="3.4–12s">
+Flat, centered, bold-type shot where the **motion IS the words changing** — a fixed line swaps tokens in place by hard cut, or a statement builds across full-screen beats (each its own move) onto a spring-pop payoff. The workhorse (6 roles). Reach for it whenever the words carry the shot and there's no set, surface, or click.
+</blueprint>
+
+<blueprint id="typewriter-reveal" roles="Hook, Brand_Outro" duration="3.6–7s">
+A live text caret **types (and edits) a line as a human would**, then collapses it and pops a brand payoff, or holds it under a persistent mark while a sub-line types into the final CTA. Reach for it when "someone is typing this" should be the engine — a relatable typed pain → brand, or a standing logo + a typed CTA rail.
+</blueprint>
+
+<blueprint id="spatial-pan-stations" roles="Hook, Problem" duration="7–10s">
+Pre-placed labeled **stations on one oversized canvas, traversed by a single virtual camera** — repeated lateral/diagonal pans centering each station and revealing a callout, landing held on the last. Reach for it for a milestone timeline panned to "us," or a connected web of pain stations ending in a tangled knot.
+</blueprint>
+
+<blueprint id="constellation-hub" roles="Hook, Social_Proof" duration="5–6s">
+Iconned **nodes spring into a ring around a center**, then resolve on the core — a camera push-IN (depth-of-field collapsing onto it) or a held hub mark with satellites orbiting it. Reach for it for "it connects everything / one hub" or "sits at the center of your stack."
+</blueprint>
+
+<blueprint id="grid-card-assemble" roles="Key_Feature, Benefits, Social_Proof" duration="3.0–10.5s">
+N items (tiles / cards / logos / list-lines) **self-assemble in a staggered cascade** into a grid or vertical list and hold; an optional camera zoom-OUT reveals the array inside a vaster whole. Reach for it to enumerate breadth at once — a feature grid, an accumulating benefit list, or a logo wall.
+</blueprint>
+
+<blueprint id="logo-assemble-lockup" roles="Product_Intro, CTA, Brand_Outro" duration="4.6–11s">
+A brand mark / wordmark **builds itself from parts** (elements assemble/orbit, letters cascade, an outline draws on, or a camera pushes through negative space) and resolves into a centered lockup, optionally extended to a URL/CTA. Reach for it for a wordless premium brand sting, or a logo build leading into the final ask.
+</blueprint>
+
+<blueprint id="cursor-ui-demo" roles="Product_Intro, Key_Feature" duration="4.0–9.3s">
+A visible custom **cursor drives a reconstructed app UI** through clicks/hovers/drags so the screen changes state shot-to-shot, while the camera chases each interaction. Reach for it for a first cursor-led look at the surface (Product_Intro) or one workflow demonstrated end-to-end onto the action button (Key_Feature).
+</blueprint>
+
+<blueprint id="device-surface-showcase" roles="Key_Feature" duration="7.8–9.6s">
+A **device mockup or floating window held as hero** while its screens cycle through a real flow, presented by a camera ranging from a static hold to a continuous 3D push. Role-narrow (Key_Feature only) but mechanic-rich (static tour · floating-window push-scroll · 3D-hand demo). Reach for it to show a feature experienced *inside its real interface*.
+</blueprint>
+
+<blueprint id="dataviz-countup" roles="Problem, Product_Intro" duration="6–12s">
+Numbers and charts are the hero — a **count-up ring/number, trend chart, tilted stat grid** — traversed by a camera that pushes THROUGH (or scrolls across) them to land on one hero metric. Reach for it when the data carries the argument: quantify a worsening problem, or open confidently on "look at the result."
+</blueprint>
+
+<blueprint id="titlecard-reveal" roles="Benefits, Social_Proof" duration="3–5s">
+The calm **breather/landing beat** — one clean title or single brand/proof card revealed with exactly ONE restrained move (slide-up crossfade, or wipe-away-to-reveal), then a still hold. Low motion is the payload, not a deficiency. Reach for it for a two-line value title, or a busy open wiped to a clean lockup + a "loved by N+ teams" stat.
+</blueprint>
+
+<blueprint id="comparison-split" roles="Key_Feature" duration="4–6s">
+Two paired items of equal weight enter from opposite wings with **mirrored 3D "book-open" tilts** and hold side-by-side, then an inner-edge pill badge spring-pops on each to punctuate. Reach for it for an A/B or "X + Y together" — two complementary capabilities weighed at once (not >2 items, not sequential steps).
+</blueprint>
+
+<blueprint id="overwhelm-surround" roles="Problem" duration="6–9s">
+Overwhelm by accumulation — recognizable surfaces assemble, density-marker icons scatter in, the center one **morphs into the viewer's own avatar**, then elements close in from all sides (surrounded, not zoomed-into). Reach for it when the pain is "you're buried in tools," ending on a claustrophobic crowd.
+</blueprint>
+
+<blueprint id="ticker-takeover" roles="Hook, Brand_Outro" duration="5–7s">
+A typed lead-in + an accent word cycling through options, then a hero **crashes in from off-screen and physically shoves the text aside** — a collision, not a fade — settling alone. Reach for it when a "could be many things" build should be violently replaced by "this is it."
+</blueprint>
+
+<blueprint id="video-text-pivot" roles="Product_Intro, Key_Feature" duration="6–8s">
+A product video holds center and breathes, then **slides aside to hand its weight to a hero stat**, then both clear and kinetic text types into the vacated center, sealed by a gradient pill. Reach for it for "see the feature → see the impact" where the video must stay visible (slides, never cuts).
+</blueprint>
+
+<blueprint id="cta-morph-press" roles="CTA" duration="4–6s">
+A resting brand mark **condenses at the same center into a brighter CTA**, then a cursor arrives and lands a human-aimed click with feedback. Reach for it for a focused "click here" sign-off that walks the eye from identity to action — no spatial set, no multi-step UI.
+</blueprint>
+</blueprints>
+
+## Role → blueprint menu
+
+A **SOFT** menu: story truth comes first. Story-design reaches in **when the product's own beat calls for that shape** — it suggests a proven shape, it never dictates which beats exist. Each role has 2–4 options; if none fits the beat, compose freely (the menu is not a checklist). Each line is the **trigger** that should make you reach for that blueprint.
+
+Roles here map 1:1 to the storyboard frame `type` enum: **Hook**=`hook` · **Problem**=`pain_point` · **Product_Intro**=`product_intro` · **Key_Feature**=`feature_showcase` · **Benefits**=`benefit_highlight` · **Social_Proof**=`social_proof` · **CTA**=`cta` · **Brand_Outro**=`branding`.
+
+**Hook**
+
+- `kinetic-type-beats` — a punchy rhetorical line / "you keep doing X" callout where the in-place word-swap is the joke, OR an escalating multi-beat statement landing a spring-pop payoff.
+- `typewriter-reveal` — type a relatable line, collapse it, pop the brand (logo or product-UI) — "here's the everyday pain, now here's us."
+- `spatial-pan-stations` — a timeline of milestones panned to the present ("evolution leading up to us").
+- `constellation-hub` — a constellation of tools/nodes + a camera push-in ("it connects everything").
+- `ticker-takeover` — a cycling accent word ("could be X, or Y…") violently replaced by a hero crashing in from off-screen.
+
+**Problem**
+
+- `kinetic-type-beats` — 3–5 short pain statements, each landing alone on a bare canvas, no product yet.
+- `spatial-pan-stations` — pan a connected web of pain "stations" ending in a tangled knot.
+- `dataviz-countup` — a count-up ring / chart / stat grid pushed-through to dramatize a worsening or large problem.
+- `overwhelm-surround` — recognizable tools that morph into the viewer, then task bubbles close in from all sides ("you're buried").
+
+**Product_Intro**
+
+- `kinetic-type-beats` — "Introducing…" hard-cut name-drop resolving on the brand name/logo.
+- `logo-assemble-lockup` — a wordless premium brand sting (elements pulse/orbit and assemble around the mark).
+- `cursor-ui-demo` — first look at the product surface; a cursor sweeps in to introduce the app.
+- `dataviz-countup` — hard-cut into a data-viz card grid, camera scrolls to a glowing hero metric + a kinetic tagline.
+- `video-text-pivot` — a product video that slides aside to hand its weight to a hero stat, then yields the center to kinetic impact text.
+
+**Key_Feature**
+
+- `grid-card-assemble` — a labeled feature tile/pill grid that self-assembles (or glass cards revealed by a camera zoom-out).
+- `cursor-ui-demo` — a specific multi-step workflow demonstrated end-to-end, landing on the action button/result.
+- `device-surface-showcase` — a device/window hero whose screens cycle (static tour · floating-window push-scroll · 3D-hand demo).
+- `comparison-split` — two paired capabilities side-by-side with mirrored book-open tilts (an A/B / "X + Y together").
+- `video-text-pivot` — a feature clip that slides aside to a frame-filling metric, then a typographic impact line.
+
+**Benefits**
+
+- `kinetic-type-beats` — a rapid-fire staccato montage of 8–12 short value phrases.
+- `grid-card-assemble` — a vertical benefit list that accumulates or steps.
+- `titlecard-reveal` — a calm two-line value title card (a breather/stillness beat).
+
+**Social_Proof**
+
+- `constellation-hub` — product mark as the hub, partner logos orbiting it ("works with your stack").
+- `grid-card-assemble` — a logo wall that builds then pulls back to reveal a vast ecosystem.
+- `titlecard-reveal` — wipe a busy open away to a clean brand lockup + a "loved by N+ teams" stat.
+
+**CTA**
+
+- `kinetic-type-beats` — a punchy closing line (or short value stack) snapping beat-by-beat onto the logo/URL.
+- `logo-assemble-lockup` — a logo build → camera push-through into the final URL/CTA verb.
+- `cta-morph-press` — a brand mark that condenses into the CTA at one center, then a cursor lands a human-aimed click.
+
+**Brand_Outro**
+
+- `kinetic-type-beats` — a rapid verb barrage resolving on the brand's one defining word.
+- `typewriter-reveal` — a persistent brand mark with a typed/swapping CTA rail beneath it.
+- `logo-assemble-lockup` — feature/UI elements clear the stage and the lockup draws itself in.
+- `ticker-takeover` — options cycle, then the brand mark crashes in and owns the frame.
+
+> Coverage: every role has ≥2 options; every blueprint serves ≥1 role. `kinetic-type-beats` is the workhorse (6 roles); `device-surface-showcase` is role-narrow (Key_Feature only) but mechanic-rich. Five shapes — `comparison-split`, `overwhelm-surround`, `ticker-takeover`, `video-text-pivot`, `cta-morph-press` — were added from the hyperframes-animation blueprints.
+
+## Picking guidance
+
+1. Find the frame's **role** in the menu above; pick the blueprint whose **shape fits this beat** (story may already have named a candidate id — confirm or override). If two fit, prefer the one whose motions are closer to your plan.
+2. Open `blueprints/<id>.md` — read its time-coded template, `[slots]`, and named **signature move**.
+3. Choose a posture — **Reproduce** (slots map cleanly), **Adapt** (structure fits, content/surface differs; keep the signature move), or **Compose** (nothing fits → build from the motion vocabulary). The _how_ of writing each — what to keep/change, the per-frame fields — is `visual-design.md`'s job; defer to it.
+4. If nothing in the menu fits the beat, **compose** from the motion vocabulary in `motion-language.md` — still pace the reveals to the VO across the shot. Don't force a wrong blueprint.
+
+## Motion coverage
+
+Every recurring move in the golden vocabulary is backed by this skill's local `rules/` — including five added to round out the corpus: `depth-of-field-blur`, `motion-blur-streak`, `depth-scatter-assemble`, `spring-pop-entrance` (the canonical entrance pop, distinct from the click/press `press-release-spring`), and `ambient-glow-bloom`. Each blueprint's `rule mapping` cites the real rule.
+
+One genuine out-of-scope special remains: `device-surface-showcase`'s **3D-hand gesture-input + WebGL bloom/portal** needs R3F/Three.js + WebGL — a heavier capability than the rule library. Use it sparingly, or pick a simpler `device-surface-showcase` variant.

package/.agents/skills/hyperframes-animation/examples/brand-reveal-assemble-zoom.html

@@ -0,0 +1,382 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Scene 3 — Assembly Focus Reveal (hyperframes)</title>
+
+    <!--
+      HyperFrames composition.tsx.
+
+      Choreography (5 phases, 5 seconds total):
+        0.00 – 0.67s   "Just use" assembles in a discrete sequence (with hold)
+        0.73 – 1.23s   Pink logo pops in with back.out elastic
+        1.50 – 2.20s   "Just use" slides left + fades; container recenters around brand
+        2.67 – 3.57s   Camera zooms 5.5× into the logo (scale + counter-translate)
+        3.67 – 5.00s   Logo breathes (sine onUpdate, multiplicative on pop scale)
+
+      Key differences :
+        - Single paused GSAP timeline registered to window.__timelines["main"]
+        - brandTextWidth measured via getBoundingClientRect after document.fonts.ready
+        - HERO_FINAL_OFFSET_X derived from real measurement, not estimate
+        - Breathing uses the onUpdate (multiplicative) form so it multiplies
+          onto the pop scale, not a fromTo + yoyo which would overwrite the pop value
+        - Three nested transform layers: zoom-scale → zoom-translate → recenter-shift
+        - Logo is loaded from a static PNG asset
+    -->
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+
+    <style>
+      :root {
+        --bg: #000000;
+        --text-white: #ffffff;
+        --pink: #e91e63;
+      }
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg);
+        font-family: "Google Sans", "Roboto", Inter, system-ui, sans-serif;
+        color: var(--text-white);
+      }
+
+      .stage {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        overflow: hidden;
+      }
+
+      /* Three nested transform layers (outer → inner) */
+      .zoom-scale {
+        transform-origin: center center;
+        will-change: transform;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .zoom-translate {
+        will-change: transform;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .recenter-shift {
+        display: flex;
+        align-items: center;
+      }
+
+      /* Companion text — fixed width to prevent assembly jitter */
+      .companion {
+        width: 600px;
+        display: flex;
+        justify-content: flex-end;
+        margin-right: 30px;
+        white-space: nowrap;
+        color: var(--text-white);
+        font-size: 140px;
+        font-weight: 400;
+        line-height: 1;
+      }
+
+      /* Brand group: text + hero icon */
+      .brand-group {
+        display: flex;
+        align-items: center;
+        gap: 20px;
+      }
+      .brand-text {
+        color: var(--text-white);
+        font-size: 140px;
+        font-weight: 700;
+        white-space: nowrap;
+        line-height: 1;
+      }
+      .hero {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 140px;
+        height: 140px;
+        /* initial scale(0) set by GSAP fromTo */
+      }
+      .hero .logo-mark {
+        width: 100%;
+        height: 100%;
+        display: block;
+      }
+
+      /* Hidden probe used for text measurement */
+      .measure-probe {
+        position: absolute;
+        left: -99999px;
+        top: -99999px;
+        visibility: hidden;
+        white-space: pre;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="main"
+      data-start="0"
+      data-duration="5"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div
+        class="stage clip"
+        data-start="0"
+        data-duration="5"
+        data-track-index="1"
+        id="brand-stage"
+      >
+        <div class="zoom-scale" data-layout-allow-overflow>
+          <div class="zoom-translate">
+            <div class="recenter-shift">
+              <div class="companion">
+                <span class="companion-text">J</span>
+              </div>
+
+              <div class="brand-group" data-layout-allow-overflow>
+                <span class="brand-text">Hyperframes</span>
+                <div class="hero">
+                  <!-- Inline-SVG placeholder mark — swap for your logo image -->
+                  <svg
+                    class="logo-mark"
+                    viewBox="0 0 100 100"
+                    role="img"
+                    aria-label="hyperframes logo"
+                  >
+                    <defs>
+                      <linearGradient id="hfMark" x1="0" y1="0" x2="1" y2="1">
+                        <stop offset="0" stop-color="#8b7bff" />
+                        <stop offset="1" stop-color="#3ddc97" />
+                      </linearGradient>
+                    </defs>
+                    <rect x="4" y="4" width="92" height="92" rx="22" fill="url(#hfMark)" />
+                    <text
+                      x="50"
+                      y="63"
+                      text-anchor="middle"
+                      font-family="Inter, system-ui, sans-serif"
+                      font-size="40"
+                      font-weight="800"
+                      fill="#fff"
+                    >
+                      HF
+                    </text>
+                  </svg>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      /* ================================================================
+         CONSTANTS — composition dimensions baked in.
+         ================================================================ */
+      const W = 1920,
+        H = 1080;
+      const TOTAL_DURATION = 5.0;
+
+      const COMPANION_WIDTH = 600;
+      const COMPANION_GAP = 30; // margin-right on .companion
+      const BRAND_FONT_SIZE = 140;
+      const HERO_GAP = 20;
+      const HERO_SIZE = 140;
+
+      const TIMING = {
+        // Phase 1: companion assembly
+        textStart: 0.0,
+        textEnd: 0.67,
+
+        // Phase 2: hero pop
+        popStart: 0.73,
+        popDur: 0.5,
+
+        // Phase 3: slide-out + recenter
+        slideStart: 1.5,
+        slideDur: 0.7,
+
+        // Phase 4: zoom
+        zoomStart: 2.67,
+        zoomDur: 0.9,
+
+        // Phase 5: breathing
+        breathStart: 3.67,
+      };
+
+      const FINAL_RECENTER_OFFSET = -180; // pre-calculated, tuned for visual feel
+
+      /* ================================================================
+         DISCRETE TEXT SEQUENCE for the companion assembly.
+         Converted from the source frame-based sequence to seconds at 30fps.
+         ================================================================ */
+      const SEQUENCE = [
+        { t: 0.0, text: "J" },
+        { t: 0.07, text: "Jus" },
+        { t: 0.13, text: "Just" },
+        { t: 0.27, text: "Just" }, // hold for pacing
+        { t: 0.4, text: "Just u" },
+        { t: 0.53, text: "Just us" },
+        { t: 0.67, text: "Just use" },
+      ];
+
+      /* ================================================================
+         TIMELINE — built synchronously so HyperFrames can seek it.
+         ================================================================ */
+      window.__timelines = window.__timelines || {};
+      const tl = gsap.timeline({ paused: true });
+      window.__timelines["main"] = tl;
+
+      {
+        /* Measure the brand text width with a hidden DOM probe. */
+        const probe = document.createElement("span");
+        probe.className = "measure-probe";
+        probe.style.font = `700 ${BRAND_FONT_SIZE}px "Google Sans", "Roboto", Inter, system-ui, sans-serif`;
+        probe.style.whiteSpace = "pre";
+        probe.style.lineHeight = "1";
+        probe.textContent = "Hyperframes"; // MUST match the rendered .brand-text casing
+        document.body.appendChild(probe);
+        const brandTextWidth = probe.getBoundingClientRect().width;
+        probe.remove();
+
+        /* Derive the hero's post-Phase-3 offset from viewport center.
+           baseHeroOffset = (C + G + B + L) / 2     <- heroSize cancels out
+           HERO_FINAL_OFFSET_X = baseHeroOffset + FINAL_RECENTER_OFFSET */
+        const baseHeroOffset = (COMPANION_WIDTH + COMPANION_GAP + brandTextWidth + HERO_GAP) / 2;
+        const HERO_FINAL_OFFSET_X = baseHeroOffset + FINAL_RECENTER_OFFSET;
+
+        /* ============================================================
+           PHASE 1: Discrete companion assembly
+           ============================================================ */
+        const textEl = document.querySelector(".companion-text");
+
+        for (const entry of SEQUENCE) {
+          tl.set(textEl, { textContent: entry.text }, entry.t);
+        }
+
+        /* ============================================================
+           PHASE 2: Hero pops in (elastic)
+           ============================================================ */
+        tl.fromTo(
+          ".hero",
+          { scale: 0 },
+          {
+            scale: 1,
+            duration: TIMING.popDur,
+            ease: "back.out(2)", // spring(stiffness:200, damping:12)
+          },
+          TIMING.popStart,
+        );
+
+        /* ============================================================
+           PHASE 3: Companion exit + container recenter
+           Two concurrent tweens at the same timeline position.
+           ============================================================ */
+        tl.to(
+          ".companion",
+          {
+            opacity: 0,
+            x: -80,
+            duration: TIMING.slideDur,
+            ease: "power3.out", // spring(stiffness:100, damping:20)
+          },
+          TIMING.slideStart,
+        );
+
+        tl.to(
+          ".recenter-shift",
+          {
+            x: FINAL_RECENTER_OFFSET,
+            duration: TIMING.slideDur,
+            ease: "power3.out",
+          },
+          TIMING.slideStart,
+        );
+
+        /* ============================================================
+           PHASE 4: Zoom — scale (outer) + counter-translate (middle) + brand text exits.
+           ============================================================ */
+        tl.to(
+          ".zoom-scale",
+          {
+            scale: 5.5,
+            duration: TIMING.zoomDur,
+            ease: "power2.out", // spring(stiffness:80, damping:20, mass:1.5)
+          },
+          TIMING.zoomStart,
+        );
+
+        tl.to(
+          ".zoom-translate",
+          {
+            x: -HERO_FINAL_OFFSET_X,
+            y: 0,
+            duration: TIMING.zoomDur,
+            ease: "power2.out",
+          },
+          TIMING.zoomStart,
+        );
+
+        // Brand text fades out + slides left so the logo gets all the zoom space.
+        tl.to(
+          ".brand-text",
+          {
+            opacity: 0,
+            x: -600,
+            duration: TIMING.zoomDur * 0.4,
+            ease: "power2.out",
+          },
+          TIMING.zoomStart,
+        );
+
+        /* ============================================================
+           PHASE 5: Breathing — onUpdate so it MULTIPLIES on the hero's
+           final pop scale, doesn't overwrite it.
+           ============================================================ */
+        const heroEl = document.querySelector(".hero");
+        const HERO_FINAL_SCALE = 1.0;
+        const SCALE_PERIOD = 1.5; // seconds per cycle
+        const SCALE_AMP = 0.04;
+        const ROTATE_AMP = 2;
+
+        const breathDur = TOTAL_DURATION - TIMING.breathStart;
+
+        tl.to(
+          { tick: 0 },
+          {
+            tick: 1,
+            duration: breathDur,
+            ease: "none",
+            onUpdate: function () {
+              const idleTime = Math.max(0, tl.time() - TIMING.breathStart);
+              const omega = (idleTime / SCALE_PERIOD) * Math.PI * 2;
+              gsap.set(heroEl, {
+                scale: HERO_FINAL_SCALE * (1 + Math.sin(omega) * SCALE_AMP),
+                rotation: Math.sin(omega) * ROTATE_AMP,
+              });
+            },
+          },
+          TIMING.breathStart,
+        );
+      }
+    </script>
+  </body>
+</html>