frameyard 0.7.0 → 0.9.0

package/examples/intro/compositions/chrome.html

@@ -0,0 +1,256 @@
+<link rel="stylesheet" href="./theme.css" />
+<style>
+  @keyframes hud-life {
+    0% {
+      opacity: 0;
+    }
+    4%,
+    93% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+  .chrome {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    pointer-events: none;
+  }
+  .texture {
+    position: absolute;
+    inset: 0;
+    background-image: url("../assets/grain.png");
+    background-size: 256px 256px;
+    mix-blend-mode: soft-light;
+    opacity: 0.17;
+  }
+  .vignette {
+    position: absolute;
+    inset: 0;
+    background:
+      radial-gradient(ellipse at 50% 46%, transparent 46%, rgba(0, 0, 0, 0.34) 100%),
+      linear-gradient(180deg, rgba(0, 0, 0, 0.22), transparent 14%, transparent 86%, rgba(0, 0, 0, 0.28));
+  }
+  .hud {
+    position: absolute;
+    inset: 0;
+    animation: hud-life 1s linear both;
+  }
+  .mark {
+    position: absolute;
+    left: 96px;
+    top: 50px;
+    display: flex;
+    align-items: center;
+    gap: 18px;
+    color: var(--paper);
+    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.75);
+  }
+  .mark-glyph {
+    display: grid;
+    grid-template-columns: repeat(2, 10px);
+    grid-template-rows: repeat(2, 10px);
+    gap: 2px;
+  }
+  .mark-glyph i {
+    display: block;
+    border: 1px solid rgba(242, 245, 238, 0.54);
+  }
+  .mark-glyph i:nth-child(2) {
+    background: var(--accent);
+    border-color: var(--accent);
+    box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 60%, transparent);
+  }
+  .mark-word {
+    font-size: 16px;
+    font-weight: 600;
+    letter-spacing: 0.26em;
+    text-transform: uppercase;
+  }
+  .mark-slash {
+    color: var(--muted);
+    font-size: 15px;
+    letter-spacing: 0.16em;
+  }
+  .top-meta {
+    position: absolute;
+    right: 96px;
+    top: 46px;
+    text-align: right;
+    font-size: 14px;
+    line-height: 1.8;
+    letter-spacing: 0.14em;
+    color: var(--muted);
+    text-transform: uppercase;
+    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.85);
+  }
+  .top-meta b {
+    color: var(--muted-strong);
+    font-weight: 500;
+  }
+  .bracket {
+    position: absolute;
+    width: 26px;
+    height: 26px;
+    border-color: rgba(242, 245, 238, 0.24);
+    border-style: solid;
+  }
+  .bracket.tl {
+    left: 38px;
+    top: 38px;
+    border-width: 1px 0 0 1px;
+  }
+  .bracket.tr {
+    right: 38px;
+    top: 38px;
+    border-width: 1px 1px 0 0;
+  }
+  .bracket.bl {
+    left: 38px;
+    bottom: 38px;
+    border-width: 0 0 1px 1px;
+  }
+  .bracket.br {
+    right: 38px;
+    bottom: 38px;
+    border-width: 0 1px 1px 0;
+  }
+  .foot {
+    position: absolute;
+    left: 96px;
+    right: 96px;
+    bottom: 52px;
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
+    gap: 36px;
+    font-size: 14px;
+    letter-spacing: 0.12em;
+    color: var(--muted);
+    text-transform: uppercase;
+    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.85);
+  }
+  .foot b {
+    color: var(--paper);
+    font-weight: 500;
+  }
+  .frame-read {
+    display: flex;
+    align-items: baseline;
+    gap: 12px;
+  }
+  .frame-read strong {
+    color: var(--accent);
+    font-size: 20px;
+    font-weight: 500;
+    letter-spacing: 0.06em;
+  }
+  .chapter-stack {
+    position: absolute;
+    left: 50%;
+    bottom: 52px;
+    width: 360px;
+    height: 16px;
+    margin-left: -180px;
+    text-align: center;
+    font-size: 13px;
+    letter-spacing: 0.18em;
+    text-transform: uppercase;
+    color: var(--muted-strong);
+  }
+  .chapter {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 12px;
+    white-space: nowrap;
+    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.85);
+  }
+  .chapter::before {
+    content: "";
+    width: 4px;
+    height: 4px;
+    background: var(--accent);
+    box-shadow: 0 0 10px var(--accent);
+  }
+  .progress {
+    position: absolute;
+    left: 96px;
+    right: 96px;
+    bottom: 32px;
+    height: 1px;
+    background: rgba(238, 245, 235, 0.12);
+  }
+  .progress .fill {
+    width: calc(var(--fy-progress) * 100%);
+    height: 100%;
+    background: var(--accent);
+    box-shadow: 0 0 12px var(--accent);
+  }
+  .progress .ticks {
+    position: absolute;
+    inset: -3px 0 auto;
+    height: 7px;
+    background-image: linear-gradient(90deg, rgba(238, 245, 235, 0.28) 0 1px, transparent 1px);
+    background-size: 10% 100%;
+    opacity: 0.5;
+  }
+  .right-meta {
+    display: flex;
+    align-items: baseline;
+    gap: 22px;
+  }
+</style>
+<fy-composition duration-in-frames="1200">
+  <div class="chrome">
+    <div class="texture"></div>
+    <div class="vignette"></div>
+    <div class="hud" data-fy-anim-start="0" data-fy-anim-duration="1200" data-fy-anim-easing="linear">
+      <div class="bracket tl"></div>
+      <div class="bracket tr"></div>
+      <div class="bracket bl"></div>
+      <div class="bracket br"></div>
+
+      <div class="mark">
+        <span class="mark-glyph"><i></i><i></i><i></i><i></i></span>
+        <span class="mark-word mono">Frameyard</span>
+        <span class="mark-slash mono">/</span>
+        <span class="mark-slash mono">intro film</span>
+      </div>
+      <div class="top-meta mono">
+        <div><b>1920 × 1080</b> / 60 FPS</div>
+        <div>20.00 S / 1200 FRAMES</div>
+      </div>
+
+      <div class="foot mono">
+        <div class="frame-read">
+          <span>frame</span>
+          <strong id="frame">0000</strong>
+          <span>/ <span id="total">1199</span></span>
+          <span class="dim">·</span>
+          <span id="time">00.00 S</span>
+        </div>
+        <div class="chapter-stack">
+          <span class="chapter" id="chapter">01 / author</span>
+        </div>
+        <div class="right-meta">
+          <span>local-first</span>
+          <span>html + json</span>
+          <span><b>frame-exact</b></span>
+        </div>
+      </div>
+
+      <div class="progress">
+        <div class="ticks"></div>
+        <div class="fill"></div>
+      </div>
+    </div>
+  </div>
+</fy-composition>
+
+<script type="text/fy-controller" src="./chrome.controller.js"></script>

package/examples/intro/compositions/lattice.controller.js

@@ -0,0 +1,148 @@
+const COLS = 7;
+const ROWS = 5;
+const LAYERS = 14;
+const SPACING_X = 1.95;
+const SPACING_Y = 1.15;
+const SPACING_Z = 3.3;
+const SPAN = SPACING_Z * LAYERS;
+const FOCAL = 1480;
+const CAMERA = 7.2;
+
+let canvas;
+let ctx;
+let fps = 60;
+let width = 1920;
+let height = 1080;
+
+const nodes = [];
+const paper = [242, 245, 238];
+const accent = [184, 243, 107];
+
+function smoothstep(edge0, edge1, value) {
+  const t = Math.min(1, Math.max(0, (value - edge0) / (edge1 - edge0)));
+  return t * t * (3 - 2 * t);
+}
+
+function rgba(color, alpha) {
+  return `rgba(${color[0]}, ${color[1]}, ${color[2]}, ${alpha.toFixed(3)})`;
+}
+
+function clearNodes() {
+  nodes.length = 0;
+}
+
+function draw(frame) {
+  if (!ctx) {
+    return;
+  }
+
+  const time = frame / fps;
+  const travel = time * 2.05;
+  const yaw = -0.075 + Math.sin(time * 0.29) * 0.075;
+  const pitch = Math.sin(time * 0.22 + 0.8) * 0.032;
+  const cosYaw = Math.cos(yaw);
+  const sinYaw = Math.sin(yaw);
+  const cosPitch = Math.cos(pitch);
+  const sinPitch = Math.sin(pitch);
+  const centerX = 1214;
+  const centerY = 524;
+
+  ctx.clearRect(0, 0, width, height);
+  clearNodes();
+
+  for (let k = 0; k < LAYERS; k += 1) {
+    const depth = (((k * SPACING_Z - travel) % SPAN) + SPAN) % SPAN;
+
+    for (let i = 0; i < COLS; i += 1) {
+      const worldX = (i - (COLS - 1) / 2) * SPACING_X;
+
+      for (let j = 0; j < ROWS; j += 1) {
+        const worldY = (j - (ROWS - 1) / 2) * SPACING_Y;
+        const x1 = worldX * cosYaw - depth * sinYaw;
+        const z1 = worldX * sinYaw + depth * cosYaw;
+        const y1 = worldY * cosPitch - z1 * sinPitch;
+        const z2 = worldY * sinPitch + z1 * cosPitch;
+        const perspective = FOCAL / (z2 + CAMERA);
+
+        if (perspective <= 0) {
+          continue;
+        }
+
+        const halfW = 0.9 * perspective;
+        const halfH = 0.58 * perspective;
+        const x = centerX + x1 * perspective;
+        const y = centerY + y1 * perspective;
+
+        if (x + halfW < -80 || x - halfW > width + 80 || y + halfH < -80 || y - halfH > height + 80) {
+          continue;
+        }
+
+        const reveal = smoothstep(0, 2.1, depth);
+        const near = 1 - depth / SPAN;
+        const alpha = reveal * (0.06 + 0.5 * near * near);
+        const signal = Math.sin(time * 1.12 + i * 0.92 + j * 1.37 + k * 0.47 - 0.6);
+        const selected = signal > 0.86 || (i * 11 + j * 7 + k * 5) % 31 === 0;
+
+        nodes.push({
+          x,
+          y,
+          halfW,
+          halfH,
+          z: z2,
+          alpha,
+          selected,
+          lineWidth: Math.max(0.55, Math.min(1.9, 0.35 + perspective * 0.01)),
+        });
+      }
+    }
+  }
+
+  nodes.sort((a, b) => b.z - a.z);
+
+  for (const node of nodes) {
+    const color = node.selected ? accent : paper;
+    const strength = node.selected ? Math.min(1, node.alpha * 1.9 + 0.16) : node.alpha;
+    ctx.strokeStyle = rgba(color, strength);
+    ctx.lineWidth = node.selected ? node.lineWidth * 1.12 : node.lineWidth;
+
+    if (node.selected && node.z < 18) {
+      ctx.shadowColor = rgba(accent, 0.7);
+      ctx.shadowBlur = Math.min(22, 8 + node.halfW * 0.08);
+    }
+
+    ctx.strokeRect(node.x - node.halfW, node.y - node.halfH, node.halfW * 2, node.halfH * 2);
+    ctx.shadowBlur = 0;
+
+    if (node.selected && node.halfW > 38) {
+      ctx.fillStyle = rgba(accent, Math.min(0.9, node.alpha * 2.4));
+      ctx.fillRect(node.x - 1.5, node.y - 1.5, 3, 3);
+    }
+  }
+}
+
+export default {
+  mount({ root }) {
+    canvas = root.querySelector("#lattice");
+    if (!(canvas instanceof HTMLCanvasElement)) {
+      throw new Error("lattice composition requires a #lattice canvas");
+    }
+    ctx = canvas.getContext("2d", { alpha: true });
+    fps = Number(root.getAttribute("fps") ?? 60);
+    width = canvas.width;
+    height = canvas.height;
+    draw(0);
+  },
+
+  update({ frame }) {
+    draw(frame);
+  },
+
+  dispose() {
+    clearNodes();
+    canvas = undefined;
+    ctx = undefined;
+    fps = 60;
+    width = 1920;
+    height = 1080;
+  },
+};

package/examples/intro/compositions/lattice.html

@@ -0,0 +1,308 @@
+<link rel="stylesheet" href="./theme.css" />
+<script type="application/json" data-fy="props">
+  {
+    "eyebrow": "RENDER / 03",
+    "lineOne": "THE FRAME",
+    "lineTwo": "is the truth.",
+    "note": "One integer clock. No wall time. The same input yields the same pixels.",
+    "badge": "deterministic by construction",
+    "accent": "#b8f36b"
+  }
+</script>
+<style>
+  @keyframes stage-in {
+    from {
+      opacity: 0;
+      transform: scale(1.035);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+  @keyframes spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+  @keyframes spin-reverse {
+    to {
+      transform: rotate(-360deg);
+    }
+  }
+  .scene {
+    background: radial-gradient(circle at 63% 48%, rgba(184, 243, 107, 0.055), transparent 32%), #06080b;
+  }
+  .stage {
+    position: absolute;
+    inset: 0;
+    animation: stage-in 1s cubic-bezier(0.16, 1, 0.3, 1) both;
+  }
+  .halo {
+    position: absolute;
+    left: 744px;
+    top: 54px;
+    width: 940px;
+    height: 940px;
+    border-radius: 50%;
+    background: radial-gradient(circle, rgba(184, 243, 107, 0.14) 0%, rgba(184, 243, 107, 0.035) 42%, transparent 68%);
+    filter: blur(16px);
+    animation: glow-pulse 7s ease-in-out infinite;
+  }
+  .orbit {
+    position: absolute;
+    left: 874px;
+    top: 184px;
+    width: 680px;
+    height: 680px;
+    border: 1px dashed rgba(184, 243, 107, 0.18);
+    border-radius: 50%;
+    animation: spin 72s linear infinite;
+  }
+  .orbit::before,
+  .orbit::after {
+    content: "";
+    position: absolute;
+    width: 5px;
+    height: 5px;
+    background: var(--accent);
+    box-shadow: 0 0 12px var(--accent);
+  }
+  .orbit::before {
+    left: 50%;
+    top: -3px;
+  }
+  .orbit::after {
+    left: 50%;
+    bottom: -3px;
+  }
+  .orbit-outer {
+    position: absolute;
+    left: 764px;
+    top: 74px;
+    width: 900px;
+    height: 900px;
+    border: 1px solid rgba(242, 245, 238, 0.05);
+    border-radius: 50%;
+    animation: spin-reverse 110s linear infinite;
+  }
+  #lattice {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+  }
+  .scrim {
+    position: absolute;
+    inset: 0;
+    background:
+      radial-gradient(ellipse at 88% 4%, rgba(6, 8, 11, 0.45), transparent 32%),
+      linear-gradient(
+        90deg,
+        #06080b 0%,
+        #06080b 30%,
+        rgba(6, 8, 11, 0.97) 38%,
+        rgba(6, 8, 11, 0.82) 48%,
+        rgba(6, 8, 11, 0.42) 58%,
+        transparent 70%
+      ),
+      linear-gradient(180deg, rgba(6, 8, 11, 0.55), transparent 18%, transparent 74%, rgba(6, 8, 11, 0.86));
+  }
+  .content {
+    position: absolute;
+    inset: 0;
+    animation: scene-out 1s linear both;
+  }
+  .hero {
+    position: absolute;
+    left: 148px;
+    top: 246px;
+    width: 820px;
+  }
+  .eyebrow {
+    display: flex;
+    align-items: center;
+    gap: 18px;
+    margin-bottom: 52px;
+    color: var(--accent);
+    font-size: 19px;
+    font-weight: 600;
+    letter-spacing: 0.22em;
+    text-transform: uppercase;
+    animation: rise-small 1s ease-out both;
+  }
+  .eyebrow::before {
+    content: "";
+    width: 36px;
+    height: 1px;
+    background: var(--accent);
+    box-shadow: 0 0 12px var(--accent);
+  }
+  .headline {
+    margin: 0;
+    color: var(--paper);
+  }
+  .line {
+    display: block;
+    overflow: hidden;
+    padding-bottom: 0.04em;
+  }
+  .line-one {
+    font-size: 108px;
+    line-height: 0.92;
+    font-weight: 660;
+    letter-spacing: -0.055em;
+  }
+  .line-one span {
+    display: inline-block;
+    animation: line-up 1s cubic-bezier(0.16, 1, 0.3, 1) both;
+  }
+  .line-two {
+    margin-top: 4px;
+    font-size: 174px;
+    line-height: 0.86;
+    letter-spacing: -0.02em;
+  }
+  .line-two span {
+    display: inline-block;
+    animation: line-up 1s cubic-bezier(0.16, 1, 0.3, 1) both;
+  }
+  .note {
+    margin: 46px 0 0;
+    max-width: 680px;
+    color: #9ca8a1;
+    font-size: 31px;
+    line-height: 1.5;
+    letter-spacing: -0.01em;
+    animation: rise-in 1s ease-out both;
+  }
+  .badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 12px;
+    margin-top: 44px;
+    padding: 12px 16px;
+    border: 1px solid rgba(184, 243, 107, 0.24);
+    border-radius: 2px;
+    color: var(--accent);
+    font-size: 14px;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+    animation: rise-small 1s ease-out both;
+  }
+  .badge::before {
+    content: "";
+    width: 6px;
+    height: 6px;
+    background: var(--accent);
+    box-shadow: 0 0 10px var(--accent);
+  }
+  .spec {
+    position: absolute;
+    left: 148px;
+    right: 148px;
+    bottom: 142px;
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
+    gap: 48px;
+    color: var(--muted-strong);
+    font-size: 15px;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.9);
+    animation: rise-small 1s ease-out both;
+  }
+  .spec::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: -24px;
+    height: 1px;
+    background: linear-gradient(90deg, rgba(242, 245, 238, 0.24), rgba(242, 245, 238, 0.06) 68%, transparent);
+  }
+  .spec b {
+    color: var(--paper);
+    font-weight: 500;
+  }
+  .spec-tags {
+    display: flex;
+    align-items: center;
+    gap: 30px;
+  }
+  .spec-tags span {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+  .spec-tags span::before {
+    content: "";
+    width: 5px;
+    height: 5px;
+    background: var(--accent);
+  }
+</style>
+<fy-composition duration-in-frames="330">
+  <div class="scene">
+    <div
+      class="stage"
+      data-fy-anim-start="0"
+      data-fy-anim-duration="80"
+      data-fy-anim-easing="cubic-bezier(0.16, 1, 0.3, 1)"
+    >
+      <div class="halo"></div>
+      <div class="orbit-outer"></div>
+      <div class="orbit"></div>
+      <canvas id="lattice" width="1920" height="1080"></canvas>
+    </div>
+    <div class="scrim"></div>
+    <div class="content" data-fy-anim-start="288" data-fy-anim-duration="30" data-fy-anim-easing="linear">
+      <div class="hero">
+        <div class="eyebrow mono" data-fy-anim-start="28" data-fy-anim-duration="44" data-fy-anim-easing="ease-out">
+          <span data-fy-text="eyebrow"></span>
+        </div>
+        <h1 class="headline">
+          <span class="line line-one">
+            <span
+              data-fy-text="lineOne"
+              data-fy-anim-start="40"
+              data-fy-anim-duration="64"
+              data-fy-anim-easing="cubic-bezier(0.16, 1, 0.3, 1)"
+            ></span>
+          </span>
+          <span class="line line-two">
+            <span
+              class="serif accent"
+              data-fy-text="lineTwo"
+              data-fy-anim-start="60"
+              data-fy-anim-duration="76"
+              data-fy-anim-easing="cubic-bezier(0.16, 1, 0.3, 1)"
+            ></span>
+          </span>
+        </h1>
+        <p
+          class="note"
+          data-fy-text="note"
+          data-fy-anim-start="92"
+          data-fy-anim-duration="56"
+          data-fy-anim-easing="ease-out"
+        ></p>
+        <div class="badge mono" data-fy-anim-start="120" data-fy-anim-duration="44" data-fy-anim-easing="ease-out">
+          <span data-fy-text="badge"></span>
+        </div>
+      </div>
+
+      <div class="spec mono" data-fy-anim-start="128" data-fy-anim-duration="44" data-fy-anim-easing="ease-out">
+        <div><b>f(frame) → pixels</b> &nbsp;·&nbsp; no drift, no guesswork</div>
+        <div class="spec-tags">
+          <span>Canvas 2D</span>
+          <span>Seek-safe</span>
+          <span>± 0 px</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</fy-composition>
+
+<script type="text/fy-controller" src="./lattice.controller.js"></script>