diff --git a/.gitattributes b/.gitattributes index ab25dca7a5..4ec6f46553 100644 --- a/.gitattributes +++ b/.gitattributes @@ -16,6 +16,10 @@ packages/producer/tests/**/*.mov filter=lfs diff=lfs merge=lfs -text packages/producer/tests/**/*.webm filter=lfs diff=lfs merge=lfs -text packages/producer/tests/**/*.png filter=lfs diff=lfs merge=lfs -text +# High-resolution example outputs and generated sprite sheets. +examples/boy-meets-girl-symbols/renders/*.mp4 filter=lfs diff=lfs merge=lfs -text +examples/boy-meets-girl-symbols/assets/sf/figure-walk-sheet/*.png filter=lfs diff=lfs merge=lfs -text + # ONNX models must ALWAYS use LFS regardless of location: a 31 MB ppmattingv2 # model was once committed raw into skills/ then deleted — but a raw commit # lives in history forever. No path in the repo legitimately ships a raw .onnx. diff --git a/.gitignore b/.gitignore index 77f369bd90..28f6630595 100644 --- a/.gitignore +++ b/.gitignore @@ -87,6 +87,8 @@ examples/* !examples/k8s-jobs/** !examples/gcp-cloud-run !examples/gcp-cloud-run/** +!examples/boy-meets-girl-symbols +!examples/boy-meets-girl-symbols/** # …but never the local smoke run's build/render artifacts. examples/gcp-cloud-run/scripts/gcp-smoke-artifacts/ packages/studio/data/ diff --git a/examples/boy-meets-girl-symbols/README.md b/examples/boy-meets-girl-symbols/README.md new file mode 100644 index 0000000000..5c07207658 --- /dev/null +++ b/examples/boy-meets-girl-symbols/README.md @@ -0,0 +1,54 @@ +# Boy Meets Girl Symbols + +A 12-second Hyperframes scene built from generated SF Symbol assets. + +## Source + +- Composition: `index.html` +- Generated SF Symbol assets: `assets/sf/` +- Output target: 4K landscape, 60fps, high-quality MP4. +- Main walk cycle: 60-frame, 30fps, 2x source-density sprite sheet. + +## Preview + +From the repo root: + +```bash +npx hyperframes preview --port 3017 +``` + +Open: + +```text +http://localhost:3017/#project/boy-meets-girl-symbols +``` + +## Verify + +```bash +npx hyperframes lint examples/boy-meets-girl-symbols +npx hyperframes validate examples/boy-meets-girl-symbols +npx hyperframes inspect examples/boy-meets-girl-symbols --samples 15 +``` + +## Render + +From the repo root: + +```bash +npx hyperframes render examples/boy-meets-girl-symbols \ + --quality high \ + --fps 60 \ + --resolution landscape-4k \ + --output examples/boy-meets-girl-symbols/renders/boy-meets-girl-symbols-4k60.mp4 +``` + +Confirm the encoded file: + +```bash +ffprobe -v error \ + -show_entries format=duration,size \ + -show_entries stream=width,height,r_frame_rate,codec_name \ + -of json \ + examples/boy-meets-girl-symbols/renders/boy-meets-girl-symbols-4k60.mp4 +``` diff --git a/examples/boy-meets-girl-symbols/assets/g/pink-wave.png b/examples/boy-meets-girl-symbols/assets/g/pink-wave.png new file mode 100644 index 0000000000..f23c2de2ef Binary files /dev/null and b/examples/boy-meets-girl-symbols/assets/g/pink-wave.png differ diff --git a/examples/boy-meets-girl-symbols/assets/scene/cloud-one.png b/examples/boy-meets-girl-symbols/assets/scene/cloud-one.png new file mode 100644 index 0000000000..0050a707be Binary files /dev/null and b/examples/boy-meets-girl-symbols/assets/scene/cloud-one.png differ diff --git a/examples/boy-meets-girl-symbols/assets/scene/cloud-two.png b/examples/boy-meets-girl-symbols/assets/scene/cloud-two.png new file mode 100644 index 0000000000..0050a707be Binary files /dev/null and b/examples/boy-meets-girl-symbols/assets/scene/cloud-two.png differ diff --git a/examples/boy-meets-girl-symbols/assets/scene/heart-left.png b/examples/boy-meets-girl-symbols/assets/scene/heart-left.png new file mode 100644 index 0000000000..f66cb7d594 Binary files /dev/null and b/examples/boy-meets-girl-symbols/assets/scene/heart-left.png differ diff --git a/examples/boy-meets-girl-symbols/assets/scene/heart-main.png b/examples/boy-meets-girl-symbols/assets/scene/heart-main.png new file mode 100644 index 0000000000..f66cb7d594 Binary files /dev/null and b/examples/boy-meets-girl-symbols/assets/scene/heart-main.png differ diff --git a/examples/boy-meets-girl-symbols/assets/scene/heart-right.png b/examples/boy-meets-girl-symbols/assets/scene/heart-right.png new file mode 100644 index 0000000000..f66cb7d594 Binary files /dev/null and b/examples/boy-meets-girl-symbols/assets/scene/heart-right.png differ diff --git a/examples/boy-meets-girl-symbols/assets/scene/leaf-one.png b/examples/boy-meets-girl-symbols/assets/scene/leaf-one.png new file mode 100644 index 0000000000..45da57c3e8 Binary files /dev/null and b/examples/boy-meets-girl-symbols/assets/scene/leaf-one.png differ diff --git a/examples/boy-meets-girl-symbols/assets/scene/leaf-three.png b/examples/boy-meets-girl-symbols/assets/scene/leaf-three.png new file mode 100644 index 0000000000..45da57c3e8 Binary files /dev/null and b/examples/boy-meets-girl-symbols/assets/scene/leaf-three.png differ diff --git a/examples/boy-meets-girl-symbols/assets/scene/leaf-two.png b/examples/boy-meets-girl-symbols/assets/scene/leaf-two.png new file mode 100644 index 0000000000..45da57c3e8 Binary files /dev/null and b/examples/boy-meets-girl-symbols/assets/scene/leaf-two.png differ diff --git a/examples/boy-meets-girl-symbols/assets/scene/sparkle-one.png b/examples/boy-meets-girl-symbols/assets/scene/sparkle-one.png new file mode 100644 index 0000000000..3ac6e03ab7 Binary files /dev/null and b/examples/boy-meets-girl-symbols/assets/scene/sparkle-one.png differ diff --git a/examples/boy-meets-girl-symbols/assets/scene/sparkle-three.png b/examples/boy-meets-girl-symbols/assets/scene/sparkle-three.png new file mode 100644 index 0000000000..3ac6e03ab7 Binary files /dev/null and b/examples/boy-meets-girl-symbols/assets/scene/sparkle-three.png differ diff --git a/examples/boy-meets-girl-symbols/assets/scene/sparkle-two.png b/examples/boy-meets-girl-symbols/assets/scene/sparkle-two.png new file mode 100644 index 0000000000..3ac6e03ab7 Binary files /dev/null and b/examples/boy-meets-girl-symbols/assets/scene/sparkle-two.png differ diff --git a/examples/boy-meets-girl-symbols/assets/scene/tree-left.png b/examples/boy-meets-girl-symbols/assets/scene/tree-left.png new file mode 100644 index 0000000000..d80f3ce20c Binary files /dev/null and b/examples/boy-meets-girl-symbols/assets/scene/tree-left.png differ diff --git a/examples/boy-meets-girl-symbols/assets/scene/tree-right.png b/examples/boy-meets-girl-symbols/assets/scene/tree-right.png new file mode 100644 index 0000000000..d80f3ce20c Binary files /dev/null and b/examples/boy-meets-girl-symbols/assets/scene/tree-right.png differ diff --git a/examples/boy-meets-girl-symbols/assets/sf/bubbles/bubble.left.and.bubble.right.fill-spin-frames/bubble.left.and.bubble.right.fill-spin-000.png b/examples/boy-meets-girl-symbols/assets/sf/bubbles/bubble.left.and.bubble.right.fill-spin-frames/bubble.left.and.bubble.right.fill-spin-000.png new file mode 100644 index 0000000000..8de8642a5e Binary files /dev/null and b/examples/boy-meets-girl-symbols/assets/sf/bubbles/bubble.left.and.bubble.right.fill-spin-frames/bubble.left.and.bubble.right.fill-spin-000.png differ diff --git a/examples/boy-meets-girl-symbols/assets/sf/bubbles/bubble.left.and.bubble.right.fill-spin-frames/bubble.left.and.bubble.right.fill-spin-001.png b/examples/boy-meets-girl-symbols/assets/sf/bubbles/bubble.left.and.bubble.right.fill-spin-frames/bubble.left.and.bubble.right.fill-spin-001.png new file mode 100644 index 0000000000..1e5e9a61a0 Binary files /dev/null and b/examples/boy-meets-girl-symbols/assets/sf/bubbles/bubble.left.and.bubble.right.fill-spin-frames/bubble.left.and.bubble.right.fill-spin-001.png differ diff --git a/examples/boy-meets-girl-symbols/assets/sf/cloud/cloud.fill-spin-frames/cloud.fill-spin-000.png b/examples/boy-meets-girl-symbols/assets/sf/cloud/cloud.fill-spin-frames/cloud.fill-spin-000.png new file mode 100644 index 0000000000..0050a707be Binary files /dev/null and b/examples/boy-meets-girl-symbols/assets/sf/cloud/cloud.fill-spin-frames/cloud.fill-spin-000.png differ diff --git a/examples/boy-meets-girl-symbols/assets/sf/cloud/cloud.fill-spin-frames/cloud.fill-spin-001.png b/examples/boy-meets-girl-symbols/assets/sf/cloud/cloud.fill-spin-frames/cloud.fill-spin-001.png new file mode 100644 index 0000000000..dc61301e05 Binary files /dev/null and b/examples/boy-meets-girl-symbols/assets/sf/cloud/cloud.fill-spin-frames/cloud.fill-spin-001.png differ diff --git a/examples/boy-meets-girl-symbols/assets/sf/figure-walk-sheet/figure.walk-walk-atlas.json b/examples/boy-meets-girl-symbols/assets/sf/figure-walk-sheet/figure.walk-walk-atlas.json new file mode 100644 index 0000000000..d812421cea --- /dev/null +++ b/examples/boy-meets-girl-symbols/assets/sf/figure-walk-sheet/figure.walk-walk-atlas.json @@ -0,0 +1,614 @@ +{ + "columns": 30, + "effect": "walk", + "frameCount": 60, + "frameHeight": 720, + "frameWidth": 720, + "frames": [ + { + "durationMs": 33, + "height": 720, + "index": 0, + "pivotX": 0.5, + "pivotY": 0.5, + "width": 720, + "x": 0, + "y": 0 + }, + { + "durationMs": 33, + "height": 720, + "index": 1, + "pivotX": 0.5, + "pivotY": 0.5, + "width": 720, + "x": 720, + "y": 0 + }, + { + "durationMs": 33, + "height": 720, + "index": 2, + "pivotX": 0.5, + "pivotY": 0.5, + "width": 720, + "x": 1440, + "y": 0 + }, + { + "durationMs": 33, + "height": 720, + "index": 3, + "pivotX": 0.5, + "pivotY": 0.5, + "width": 720, + "x": 2160, + "y": 0 + }, + { + "durationMs": 33, + "height": 720, + "index": 4, + "pivotX": 0.5, + "pivotY": 0.5, + "width": 720, + "x": 2880, + "y": 0 + }, + { + "durationMs": 33, + "height": 720, + "index": 5, + "pivotX": 0.5, + "pivotY": 0.5, + "width": 720, + "x": 3600, + "y": 0 + }, + { + "durationMs": 33, + "height": 720, + "index": 6, + "pivotX": 0.5, + "pivotY": 0.5, + "width": 720, + "x": 4320, + "y": 0 + }, + { + "durationMs": 33, + "height": 720, + "index": 7, + "pivotX": 0.5, + "pivotY": 0.5, + "width": 720, + "x": 5040, + "y": 0 + }, + { + "durationMs": 33, + "height": 720, + "index": 8, + "pivotX": 0.5, + "pivotY": 0.5, + "width": 720, + "x": 5760, + "y": 0 + }, + { + "durationMs": 33, + "height": 720, + "index": 9, + "pivotX": 0.5, + "pivotY": 0.5, + "width": 720, + "x": 6480, + "y": 0 + }, + { + "durationMs": 33, + "height": 720, + "index": 10, + "pivotX": 0.5, + "pivotY": 0.5, + "width": 720, + "x": 7200, + "y": 0 + }, + { + "durationMs": 33, + "height": 720, + "index": 11, + "pivotX": 0.5, + "pivotY": 0.5, + "width": 720, + "x": 7920, + "y": 0 + }, + { + "durationMs": 33, + "height": 720, + "index": 12, + "pivotX": 0.5, + "pivotY": 0.5, + "width": 720, + "x": 8640, + "y": 0 + }, + { + "durationMs": 33, + "height": 720, + "index": 13, + "pivotX": 0.5, + "pivotY": 0.5, + "width": 720, + "x": 9360, + "y": 0 + }, + { + "durationMs": 33, + "height": 720, + "index": 14, + "pivotX": 0.5, + "pivotY": 0.5, + "width": 720, + "x": 10080, + "y": 0 + }, + { + "durationMs": 33, + "height": 720, + "index": 15, + "pivotX": 0.5, + "pivotY": 0.5, + "width": 720, + "x": 10800, + "y": 0 + }, + { + "durationMs": 33, + "height": 720, + "index": 16, + "pivotX": 0.5, + "pivotY": 0.5, + "width": 720, + "x": 11520, + "y": 0 + }, + { + "durationMs": 33, + "height": 720, + "index": 17, + "pivotX": 0.5, + "pivotY": 0.5, + "width": 720, + "x": 12240, + "y": 0 + }, + { + "durationMs": 33, + "height": 720, + "index": 18, + "pivotX": 0.5, + "pivotY": 0.5, + "width": 720, + "x": 12960, + "y": 0 + }, + { + "durationMs": 33, + "height": 720, + "index": 19, + "pivotX": 0.5, + "pivotY": 0.5, + "width": 720, + "x": 13680, + "y": 0 + }, + { + "durationMs": 33, + "height": 720, + "index": 20, + "pivotX": 0.5, + "pivotY": 0.5, + "width": 720, + "x": 14400, + "y": 0 + }, + { + "durationMs": 33, + "height": 720, + "index": 21, + "pivotX": 0.5, + "pivotY": 0.5, + "width": 720, + "x": 15120, + "y": 0 + }, + { + "durationMs": 33, + "height": 720, + "index": 22, + "pivotX": 0.5, + "pivotY": 0.5, + "width": 720, + "x": 15840, + "y": 0 + }, + { + "durationMs": 33, + "height": 720, + "index": 23, + "pivotX": 0.5, + "pivotY": 0.5, + "width": 720, + "x": 16560, + "y": 0 + }, + { + "durationMs": 33, + "height": 720, + "index": 24, + "pivotX": 0.5, + "pivotY": 0.5, + "width": 720, + "x": 17280, + "y": 0 + }, + { + "durationMs": 33, + "height": 720, + "index": 25, + "pivotX": 0.5, + "pivotY": 0.5, + "width": 720, + "x": 18000, + "y": 0 + }, + { + "durationMs": 33, + "height": 720, + "index": 26, + "pivotX": 0.5, + "pivotY": 0.5, + "width": 720, + "x": 18720, + "y": 0 + }, + { + "durationMs": 33, + "height": 720, + "index": 27, + "pivotX": 0.5, + "pivotY": 0.5, + "width": 720, + "x": 19440, + "y": 0 + }, + { + "durationMs": 33, + "height": 720, + "index": 28, + "pivotX": 0.5, + "pivotY": 0.5, + "width": 720, + "x": 20160, + "y": 0 + }, + { + "durationMs": 33, + "height": 720, + "index": 29, + "pivotX": 0.5, + "pivotY": 0.5, + "width": 720, + "x": 20880, + "y": 0 + }, + { + "durationMs": 33, + "height": 720, + "index": 30, + "pivotX": 0.5, + "pivotY": 0.5, + "width": 720, + "x": 0, + "y": 720 + }, + { + "durationMs": 33, + "height": 720, + "index": 31, + "pivotX": 0.5, + "pivotY": 0.5, + "width": 720, + "x": 720, + "y": 720 + }, + { + "durationMs": 33, + "height": 720, + "index": 32, + "pivotX": 0.5, + "pivotY": 0.5, + "width": 720, + "x": 1440, + "y": 720 + }, + { + "durationMs": 33, + "height": 720, + "index": 33, + "pivotX": 0.5, + "pivotY": 0.5, + "width": 720, + "x": 2160, + "y": 720 + }, + { + "durationMs": 33, + "height": 720, + "index": 34, + "pivotX": 0.5, + "pivotY": 0.5, + "width": 720, + "x": 2880, + "y": 720 + }, + { + "durationMs": 33, + "height": 720, + "index": 35, + "pivotX": 0.5, + "pivotY": 0.5, + "width": 720, + "x": 3600, + "y": 720 + }, + { + "durationMs": 33, + "height": 720, + "index": 36, + "pivotX": 0.5, + "pivotY": 0.5, + "width": 720, + "x": 4320, + "y": 720 + }, + { + "durationMs": 33, + "height": 720, + "index": 37, + "pivotX": 0.5, + "pivotY": 0.5, + "width": 720, + "x": 5040, + "y": 720 + }, + { + "durationMs": 33, + "height": 720, + "index": 38, + "pivotX": 0.5, + "pivotY": 0.5, + "width": 720, + "x": 5760, + "y": 720 + }, + { + "durationMs": 33, + "height": 720, + "index": 39, + "pivotX": 0.5, + "pivotY": 0.5, + "width": 720, + "x": 6480, + "y": 720 + }, + { + "durationMs": 33, + "height": 720, + "index": 40, + "pivotX": 0.5, + "pivotY": 0.5, + "width": 720, + "x": 7200, + "y": 720 + }, + { + "durationMs": 33, + "height": 720, + "index": 41, + "pivotX": 0.5, + "pivotY": 0.5, + "width": 720, + "x": 7920, + "y": 720 + }, + { + "durationMs": 33, + "height": 720, + "index": 42, + "pivotX": 0.5, + "pivotY": 0.5, + "width": 720, + "x": 8640, + "y": 720 + }, + { + "durationMs": 33, + "height": 720, + "index": 43, + "pivotX": 0.5, + "pivotY": 0.5, + "width": 720, + "x": 9360, + "y": 720 + }, + { + "durationMs": 33, + "height": 720, + "index": 44, + "pivotX": 0.5, + "pivotY": 0.5, + "width": 720, + "x": 10080, + "y": 720 + }, + { + "durationMs": 33, + "height": 720, + "index": 45, + "pivotX": 0.5, + "pivotY": 0.5, + "width": 720, + "x": 10800, + "y": 720 + }, + { + "durationMs": 33, + "height": 720, + "index": 46, + "pivotX": 0.5, + "pivotY": 0.5, + "width": 720, + "x": 11520, + "y": 720 + }, + { + "durationMs": 33, + "height": 720, + "index": 47, + "pivotX": 0.5, + "pivotY": 0.5, + "width": 720, + "x": 12240, + "y": 720 + }, + { + "durationMs": 33, + "height": 720, + "index": 48, + "pivotX": 0.5, + "pivotY": 0.5, + "width": 720, + "x": 12960, + "y": 720 + }, + { + "durationMs": 33, + "height": 720, + "index": 49, + "pivotX": 0.5, + "pivotY": 0.5, + "width": 720, + "x": 13680, + "y": 720 + }, + { + "durationMs": 33, + "height": 720, + "index": 50, + "pivotX": 0.5, + "pivotY": 0.5, + "width": 720, + "x": 14400, + "y": 720 + }, + { + "durationMs": 33, + "height": 720, + "index": 51, + "pivotX": 0.5, + "pivotY": 0.5, + "width": 720, + "x": 15120, + "y": 720 + }, + { + "durationMs": 33, + "height": 720, + "index": 52, + "pivotX": 0.5, + "pivotY": 0.5, + "width": 720, + "x": 15840, + "y": 720 + }, + { + "durationMs": 33, + "height": 720, + "index": 53, + "pivotX": 0.5, + "pivotY": 0.5, + "width": 720, + "x": 16560, + "y": 720 + }, + { + "durationMs": 33, + "height": 720, + "index": 54, + "pivotX": 0.5, + "pivotY": 0.5, + "width": 720, + "x": 17280, + "y": 720 + }, + { + "durationMs": 33, + "height": 720, + "index": 55, + "pivotX": 0.5, + "pivotY": 0.5, + "width": 720, + "x": 18000, + "y": 720 + }, + { + "durationMs": 33, + "height": 720, + "index": 56, + "pivotX": 0.5, + "pivotY": 0.5, + "width": 720, + "x": 18720, + "y": 720 + }, + { + "durationMs": 33, + "height": 720, + "index": 57, + "pivotX": 0.5, + "pivotY": 0.5, + "width": 720, + "x": 19440, + "y": 720 + }, + { + "durationMs": 33, + "height": 720, + "index": 58, + "pivotX": 0.5, + "pivotY": 0.5, + "width": 720, + "x": 20160, + "y": 720 + }, + { + "durationMs": 33, + "height": 720, + "index": 59, + "pivotX": 0.5, + "pivotY": 0.5, + "width": 720, + "x": 20880, + "y": 720 + } + ], + "framesPerSecond": 30, + "image": "figure.walk-walk-sheet.png", + "loop": true, + "rows": 2, + "symbolName": "figure.walk" +} diff --git a/examples/boy-meets-girl-symbols/assets/sf/figure-walk-sheet/figure.walk-walk-sheet.png b/examples/boy-meets-girl-symbols/assets/sf/figure-walk-sheet/figure.walk-walk-sheet.png new file mode 100644 index 0000000000..74c386d622 --- /dev/null +++ b/examples/boy-meets-girl-symbols/assets/sf/figure-walk-sheet/figure.walk-walk-sheet.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:c89a1c7172096628a44afc38e8c677bac5daeadb7aece3fb9b227fd115cf639c +size 1541683 diff --git a/examples/boy-meets-girl-symbols/assets/sf/figure-walk/figure.walk-walk-atlas.json b/examples/boy-meets-girl-symbols/assets/sf/figure-walk/figure.walk-walk-atlas.json new file mode 100644 index 0000000000..b428710a62 --- /dev/null +++ b/examples/boy-meets-girl-symbols/assets/sf/figure-walk/figure.walk-walk-atlas.json @@ -0,0 +1,254 @@ +{ + "columns": 6, + "effect": "walk", + "frameCount": 24, + "frameHeight": 256, + "frameWidth": 256, + "frames": [ + { + "durationMs": 83, + "height": 256, + "index": 0, + "pivotX": 0.5, + "pivotY": 0.5, + "width": 256, + "x": 0, + "y": 0 + }, + { + "durationMs": 83, + "height": 256, + "index": 1, + "pivotX": 0.5, + "pivotY": 0.5, + "width": 256, + "x": 256, + "y": 0 + }, + { + "durationMs": 83, + "height": 256, + "index": 2, + "pivotX": 0.5, + "pivotY": 0.5, + "width": 256, + "x": 512, + "y": 0 + }, + { + "durationMs": 83, + "height": 256, + "index": 3, + "pivotX": 0.5, + "pivotY": 0.5, + "width": 256, + "x": 768, + "y": 0 + }, + { + "durationMs": 83, + "height": 256, + "index": 4, + "pivotX": 0.5, + "pivotY": 0.5, + "width": 256, + "x": 1024, + "y": 0 + }, + { + "durationMs": 83, + "height": 256, + "index": 5, + "pivotX": 0.5, + "pivotY": 0.5, + "width": 256, + "x": 1280, + "y": 0 + }, + { + "durationMs": 83, + "height": 256, + "index": 6, + "pivotX": 0.5, + "pivotY": 0.5, + "width": 256, + "x": 0, + "y": 256 + }, + { + "durationMs": 83, + "height": 256, + "index": 7, + "pivotX": 0.5, + "pivotY": 0.5, + "width": 256, + "x": 256, + "y": 256 + }, + { + "durationMs": 83, + "height": 256, + "index": 8, + "pivotX": 0.5, + "pivotY": 0.5, + "width": 256, + "x": 512, + "y": 256 + }, + { + "durationMs": 83, + "height": 256, + "index": 9, + "pivotX": 0.5, + "pivotY": 0.5, + "width": 256, + "x": 768, + "y": 256 + }, + { + "durationMs": 83, + "height": 256, + "index": 10, + "pivotX": 0.5, + "pivotY": 0.5, + "width": 256, + "x": 1024, + "y": 256 + }, + { + "durationMs": 83, + "height": 256, + "index": 11, + "pivotX": 0.5, + "pivotY": 0.5, + "width": 256, + "x": 1280, + "y": 256 + }, + { + "durationMs": 83, + "height": 256, + "index": 12, + "pivotX": 0.5, + "pivotY": 0.5, + "width": 256, + "x": 0, + "y": 512 + }, + { + "durationMs": 83, + "height": 256, + "index": 13, + "pivotX": 0.5, + "pivotY": 0.5, + "width": 256, + "x": 256, + "y": 512 + }, + { + "durationMs": 83, + "height": 256, + "index": 14, + "pivotX": 0.5, + "pivotY": 0.5, + "width": 256, + "x": 512, + "y": 512 + }, + { + "durationMs": 83, + "height": 256, + "index": 15, + "pivotX": 0.5, + "pivotY": 0.5, + "width": 256, + "x": 768, + "y": 512 + }, + { + "durationMs": 83, + "height": 256, + "index": 16, + "pivotX": 0.5, + "pivotY": 0.5, + "width": 256, + "x": 1024, + "y": 512 + }, + { + "durationMs": 83, + "height": 256, + "index": 17, + "pivotX": 0.5, + "pivotY": 0.5, + "width": 256, + "x": 1280, + "y": 512 + }, + { + "durationMs": 83, + "height": 256, + "index": 18, + "pivotX": 0.5, + "pivotY": 0.5, + "width": 256, + "x": 0, + "y": 768 + }, + { + "durationMs": 83, + "height": 256, + "index": 19, + "pivotX": 0.5, + "pivotY": 0.5, + "width": 256, + "x": 256, + "y": 768 + }, + { + "durationMs": 83, + "height": 256, + "index": 20, + "pivotX": 0.5, + "pivotY": 0.5, + "width": 256, + "x": 512, + "y": 768 + }, + { + "durationMs": 83, + "height": 256, + "index": 21, + "pivotX": 0.5, + "pivotY": 0.5, + "width": 256, + "x": 768, + "y": 768 + }, + { + "durationMs": 83, + "height": 256, + "index": 22, + "pivotX": 0.5, + "pivotY": 0.5, + "width": 256, + "x": 1024, + "y": 768 + }, + { + "durationMs": 83, + "height": 256, + "index": 23, + "pivotX": 0.5, + "pivotY": 0.5, + "width": 256, + "x": 1280, + "y": 768 + } + ], + "framesPerSecond": 12, + "image": "figure.walk-walk-sheet.png", + "loop": true, + "rows": 4, + "symbolName": "figure.walk" +} diff --git a/examples/boy-meets-girl-symbols/assets/sf/figure-walk/figure.walk-walk-frames/figure.walk-walk-000.png b/examples/boy-meets-girl-symbols/assets/sf/figure-walk/figure.walk-walk-frames/figure.walk-walk-000.png new file mode 100644 index 0000000000..ae77b652f4 Binary files /dev/null and b/examples/boy-meets-girl-symbols/assets/sf/figure-walk/figure.walk-walk-frames/figure.walk-walk-000.png differ diff --git a/examples/boy-meets-girl-symbols/assets/sf/figure-walk/figure.walk-walk-frames/figure.walk-walk-001.png b/examples/boy-meets-girl-symbols/assets/sf/figure-walk/figure.walk-walk-frames/figure.walk-walk-001.png new file mode 100644 index 0000000000..39e9aeed30 Binary files /dev/null and b/examples/boy-meets-girl-symbols/assets/sf/figure-walk/figure.walk-walk-frames/figure.walk-walk-001.png differ diff --git a/examples/boy-meets-girl-symbols/assets/sf/figure-walk/figure.walk-walk-frames/figure.walk-walk-002.png b/examples/boy-meets-girl-symbols/assets/sf/figure-walk/figure.walk-walk-frames/figure.walk-walk-002.png new file mode 100644 index 0000000000..f72073a885 Binary files /dev/null and b/examples/boy-meets-girl-symbols/assets/sf/figure-walk/figure.walk-walk-frames/figure.walk-walk-002.png differ diff --git a/examples/boy-meets-girl-symbols/assets/sf/figure-walk/figure.walk-walk-frames/figure.walk-walk-003.png b/examples/boy-meets-girl-symbols/assets/sf/figure-walk/figure.walk-walk-frames/figure.walk-walk-003.png new file mode 100644 index 0000000000..7770ca3e3b Binary files /dev/null and b/examples/boy-meets-girl-symbols/assets/sf/figure-walk/figure.walk-walk-frames/figure.walk-walk-003.png differ diff --git a/examples/boy-meets-girl-symbols/assets/sf/figure-walk/figure.walk-walk-frames/figure.walk-walk-004.png b/examples/boy-meets-girl-symbols/assets/sf/figure-walk/figure.walk-walk-frames/figure.walk-walk-004.png new file mode 100644 index 0000000000..4e3ea0ba54 Binary files /dev/null and b/examples/boy-meets-girl-symbols/assets/sf/figure-walk/figure.walk-walk-frames/figure.walk-walk-004.png differ diff --git a/examples/boy-meets-girl-symbols/assets/sf/figure-walk/figure.walk-walk-frames/figure.walk-walk-005.png b/examples/boy-meets-girl-symbols/assets/sf/figure-walk/figure.walk-walk-frames/figure.walk-walk-005.png new file mode 100644 index 0000000000..7301cea6c2 Binary files /dev/null and b/examples/boy-meets-girl-symbols/assets/sf/figure-walk/figure.walk-walk-frames/figure.walk-walk-005.png differ diff --git a/examples/boy-meets-girl-symbols/assets/sf/figure-walk/figure.walk-walk-frames/figure.walk-walk-006.png b/examples/boy-meets-girl-symbols/assets/sf/figure-walk/figure.walk-walk-frames/figure.walk-walk-006.png new file mode 100644 index 0000000000..f6fc29bd8c Binary files /dev/null and b/examples/boy-meets-girl-symbols/assets/sf/figure-walk/figure.walk-walk-frames/figure.walk-walk-006.png differ diff --git a/examples/boy-meets-girl-symbols/assets/sf/figure-walk/figure.walk-walk-frames/figure.walk-walk-007.png b/examples/boy-meets-girl-symbols/assets/sf/figure-walk/figure.walk-walk-frames/figure.walk-walk-007.png new file mode 100644 index 0000000000..b6428f8633 Binary files /dev/null and b/examples/boy-meets-girl-symbols/assets/sf/figure-walk/figure.walk-walk-frames/figure.walk-walk-007.png differ diff --git a/examples/boy-meets-girl-symbols/assets/sf/figure-walk/figure.walk-walk-frames/figure.walk-walk-008.png b/examples/boy-meets-girl-symbols/assets/sf/figure-walk/figure.walk-walk-frames/figure.walk-walk-008.png new file mode 100644 index 0000000000..b357e42201 Binary files /dev/null and b/examples/boy-meets-girl-symbols/assets/sf/figure-walk/figure.walk-walk-frames/figure.walk-walk-008.png differ diff --git a/examples/boy-meets-girl-symbols/assets/sf/figure-walk/figure.walk-walk-frames/figure.walk-walk-009.png b/examples/boy-meets-girl-symbols/assets/sf/figure-walk/figure.walk-walk-frames/figure.walk-walk-009.png new file mode 100644 index 0000000000..5f2a1010fc Binary files /dev/null and b/examples/boy-meets-girl-symbols/assets/sf/figure-walk/figure.walk-walk-frames/figure.walk-walk-009.png differ diff --git a/examples/boy-meets-girl-symbols/assets/sf/figure-walk/figure.walk-walk-frames/figure.walk-walk-010.png b/examples/boy-meets-girl-symbols/assets/sf/figure-walk/figure.walk-walk-frames/figure.walk-walk-010.png new file mode 100644 index 0000000000..01af6df2a7 Binary files /dev/null and b/examples/boy-meets-girl-symbols/assets/sf/figure-walk/figure.walk-walk-frames/figure.walk-walk-010.png differ diff --git a/examples/boy-meets-girl-symbols/assets/sf/figure-walk/figure.walk-walk-frames/figure.walk-walk-011.png b/examples/boy-meets-girl-symbols/assets/sf/figure-walk/figure.walk-walk-frames/figure.walk-walk-011.png new file mode 100644 index 0000000000..54b37a3f20 Binary files /dev/null and b/examples/boy-meets-girl-symbols/assets/sf/figure-walk/figure.walk-walk-frames/figure.walk-walk-011.png differ diff --git a/examples/boy-meets-girl-symbols/assets/sf/figure-walk/figure.walk-walk-frames/figure.walk-walk-012.png b/examples/boy-meets-girl-symbols/assets/sf/figure-walk/figure.walk-walk-frames/figure.walk-walk-012.png new file mode 100644 index 0000000000..16a07cee13 Binary files /dev/null and b/examples/boy-meets-girl-symbols/assets/sf/figure-walk/figure.walk-walk-frames/figure.walk-walk-012.png differ diff --git a/examples/boy-meets-girl-symbols/assets/sf/figure-walk/figure.walk-walk-frames/figure.walk-walk-013.png b/examples/boy-meets-girl-symbols/assets/sf/figure-walk/figure.walk-walk-frames/figure.walk-walk-013.png new file mode 100644 index 0000000000..a680fcaab3 Binary files /dev/null and b/examples/boy-meets-girl-symbols/assets/sf/figure-walk/figure.walk-walk-frames/figure.walk-walk-013.png differ diff --git a/examples/boy-meets-girl-symbols/assets/sf/figure-walk/figure.walk-walk-frames/figure.walk-walk-014.png b/examples/boy-meets-girl-symbols/assets/sf/figure-walk/figure.walk-walk-frames/figure.walk-walk-014.png new file mode 100644 index 0000000000..27031465f8 Binary files /dev/null and b/examples/boy-meets-girl-symbols/assets/sf/figure-walk/figure.walk-walk-frames/figure.walk-walk-014.png differ diff --git a/examples/boy-meets-girl-symbols/assets/sf/figure-walk/figure.walk-walk-frames/figure.walk-walk-015.png b/examples/boy-meets-girl-symbols/assets/sf/figure-walk/figure.walk-walk-frames/figure.walk-walk-015.png new file mode 100644 index 0000000000..b8ba0f9374 Binary files /dev/null and b/examples/boy-meets-girl-symbols/assets/sf/figure-walk/figure.walk-walk-frames/figure.walk-walk-015.png differ diff --git a/examples/boy-meets-girl-symbols/assets/sf/figure-walk/figure.walk-walk-frames/figure.walk-walk-016.png b/examples/boy-meets-girl-symbols/assets/sf/figure-walk/figure.walk-walk-frames/figure.walk-walk-016.png new file mode 100644 index 0000000000..9b476a5ed9 Binary files /dev/null and b/examples/boy-meets-girl-symbols/assets/sf/figure-walk/figure.walk-walk-frames/figure.walk-walk-016.png differ diff --git a/examples/boy-meets-girl-symbols/assets/sf/figure-walk/figure.walk-walk-frames/figure.walk-walk-017.png b/examples/boy-meets-girl-symbols/assets/sf/figure-walk/figure.walk-walk-frames/figure.walk-walk-017.png new file mode 100644 index 0000000000..9a98374078 Binary files /dev/null and b/examples/boy-meets-girl-symbols/assets/sf/figure-walk/figure.walk-walk-frames/figure.walk-walk-017.png differ diff --git a/examples/boy-meets-girl-symbols/assets/sf/figure-walk/figure.walk-walk-frames/figure.walk-walk-018.png b/examples/boy-meets-girl-symbols/assets/sf/figure-walk/figure.walk-walk-frames/figure.walk-walk-018.png new file mode 100644 index 0000000000..2a9588e33c Binary files /dev/null and b/examples/boy-meets-girl-symbols/assets/sf/figure-walk/figure.walk-walk-frames/figure.walk-walk-018.png differ diff --git a/examples/boy-meets-girl-symbols/assets/sf/figure-walk/figure.walk-walk-frames/figure.walk-walk-019.png b/examples/boy-meets-girl-symbols/assets/sf/figure-walk/figure.walk-walk-frames/figure.walk-walk-019.png new file mode 100644 index 0000000000..d5928e8e27 Binary files /dev/null and b/examples/boy-meets-girl-symbols/assets/sf/figure-walk/figure.walk-walk-frames/figure.walk-walk-019.png differ diff --git a/examples/boy-meets-girl-symbols/assets/sf/figure-walk/figure.walk-walk-frames/figure.walk-walk-020.png b/examples/boy-meets-girl-symbols/assets/sf/figure-walk/figure.walk-walk-frames/figure.walk-walk-020.png new file mode 100644 index 0000000000..813e21c85e Binary files /dev/null and b/examples/boy-meets-girl-symbols/assets/sf/figure-walk/figure.walk-walk-frames/figure.walk-walk-020.png differ diff --git a/examples/boy-meets-girl-symbols/assets/sf/figure-walk/figure.walk-walk-frames/figure.walk-walk-021.png b/examples/boy-meets-girl-symbols/assets/sf/figure-walk/figure.walk-walk-frames/figure.walk-walk-021.png new file mode 100644 index 0000000000..f45fa5234f Binary files /dev/null and b/examples/boy-meets-girl-symbols/assets/sf/figure-walk/figure.walk-walk-frames/figure.walk-walk-021.png differ diff --git a/examples/boy-meets-girl-symbols/assets/sf/figure-walk/figure.walk-walk-frames/figure.walk-walk-022.png b/examples/boy-meets-girl-symbols/assets/sf/figure-walk/figure.walk-walk-frames/figure.walk-walk-022.png new file mode 100644 index 0000000000..3be4ddc74d Binary files /dev/null and b/examples/boy-meets-girl-symbols/assets/sf/figure-walk/figure.walk-walk-frames/figure.walk-walk-022.png differ diff --git a/examples/boy-meets-girl-symbols/assets/sf/figure-walk/figure.walk-walk-frames/figure.walk-walk-023.png b/examples/boy-meets-girl-symbols/assets/sf/figure-walk/figure.walk-walk-frames/figure.walk-walk-023.png new file mode 100644 index 0000000000..2181871889 Binary files /dev/null and b/examples/boy-meets-girl-symbols/assets/sf/figure-walk/figure.walk-walk-frames/figure.walk-walk-023.png differ diff --git a/examples/boy-meets-girl-symbols/assets/sf/figure-walk/figure.walk-walk-preview.gif b/examples/boy-meets-girl-symbols/assets/sf/figure-walk/figure.walk-walk-preview.gif new file mode 100644 index 0000000000..33944e86d0 Binary files /dev/null and b/examples/boy-meets-girl-symbols/assets/sf/figure-walk/figure.walk-walk-preview.gif differ diff --git a/examples/boy-meets-girl-symbols/assets/sf/figure-walk/figure.walk-walk-sheet.png b/examples/boy-meets-girl-symbols/assets/sf/figure-walk/figure.walk-walk-sheet.png new file mode 100644 index 0000000000..2839bbc176 Binary files /dev/null and b/examples/boy-meets-girl-symbols/assets/sf/figure-walk/figure.walk-walk-sheet.png differ diff --git a/examples/boy-meets-girl-symbols/assets/sf/figure-wave-pink-hq/figure.wave-spin-frames/figure.wave-spin-000.png b/examples/boy-meets-girl-symbols/assets/sf/figure-wave-pink-hq/figure.wave-spin-frames/figure.wave-spin-000.png new file mode 100644 index 0000000000..f23c2de2ef Binary files /dev/null and b/examples/boy-meets-girl-symbols/assets/sf/figure-wave-pink-hq/figure.wave-spin-frames/figure.wave-spin-000.png differ diff --git a/examples/boy-meets-girl-symbols/assets/sf/figure-wave-pink-hq/figure.wave-spin-frames/figure.wave-spin-001.png b/examples/boy-meets-girl-symbols/assets/sf/figure-wave-pink-hq/figure.wave-spin-frames/figure.wave-spin-001.png new file mode 100644 index 0000000000..15eeb06837 Binary files /dev/null and b/examples/boy-meets-girl-symbols/assets/sf/figure-wave-pink-hq/figure.wave-spin-frames/figure.wave-spin-001.png differ diff --git a/examples/boy-meets-girl-symbols/assets/sf/figure-wave-pink/figure.wave-spin-frames/figure.wave-spin-000.png b/examples/boy-meets-girl-symbols/assets/sf/figure-wave-pink/figure.wave-spin-frames/figure.wave-spin-000.png new file mode 100644 index 0000000000..837825329c Binary files /dev/null and b/examples/boy-meets-girl-symbols/assets/sf/figure-wave-pink/figure.wave-spin-frames/figure.wave-spin-000.png differ diff --git a/examples/boy-meets-girl-symbols/assets/sf/figure-wave-pink/figure.wave-spin-frames/figure.wave-spin-001.png b/examples/boy-meets-girl-symbols/assets/sf/figure-wave-pink/figure.wave-spin-frames/figure.wave-spin-001.png new file mode 100644 index 0000000000..840992dc2b Binary files /dev/null and b/examples/boy-meets-girl-symbols/assets/sf/figure-wave-pink/figure.wave-spin-frames/figure.wave-spin-001.png differ diff --git a/examples/boy-meets-girl-symbols/assets/sf/figure-wave/figure.wave-spin-frames/figure.wave-spin-000.png b/examples/boy-meets-girl-symbols/assets/sf/figure-wave/figure.wave-spin-frames/figure.wave-spin-000.png new file mode 100644 index 0000000000..35a40b175e Binary files /dev/null and b/examples/boy-meets-girl-symbols/assets/sf/figure-wave/figure.wave-spin-frames/figure.wave-spin-000.png differ diff --git a/examples/boy-meets-girl-symbols/assets/sf/figure-wave/figure.wave-spin-frames/figure.wave-spin-001.png b/examples/boy-meets-girl-symbols/assets/sf/figure-wave/figure.wave-spin-frames/figure.wave-spin-001.png new file mode 100644 index 0000000000..691a8e0ff5 Binary files /dev/null and b/examples/boy-meets-girl-symbols/assets/sf/figure-wave/figure.wave-spin-frames/figure.wave-spin-001.png differ diff --git a/examples/boy-meets-girl-symbols/assets/sf/heart-fill/heart.fill-spin-frames/heart.fill-spin-000.png b/examples/boy-meets-girl-symbols/assets/sf/heart-fill/heart.fill-spin-frames/heart.fill-spin-000.png new file mode 100644 index 0000000000..f66cb7d594 Binary files /dev/null and b/examples/boy-meets-girl-symbols/assets/sf/heart-fill/heart.fill-spin-frames/heart.fill-spin-000.png differ diff --git a/examples/boy-meets-girl-symbols/assets/sf/heart-fill/heart.fill-spin-frames/heart.fill-spin-001.png b/examples/boy-meets-girl-symbols/assets/sf/heart-fill/heart.fill-spin-frames/heart.fill-spin-001.png new file mode 100644 index 0000000000..35ebbddd27 Binary files /dev/null and b/examples/boy-meets-girl-symbols/assets/sf/heart-fill/heart.fill-spin-frames/heart.fill-spin-001.png differ diff --git a/examples/boy-meets-girl-symbols/assets/sf/leaf/leaf.fill-spin-frames/leaf.fill-spin-000.png b/examples/boy-meets-girl-symbols/assets/sf/leaf/leaf.fill-spin-frames/leaf.fill-spin-000.png new file mode 100644 index 0000000000..45da57c3e8 Binary files /dev/null and b/examples/boy-meets-girl-symbols/assets/sf/leaf/leaf.fill-spin-frames/leaf.fill-spin-000.png differ diff --git a/examples/boy-meets-girl-symbols/assets/sf/leaf/leaf.fill-spin-frames/leaf.fill-spin-001.png b/examples/boy-meets-girl-symbols/assets/sf/leaf/leaf.fill-spin-frames/leaf.fill-spin-001.png new file mode 100644 index 0000000000..5d752070b2 Binary files /dev/null and b/examples/boy-meets-girl-symbols/assets/sf/leaf/leaf.fill-spin-frames/leaf.fill-spin-001.png differ diff --git a/examples/boy-meets-girl-symbols/assets/sf/sparkles/sparkles-spin-frames/sparkles-spin-000.png b/examples/boy-meets-girl-symbols/assets/sf/sparkles/sparkles-spin-frames/sparkles-spin-000.png new file mode 100644 index 0000000000..3ac6e03ab7 Binary files /dev/null and b/examples/boy-meets-girl-symbols/assets/sf/sparkles/sparkles-spin-frames/sparkles-spin-000.png differ diff --git a/examples/boy-meets-girl-symbols/assets/sf/sparkles/sparkles-spin-frames/sparkles-spin-001.png b/examples/boy-meets-girl-symbols/assets/sf/sparkles/sparkles-spin-frames/sparkles-spin-001.png new file mode 100644 index 0000000000..225db00fff Binary files /dev/null and b/examples/boy-meets-girl-symbols/assets/sf/sparkles/sparkles-spin-frames/sparkles-spin-001.png differ diff --git a/examples/boy-meets-girl-symbols/assets/sf/sun/sun.max.fill-spin-frames/sun.max.fill-spin-000.png b/examples/boy-meets-girl-symbols/assets/sf/sun/sun.max.fill-spin-frames/sun.max.fill-spin-000.png new file mode 100644 index 0000000000..c1a0d9a8e6 Binary files /dev/null and b/examples/boy-meets-girl-symbols/assets/sf/sun/sun.max.fill-spin-frames/sun.max.fill-spin-000.png differ diff --git a/examples/boy-meets-girl-symbols/assets/sf/sun/sun.max.fill-spin-frames/sun.max.fill-spin-001.png b/examples/boy-meets-girl-symbols/assets/sf/sun/sun.max.fill-spin-frames/sun.max.fill-spin-001.png new file mode 100644 index 0000000000..faaa6c705a Binary files /dev/null and b/examples/boy-meets-girl-symbols/assets/sf/sun/sun.max.fill-spin-frames/sun.max.fill-spin-001.png differ diff --git a/examples/boy-meets-girl-symbols/assets/sf/tree/tree.fill-spin-frames/tree.fill-spin-000.png b/examples/boy-meets-girl-symbols/assets/sf/tree/tree.fill-spin-frames/tree.fill-spin-000.png new file mode 100644 index 0000000000..d80f3ce20c Binary files /dev/null and b/examples/boy-meets-girl-symbols/assets/sf/tree/tree.fill-spin-frames/tree.fill-spin-000.png differ diff --git a/examples/boy-meets-girl-symbols/assets/sf/tree/tree.fill-spin-frames/tree.fill-spin-001.png b/examples/boy-meets-girl-symbols/assets/sf/tree/tree.fill-spin-frames/tree.fill-spin-001.png new file mode 100644 index 0000000000..f8e0dd110d Binary files /dev/null and b/examples/boy-meets-girl-symbols/assets/sf/tree/tree.fill-spin-frames/tree.fill-spin-001.png differ diff --git a/examples/boy-meets-girl-symbols/index.html b/examples/boy-meets-girl-symbols/index.html new file mode 100644 index 0000000000..44e9096f71 --- /dev/null +++ b/examples/boy-meets-girl-symbols/index.html @@ -0,0 +1,628 @@ + + + + + + Boy Meets Girl Symbols + + + + +
+
+
+
SF Symbols study
+
Boy meets girl.
+
+ A small city-park loop made entirely from system symbol language. +
+
+ +
+
+
+
+ + + + + + + + + + + + + + + + + + + + +
+ +
first hello / frame 096
+
+
+ + + + diff --git a/examples/boy-meets-girl-symbols/renders/boy-meets-girl-symbols-4k60.mp4 b/examples/boy-meets-girl-symbols/renders/boy-meets-girl-symbols-4k60.mp4 new file mode 100644 index 0000000000..15672cc6e6 --- /dev/null +++ b/examples/boy-meets-girl-symbols/renders/boy-meets-girl-symbols-4k60.mp4 @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:60547cfaa832a31eef4a2b7ad54b01d9f24edd16ac4e4ed4751aa869e5ac5a9c +size 7279467