frameyard 0.8.0 → 0.9.0

package/examples/intro/compositions/theme.css

@@ -0,0 +1,218 @@
+:root {
+  color-scheme: dark;
+  --paper: #f2f5ee;
+  --muted: #8b9892;
+  --muted-strong: #b8c2bc;
+  --line: rgba(238, 245, 235, 0.15);
+  --line-strong: rgba(238, 245, 235, 0.28);
+  --accent: var(--fy-prop-accent, #b8f36b);
+  --accent-soft: rgba(184, 243, 107, 0.16);
+  --ink: #06080b;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body,
+fy-composition {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  background: transparent;
+}
+
+fy-composition {
+  display: block;
+  overflow: hidden;
+}
+
+body {
+  -webkit-font-smoothing: antialiased;
+  text-rendering: geometricPrecision;
+}
+
+.scene {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background: var(--ink);
+  color: var(--paper);
+  font-family: "Figtree", ui-sans-serif, system-ui, sans-serif;
+  font-weight: 400;
+}
+
+.mono {
+  font-family: "Space Mono", ui-monospace, "SFMono-Regular", monospace;
+  font-variant-numeric: tabular-nums;
+  font-feature-settings: "zero" 1;
+}
+
+.serif {
+  font-family: "Instrument Serif", Georgia, "Times New Roman", serif;
+  font-style: italic;
+  font-weight: 400;
+}
+
+.accent {
+  color: var(--accent);
+}
+
+.dim {
+  color: var(--muted);
+}
+
+.hairline {
+  height: 1px;
+  background: var(--line);
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes scene-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes rise-in {
+  from {
+    opacity: 0;
+    transform: translateY(34px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes rise-small {
+  from {
+    opacity: 0;
+    transform: translateY(16px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes line-up {
+  from {
+    transform: translateY(108%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes line-down {
+  from {
+    transform: translateY(-108%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes wipe-right {
+  from {
+    clip-path: inset(0 100% 0 0);
+  }
+  to {
+    clip-path: inset(0 0 0 0);
+  }
+}
+
+@keyframes wipe-left {
+  from {
+    clip-path: inset(0 0 0 100%);
+  }
+  to {
+    clip-path: inset(0 0 0 0);
+  }
+}
+
+@keyframes draw-x {
+  from {
+    transform: scaleX(0);
+  }
+  to {
+    transform: scaleX(1);
+  }
+}
+
+@keyframes draw-y {
+  from {
+    transform: scaleY(0);
+  }
+  to {
+    transform: scaleY(1);
+  }
+}
+
+@keyframes pop-in {
+  from {
+    opacity: 0;
+    transform: scale(0.82);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes card-in {
+  from {
+    opacity: 0;
+    transform: translateX(74px) scale(0.97);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0) scale(1);
+  }
+}
+
+@keyframes scan-down {
+  from {
+    transform: translateY(-120%);
+  }
+  to {
+    transform: translateY(120%);
+  }
+}
+
+@keyframes drift {
+  0%,
+  100% {
+    transform: translate3d(0, 0, 0);
+  }
+  50% {
+    transform: translate3d(0, -10px, 0);
+  }
+}
+
+@keyframes glow-pulse {
+  0%,
+  100% {
+    opacity: 0.55;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.9;
+    transform: scale(1.06);
+  }
+}

package/examples/intro/fy.config.js

@@ -0,0 +1,13 @@
+export default {
+  format: { width: 1920, height: 1080, fps: 60 },
+  compositions: {
+    opening: "./compositions/opening.html",
+    studio: "./compositions/studio.html",
+    lattice: "./compositions/lattice.html",
+    brand: "./compositions/brand.html",
+    chrome: "./compositions/chrome.html",
+  },
+  timelines: {
+    intro: "./timelines/intro.timeline.json",
+  },
+};

package/examples/intro/fy.fonts.json

@@ -0,0 +1,100 @@
+{
+  "version": 1,
+  "fonts": [
+    {
+      "id": "figtree",
+      "family": "Figtree",
+      "provider": "fontsource",
+      "providerId": "figtree",
+      "providerVersion": "5.3.0",
+      "license": {
+        "type": "OFL-1.1",
+        "file": "assets/fonts/figtree/LICENSE.txt",
+        "attribution": "Copyright 2022 The Figtree Project Authors (https://github.com/erikdkennedy/figtree) Figtree-Italic[wght].ttf: Copyright 2022 The Figtree Project Authors (https://github.com/erikdkennedy/figtree)"
+      },
+      "variable": true,
+      "axes": {
+        "wght": {
+          "min": 300,
+          "max": 900,
+          "default": 400
+        }
+      },
+      "files": [
+        {
+          "path": "assets/fonts/figtree/figtree-latin-wght-normal.woff2",
+          "subset": "latin",
+          "style": "normal",
+          "weight": {
+            "min": 300,
+            "max": 900
+          },
+          "format": "woff2",
+          "unicodeRange": "U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD",
+          "sha256": "4ba7d3d096695818fe0686be4f1e82c6b05134e18a22260336130335027462dd",
+          "bytes": 20156,
+          "source": "https://cdn.jsdelivr.net/fontsource/fonts/figtree:vf@5.3.0/latin-wght-normal.woff2"
+        }
+      ]
+    },
+    {
+      "id": "instrument-serif",
+      "family": "Instrument Serif",
+      "provider": "fontsource",
+      "providerId": "instrument-serif",
+      "providerVersion": "5.3.0",
+      "license": {
+        "type": "OFL-1.1",
+        "file": "assets/fonts/instrument-serif/LICENSE.txt"
+      },
+      "files": [
+        {
+          "path": "assets/fonts/instrument-serif/instrument-serif-latin-400-italic.woff2",
+          "subset": "latin",
+          "style": "italic",
+          "weight": 400,
+          "format": "woff2",
+          "unicodeRange": "U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD",
+          "sha256": "5a51946dfffa82972bc98745359c46761515641fda557c25116459a9f83da4a7",
+          "bytes": 22128,
+          "source": "https://cdn.jsdelivr.net/fontsource/fonts/instrument-serif@5.3.0/latin-400-italic.woff2"
+        }
+      ]
+    },
+    {
+      "id": "space-mono",
+      "family": "Space Mono",
+      "provider": "fontsource",
+      "providerId": "space-mono",
+      "providerVersion": "5.3.0",
+      "license": {
+        "type": "OFL-1.1",
+        "file": "assets/fonts/space-mono/LICENSE.txt"
+      },
+      "files": [
+        {
+          "path": "assets/fonts/space-mono/space-mono-latin-400-normal.woff2",
+          "subset": "latin",
+          "style": "normal",
+          "weight": 400,
+          "format": "woff2",
+          "unicodeRange": "U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD",
+          "sha256": "fb4a81a2d0a893e5c38c394a7e716a1cef0b24610a0af49c96f6d529bd66bf2b",
+          "bytes": 16520,
+          "source": "https://cdn.jsdelivr.net/fontsource/fonts/space-mono@5.3.0/latin-400-normal.woff2"
+        },
+        {
+          "path": "assets/fonts/space-mono/space-mono-latin-700-normal.woff2",
+          "subset": "latin",
+          "style": "normal",
+          "weight": 700,
+          "format": "woff2",
+          "unicodeRange": "U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD",
+          "sha256": "2d46bd159b53f55c41167a4f1540a074649464194fd1e416f5b4694a6c0f282c",
+          "bytes": 16724,
+          "source": "https://cdn.jsdelivr.net/fontsource/fonts/space-mono@5.3.0/latin-700-normal.woff2"
+        }
+      ]
+    }
+  ]
+}

package/examples/intro/scripts/make-grain.mjs

@@ -0,0 +1,79 @@
+#!/usr/bin/env node
+// Generates the deterministic film grain tile used by the chrome overlay.
+// The PNG encoder is intentionally tiny: the repository does not ship an
+// image-processing dependency just for a 256 × 256 texture.
+
+import { deflateSync } from "node:zlib";
+import { mkdirSync, writeFileSync } from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const here = path.dirname(fileURLToPath(import.meta.url));
+const out = process.argv[2] ? path.resolve(process.argv[2]) : path.join(here, "..", "assets", "grain.png");
+const size = 256;
+
+let seed = 0x1a2b3c4d;
+function random() {
+  seed = (Math.imul(seed, 1664525) + 1013904223) >>> 0;
+  return seed / 0x100000000;
+}
+
+const rgba = Buffer.alloc(size * size * 4);
+for (let y = 0; y < size; y += 1) {
+  for (let x = 0; x < size; x += 1) {
+    const fine = random();
+    const cluster = random();
+    const value = Math.round(118 + (fine - 0.5) * 56 + (cluster - 0.5) * 22);
+    const offset = (y * size + x) * 4;
+    rgba[offset] = value;
+    rgba[offset + 1] = value;
+    rgba[offset + 2] = value;
+    rgba[offset + 3] = 255;
+  }
+}
+
+const table = new Uint32Array(256);
+for (let index = 0; index < 256; index += 1) {
+  let value = index;
+  for (let bit = 0; bit < 8; bit += 1) {
+    value = value & 1 ? 0xedb88320 ^ (value >>> 1) : value >>> 1;
+  }
+  table[index] = value >>> 0;
+}
+
+function crc32(buffer) {
+  let value = 0xffffffff;
+  for (const byte of buffer) {
+    value = table[(value ^ byte) & 0xff] ^ (value >>> 8);
+  }
+  return (value ^ 0xffffffff) >>> 0;
+}
+
+function chunk(type, data) {
+  const name = Buffer.from(type, "ascii");
+  const length = Buffer.alloc(4);
+  length.writeUInt32BE(data.length, 0);
+  const crc = Buffer.alloc(4);
+  crc.writeUInt32BE(crc32(Buffer.concat([name, data])), 0);
+  return Buffer.concat([length, name, data, crc]);
+}
+
+const header = Buffer.alloc(13);
+header.writeUInt32BE(size, 0);
+header.writeUInt32BE(size, 4);
+header[8] = 8;
+header[9] = 6;
+header[10] = 0;
+header[11] = 0;
+header[12] = 0;
+
+const png = Buffer.concat([
+  Buffer.from([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a]),
+  chunk("IHDR", header),
+  chunk("IDAT", deflateSync(rgba, { level: 9 })),
+  chunk("IEND", Buffer.alloc(0)),
+]);
+
+mkdirSync(path.dirname(out), { recursive: true });
+writeFileSync(out, png);
+console.log(`wrote ${path.relative(process.cwd(), out)} (${png.length} bytes)`);