npm - frameyard - Versions diffs - 0.3.0 → 0.5.0 - Mend

frameyard 0.3.0 → 0.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (168) hide show

package/CHANGELOG.md +117 -0
package/GLOSSARY.md +46 -2
package/README.md +174 -106
package/dist/bindings.d.ts +42 -0
package/dist/bindings.d.ts.map +1 -0
package/dist/bindings.js +144 -0
package/dist/bindings.js.map +1 -0
package/dist/cli.js +32 -21
package/dist/cli.js.map +1 -1
package/dist/composition/adapter.d.ts +30 -0
package/dist/composition/adapter.d.ts.map +1 -0
package/dist/composition/adapter.js +2 -0
package/dist/composition/adapter.js.map +1 -0
package/dist/composition/animation.d.ts +19 -0
package/dist/composition/animation.d.ts.map +1 -0
package/dist/composition/animation.js +55 -0
package/dist/composition/animation.js.map +1 -0
package/dist/composition/attributes.d.ts +7 -0
package/dist/composition/attributes.d.ts.map +1 -0
package/dist/composition/attributes.js +24 -0
package/dist/composition/attributes.js.map +1 -0
package/dist/composition/descriptor.d.ts +30 -0
package/dist/composition/descriptor.d.ts.map +1 -0
package/dist/composition/descriptor.js +188 -0
package/dist/composition/descriptor.js.map +1 -0
package/dist/composition/diagnostics.d.ts +12 -0
package/dist/composition/diagnostics.d.ts.map +1 -0
package/dist/composition/diagnostics.js +38 -0
package/dist/composition/diagnostics.js.map +1 -0
package/dist/composition/index.d.ts +12 -0
package/dist/composition/index.d.ts.map +1 -0
package/dist/composition/index.js +7 -0
package/dist/composition/index.js.map +1 -0
package/dist/composition/media.d.ts +27 -0
package/dist/composition/media.d.ts.map +1 -0
package/dist/composition/media.js +162 -0
package/dist/composition/media.js.map +1 -0
package/dist/composition/paths.d.ts +5 -0
package/dist/composition/paths.d.ts.map +1 -0
package/dist/composition/paths.js +16 -0
package/dist/composition/paths.js.map +1 -0
package/dist/composition/transcripts.d.ts +19 -0
package/dist/composition/transcripts.d.ts.map +1 -0
package/dist/composition/transcripts.js +57 -0
package/dist/composition/transcripts.js.map +1 -0
package/dist/composition/walk.d.ts +10 -0
package/dist/composition/walk.d.ts.map +1 -0
package/dist/composition/walk.js +32 -0
package/dist/composition/walk.js.map +1 -0
package/dist/contracts.d.ts +75 -47
package/dist/contracts.d.ts.map +1 -1
package/dist/contracts.js +14 -159
package/dist/contracts.js.map +1 -1
package/dist/errors.d.ts +15 -4
package/dist/errors.d.ts.map +1 -1
package/dist/errors.js +8 -0
package/dist/errors.js.map +1 -1
package/dist/html/document-adapter.d.ts +5 -0
package/dist/html/document-adapter.d.ts.map +1 -0
package/dist/html/document-adapter.js +17 -0
package/dist/html/document-adapter.js.map +1 -0
package/dist/html/index.d.ts +5 -0
package/dist/html/index.d.ts.map +1 -0
package/dist/html/index.js +3 -0
package/dist/html/index.js.map +1 -0
package/dist/html/parse.d.ts +26 -0
package/dist/html/parse.d.ts.map +1 -0
package/dist/html/parse.js +80 -0
package/dist/html/parse.js.map +1 -0
package/dist/html/validate.d.ts +14 -0
package/dist/html/validate.d.ts.map +1 -0
package/dist/html/validate.js +648 -0
package/dist/html/validate.js.map +1 -0
package/dist/index.d.ts +2 -2
package/dist/index.d.ts.map +1 -1
package/dist/index.js +1 -1
package/dist/index.js.map +1 -1
package/dist/preview/main.d.ts +10 -3
package/dist/preview/main.d.ts.map +1 -1
package/dist/preview/main.js +189 -89
package/dist/preview/main.js.map +1 -1
package/dist/project.d.ts +2 -0
package/dist/project.d.ts.map +1 -1
package/dist/project.js +4 -0
package/dist/project.js.map +1 -1
package/dist/renderer/browser.d.ts +11 -1
package/dist/renderer/browser.d.ts.map +1 -1
package/dist/renderer/browser.js +93 -14
package/dist/renderer/browser.js.map +1 -1
package/dist/renderer/index.d.ts +25 -5
package/dist/renderer/index.d.ts.map +1 -1
package/dist/renderer/index.js +82 -16
package/dist/renderer/index.js.map +1 -1
package/dist/runtime/bindings.d.ts +11 -0
package/dist/runtime/bindings.d.ts.map +1 -0
package/dist/runtime/bindings.js +164 -0
package/dist/runtime/bindings.js.map +1 -0
package/dist/runtime/diagnostics.d.ts +4 -0
package/dist/runtime/diagnostics.d.ts.map +1 -0
package/dist/runtime/diagnostics.js +107 -0
package/dist/runtime/diagnostics.js.map +1 -0
package/dist/runtime/document-adapter.d.ts +4 -0
package/dist/runtime/document-adapter.d.ts.map +1 -0
package/dist/runtime/document-adapter.js +19 -0
package/dist/runtime/document-adapter.js.map +1 -0
package/dist/runtime/host.d.ts +14 -0
package/dist/runtime/host.d.ts.map +1 -0
package/dist/runtime/host.js +596 -0
package/dist/runtime/host.js.map +1 -0
package/dist/runtime/index.d.ts +0 -29
package/dist/runtime/index.d.ts.map +1 -1
package/dist/runtime/index.js +0 -360
package/dist/runtime/index.js.map +1 -1
package/dist/runtime/media.d.ts.map +1 -1
package/dist/runtime/media.js +20 -51
package/dist/runtime/media.js.map +1 -1
package/dist/scaffold.d.ts.map +1 -1
package/dist/scaffold.js +177 -84
package/dist/scaffold.js.map +1 -1
package/dist/server/composition-html.d.ts +20 -0
package/dist/server/composition-html.d.ts.map +1 -0
package/dist/server/composition-html.js +45 -0
package/dist/server/composition-html.js.map +1 -0
package/dist/server/preview-html.d.ts.map +1 -1
package/dist/server/preview-html.js +19 -14
package/dist/server/preview-html.js.map +1 -1
package/dist/server/server.d.ts.map +1 -1
package/dist/server/server.js +94 -6
package/dist/server/server.js.map +1 -1
package/dist/version.d.ts +1 -1
package/dist/version.js +1 -1
package/docs/adr/0001-keep-composition-authoring-web-native.md +2 -0
package/docs/adr/0006-seek-embedded-media-from-the-frame-clock.md +7 -1
package/docs/adr/0007-make-html-documents-the-composition-unit.md +31 -0
package/docs/adr/0008-share-the-composition-document-grammar.md +18 -0
package/docs/adr/0009-composite-production-frames-in-software.md +37 -0
package/docs/migration-0.4.md +279 -0
package/docs/v0.1-design.md +78 -56
package/examples/demo/README.md +8 -4
package/examples/demo/compositions/demo.controller.js +120 -0
package/examples/demo/compositions/demo.html +253 -0
package/examples/demo/video.config.js +1 -1
package/examples/video/README.md +61 -0
package/examples/video/assets/clip.mp4 +0 -0
package/examples/video/assets/clip.webm +0 -0
package/examples/video/compositions/video-mp4.html +362 -0
package/examples/video/compositions/video.html +362 -0
package/examples/video/props/video.json +8 -0
package/examples/video/scripts/make-clip.sh +109 -0
package/examples/video/video.config.js +6 -0
package/examples/webgl/README.md +30 -0
package/examples/webgl/compositions/webgl.controller.js +200 -0
package/examples/webgl/compositions/webgl.html +215 -0
package/examples/webgl/props/webgl.json +6 -0
package/examples/webgl/video.config.js +5 -0
package/package.json +7 -3
package/skills/frameyard/README.md +4 -0
package/skills/frameyard/SKILL.md +40 -12
package/skills/frameyard/references/audio-assets.md +25 -14
package/skills/frameyard/references/bindings.md +73 -0
package/skills/frameyard/references/common-mistakes.md +59 -0
package/skills/frameyard/references/controllers.md +126 -0
package/skills/frameyard/references/deterministic-authoring.md +143 -52
package/skills/frameyard/references/diagnostics.md +90 -0
package/skills/frameyard/references/failure-recovery.md +37 -14
package/skills/frameyard/references/json-results.md +43 -9
package/skills/frameyard/references/subtitles-karaoke.md +10 -18
package/examples/demo/compositions/demo.js +0 -206

package/examples/demo/compositions/demo.html ADDED Viewed

@@ -0,0 +1,253 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <script type="application/json" data-fy="props">
+      {
+        "title": "Frameyard",
+        "subtitle": "Deterministic video, authored with the web platform.",
+        "accent": "#b8f36b"
+      }
+    </script>
+    <style>
+      @keyframes orbit {
+        from {
+          transform: rotate(0deg) translateX(210px) rotate(0deg);
+        }
+        to {
+          transform: rotate(360deg) translateX(210px) rotate(-360deg);
+        }
+      }
+      @keyframes breathe {
+        0%,
+        100% {
+          opacity: 0.35;
+          transform: scale(1);
+        }
+        50% {
+          opacity: 0.7;
+          transform: scale(1.12);
+        }
+      }
+      @keyframes title-in {
+        from {
+          opacity: 0;
+          transform: translateY(46px);
+        }
+        to {
+          opacity: 1;
+          transform: translateY(0);
+        }
+      }
+      @keyframes subtitle-in {
+        from {
+          opacity: 0;
+          transform: translateY(26px);
+        }
+        to {
+          opacity: 1;
+          transform: translateY(0);
+        }
+      }
+      @keyframes scene-out {
+        from {
+          opacity: 1;
+        }
+        to {
+          opacity: 0;
+        }
+      }
+      html,
+      body,
+      fy-composition {
+        background: #080a0d;
+      }
+      #scene {
+        position: relative;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+        background: #080a0d;
+        color: #eef2f7;
+        font-family: Inter, ui-sans-serif, system-ui, sans-serif;
+        animation: scene-out 1s linear both;
+      }
+      #field {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+      }
+      #orb {
+        position: absolute;
+        top: 46%;
+        left: 38%;
+        width: 460px;
+        height: 460px;
+        margin: -230px 0 0 -230px;
+        border-radius: 50%;
+        background: var(--fy-prop-accent);
+        filter: blur(110px);
+        opacity: 0.28;
+        animation: orbit 30s linear infinite;
+      }
+      #glow {
+        position: absolute;
+        top: 8%;
+        right: 6%;
+        width: 280px;
+        height: 280px;
+        border-radius: 50%;
+        background: var(--fy-prop-accent);
+        filter: blur(90px);
+        animation: breathe 9s ease-in-out infinite;
+      }
+      #rail {
+        position: absolute;
+        top: 92px;
+        left: 160px;
+        right: 160px;
+        height: 1px;
+        background: rgba(255, 255, 255, 0.14);
+      }
+      #eyebrow {
+        position: absolute;
+        top: 64px;
+        left: 160px;
+        font:
+          600 14px/1 ui-monospace,
+          monospace;
+        letter-spacing: 0.28em;
+        text-transform: uppercase;
+        color: var(--fy-prop-accent);
+      }
+      #meta {
+        position: absolute;
+        top: 64px;
+        right: 160px;
+        font:
+          500 14px/1 ui-monospace,
+          monospace;
+        letter-spacing: 0.12em;
+        color: #788595;
+      }
+      #copy {
+        position: absolute;
+        left: 160px;
+        top: 236px;
+        width: 1320px;
+      }
+      #title {
+        margin: 0;
+        font-size: 156px;
+        line-height: 0.92;
+        letter-spacing: -0.055em;
+        font-weight: 680;
+        opacity: 0;
+        animation: title-in 1s cubic-bezier(0.215, 0.61, 0.355, 1) both;
+      }
+      #subtitle {
+        margin: 34px 0 0;
+        max-width: 820px;
+        font-size: 31px;
+        line-height: 1.45;
+        color: #96a2b2;
+        font-weight: 420;
+        opacity: 0;
+        animation: subtitle-in 1s cubic-bezier(0.215, 0.61, 0.355, 1) both;
+      }
+      #signal {
+        position: absolute;
+        left: 0;
+        bottom: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: visible;
+      }
+      #caption {
+        position: absolute;
+        left: 160px;
+        bottom: 92px;
+        font:
+          500 13px/1 ui-monospace,
+          monospace;
+        letter-spacing: 0.16em;
+        color: #7e8b9b;
+      }
+      #caption strong {
+        color: var(--fy-prop-accent);
+        font-weight: 600;
+      }
+      #progress-track {
+        position: absolute;
+        left: 160px;
+        right: 160px;
+        bottom: 72px;
+        height: 2px;
+        background: rgba(255, 255, 255, 0.1);
+      }
+      #progress {
+        position: absolute;
+        inset: 0 auto 0 0;
+        width: calc(var(--fy-progress) * 100%);
+        background: var(--fy-prop-accent);
+        box-shadow: 0 0 18px var(--fy-prop-accent);
+      }
+      #vignette {
+        position: absolute;
+        inset: 0;
+        background: radial-gradient(ellipse at center, transparent 48%, rgba(0, 0, 0, 0.42) 100%);
+        pointer-events: none;
+      }
+    </style>
+  </head>
+  <body>
+    <fy-composition width="1920" height="1080" fps="30" duration-in-frames="900">
+      <div id="scene" data-fy-anim-start="824" data-fy-anim-duration="70" data-fy-anim-easing="linear">
+        <canvas id="field" width="1920" height="1080"></canvas>
+        <div id="orb"></div>
+        <div id="glow"></div>
+        <div id="vignette"></div>
+        <div id="rail"></div>
+        <div id="eyebrow">Frameyard / Field Notes</div>
+        <div id="meta">1920×1080 · 30 FPS · 30.00 S</div>
+        <div id="copy">
+          <h1
+            id="title"
+            data-fy-text="title"
+            data-fy-anim-start="0"
+            data-fy-anim-duration="52"
+            data-fy-anim-easing="cubic-bezier(0.215, 0.61, 0.355, 1)"
+          ></h1>
+          <p
+            id="subtitle"
+            data-fy-text="subtitle"
+            data-fy-anim-start="26"
+            data-fy-anim-duration="62"
+            data-fy-anim-easing="cubic-bezier(0.215, 0.61, 0.355, 1)"
+          ></p>
+        </div>
+        <svg id="signal" viewBox="0 0 1920 1080" fill="none" aria-hidden="true">
+          <path
+            id="signal-path"
+            stroke="var(--fy-prop-accent)"
+            stroke-width="3"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            opacity=".82"
+          ></path>
+          <g id="signal-bars"></g>
+        </svg>
+        <div id="caption">FRAME <strong id="frame">000</strong> / 899 · SEEK-SAFE CANVAS + SVG + CSS</div>
+        <div id="progress-track"><div id="progress"></div></div>
+      </div>
+      <audio src="assets/chime.wav" data-fy-start="18" data-fy-volume="0.5"></audio>
+      <audio src="assets/chime.wav" data-fy-start="300" data-fy-volume="0.38"></audio>
+      <audio src="assets/chime.wav" data-fy-start="600" data-fy-volume="0.42"></audio>
+      <audio src="assets/chime.wav" data-fy-start="840" data-fy-volume="0.55"></audio>
+    </fy-composition>
+    <script type="text/fy-controller" src="./demo.controller.js"></script>
+  </body>
+</html>

package/examples/demo/video.config.js CHANGED Viewed

@@ -1,5 +1,5 @@
 export default {
   compositions: {
-    demo: "./compositions/demo.js",
+    demo: "./compositions/demo.html",
   },
 };

package/examples/video/README.md ADDED Viewed

@@ -0,0 +1,61 @@
+# Frameyard video example
+A 12-second, 1920×1080 composition that treats a local clip as source footage
+and seeks it twice. The project includes the same layout for two source codecs:
+- `video` reads `assets/clip.webm` (VP9 + Opus)
+- `video-mp4` reads `assets/clip.mp4` (H.264 + AAC)
+Both compositions include:
+- a full-bleed hero pass whose unmuted soundtrack joins the composition audio timeline
+- a persistent detail pass with its own `data-fy-start`, `data-fy-trim`, and `data-fy-duration`
+- `data-fy-audio="off"` on the detail pass so only the hero contributes audio
+- a frame counter derived from `--fy-frame` in CSS, with static source-range labels
+- frame-scheduled CSS typography and a frame-state progress bar
+- a one-second fade to black over the final second of the composition
+The hero pass uses the full 12-second source at volume `0.85`. The detail window
+is visible for the whole composition: it holds the source at 5.8 seconds until
+composition frame 120, then plays 5 seconds of the same file, and holds the final
+source frame after frame 270. The result shows two source moments side by side.
+The example is entirely declarative: the runtime owns loading, pausing, and
+frame seeking, and CSS derives the frame counter from the frame state. No
+controller is needed. The header, copy, and footer fade individually rather
+than the whole scene; a full-scene opacity animation above a video can leave
+the load frame on screen in interactive preview after a large seek.
+The compositions live in `compositions/video.html` and
+`compositions/video-mp4.html`. Both clips are 12-second 1280×720 files generated
+procedurally for this example; the MP4 is transcoded from the WebM source.
+Replace either asset with a local, seekable video file that is at least
+12 seconds long; remote URLs and live streams are not supported.
+Regenerate both clips from scratch with the bundled FFmpeg script:
+```sh
+bash examples/video/scripts/make-clip.sh
+```
+The script writes both files into `assets/`; pass `--out-dir <directory>` to
+write elsewhere. It requires FFmpeg with `libvpx-vp9`, `libx264`, Opus, and AAC
+encoders, and fixed noise seeds keep the generated grain stable across runs on
+the same FFmpeg build.
+From the repository root:
+```sh
+pnpm build
+node dist/cli.js check video --project examples/video
+node dist/cli.js check video-mp4 --project examples/video
+node dist/cli.js still video --frame 210 --project examples/video --out video-still.png
+node dist/cli.js still video-mp4 --frame 210 --project examples/video --out video-mp4-still.png
+node dist/cli.js render video --project examples/video --props examples/video/props/video.json
+node dist/cli.js render video-mp4 --project examples/video --props examples/video/props/video.json
+```
+Start the interactive preview with:
+```sh
+node dist/cli.js dev --project examples/video
+```

package/examples/video/assets/clip.mp4 ADDED Viewed

Binary file

package/examples/video/assets/clip.webm ADDED Viewed

Binary file

package/examples/video/compositions/video-mp4.html ADDED Viewed

@@ -0,0 +1,362 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <script type="application/json" data-fy="props">
+      {
+        "kicker": "Frameyard / Clip Study 001",
+        "title": "Moving",
+        "titleAccent": "Image",
+        "subtitle": "A local clip, loaded once and seeked twice from the composition clock.",
+        "detail": "Detail / second pass",
+        "accent": "#ffc37a"
+      }
+    </script>
+    <style>
+      @keyframes fade-in {
+        from {
+          opacity: 0;
+        }
+        to {
+          opacity: 1;
+        }
+      }
+      @keyframes rise {
+        from {
+          opacity: 0;
+          transform: translateY(42px);
+        }
+        to {
+          opacity: 1;
+          transform: translateY(0);
+        }
+      }
+      @keyframes draw {
+        from {
+          opacity: 0;
+          transform: scaleX(0);
+        }
+        to {
+          opacity: 1;
+          transform: scaleX(1);
+        }
+      }
+      @keyframes outro-fade {
+        from {
+          opacity: 0;
+        }
+        to {
+          opacity: 1;
+        }
+      }
+      html,
+      body,
+      fy-composition {
+        background: #04080b;
+      }
+      #scene {
+        position: relative;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+        isolation: isolate;
+        background: #04080b;
+        color: #eef4f1;
+        font-family: Inter, "Helvetica Neue", ui-sans-serif, system-ui, sans-serif;
+      }
+      #hero {
+        position: absolute;
+        inset: 0;
+        display: block;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        transform: scale(calc(1 + var(--fy-progress) * 0.035));
+        transform-origin: center;
+      }
+      #scrim {
+        position: absolute;
+        inset: 0;
+        background:
+          linear-gradient(
+            90deg,
+            rgba(4, 8, 11, 0.94) 0%,
+            rgba(4, 8, 11, 0.8) 24%,
+            rgba(4, 8, 11, 0.24) 52%,
+            rgba(4, 8, 11, 0) 74%
+          ),
+          linear-gradient(0deg, rgba(4, 8, 11, 0.9) 0%, rgba(4, 8, 11, 0) 34%);
+      }
+      #vignette {
+        position: absolute;
+        inset: 0;
+        background: radial-gradient(ellipse at 62% 44%, transparent 42%, rgba(0, 0, 0, 0.3) 100%);
+        pointer-events: none;
+      }
+      #frame-border {
+        position: absolute;
+        inset: 36px;
+        border: 1px solid rgba(238, 244, 241, 0.16);
+        pointer-events: none;
+      }
+      #header {
+        position: absolute;
+        top: 80px;
+        left: 148px;
+        right: 148px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        gap: 32px;
+        animation: fade-in 1s linear both;
+      }
+      #kicker {
+        display: flex;
+        align-items: center;
+        gap: 15px;
+        font:
+          600 14px/1 ui-monospace,
+          monospace;
+        letter-spacing: 0.24em;
+        text-transform: uppercase;
+        color: var(--fy-prop-accent);
+      }
+      #kicker::before {
+        content: "";
+        width: 8px;
+        height: 8px;
+        background: var(--fy-prop-accent);
+        box-shadow: 0 0 16px var(--fy-prop-accent);
+      }
+      #format {
+        font:
+          500 12px/1 ui-monospace,
+          monospace;
+        letter-spacing: 0.16em;
+        text-transform: uppercase;
+        color: #8b999c;
+      }
+      #copy {
+        position: absolute;
+        top: 278px;
+        left: 148px;
+        width: 860px;
+      }
+      #title {
+        margin: 0;
+        font-size: 174px;
+        line-height: 0.84;
+        letter-spacing: -0.064em;
+        font-weight: 660;
+      }
+      #title span,
+      #title em {
+        display: block;
+        animation: rise 1s cubic-bezier(0.215, 0.61, 0.355, 1) both;
+      }
+      #title em {
+        margin-top: 0.06em;
+        font-family: "Iowan Old Style", "Palatino Linotype", Georgia, ui-serif, serif;
+        font-style: italic;
+        font-weight: 400;
+        letter-spacing: -0.035em;
+        color: var(--fy-prop-accent);
+      }
+      #subtitle {
+        width: 720px;
+        margin: 38px 0 0;
+        font-size: 29px;
+        line-height: 1.5;
+        font-weight: 420;
+        color: #a6b3b6;
+        animation: rise 1s cubic-bezier(0.215, 0.61, 0.355, 1) both;
+      }
+      #footer {
+        position: absolute;
+        left: 148px;
+        right: 148px;
+        bottom: 70px;
+        contain: layout paint style;
+        animation: fade-in 1s linear both;
+      }
+      #rule {
+        position: relative;
+        height: 1px;
+        background: rgba(238, 244, 241, 0.16);
+        transform-origin: left center;
+        animation: draw 1s cubic-bezier(0.215, 0.61, 0.355, 1) both;
+      }
+      #progress {
+        position: absolute;
+        inset: 0 auto 0 0;
+        width: calc(var(--fy-progress) * 100%);
+        background: var(--fy-prop-accent);
+        box-shadow: 0 0 14px var(--fy-prop-accent);
+      }
+      #footer-row {
+        display: flex;
+        justify-content: space-between;
+        align-items: baseline;
+        gap: 24px;
+        margin-top: 18px;
+        font:
+          500 12px/1 ui-monospace,
+          monospace;
+        letter-spacing: 0.14em;
+        color: #879598;
+        text-transform: uppercase;
+      }
+      #footer-row strong {
+        color: #edf5f2;
+        font-weight: 600;
+      }
+      #footer-row .accent {
+        color: var(--fy-prop-accent);
+      }
+      #frame-counter {
+        display: inline-block;
+        min-width: 3ch;
+        text-align: right;
+      }
+      #frame-counter::after {
+        counter-reset: fy-frame var(--fy-frame);
+        content: counter(fy-frame);
+      }
+      #detail {
+        position: absolute;
+        right: 148px;
+        bottom: 154px;
+        width: 440px;
+      }
+      #detail-bar {
+        display: flex;
+        justify-content: space-between;
+        align-items: baseline;
+        gap: 24px;
+        margin-bottom: 10px;
+        contain: layout paint style;
+        font:
+          600 11px/1 ui-monospace,
+          monospace;
+        letter-spacing: 0.18em;
+        text-transform: uppercase;
+      }
+      #detail-bar > span:first-child {
+        color: var(--fy-prop-accent);
+      }
+      #detail-time {
+        color: #98a5a6;
+        font-weight: 500;
+      }
+      #detail-window {
+        position: relative;
+        width: 440px;
+        height: 248px;
+        overflow: hidden;
+        border: 1px solid rgba(255, 195, 122, 0.65);
+        background: #000;
+        box-shadow: 0 24px 90px rgba(0, 0, 0, 0.55);
+      }
+      #detail-clip {
+        display: block;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        object-position: 68% 50%;
+        transform: scale(1.3);
+      }
+      #detail-tint {
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(0deg, rgba(4, 8, 11, 0.28) 0%, rgba(4, 8, 11, 0) 45%);
+        pointer-events: none;
+      }
+      #outro-fade {
+        position: absolute;
+        inset: 0;
+        background: #04080b;
+        pointer-events: none;
+        opacity: 0;
+        animation: outro-fade 1s linear both;
+      }
+    </style>
+  </head>
+  <body>
+    <fy-composition width="1920" height="1080" fps="30" duration-in-frames="360">
+      <div id="scene">
+        <video
+          id="hero"
+          src="assets/clip.mp4"
+          data-fy-start="0"
+          data-fy-trim="0"
+          data-fy-duration="12"
+          data-fy-volume="0.85"
+        ></video>
+        <div id="scrim"></div>
+        <div id="vignette"></div>
+        <div id="frame-border"></div>
+        <header id="header" data-fy-anim-start="8" data-fy-anim-duration="28">
+          <div id="kicker" data-fy-text="kicker"></div>
+          <div id="format">Embedded video / H.264 + AAC / 30 FPS</div>
+        </header>
+        <div id="copy">
+          <h1 id="title">
+            <span
+              data-fy-text="title"
+              data-fy-anim-start="14"
+              data-fy-anim-duration="44"
+              data-fy-anim-easing="cubic-bezier(0.215, 0.61, 0.355, 1)"
+            ></span>
+            <em
+              data-fy-text="titleAccent"
+              data-fy-anim-start="26"
+              data-fy-anim-duration="44"
+              data-fy-anim-easing="cubic-bezier(0.215, 0.61, 0.355, 1)"
+            ></em>
+          </h1>
+          <p
+            id="subtitle"
+            data-fy-text="subtitle"
+            data-fy-anim-start="40"
+            data-fy-anim-duration="40"
+            data-fy-anim-easing="cubic-bezier(0.215, 0.61, 0.355, 1)"
+          ></p>
+        </div>
+        <div id="detail">
+          <div id="detail-bar">
+            <span data-fy-text="detail"></span>
+            <span id="detail-time">SRC 5.8–10.8 S</span>
+          </div>
+          <div id="detail-window">
+            <video
+              id="detail-clip"
+              src="assets/clip.mp4"
+              data-fy-start="120"
+              data-fy-trim="5.8"
+              data-fy-duration="5"
+              data-fy-audio="off"
+            ></video>
+            <div id="detail-tint"></div>
+          </div>
+        </div>
+        <div id="footer" data-fy-anim-start="46" data-fy-anim-duration="30">
+          <div id="rule" data-fy-anim-start="52" data-fy-anim-duration="50">
+            <div id="progress"></div>
+          </div>
+          <div id="footer-row">
+            <span>Hero / SRC <strong>0.0–12.0 S</strong></span>
+            <span>Frame <strong id="frame-counter"></strong> / 359</span>
+            <span class="accent">Frame-seeked</span>
+            <span>12.00 S · 30 FPS</span>
+          </div>
+        </div>
+        <div id="outro-fade" data-fy-anim-start="329" data-fy-anim-duration="30"></div>
+      </div>
+    </fy-composition>
+  </body>
+</html>