frameyard 0.8.0 → 0.10.0

package/examples/nested/compositions/card.html

@@ -0,0 +1,275 @@
+<script type="application/json" data-fy="props">
+  {
+    "chapter": "01",
+    "kicker": "Chapter one · inner timeline",
+    "title": "A sequence, not a clip.",
+    "note": "This chapter is a timeline: a static backdrop, this animated card, and a local pulse.",
+    "accent": "#ffb347"
+  }
+</script>
+<style>
+  @keyframes rise {
+    from {
+      opacity: 0;
+      transform: translateY(30px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+  @keyframes slide {
+    from {
+      opacity: 0;
+      transform: translateX(28px);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+  @keyframes dial {
+    from {
+      transform: rotate(-46deg);
+    }
+    to {
+      transform: rotate(314deg);
+    }
+  }
+  @keyframes glow {
+    0%,
+    100% {
+      opacity: 0.4;
+      transform: scale(0.94);
+    }
+    50% {
+      opacity: 0.78;
+      transform: scale(1.06);
+    }
+  }
+  html,
+  body,
+  fy-composition {
+    margin: 0;
+    width: 100%;
+    height: 100%;
+    background: transparent;
+  }
+  fy-composition {
+    display: block;
+    overflow: hidden;
+  }
+  .scene {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    color: #eef4ff;
+    font-family: Inter, "Helvetica Neue", ui-sans-serif, system-ui, sans-serif;
+  }
+  .glow {
+    position: absolute;
+    right: 150px;
+    top: 210px;
+    width: 440px;
+    height: 440px;
+    border-radius: 50%;
+    background: radial-gradient(circle, var(--fy-prop-accent), transparent 68%);
+    filter: blur(90px);
+    opacity: 0.2;
+    animation: glow 1s ease-in-out both;
+  }
+  .panel {
+    position: absolute;
+    left: 84px;
+    top: 148px;
+    width: 760px;
+    box-sizing: border-box;
+    padding: 38px 44px 32px;
+    border: 1px solid rgba(168, 204, 255, 0.22);
+    border-radius: 26px;
+    background: linear-gradient(135deg, rgba(6, 12, 24, 0.9), rgba(7, 14, 27, 0.58));
+    box-shadow: 0 42px 130px rgba(0, 0, 0, 0.45);
+    animation: rise 1s cubic-bezier(0.215, 0.61, 0.355, 1) both;
+  }
+  .panel::before {
+    content: "";
+    position: absolute;
+    inset: 12px;
+    border: 1px solid rgba(255, 255, 255, 0.05);
+    border-radius: 18px;
+    pointer-events: none;
+  }
+  .eyebrow {
+    color: var(--fy-prop-accent);
+    font-family: ui-monospace, "SFMono-Regular", "Cascadia Code", monospace;
+    font-size: 13px;
+    font-weight: 650;
+    letter-spacing: 0.2em;
+    text-transform: uppercase;
+  }
+  .title {
+    margin: 18px 0 0;
+    max-width: 660px;
+    font-size: 88px;
+    font-weight: 660;
+    letter-spacing: -0.055em;
+    line-height: 0.96;
+  }
+  .note {
+    margin: 22px 0 0;
+    max-width: 604px;
+    color: #a9b8d0;
+    font-size: 22px;
+    font-weight: 420;
+    line-height: 1.5;
+  }
+  .panel-foot {
+    display: flex;
+    justify-content: space-between;
+    gap: 18px;
+    margin-top: 30px;
+    color: #73839a;
+    font-family: ui-monospace, "SFMono-Regular", "Cascadia Code", monospace;
+    font-size: 11px;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+  }
+  .progress {
+    height: 3px;
+    margin-top: 16px;
+    overflow: hidden;
+    border-radius: 99px;
+    background: rgba(220, 235, 255, 0.14);
+  }
+  .progress .fill {
+    width: calc(var(--fy-progress) * 100%);
+    height: 100%;
+    border-radius: inherit;
+    background: linear-gradient(90deg, var(--fy-prop-accent), #eef4ff);
+    box-shadow: 0 0 16px var(--fy-prop-accent);
+  }
+  .index {
+    position: absolute;
+    right: 74px;
+    top: 126px;
+    width: 300px;
+    text-align: right;
+    animation: slide 1s cubic-bezier(0.215, 0.61, 0.355, 1) both;
+  }
+  .number {
+    color: var(--fy-prop-accent);
+    font-size: 230px;
+    font-weight: 680;
+    letter-spacing: -0.08em;
+    line-height: 0.8;
+    opacity: 0.18;
+  }
+  .index-label {
+    margin-top: 14px;
+    color: #8a9ab2;
+    font-family: ui-monospace, "SFMono-Regular", "Cascadia Code", monospace;
+    font-size: 12px;
+    letter-spacing: 0.26em;
+    text-transform: uppercase;
+  }
+  .dial {
+    position: absolute;
+    right: 154px;
+    top: 382px;
+    width: 190px;
+    height: 190px;
+    border: 1px solid rgba(168, 204, 255, 0.24);
+    border-radius: 50%;
+    background: rgba(6, 12, 24, 0.4);
+    animation: rise 1s cubic-bezier(0.215, 0.61, 0.355, 1) both;
+  }
+  .dial::before {
+    content: "";
+    position: absolute;
+    inset: 22px;
+    border: 1px dashed rgba(168, 204, 255, 0.2);
+    border-radius: 50%;
+  }
+  .dial-hand {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    width: 82px;
+    height: 2px;
+    border-radius: 99px;
+    background: var(--fy-prop-accent);
+    box-shadow: 0 0 18px var(--fy-prop-accent);
+    transform-origin: 0 50%;
+    animation: dial 1s linear both;
+  }
+  .dial-core {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 7px;
+    text-align: center;
+  }
+  .dial-kicker {
+    color: var(--fy-prop-accent);
+    font-family: ui-monospace, "SFMono-Regular", "Cascadia Code", monospace;
+    font-size: 10px;
+    font-weight: 650;
+    letter-spacing: 0.24em;
+  }
+  .dial-copy {
+    color: #95a5bd;
+    font-size: 13px;
+    letter-spacing: 0.02em;
+  }
+  .corner-label {
+    position: absolute;
+    left: 84px;
+    bottom: 60px;
+    color: #73839a;
+    font-family: ui-monospace, "SFMono-Regular", "Cascadia Code", monospace;
+    font-size: 12px;
+    letter-spacing: 0.18em;
+    text-transform: uppercase;
+  }
+  .corner-label b {
+    color: var(--fy-prop-accent);
+    font-weight: 600;
+  }
+</style>
+<fy-composition width="1280" height="720" fps="30" duration-in-frames="120">
+  <div class="scene">
+    <div class="glow" data-fy-anim-start="0" data-fy-anim-duration="120"></div>
+    <div
+      class="panel"
+      data-fy-anim-start="0"
+      data-fy-anim-duration="18"
+      data-fy-anim-easing="cubic-bezier(0.215, 0.61, 0.355, 1)"
+    >
+      <div class="eyebrow" data-fy-text="kicker"></div>
+      <h1 class="title" data-fy-text="title"></h1>
+      <p class="note" data-fy-text="note"></p>
+      <div class="panel-foot">
+        <span>Inner timeline</span>
+        <span>120 frames · 4.00 s</span>
+        <span>Local clock</span>
+      </div>
+      <div class="progress"><div class="fill"></div></div>
+    </div>
+    <div class="index" data-fy-anim-start="6" data-fy-anim-duration="24">
+      <div class="number" data-fy-text="chapter"></div>
+      <div class="index-label">Chapter</div>
+    </div>
+    <div class="dial" data-fy-anim-start="8" data-fy-anim-duration="28">
+      <div class="dial-hand" data-fy-anim-start="18" data-fy-anim-duration="102"></div>
+      <div class="dial-core">
+        <span class="dial-kicker">Nested</span>
+        <span class="dial-copy">one level deeper</span>
+      </div>
+    </div>
+    <div class="corner-label">A <b>timeline</b> inside a timeline</div>
+  </div>
+</fy-composition>

package/examples/nested/compositions/overlay.html

@@ -0,0 +1,307 @@
+<script type="application/json" data-fy="props">
+  {
+    "kicker": "Frameyard / Nested timelines",
+    "meta": "Reel 02 · 12.0 s · 30 fps",
+    "pipLabel": "01 · same nested timeline · 480×270 group",
+    "pipNote": "sourceIn 0 · 120 frames · audio muted",
+    "accent": "#ffb347"
+  }
+</script>
+<style>
+  @keyframes pip-in {
+    from {
+      opacity: 0;
+      transform: translateY(14px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+  html,
+  body,
+  fy-composition {
+    margin: 0;
+    width: 100%;
+    height: 100%;
+    background: transparent;
+  }
+  fy-composition {
+    display: block;
+    overflow: hidden;
+  }
+  .scene {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    color: #eef4ff;
+    font-family: Inter, "Helvetica Neue", ui-sans-serif, system-ui, sans-serif;
+  }
+  .kicker {
+    position: absolute;
+    left: 64px;
+    top: 50px;
+    display: flex;
+    align-items: center;
+    gap: 14px;
+    color: #7fd6ff;
+    font-family: ui-monospace, "SFMono-Regular", "Cascadia Code", monospace;
+    font-size: 13px;
+    font-weight: 650;
+    letter-spacing: 0.24em;
+    text-transform: uppercase;
+  }
+  .kicker::before {
+    content: "";
+    width: 8px;
+    height: 8px;
+    background: var(--fy-prop-accent);
+    box-shadow: 0 0 16px var(--fy-prop-accent);
+  }
+  .segments {
+    position: absolute;
+    right: 64px;
+    top: 44px;
+    display: flex;
+    align-items: center;
+    gap: 20px;
+    font-family: ui-monospace, "SFMono-Regular", "Cascadia Code", monospace;
+    font-size: 11px;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+  }
+  .segment {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    color: #8696ae;
+  }
+  .segment::before {
+    content: "";
+    width: 18px;
+    height: 2px;
+    background: currentColor;
+    opacity: 0.55;
+  }
+  .segment b {
+    color: #eef4ff;
+    font-weight: 600;
+  }
+  .segment.a {
+    color: var(--fy-prop-accent);
+  }
+  .segment.b {
+    color: #7fd6ff;
+  }
+  .rule {
+    position: absolute;
+    left: 64px;
+    right: 64px;
+    top: 92px;
+    height: 1px;
+    background: linear-gradient(
+      90deg,
+      rgba(168, 204, 255, 0.32),
+      rgba(168, 204, 255, 0.12) 48%,
+      rgba(168, 204, 255, 0.28)
+    );
+  }
+  .pip-chrome {
+    position: absolute;
+    inset: 0;
+    animation: pip-in 1s cubic-bezier(0.215, 0.61, 0.355, 1) both;
+  }
+  .pip-label {
+    position: absolute;
+    left: 760px;
+    top: 348px;
+    padding: 8px 12px 9px;
+    border-left: 2px solid var(--fy-prop-accent);
+    background: rgba(5, 7, 13, 0.72);
+    color: #ffd9a3;
+    font-family: ui-monospace, "SFMono-Regular", "Cascadia Code", monospace;
+    font-size: 11px;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+    white-space: nowrap;
+  }
+  .pip-label small {
+    display: block;
+    margin-top: 6px;
+    color: #7f90a8;
+    font-size: 10px;
+    letter-spacing: 0.12em;
+  }
+  .pip-box {
+    position: absolute;
+    left: 760px;
+    top: 405px;
+    width: 480px;
+    height: 270px;
+    box-sizing: border-box;
+    border: 1px solid rgba(238, 244, 255, 0.42);
+    box-shadow:
+      0 30px 90px rgba(0, 0, 0, 0.42),
+      0 0 0 6px rgba(5, 7, 13, 0.18);
+    pointer-events: none;
+  }
+  .pip-box::before,
+  .pip-box::after {
+    content: "";
+    position: absolute;
+    width: 26px;
+    height: 26px;
+    border: 2px solid var(--fy-prop-accent);
+  }
+  .pip-box::before {
+    left: -2px;
+    top: -2px;
+    border-right: 0;
+    border-bottom: 0;
+  }
+  .pip-box::after {
+    right: -2px;
+    bottom: -2px;
+    border-left: 0;
+    border-top: 0;
+  }
+  .foot {
+    position: absolute;
+    left: 64px;
+    bottom: 38px;
+    color: #73839a;
+    font-family: ui-monospace, "SFMono-Regular", "Cascadia Code", monospace;
+    font-size: 12px;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+  }
+  .outro {
+    position: absolute;
+    left: 64px;
+    top: 196px;
+    width: 580px;
+    animation: pip-in 1s cubic-bezier(0.215, 0.61, 0.355, 1) both;
+  }
+  .outro-kicker {
+    color: var(--fy-prop-accent);
+    font-family: ui-monospace, "SFMono-Regular", "Cascadia Code", monospace;
+    font-size: 12px;
+    font-weight: 650;
+    letter-spacing: 0.2em;
+    text-transform: uppercase;
+  }
+  .outro h2 {
+    margin: 16px 0 0;
+    color: #eef4ff;
+    font-size: 58px;
+    font-weight: 660;
+    letter-spacing: -0.045em;
+    line-height: 0.97;
+  }
+  .outro p {
+    width: 540px;
+    margin: 20px 0 0;
+    color: #a9b8d0;
+    font-size: 20px;
+    font-weight: 420;
+    line-height: 1.5;
+  }
+  .outro-stats {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+    width: 540px;
+    margin-top: 26px;
+    color: #73839a;
+    font-family: ui-monospace, "SFMono-Regular", "Cascadia Code", monospace;
+    font-size: 11px;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+  }
+  .outro-stats div {
+    display: flex;
+    justify-content: space-between;
+    gap: 18px;
+    padding: 8px 0;
+    border-top: 1px solid rgba(168, 204, 255, 0.14);
+  }
+  .outro-stats b {
+    color: #eef4ff;
+    font-weight: 600;
+  }
+  .foot b {
+    color: #eef4ff;
+    font-weight: 600;
+  }
+  .clock {
+    position: absolute;
+    right: 64px;
+    top: 68px;
+    color: #7f90a8;
+    font-family: ui-monospace, "SFMono-Regular", "Cascadia Code", monospace;
+    font-size: 11px;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+  }
+  .clock b {
+    color: var(--fy-prop-accent);
+    font-weight: 600;
+  }
+  .frame-counter::after {
+    counter-reset: fy-frame var(--fy-frame);
+    content: counter(fy-frame);
+  }
+  .progress {
+    position: absolute;
+    left: 64px;
+    right: 64px;
+    bottom: 20px;
+    height: 2px;
+    overflow: hidden;
+    background: rgba(220, 235, 255, 0.12);
+  }
+  .progress .fill {
+    width: calc(var(--fy-progress) * 100%);
+    height: 100%;
+    background: linear-gradient(90deg, var(--fy-prop-accent), #7fd6ff);
+    box-shadow: 0 0 14px var(--fy-prop-accent);
+  }
+</style>
+<fy-composition width="1280" height="720" fps="30" duration-in-frames="360">
+  <div class="scene">
+    <div class="kicker" data-fy-text="kicker"></div>
+    <div class="segments">
+      <span class="segment a"><b>01</b> full</span>
+      <span class="segment b"><b>02</b> full</span>
+      <span class="segment a"><b>01</b> group</span>
+    </div>
+    <div class="rule"></div>
+
+    <div class="pip-chrome" data-fy-anim-start="240" data-fy-anim-duration="24">
+      <div class="pip-label">
+        <span data-fy-text="pipLabel"></span>
+        <small data-fy-text="pipNote"></small>
+      </div>
+      <div class="pip-box"></div>
+    </div>
+
+    <div class="outro" data-fy-anim-start="246" data-fy-anim-duration="24">
+      <div class="outro-kicker">Chapter A · third placement</div>
+      <h2>One timeline,<br />inside another.</h2>
+      <p>
+        The two inner chapters play full frame first. Here chapter A returns as a 480×270 group on track v3, with its
+        pulse muted.
+      </p>
+      <div class="outro-stats">
+        <div><span>Group transform</span><b>480×270</b></div>
+        <div><span>Source range</span><b>0–119</b></div>
+        <div><span>Nested audio</span><b>Muted</b></div>
+      </div>
+    </div>
+
+    <div class="foot">One outer timeline · <b>two inner timelines</b> · three placements</div>
+    <div class="clock">Project frame <b class="frame-counter"></b> / 359</div>
+    <div class="progress"><div class="fill"></div></div>
+  </div>
+</fy-composition>

package/examples/nested/fy.config.js

@@ -0,0 +1,13 @@
+export default {
+  format: { width: 1280, height: 720, fps: 30 },
+  compositions: {
+    backdrop: "./compositions/backdrop.html",
+    card: "./compositions/card.html",
+    overlay: "./compositions/overlay.html",
+  },
+  timelines: {
+    "chapter-a": "./timelines/chapter-a.timeline.json",
+    "chapter-b": "./timelines/chapter-b.timeline.json",
+    "nested-reel": "./timelines/nested-reel.timeline.json",
+  },
+};

package/examples/nested/scripts/make-pulse.sh

@@ -0,0 +1,20 @@
+#!/usr/bin/env bash
+set -euo pipefail
+
+root="$(cd "$(dirname "${BASH_SOURCE[0]}")/.." && pwd)"
+out="${1:-$root/assets/pulse.wav}"
+mkdir -p "$(dirname "$out")"
+
+ffmpeg -y -v error \
+  -f lavfi \
+  -i "sine=frequency=659.25:duration=1.8:sample_rate=24000" \
+  -f lavfi \
+  -i "sine=frequency=987.77:duration=1.8:sample_rate=24000" \
+  -filter_complex "[0:a]volume=1.6,afade=t=in:st=0:d=0.012,afade=t=out:st=0.18:d=1.62[a0];[1:a]volume=0.7,afade=t=in:st=0:d=0.012,afade=t=out:st=0.3:d=1.5[a1];[a0][a1]amix=inputs=2:normalize=0,alimiter=limit=0.9[out]" \
+  -map "[out]" \
+  -ac 1 \
+  -ar 24000 \
+  -c:a pcm_s16le \
+  "$out"
+
+printf 'Wrote %s\n' "$out"

package/examples/nested/timelines/chapter-a.timeline.json

@@ -0,0 +1,39 @@
+{
+  "version": 1,
+  "name": "Chapter A: a reusable inner timeline",
+  "tracks": [
+    { "id": "v1", "kind": "video", "name": "Backdrop" },
+    { "id": "v2", "kind": "video", "name": "Card" },
+    { "id": "a1", "kind": "audio", "name": "Pulse" }
+  ],
+  "clips": [
+    {
+      "id": "backdrop",
+      "track": "v1",
+      "source": { "kind": "composition", "id": "backdrop" },
+      "start": 0,
+      "duration": 120
+    },
+    {
+      "id": "card",
+      "track": "v2",
+      "source": { "kind": "composition", "id": "card" },
+      "start": 0,
+      "duration": 120,
+      "props": {
+        "chapter": "01",
+        "kicker": "Chapter one · inner timeline",
+        "title": "A sequence, not a clip.",
+        "note": "This chapter is a timeline: a static backdrop, this animated card, and a local pulse.",
+        "accent": "#ffb347"
+      }
+    },
+    {
+      "id": "pulse",
+      "track": "a1",
+      "source": { "kind": "audio", "src": "assets/pulse.wav" },
+      "start": 12,
+      "audio": { "gain": 0.5 }
+    }
+  ]
+}

package/examples/nested/timelines/chapter-b.timeline.json

@@ -0,0 +1,39 @@
+{
+  "version": 1,
+  "name": "Chapter B: the same structure, different props",
+  "tracks": [
+    { "id": "v1", "kind": "video", "name": "Backdrop" },
+    { "id": "v2", "kind": "video", "name": "Card" },
+    { "id": "a1", "kind": "audio", "name": "Pulse" }
+  ],
+  "clips": [
+    {
+      "id": "backdrop",
+      "track": "v1",
+      "source": { "kind": "composition", "id": "backdrop" },
+      "start": 0,
+      "duration": 120
+    },
+    {
+      "id": "card",
+      "track": "v2",
+      "source": { "kind": "composition", "id": "card" },
+      "start": 0,
+      "duration": 120,
+      "props": {
+        "chapter": "02",
+        "kicker": "Chapter two · inner timeline",
+        "title": "Nested, then reused.",
+        "note": "The same chapter plays again as a 480×270 group, and every layer moves together.",
+        "accent": "#7fd6ff"
+      }
+    },
+    {
+      "id": "pulse",
+      "track": "a1",
+      "source": { "kind": "audio", "src": "assets/pulse.wav" },
+      "start": 24,
+      "audio": { "gain": 0.45 }
+    }
+  ]
+}