{ "schemaVersion": 2, "title": "Video Library", "families": [ { "id": "pixel", "slug": "pixel", "title": "Pixel", "premise": "A world that grows sharper as the story unfolds. Bitmap lettering, playful characters and chiptune cues turn progress into a visible upgrade.", "summary": "A world that grows sharper as the story unfolds. Bitmap lettering, playful characters and chiptune cues turn progress into a visible upgrade.", "category": "Retro digital", "defaultExampleId": "claude-cloud", "facets": { "material": [ "2d", "pixel", "dithering", "bitmap-font", "game-hud", "chiptune", "retro", "playful" ], "producer": [ "Claude Cloud", "Codex + generated artwork" ], "format": [ "Portrait" ], "motion": [], "useCase": [] }, "examples": [ { "id": "claude-cloud", "title": "Seed to Seedling", "producer": "Claude Cloud", "producerEvidence": "The displayed model and reasoning label identify this production lane. Exact runtime model ID and per-film cost are not established by the source packet.", "relationship": "Original family example", "format": "Portrait", "productionMethod": "canvas-2d", "master": { "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/pixel--claude-cloud.mp4", "sha256": "e61ff90ca6d929a98a0b06b81b86d8fbedd82cc8c18f760e15ec9703f168e2f3", "bytes": 3252721, "mimeType": "video/mp4", "width": 1080, "height": 1920, "duration": 9.5, "encodedFps": 60 }, "poster": { "url": "/video-library/media/pixel--claude-cloud/cover.webp", "sha256": "29d1d517cb5fdc2bd961869811055254c7201e2d6ec74aa724bda342f62fe19e", "sourceMasterSha256": "e61ff90ca6d929a98a0b06b81b86d8fbedd82cc8c18f760e15ec9703f168e2f3", "timeSeconds": 8.075, "rationale": "Late story beat selected to show the developed subject and visual system; extracted from this exact master." }, "previewVideo": { "url": "/video-library/media/pixel--claude-cloud/preview.mp4", "sha256": "81f015d4015207b0333d4cc2e5a00de0027e7d3dd6ae50d533c2b8b9cfc4d32b", "sourceMasterSha256": "e61ff90ca6d929a98a0b06b81b86d8fbedd82cc8c18f760e15ec9703f168e2f3", "width": 540, "height": 960, "label": "Playback preview · 540 px wide · full master in Download finished video" }, "gallery": [ { "id": "overview", "role": "encoded-contact-sheet", "label": "Scenes from the finished render · not a planning storyboard", "url": "/video-library/media/pixel--claude-cloud/overview.webp", "sourceMasterSha256": "e61ff90ca6d929a98a0b06b81b86d8fbedd82cc8c18f760e15ec9703f168e2f3" }, { "id": "scene-1", "role": "encoded-frame", "label": "Finished-film frame · 1.9 seconds", "url": "/video-library/media/pixel--claude-cloud/scene-1.webp", "sourceMasterSha256": "e61ff90ca6d929a98a0b06b81b86d8fbedd82cc8c18f760e15ec9703f168e2f3", "timeSeconds": 1.9 }, { "id": "scene-2", "role": "encoded-frame", "label": "Finished-film frame · 4.75 seconds", "url": "/video-library/media/pixel--claude-cloud/scene-2.webp", "sourceMasterSha256": "e61ff90ca6d929a98a0b06b81b86d8fbedd82cc8c18f760e15ec9703f168e2f3", "timeSeconds": 4.75 }, { "id": "scene-3", "role": "encoded-frame", "label": "Finished-film frame · 7.6 seconds", "url": "/video-library/media/pixel--claude-cloud/scene-3.webp", "sourceMasterSha256": "e61ff90ca6d929a98a0b06b81b86d8fbedd82cc8c18f760e15ec9703f168e2f3", "timeSeconds": 7.6 } ], "typography": [ "FONT5 (5x7 bitmap, original drawing for this library)", "FONT5" ], "palette": { "HANDHELD": [ "#0f2a14", "#306a2e", "#8aac2a", "#c4d870" ], "PAL16": { "ink": "#14101e", "night": "#232a4e", "blue": "#2f5fa8", "sky": "#5fb4e6", "ice": "#a8f0f0", "white": "#f4f0e6", "grey": "#8a8ca0", "slate": "#4a4e66", "green": "#2e8a4a", "lime": "#8ad04a", "yellow": "#f6d64a", "orange": "#f08a32", "red": "#d83a3a", "pink": "#f07aa8", "purple": "#6a3a8a", "brown": "#7a4a2a" } }, "usageGuidance": "Keep the seed and world lined up as detail increases. Change the subject and short dialogue so the small letters stay readable. Use deliberate step-by-step movement and let the game-like music grow fuller with the picture.", "styleRules": "---\nid: pixel\nname: Pixel (growth = resolution)\nfamily: retro digital\naliases: [pixel art, 8-bit, 16-bit, retro game, chiptune explainer, handheld LCD]\ntags: [2d, pixel, dithering, bitmap-font, game-hud, chiptune, retro, playful]\nkind: visual-style\nroute: canvas-2d (true low-res surfaces, nearest-neighbour upscale)\nreadiness: { research: seed-extended, rights: original-work, referenceImages: own-render, code: built, render: rendered-and-measured }\n---\n\n# Pixel (growth = resolution)\n\nA video game in which the *resolution* is the story. The seed starts life on a four-green handheld LCD at 90 × 160 pixels. It wakes in the rain, and each time it grows the screen upgrades: 135 × 240 in earth tones when the root digs down, 180 × 320 with a 16-colour palette and CRT scanlines when the shoot breaks the surface, and finally a crisp 270 × 480 \"CLEAR!\" screen. The same hero, the same world and the same layout are redrawn on finer and finer grids. The soundtrack upgrades too: it starts as one crushed mono pulse channel and ends as clean stereo chiptune.\n\n**The one rule:** *every pixel is a real pixel.* Each era is drawn on a genuinely low-resolution surface using whole-pixel primitives, a fixed palette and ordered dithering, then scaled up nearest-neighbour. Nothing is smoothed, rotated off-grid, alpha-faded or sub-pixel positioned.\n\n## Creative direction\n- **Audience:** gamers, students, social audiences, tech and education brands, anyone nostalgic for handheld consoles.\n- **Purpose:** make \"growth\" *felt*, not just shown. The viewer feels the upgrade as the picture literally gets sharper.\n- **Feeling:** playful, nostalgic, triumphant (\"level up!\"), with clear, readable progress.\n- **Central visual idea:** *growth = resolution*. Each story beat is a hardware era. The transition between eras is a stepped circular window that opens on the hero, drawn in cells of the *new*, finer grid, so the upgrade spreads outward from the seed.\n- **How the parts work together:**\n - *Composition* is constant: horizon at y = 1140 and the seed at (540, 1300) in screen space, so the eye compares eras like-for-like.\n - *Colour* is a hardware palette per era (4 → 16 colours); gradients exist only as two colours plus Bayer dither.\n - *Type* is a 5 × 7 bitmap font living inside the game's HUD: a stage tag, an RPG dialogue box that types itself with a blinking block cursor, and a big end title.\n - *Motion* is on twos, in whole pixels only; blinks and sprite frames flip on and off and never fade.\n - *Sound* mirrors the picture: channels, sample rate, bit depth and stereo width increase each era. Every typed character beeps and every event has a classic game cue (coin, power-up, level-up).\n\n## Fit\n- **Best for:** progress/upgrade stories, onboarding \"levels\", ed-tech, product changelogs (\"v1 → v4\"), gaming brands, nostalgia social posts, kids' science.\n- **Avoid when:** the subject needs photographic fidelity, the tone is grave, or the audience may read retro as cheap. Fine detail does not survive 90 px-wide frames.\n- **Cost:** low. Canvas 2D on tiny surfaces, rendered on twos: 285 poses render in about 30 s with 3 workers.\n\n## Visual fingerprint\n| Element | Rule |\n|---|---|\n| Resolution eras | 90×160 (12 px cells) → 135×240 (8) → 180×320 (6) → 270×480 (4). Every era divides 1080×1920 exactly. |\n| Composition | Constant screen-space world: horizon y 1140; hero seed centred at (540, 1300), so the hero is the visual anchor and the transition origin; sky in the upper 60 %, soil cutaway below. HUD: stage tag top-left, dialogue box bottom-centre. |\n| Palette | Era 1 is HANDHELD `#0f2a14 #306a2e #8aac2a #c4d870`. Eras 2-4 use PAL16 (16 colours; see `spec.json → palettes`). Semantic roles (sky, soil, seed, eye, root, stem…) are mapped per palette in `ROLES`, so one world description renders in every era. |\n| Dithering | Bayer 4 × 4 ordered dither between exactly two palette colours: sky toward the horizon, soil with depth, the sun's glow and the seed's top-left highlight. No smooth gradients anywhere. |\n| Primitives | `pset`, `prect`, `pellipse`, `pline` (Bresenham), `pdither`, `pglow`, `sprite`. All sizes are designed in screen px and converted with `R()`, `X()` and `Y()`, so thickness stays physically similar across eras while the pixel count rises. |\n| Hero | Orange (or light green in era 1) ellipse with a 1-px ink outline, a dithered highlight, square eyes with pupils that look up/down per beat, and a 1-px crack line from 3.25 s. Swells by whole pixels on each drink. |\n| Screen FX | Era 1: LCD grid lines (1 px every cell, ink at 16 %). Era 2: scanlines 12 %. Era 3: scanlines 18 % + an ink vignette dithered into the corners (density ≤ 0.375), drawn under the HUD. Era 4: scanlines 8 % (clean). |\n\n### Typography (exact)\nAll text uses **FONT5**, an original 5 × 7 bitmap font drawn for this library (A-Z, 0-9, `. ! ? : - / > + ·`): advance 6, 1-pixel letter gap. Sizes are in *era pixels × scale*. `hud` per era = 1, 1, 2, 2, so the glyph cells on screen are 12, 8, 12 and 8 px.\n\n| Role | Scale | Screen glyph height | Box / colour | Enter → settle |\n|---|---|---|---|---|\n| Stage tag (STAGE 1 · STAGE 2 · STAGE 3 · CLEAR!) | `hud`, 2× for the first pose | 84 / 56 / 84 / 56 px | panel fill, 1-px ink border at (3, 3), padding 2·scale | pops at double size for one pose (1/30 s), then snaps to normal. No easing. |\n| Dialogue caption (2 lines) | `hud` | 84 / 56 / 84 px | centred, bottom margin 6·scale, panel fill + 1-px ink border, padding 3·scale, line pitch 9·scale | types at 32 chars/s starting 0.3 s after the cut; a blinking block cursor (on/off per pose) follows the last character; each character beeps |\n| End title SEEDLING | 4 | 112 px (752 px wide) | ink with a white drop shadow offset (+4, +4) era px | types at 24 chars/s from 7.7 s; holds to the end |\n| Note (ILLUSTRATION · TIME-COMPRESSED) | 1 | 28 px | panel box with 1-px ink border, 16 px from the bottom (era px) | appears whole at 8.4 s |\n\nCopy fits: an era caption line can be at most ⌊(eraWidth − 6·scale) / (6·scale)⌋ characters. That is **14** at 90 px, **21** at 135, **14** at 180 (scale 2) and **21** at 270 (scale 2).\n\n## Temporal fingerprint\n| Element | Rule |\n|---|---|\n| Grid | 120 BPM (0.5 s beats); eras cut on beats 6, 11 and 15 (3.0 s, 5.5 s, 7.5 s). |\n| Pose cadence | Twos: `P = floor(frame/2)`, `t = 2P/60`. Moves happen in whole pixels of the current era. |\n| Transition | Stepped circular window, 7 poses (0.233 s). Radii in 90-res pixels: 8, 16, 28, 44, 64, 88, 118 (×12 = screen px), centred on the seed. Each row is snapped to the *new* grid, with a one-cell white rim. The old era is frozen during the reveal; the new era is live inside the window. |\n| Holds | Each caption is complete by about 1.0 s into its era and holds for at least 1.0 s. The title holds 1.5 s; the note holds 1.1 s. |\n| Sprite cycles | Worm flips frames every beat; butterfly every half beat; sparkles alternate on a 6-pose cycle. |\n| Blinks | One-pose eye blinks at 2.2, 4.8 and 8.9 s; never during a reveal. |\n\n## How the composition develops\n| Time | Era | What happens |\n|---|---|---|\n| 0-3.0 s | 1 · 90×160 · HANDHELD · LCD | Rain clouds drift; a dormant seed sits in dark soil. \"WATER WAKES / THE SEED.\" types. Rain falls from 0.9 s; a \"!\" bubble at 1.4 s; the seed swells by a pixel on each drink (1.5, 2.0, 2.5 s). |\n| 3.0-5.5 s | 2 · 135×240 · earth · scanlines | The window opens on the seed; true colour arrives. Crack at 3.25 s; a white root draws down in Bresenham segments (3.3-5.0 s) and branches; a worm wriggles past. \"A ROOT / REACHES DOWN.\" |\n| 5.5-7.5 s | 3 · 180×320 · 16 colours · CRT | Sun with a dithered glow. The shoot rises with a hook (5.6 s), breaks the surface (6.0 s), straightens, and two leaves open (6.75, 7.0 s) with coin sounds; a butterfly arrives. \"A SHOOT FINDS / THE LIGHT.\" |\n| 7.5-9.5 s | 4 · 270×480 · clean | \"CLEAR!\"; fanfare; SEEDLING types in large; sparkles; note; hold. |\n\n## Sound fingerprint\nC major, 120 BPM chiptune. Pulse lead at 12.5 % duty, a 4-bit stepped triangle bass, noise-channel drums and a second pulse (25 %) for harmony. Like the picture, **the audio's resolution rises each era**:\n\n| Era | Sound resolution |\n|---|---|\n| 1 | Mono; 1 pulse + noise; sample-and-hold every 6 samples (8 kHz), 6-bit; tiny-speaker HP 350 Hz / LP 3.2 kHz |\n| 2 | Adds the triangle bass and triangle kick; 16 kHz, 7-bit |\n| 3 | Adds the harmony pulse and stereo; 24 kHz, 8-bit |\n| 4 | Clean 48 kHz with the level-clear fanfare (G4-C5-E5-G5-C6-E6 → G6), then a held C chord |\n\nSound effects:\n- Rain ticks.\n- A rising blip for each drink and a two-note \"!\".\n- A level-up arpeggio before each cut.\n- Dialogue beeps, one per non-space typed character, timed from the same 32 chars/s rule as the picture.\n- A noise burst for the crack, falling triangle taps while the root digs, and a 16-step power-up sweep for the shoot.\n- A coin (B5 → E6) for each leaf, and title-typing beeps.\n\nMix about −15 LUFS, ≤ −1 dBTP.\n\n## Reusable prompt\n> Create a {9.5}-second {1080×1920} pixel-art video about {subject} where the story's growth is shown as rising screen resolution. Draw each beat on a true low-res canvas: {90×160 four-green handheld LCD} → {135×240} → {180×320 16-colour with CRT scanlines} → {270×480 clean}, scaled up nearest-neighbour. Keep the world's layout identical across eras so the viewer compares like-for-like. Use limited palettes, Bayer 4×4 dithering for every gradient, Bresenham lines, whole-pixel motion on twos, and a 5×7 bitmap font in a game HUD (stage tag, self-typing dialogue box with a block cursor, big end title). Transition between eras with a stepped circular window that opens on the hero in cells of the new, finer grid. Score: chiptune whose channel count, sample rate and stereo width increase each era; a beep per typed character; coin, power-up and level-up sounds on events. Avoid: anti-aliasing, alpha fades, rotation, sub-pixel motion, smooth gradients.\n\n## Adaptation guidance\n| Change | Safe? | Notes |\n|---|---|---|\n| Subject / hero | ✅ | Keep the hero chunky (≥ 10 era-pixels wide in era 1) with a 1-px outline and readable eyes or face. |\n| Number of eras | ✅ | 3-5 work. Every resolution must divide the output exactly (1080 / w is an integer). |\n| Palettes | ✅ | Use real hardware-style palettes; keep roles semantic (`ROLES`) so the world renders in each. |\n| Copy | ✅ | Respect the per-era character limits above; captions ≤ 2 lines. |\n| Font | ✅ | Any bitmap font with integer scales; never a vector font scaled smoothly. |\n| 16:9 | ✅ | Use eras such as 160×90 → 240×135 → 320×180 → 480×270; put the HUD at the left. |\n| Resolution going *down* | ✅ | Works for decline or \"glitch\" stories (reverse the idea). |\n| Smooth motion / alpha | ❌ | Breaks the hardware illusion. |\n| **Essential** | , | Real low-res surfaces, integer upscaling, constant layout across eras, the window transition on the new grid, and sound that upgrades with the picture. |\n\n## Accessibility\nCaptions are high-contrast: ink on panel is 16:1 in PAL16, and dark green on light green is 10:1 in HANDHELD. Text sits in boxes and is never over busy dithering. Screen FX stay subtle (scanlines ≤ 18 %, no flicker). The window transition is a reveal, not a flash, and there is no strobing. The dialogue beeps are quiet (amplitude 0.02, a third of the lead) and stop when typing stops.\n\n## Provenance\nBuilt from the Animate seed `pixel` (cth9191/animate @ 7e5eb56feb2dd573f890e1b7b34748af43d58263, MIT): the HANDHELD and 16-colour palette approach and the pixel-craft rules. The seed was used as source material only; nothing was installed or executed. All drawing code, sprites, the FONT5 glyphs, the score and the sound effects are original to this library (2026-10-07). No external images, fonts or samples.", "review": { "technical": { "state": "Supplied checks passed", "scope": "Source handoff records complete decode, stream dimensions and audio measurements. Browser playback is checked separately.", "artifactSha256": "e61ff90ca6d929a98a0b06b81b86d8fbedd82cc8c18f760e15ec9703f168e2f3" }, "creative": { "state": "Not independently accepted", "scope": "Kyle accepted visual reproduction test on 2026-10-08; slight shared artifact remains unidentified", "artifactSha256": "e61ff90ca6d929a98a0b06b81b86d8fbedd82cc8c18f760e15ec9703f168e2f3" }, "listening": { "state": "Not verified", "scope": "No perceptual listening pass is established by this library import.", "artifactSha256": "e61ff90ca6d929a98a0b06b81b86d8fbedd82cc8c18f760e15ec9703f168e2f3" }, "reproduction": { "state": "Visual match accepted after repairs", "scope": "Source Pixel test used two documented portability repairs; visual match accepted, MP4 bytes differ.", "artifactSha256": "e61ff90ca6d929a98a0b06b81b86d8fbedd82cc8c18f760e15ec9703f168e2f3" } }, "detailUrl": "https://library.jkylehobson.chatgpt.site/video-library/#family=pixel&example=claude-cloud", "processUrl": "/video-library/process.html?family=pixel&example=claude-cloud", "downloads": { "prompt": { "available": true, "url": "/video-library/prompts/pixel--claude-cloud.txt", "sha256": "62e5459f1d4a93accc5e4b4f8d84069b129f9d54a7ad428a433ff1d06e51feda", "bytes": 2006, "label": "Reusable, example-specific instructions" }, "video": { "name": "pixel--claude-cloud.mp4", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/pixel--claude-cloud.mp4", "bytes": 3252721, "sha256": "e61ff90ca6d929a98a0b06b81b86d8fbedd82cc8c18f760e15ec9703f168e2f3", "available": true, "label": "3.1 MB" }, "source": { "name": "pixel--claude-cloud--source.zip", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/pixel--claude-cloud--source.zip", "bytes": 11048969, "sha256": "59727a73a638207ef123734a50d950c579a97b072823c708f7ac9f2cebdfbd6f", "available": true, "label": "10.5 MB", "contents": [ "editable source", "variant guidance", "source assets", "audio inputs", "dependency declarations", "file manifest" ], "includedFiles": 70, "includedFilePaths": [ "CASE_STUDY.md", "PORTABILITY/patches/01-macos-browser.patch", "PORTABILITY/patches/02-standalone-doc-paths.patch", "PORTABILITY/portability.md", "PORTABILITY/reproduction-report.md", "PORTABILITY/working/package-lock.json", "RUN.md", "SKILL.md", "STYLE.md", "THIRD-PARTY-NOTICES/animate-MIT.txt", "assets/components/font5-sheet.png", "assets/components/hero-seed-270.png", "assets/components/hero-seed-90.png", "assets/components/native-eras.png", "assets/components/palettes.png", "assets/components/sprites.png", "assets/layers/t2.60/01_world.png", "assets/layers/t2.60/02_hud.png", "assets/layers/t2.60/03_screen-fx.png", "assets/layers/t4.40/01_world.png", "assets/layers/t4.40/02_hud.png", "assets/layers/t4.40/03_screen-fx.png", "assets/layers/t6.60/01_world.png", "assets/layers/t6.60/02_hud.png", "assets/layers/t6.60/03_screen-fx.png", "assets/layers/t9.20/01_world.png", "assets/layers/t9.20/02_hud.png", "assets/layers/t9.20/03_screen-fx.png", "assets/paths/root.json", "assets/paths/root.svg", "assets/paths/rootletA.json", "assets/paths/rootletA.svg", "assets/paths/rootletB.json", "assets/paths/rootletB.svg", "assets/paths/shoot.json", "assets/paths/shoot.svg", "audio/cues.json", "audio/mix.flac", "audio/stems/drums.flac", "audio/stems/music.flac", "audio/stems/sfx.flac", "engine/audio.mjs", "engine/audio/dsp.js", "engine/audio/instruments.js", "engine/audio/sfx.js", "engine/browser.mjs", "engine/export.mjs", "engine/finish.mjs", "engine/lib/draw.js", "engine/lib/util.js", "engine/page.html", "engine/render.mjs", "engine/runtime.js", "engine/server.mjs", "film/contact_sheet.jpg", "film/spectrogram.png", "film/stills/01_1.20s.jpg", "film/stills/02_2.60s.jpg", "film/stills/03_4.40s.jpg", "film/stills/04_6.60s.jpg", "film/stills/05_7.60s.jpg", "film/stills/06_9.20s.jpg", "overview/encoded-contact-sheet.jpg", "package.json", "qa.json", "spec.json", "styles/pixel/scene.js", "styles/pixel/score.js", "styles/pixel/timeline.js", "BUNDLE-GUIDE.md" ], "externalPrerequisites": { "runtime": [ "Node.js", "Chromium or Chrome", "FFmpeg and ffprobe" ], "packageDependencies": { "three": "0.170.0", "@fontsource/fraunces": "^5.1.0", "@fontsource/dm-sans": "^5.1.0", "@fontsource/inter": "^5.1.0", "@fontsource/space-grotesk": "^5.1.0", "@fontsource/ibm-plex-mono": "^5.1.0", "@fontsource/jetbrains-mono": "^5.1.0", "@fontsource/playfair-display": "^5.1.0", "@fontsource/bebas-neue": "^5.1.0", "@fontsource/archivo-black": "^5.1.0", "@fontsource/caveat": "^5.1.0", "@fontsource/press-start-2p": "^5.1.0", "@fontsource/instrument-serif": "^5.1.0", "@fontsource/syne": "^5.1.0", "@fontsource/permanent-marker": "^5.1.0", "@fontsource/vt323": "^5.1.0", "@fontsource/dm-serif-display": "^5.1.0", "@fontsource/anton": "^5.1.0", "@fontsource/nunito": "^5.1.0", "@fontsource/bangers": "^5.1.0", "@fontsource/space-mono": "^5.1.0", "playwright": "1.56.1" }, "lockfileIncluded": true, "coldStart": "PASS_WITH_PORTABILITY_REPAIRS" }, "license": { "summary": "User-directed publication of supplied authored source; preserve listed third-party notices; no new license granted here.", "includedNoticePaths": [ "THIRD-PARTY-NOTICES/animate-MIT.txt" ], "newLicenseGranted": false } }, "bundle": { "name": "pixel--claude-cloud--full.zip", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/pixel--claude-cloud--full.zip", "bytes": 14417917, "sha256": "8f0ed3828e5326ce10535d8136a883050948b9d2d6c069fad3088bac8ebb3426", "available": true, "label": "13.7 MB", "contents": [ "selected master", "editable source", "variant guidance", "source assets", "audio inputs", "dependency declarations", "file manifest", "designed cover", "starter prompt" ], "includedFiles": 73, "includedFilePaths": [ "CASE_STUDY.md", "PORTABILITY/patches/01-macos-browser.patch", "PORTABILITY/patches/02-standalone-doc-paths.patch", "PORTABILITY/portability.md", "PORTABILITY/reproduction-report.md", "PORTABILITY/working/package-lock.json", "RUN.md", "SKILL.md", "STYLE.md", "THIRD-PARTY-NOTICES/animate-MIT.txt", "assets/components/font5-sheet.png", "assets/components/hero-seed-270.png", "assets/components/hero-seed-90.png", "assets/components/native-eras.png", "assets/components/palettes.png", "assets/components/sprites.png", "assets/layers/t2.60/01_world.png", "assets/layers/t2.60/02_hud.png", "assets/layers/t2.60/03_screen-fx.png", "assets/layers/t4.40/01_world.png", "assets/layers/t4.40/02_hud.png", "assets/layers/t4.40/03_screen-fx.png", "assets/layers/t6.60/01_world.png", "assets/layers/t6.60/02_hud.png", "assets/layers/t6.60/03_screen-fx.png", "assets/layers/t9.20/01_world.png", "assets/layers/t9.20/02_hud.png", "assets/layers/t9.20/03_screen-fx.png", "assets/paths/root.json", "assets/paths/root.svg", "assets/paths/rootletA.json", "assets/paths/rootletA.svg", "assets/paths/rootletB.json", "assets/paths/rootletB.svg", "assets/paths/shoot.json", "assets/paths/shoot.svg", "audio/cues.json", "audio/mix.flac", "audio/stems/drums.flac", "audio/stems/music.flac", "audio/stems/sfx.flac", "display/cover.webp", "engine/audio.mjs", "engine/audio/dsp.js", "engine/audio/instruments.js", "engine/audio/sfx.js", "engine/browser.mjs", "engine/export.mjs", "engine/finish.mjs", "engine/lib/draw.js", "engine/lib/util.js", "engine/page.html", "engine/render.mjs", "engine/runtime.js", "engine/server.mjs", "film/contact_sheet.jpg", "film/pixel.mp4", "film/spectrogram.png", "film/stills/01_1.20s.jpg", "film/stills/02_2.60s.jpg", "film/stills/03_4.40s.jpg", "film/stills/04_6.60s.jpg", "film/stills/05_7.60s.jpg", "film/stills/06_9.20s.jpg", "overview/encoded-contact-sheet.jpg", "package.json", "qa.json", "spec.json", "starter-prompt.txt", "styles/pixel/scene.js", "styles/pixel/score.js", "styles/pixel/timeline.js", "BUNDLE-GUIDE.md" ], "externalPrerequisites": { "runtime": [ "Node.js", "Chromium or Chrome", "FFmpeg and ffprobe" ], "packageDependencies": { "three": "0.170.0", "@fontsource/fraunces": "^5.1.0", "@fontsource/dm-sans": "^5.1.0", "@fontsource/inter": "^5.1.0", "@fontsource/space-grotesk": "^5.1.0", "@fontsource/ibm-plex-mono": "^5.1.0", "@fontsource/jetbrains-mono": "^5.1.0", "@fontsource/playfair-display": "^5.1.0", "@fontsource/bebas-neue": "^5.1.0", "@fontsource/archivo-black": "^5.1.0", "@fontsource/caveat": "^5.1.0", "@fontsource/press-start-2p": "^5.1.0", "@fontsource/instrument-serif": "^5.1.0", "@fontsource/syne": "^5.1.0", "@fontsource/permanent-marker": "^5.1.0", "@fontsource/vt323": "^5.1.0", "@fontsource/dm-serif-display": "^5.1.0", "@fontsource/anton": "^5.1.0", "@fontsource/nunito": "^5.1.0", "@fontsource/bangers": "^5.1.0", "@fontsource/space-mono": "^5.1.0", "playwright": "1.56.1" }, "lockfileIncluded": true, "coldStart": "PASS_WITH_PORTABILITY_REPAIRS" }, "license": { "summary": "User-directed publication of supplied authored source; preserve listed third-party notices; no new license granted here.", "includedNoticePaths": [ "THIRD-PARTY-NOTICES/animate-MIT.txt" ], "newLicenseGranted": false } } }, "cadenceNote": "570 encoded frames at 60 fps, with 285 evaluated poses. Complete frames hold on twos, including camera, type and effects.", "starterPrompt": "Create a {9.5}-second {1080×1920} pixel-art video about {subject} where the story's growth is shown as rising screen resolution. Draw each beat on a true low-res canvas: {90×160 four-green handheld LCD} → {135×240} → {180×320 16-colour with CRT scanlines} → {270×480 clean}, scaled up nearest-neighbour. Keep the world's layout identical across eras so the viewer compares like-for-like. Use limited palettes, Bayer 4×4 dithering for every gradient, Bresenham lines, whole-pixel motion on twos, and a 5×7 bitmap font in a game HUD (stage tag, self-typing dialogue box with a block cursor, big end title). Transition between eras with a stepped circular window that opens on the hero in cells of the new, finer grid. Score: chiptune whose channel count, sample rate and stereo width increase each era; a beep per typed character; coin, power-up and level-up sounds on events. Avoid: anti-aliasing, alpha fades, rotation, sub-pixel motion, smooth gradients.\n\nSelected example: Seed to Seedling\nFamily: pixel\nVariant: claude-cloud\nTypography: FONT5 (5x7 bitmap, original drawing for this library), FONT5\nProduction: canvas-2d\nExact reference master SHA-256: e61ff90ca6d929a98a0b06b81b86d8fbedd82cc8c18f760e15ec9703f168e2f3\n\nRead the selected STYLE.md, SKILL.md and reproduction instructions before adapting. Keep the declared renderer and source closure; do not assume another family variant has interchangeable parameters. Preserve exact font or custom glyph sources, color roles, spatial continuity and readable text. Record encoded frame rate, scene evaluation and held poses separately. Review the changed render visually and listen to the encoded audio before claiming those checks passed. Existing approval applies only to its recorded artifact.\n\nSuccess check: the adapted story is clear; key type remains readable in motion; the source rebuilds with its declared inputs; all media and review records identify the exact output. State any untested reproduction, listening or rights limits.", "downloadNote": "Downloads match this selected example. The full bundle includes its source, original video, cover and starter prompt. Source packages include artwork, audio inputs and dependency declarations. Requires Node.js, Chromium or Chrome, FFmpeg and ffprobe. Follow the included run guide for package installation and reproduction limits.", "model": "Opus 5.5", "reasoningEffort": "Extra" }, { "id": "codex-generated-illustration", "title": "Seed to Seedling · generated illustration", "producer": "Codex + generated artwork", "producerEvidence": "The production chat runtime records GPT-6 Astra at xhigh. The image-generation backend model was not exposed.", "relationship": "Saved generated illustration with authored registration, motion, type and sound.", "format": "Portrait", "productionMethod": "Canvas 2D + saved artwork", "master": { "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/pixel--codex-generated-illustration.mp4", "sha256": "b2ac7fca19f59d9d047b9cd6d8b6e43af6502cc4a6a87b98e0d71272f189e3b1", "bytes": 2575872, "mimeType": "video/mp4", "width": 1080, "height": 1920, "duration": 9.5, "encodedFps": 60 }, "poster": { "url": "/video-library/media/pixel--codex-generated-illustration/cover.webp", "sha256": "72b46840e704e77678ae89ada4d094d3760b611c7c3a5918bec3272139aa180a", "sourceMasterSha256": "b2ac7fca19f59d9d047b9cd6d8b6e43af6502cc4a6a87b98e0d71272f189e3b1", "timeSeconds": 8.075, "rationale": "Late story beat selected to show the developed subject and visual system; extracted from this exact master." }, "previewVideo": { "url": "/video-library/media/pixel--codex-generated-illustration/preview.mp4", "sha256": "94615075f41eaaa2bebbfaa229c7ffb15d548cac79dc90696623d0bfd673dd74", "sourceMasterSha256": "b2ac7fca19f59d9d047b9cd6d8b6e43af6502cc4a6a87b98e0d71272f189e3b1", "width": 540, "height": 960, "label": "Playback preview · 540 px wide · full master in Download finished video" }, "gallery": [ { "id": "scene-1", "role": "encoded-frame", "label": "Finished-film frame · 1.9 seconds", "url": "/video-library/media/pixel--codex-generated-illustration/scene-1.webp", "sourceMasterSha256": "b2ac7fca19f59d9d047b9cd6d8b6e43af6502cc4a6a87b98e0d71272f189e3b1", "timeSeconds": 1.9 }, { "id": "scene-2", "role": "encoded-frame", "label": "Finished-film frame · 4.75 seconds", "url": "/video-library/media/pixel--codex-generated-illustration/scene-2.webp", "sourceMasterSha256": "b2ac7fca19f59d9d047b9cd6d8b6e43af6502cc4a6a87b98e0d71272f189e3b1", "timeSeconds": 4.75 }, { "id": "scene-3", "role": "encoded-frame", "label": "Finished-film frame · 7.6 seconds", "url": "/video-library/media/pixel--codex-generated-illustration/scene-3.webp", "sourceMasterSha256": "b2ac7fca19f59d9d047b9cd6d8b6e43af6502cc4a6a87b98e0d71272f189e3b1", "timeSeconds": 7.6 } ], "typography": [ "FONT5 · original 5 × 7 bitmap glyphs" ], "palette": null, "usageGuidance": "Keep the saved artwork and the connection points between moving parts. A new subject needs new image crops, movement and sound checks. Keep early scenes simple enough to read.", "styleRules": "# Pixel · generated illustration\n\n**Purpose:** make progress feel visible and rewarding through one persistent subject, a small causal action and increasing image resolution. The tested example is playful and tactile; it is suitable for short learning or process stories when that tone serves the audience.\n\n**Identity:** illustrated bitmap textures and expressive cutout characters; coherent light direction; a world that remains registered as texture resolution and palette expand; exact bitmap lettering; an event-driven chiptune soundtrack. The closing composition should feel fuller while retaining a clear hero and reading area.\n\n**Motion:** continuous scene evaluation at 60 Hz with declared held actor/type states; anchored growth and opening actions; bottom-up or top-down reveal masks; occlusion that makes separate plant parts read as one subject. This method is animated illustration, not simulated biology or unrestricted character acting.\n\n**Adaptable:** subject, environment, palette, crop bounds, joint coordinates, text, duration, event rhythm and score can change in source. Treat these as editing surfaces, not a universal parameter interface. A change can require fresh artwork and registration.\n\n**Keep:** a readable low-resolution silhouette, a persistent spatial reference, explicit joints, causal sound, exact text and a protected payoff. Retain raw generated files and the source that integrates them.\n\n**Avoid:** maximum texture in every era, assumed equal atlas cells, stretching a single sprite into unsupported acting, baked-in text, continuous props crossing the title, or describing a 60 fps file as 60 distinct character poses.\n\n**Example limitation:** early soil detail is busy and the sky palette can form broad bands. Output-space positioning also gives a smoother result than strict period hardware-grid motion. Choose the procedural original when that stricter aesthetic better serves the story.", "review": { "technical": { "state": "Supplied checks passed", "scope": "Source handoff records complete decode, stream dimensions and audio measurements. Browser playback is checked separately.", "artifactSha256": "b2ac7fca19f59d9d047b9cd6d8b6e43af6502cc4a6a87b98e0d71272f189e3b1" }, "creative": { "state": "Kyle positively reviewed", "scope": "Positive review on 8 October 2026 applies to this exact unchanged film. It does not establish listening or approval of other variants.", "artifactSha256": "b2ac7fca19f59d9d047b9cd6d8b6e43af6502cc4a6a87b98e0d71272f189e3b1" }, "listening": { "state": "Not verified", "scope": "No perceptual listening pass is established by this library import.", "artifactSha256": "b2ac7fca19f59d9d047b9cd6d8b6e43af6502cc4a6a87b98e0d71272f189e3b1" }, "reproduction": { "state": "Same-runtime byte-identical rebuild", "scope": "Saved artwork and source rebuilt the same MP4 on the recorded runtime. Fresh network install, another machine and a new subject remain untested.", "artifactSha256": "b2ac7fca19f59d9d047b9cd6d8b6e43af6502cc4a6a87b98e0d71272f189e3b1" } }, "detailUrl": "https://library.jkylehobson.chatgpt.site/video-library/#family=pixel&example=codex-generated-illustration", "processUrl": "/video-library/process.html?family=pixel&example=codex-generated-illustration", "downloads": { "prompt": { "available": true, "url": "/video-library/prompts/pixel--codex-generated-illustration.txt", "sha256": "7f938cc616d5966628add5be10e556fb6ee21506d567b60b7d6aec23a03534f1", "bytes": 1278, "label": "Reusable, example-specific instructions" }, "video": { "name": "pixel--codex-generated-illustration.mp4", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/pixel--codex-generated-illustration.mp4", "bytes": 2575872, "sha256": "b2ac7fca19f59d9d047b9cd6d8b6e43af6502cc4a6a87b98e0d71272f189e3b1", "available": true, "label": "2.5 MB" }, "source": { "name": "pixel--codex-generated-illustration--source.zip", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/pixel--codex-generated-illustration--source.zip", "bytes": 16030992, "sha256": "4c06f2bc7de22ca815daea779d0882441695a0cac8c6bb63f5188a169fb9037d", "available": true, "label": "15.3 MB", "contents": [ "editable source", "variant guidance", "source assets", "audio inputs", "dependency declarations", "file manifest" ], "includedFiles": 54, "includedFilePaths": [ "README.md", "assets/generated/actors-v1.png", "assets/generated/environment-v1.png", "assets/generated/plant-v1.png", "companion/docs/CASE-STUDY.md", "companion/docs/TEMPLATE-GUIDE.md", "companion/template/SKILL.md", "companion/template/STYLE.md", "companion/visuals/matched-comparison.jpg", "companion/visuals/plant-continuity.jpg", "docs/CASE-STUDY.md", "docs/REPRODUCE.md", "docs/TEMPLATE.md", "docs/asset-registration.md", "docs/creative-treatment.md", "docs/generated-asset-workflow.md", "docs/learning-ledger.md", "docs/project-map.md", "docs/review-notes.md", "docs/shot-plan-actual.md", "docs/validation-summary.md", "evidence/actors-prompt.txt", "evidence/asset-manifest.json", "evidence/environment-prompt.txt", "evidence/plant-prompt.txt", "evidence/reproduction.json", "index.html", "outputs/audio/cues.json", "outputs/audio/mix.wav", "outputs/audio/stems/drums.wav", "outputs/audio/stems/music.wav", "outputs/audio/stems/sfx.wav", "outputs/cover.png", "outputs/encoded-contact-sheet.jpg", "package.json", "scripts/audio.mjs", "scripts/evidence.py", "scripts/package.py", "scripts/render.mjs", "scripts/runtime.mjs", "scripts/verify.mjs", "src/assets.js", "src/audio/dsp.js", "src/audio/instruments.js", "src/audio/sfx.js", "src/font5.js", "src/hud.js", "src/main.js", "src/registration.js", "src/scene.js", "src/score.js", "src/timeline.js", "BUNDLE-GUIDE.md", "companion/review-summary.json" ], "externalPrerequisites": { "runtime": [ "Node.js", "Chromium or Chrome", "FFmpeg and ffprobe" ], "packageDependencies": { "playwright": "1.62.1" }, "lockfileIncluded": false, "coldStart": "not tested" }, "license": { "summary": "User-directed publication of supplied authored source; preserve listed third-party notices; no new license granted here.", "includedNoticePaths": [], "newLicenseGranted": false } }, "bundle": { "name": "pixel--codex-generated-illustration--full.zip", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/pixel--codex-generated-illustration--full.zip", "bytes": 18676231, "sha256": "5f798a2b025ebe3cf4744f728a6b926d228ae79d708d6e91ab4efa6a1df69b60", "available": true, "label": "17.8 MB", "contents": [ "selected master", "editable source", "variant guidance", "source assets", "audio inputs", "dependency declarations", "file manifest", "designed cover", "starter prompt" ], "includedFiles": 57, "includedFilePaths": [ "README.md", "assets/generated/actors-v1.png", "assets/generated/environment-v1.png", "assets/generated/plant-v1.png", "companion/docs/CASE-STUDY.md", "companion/docs/TEMPLATE-GUIDE.md", "companion/template/SKILL.md", "companion/template/STYLE.md", "companion/visuals/matched-comparison.jpg", "companion/visuals/plant-continuity.jpg", "display/cover.webp", "docs/CASE-STUDY.md", "docs/REPRODUCE.md", "docs/TEMPLATE.md", "docs/asset-registration.md", "docs/creative-treatment.md", "docs/generated-asset-workflow.md", "docs/learning-ledger.md", "docs/project-map.md", "docs/review-notes.md", "docs/shot-plan-actual.md", "docs/validation-summary.md", "evidence/actors-prompt.txt", "evidence/asset-manifest.json", "evidence/environment-prompt.txt", "evidence/plant-prompt.txt", "evidence/reproduction.json", "index.html", "outputs/audio/cues.json", "outputs/audio/mix.wav", "outputs/audio/stems/drums.wav", "outputs/audio/stems/music.wav", "outputs/audio/stems/sfx.wav", "outputs/cover.png", "outputs/encoded-contact-sheet.jpg", "outputs/pixel-generated.mp4", "package.json", "scripts/audio.mjs", "scripts/evidence.py", "scripts/package.py", "scripts/render.mjs", "scripts/runtime.mjs", "scripts/verify.mjs", "src/assets.js", "src/audio/dsp.js", "src/audio/instruments.js", "src/audio/sfx.js", "src/font5.js", "src/hud.js", "src/main.js", "src/registration.js", "src/scene.js", "src/score.js", "src/timeline.js", "starter-prompt.txt", "BUNDLE-GUIDE.md", "companion/review-summary.json" ], "externalPrerequisites": { "runtime": [ "Node.js", "Chromium or Chrome", "FFmpeg and ffprobe" ], "packageDependencies": { "playwright": "1.62.1" }, "lockfileIncluded": false, "coldStart": "not tested" }, "license": { "summary": "User-directed publication of supplied authored source; preserve listed third-party notices; no new license granted here.", "includedNoticePaths": [], "newLicenseGranted": false } } }, "cadenceNote": "60 Hz scene evaluation, held actor states and 30 Hz text updates. Image generation backend model was not exposed.", "starterPrompt": "Create a short Pixel film about {subject} for {audience}. Use the selected example as a visual reference. Preserve its composition, material, type, motion and audio relationships while adapting the story.\n\nSelected example: Seed to Seedling · generated illustration\nFamily: pixel\nVariant: codex-generated-illustration\nTypography: FONT5 · original 5 × 7 bitmap glyphs\nProduction: Canvas 2D + saved artwork\nExact reference master SHA-256: b2ac7fca19f59d9d047b9cd6d8b6e43af6502cc4a6a87b98e0d71272f189e3b1\n\nRead the selected STYLE.md, SKILL.md and reproduction instructions before adapting. Keep the declared renderer and source closure; do not assume another family variant has interchangeable parameters. Preserve exact font or custom glyph sources, color roles, spatial continuity and readable text. Record encoded frame rate, scene evaluation and held poses separately. Review the changed render visually and listen to the encoded audio before claiming those checks passed. Existing approval applies only to its recorded artifact.\n\nSuccess check: the adapted story is clear; key type remains readable in motion; the source rebuilds with its declared inputs; all media and review records identify the exact output. State any untested reproduction, listening or rights limits.", "downloadNote": "Downloads match this selected example. The full bundle includes its source, original video, cover and starter prompt. Source packages include artwork, audio inputs and dependency declarations. Requires Node.js, Chromium or Chrome, FFmpeg and ffprobe. Follow the included run guide for package installation and reproduction limits.", "model": "GPT-6 Astra", "reasoningEffort": "xhigh" } ], "relatedMethodIds": [ "pixel" ] }, { "id": "sunlit-product-3d", "slug": "sunlit-product-3d", "title": "Sunlit Product 3D", "premise": "Warm morning light, tactile ceramics and type that belongs in the scene. Two distinct coffee films share one product-focused visual direction.", "summary": "Warm morning light, tactile ceramics and type that belongs in the scene. Two distinct coffee films share one product-focused visual direction.", "category": "3d / product", "defaultExampleId": "claude-cloud", "facets": { "material": [ "3d", "three.js", "webgl", "product", "sunrise", "stoneware", "imperfection", "in-world-type", "letterpress", "gold-foil", "crane", "hard-cut", "cream-art" ], "producer": [ "Claude Cloud", "Local Claude + Codex" ], "format": [ "Portrait" ], "motion": [], "useCase": [] }, "examples": [ { "id": "claude-cloud", "title": "Brew Bliss: Morning Smile", "producer": "Claude Cloud", "producerEvidence": "The displayed model and reasoning label identify this production lane. Exact runtime model ID and per-film cost are not established by the source packet.", "relationship": "Original family example", "format": "Portrait", "productionMethod": "three.js on WebGL", "master": { "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/sunlit-product-3d--claude-cloud.mp4", "sha256": "1f56a6ade1882c83a5fa8c8e9d26512b283f8694cbc2f636c90484fb308d88a4", "bytes": 26775215, "mimeType": "video/mp4", "width": 1080, "height": 1920, "duration": 15.0, "encodedFps": 60 }, "poster": { "url": "/video-library/media/sunlit-product-3d--claude-cloud/cover.webp", "sha256": "f2f5533fdfc5a3517cc536e0ed9b8b58b76910f29e06f9209ca34c65ad8e727e", "sourceMasterSha256": "1f56a6ade1882c83a5fa8c8e9d26512b283f8694cbc2f636c90484fb308d88a4", "timeSeconds": 12.75, "rationale": "Late story beat selected to show the developed subject and visual system; extracted from this exact master." }, "previewVideo": { "url": "/video-library/media/sunlit-product-3d--claude-cloud/preview.mp4", "sha256": "d5ad9a8f42da00ece52943895627f862717f301e682c9b28ca96e7a805373a3b", "sourceMasterSha256": "1f56a6ade1882c83a5fa8c8e9d26512b283f8694cbc2f636c90484fb308d88a4", "width": 540, "height": 960, "label": "Playback preview · 540 px wide · full master in Download finished video" }, "gallery": [ { "id": "overview", "role": "encoded-contact-sheet", "label": "Scenes from the finished render · not a planning storyboard", "url": "/video-library/media/sunlit-product-3d--claude-cloud/overview.webp", "sourceMasterSha256": "1f56a6ade1882c83a5fa8c8e9d26512b283f8694cbc2f636c90484fb308d88a4" }, { "id": "scene-1", "role": "encoded-frame", "label": "Finished-film frame · 3 seconds", "url": "/video-library/media/sunlit-product-3d--claude-cloud/scene-1.webp", "sourceMasterSha256": "1f56a6ade1882c83a5fa8c8e9d26512b283f8694cbc2f636c90484fb308d88a4", "timeSeconds": 3.0 }, { "id": "scene-2", "role": "encoded-frame", "label": "Finished-film frame · 7.5 seconds", "url": "/video-library/media/sunlit-product-3d--claude-cloud/scene-2.webp", "sourceMasterSha256": "1f56a6ade1882c83a5fa8c8e9d26512b283f8694cbc2f636c90484fb308d88a4", "timeSeconds": 7.5 }, { "id": "scene-3", "role": "encoded-frame", "label": "Finished-film frame · 12 seconds", "url": "/video-library/media/sunlit-product-3d--claude-cloud/scene-3.webp", "sourceMasterSha256": "1f56a6ade1882c83a5fa8c8e9d26512b283f8694cbc2f636c90484fb308d88a4", "timeSeconds": 12.0 } ], "typography": [ "Fraunces italic 400", "Fraunces 600", "drawn", "DM Sans 600" ], "palette": { "forest": "#2E5B45", "forestDeep": "#1D3D2F", "forestInk": "#173528", "cream": "#F5EBDC", "creamWarm": "#EFDFC8", "coffee": "#4A2C1C", "coffeeDeep": "#2A170E", "crema": "#A8703F", "gold": "#F0B23E", "goldDeep": "#B9761A", "sky": "#8FC6E9", "skyDeep": "#4F8FC4" }, "usageGuidance": "Change the subject, copy and timing for your audience. Retain the selected example’s visual rules and recheck the entire reading interval after changes.", "styleRules": "---\nid: sunlit-product-3d\nname: Sunlit Product 3D (Brew Bliss , \"Morning Smile\")\nfamily: 3D / product\naliases: [product hero, sunlit still life, tabletop 3D, brand film, in-world typography, letterpress end card, latte art]\ntags: [3d, three.js, webgl, product, sunrise, stoneware, imperfection, in-world-type, letterpress, gold-foil, crane, hard-cut, cream-art]\nkind: visual-style\nroute: three.js on WebGL (software SwiftShader is enough) + Canvas 2D overlays and canvas textures; a project of its own (`source/`), not the library engine\nreadiness: { research: catalog-candidate, rights: original-work, referenceImages: own-render, code: built, render: rendered-and-measured }\n---\n\n# Sunlit Product 3D (Brew Bliss , \"Morning Smile\")\n\nA 15-second portrait brand film for a fictional coffee brand. At dawn, a hand-thrown green cup sits on a cream table while \"Good morning.\" rises letter by letter from behind the horizon like the sun.\n- A hard cut on the downbeat goes to a high three-quarter view. A sky-blue creamer pours, and the stream *draws* a smile across the coffee, left to right.\n- Two drops fall and bloom into eyes; the face winks.\n- The camera cranes up to overhead and pulls back, and the brand is letterpressed into the table on the beat: **Brew Bliss**, then *Sip, Savor, Smile.*, with a gold-foil sun mark and swash.\n\n**The one rule:** *everything obeys the same light and physics.* The product, the latte art and every word share one sun, one table and one camera. Type is never laid over the picture: it rises behind the horizon, is occluded by the cup, and is pressed into the table with shadows and ripples.\n\n## Creative direction\n- **Audience:** food and drink, homeware and lifestyle brands; DTC product launches; any brand whose promise is a feeling (\"good mornings\").\n- **Purpose:** turn a product into a small, warm moment with one delight (here, the cream face) and end on a clean brand lockup.\n- **Feeling:** warm, tactile, unhurried and quietly joyful.\n- **Central visual idea:** *morning light, tactile type.* The sunrise arc becomes the cream smile, then the gold sun mark, then the swash under \"Smile.\": one arc carried through the whole film.\n- **How the parts work together:**\n - *Composition:* one hero object, centred, with lots of warm negative space.\n - *Colour:* forest-green stoneware, a cream limewash table, coffee brown, sunrise gold, and a sky-blue creamer as the single cool accent.\n - *Type:* Fraunces as a physical material; DM Sans only for a small, stable caption.\n - *Motion:* fluid and tactile (pours, ripples, drops, presses with a small overshoot), with one hard cut and one continuous crane.\n - *Sound:* a warm 100 BPM groove in D, birdsong, and foley locked to every physical event.\n\n## Fit\n- **Best for:** product heroes, brand intros, seasonal campaigns, social pre-roll (9:16), packaging and homeware reveals.\n- **Avoid when:** the product needs real photography for trust (food safety, cosmetics claims), when render time is tight, or when there is no single hero object.\n- **Cost:** the most expensive style in the library. With software WebGL on 4 cores, a full 900-frame render takes about 40 minutes (`source/README.md`); production took about 1.5 h of CPU including re-renders. Budget from the slowest frame: end-card frames cost about 3× an average one.\n\n## Visual fingerprint\n| Element | Rule |\n|---|---|\n| Palette | forest `#2E5B45`, forestDeep `#1D3D2F`, forestInk `#173528`, cream `#F5EBDC`, creamWarm `#EFDFC8`, coffee `#4A2C1C`, coffeeDeep `#2A170E`, crema `#A8703F`, gold `#F0B23E`, goldDeep `#B9761A`, sky `#8FC6E9`, skyDeep `#4F8FC4` (`src/timeline.js → PALETTE`). |\n| Hero props | Lathe-built stoneware (`CUP_PROFILE`, `SAUCER_PROFILE`, `PITCHER_PROFILE` in cm). Hand-thrown imperfection: out-of-round wobble, an uneven rim, throwing rings of varied depth, glaze that breaks lighter on ridges and pools darker at joints, iron speckles, an unglazed clay foot, a pulled strap handle with flared joints. |\n| Coffee | A lit surface whose albedo, roughness and normal come from a procedural crema plus signed-distance cream art (smile arc 208°→332°, radius 2.76 cm; eyes 0.6 × 0.76 cm at ±1.6 cm). The pour *draws* the smile; drops *bloom* the eyes; ripples come from each landing and stamp. |\n| Light | Shot 1: a low sunrise key (elevation 9°→15°, `#FF9F5A`→`#FFC985`), warm hemisphere fill, exposure 0.92→1.02. Shot 2: a high key at 39° (`#FFDCAA`), cool sky hemisphere `#CFE3F2` over warm ground `#E6CDA8`, low fill. The visible sun and the key light are separate controls. |\n| Camera | 30° FOV. Shot 1: a low push-in at rim height (distance 70→61 cm). Hard cut at 2.4 s. Shot 2: one crane from a 43° high three-quarter to 90° overhead (2.4→8.7 s), then a pull back (35.5→59 cm, 8.1→10.4 s) and a 2.4 cm \"breathing\" push during the hold. |\n| Finish | Contact shadows under every object, a vignette, fine grain, sparkles only on \"alive\" moments. |\n\n### Typography (exact)\n| Role | Family / weight | Size | Colour | Where it lives |\n|---|---|---|---|---|\n| \"Good morning.\" | Fraunces italic 400 | 132 px on a 2048 px canvas spanning 120 cm of the horizon | `rgba(36,54,44,0.93)` + a warm light-wrap halo (`rgba(255,200,130,0.9)`, blur 18) | A plane behind the table, rising letter by letter; the table occludes it and the cup passes in front |\n| Wordmark \"Brew Bliss\" | Fraunces 600 | 300 px on a 2048 × 1152 canvas spanning 20 × 11.25 cm of table | forestInk `#173528` | Letterpressed into the table (ink + bump map), one letter at a time |\n| Tagline \"Sip, Savor, Smile.\" | Fraunces italic 400 | 138 px (same canvas) | \"Sip,\" and \"Savor,\" coffee `#4A2C1C`; \"Smile.\" forest `#2E5B45` | Pressed in on beats 18, 19 and 20 |\n| Sun mark + swash | drawn (radius 84 px) | , | gold foil `#E9AE3C` with a travelling sheen | A metallic foil layer above the ink |\n| Caption | DM Sans 600 | 34 px, tracking 7 px | coffee `#4A2C1C` | \"COFFEE FOR GOOD MORNINGS\", a screen overlay at y 1846 (the only flat type) |\n\n## Temporal fingerprint\n100 BPM: one beat = 0.6 s = 36 frames. Every story beat is in `src/timeline.js → T`, which both picture and sound import.\n\n| Time | Picture | Sound |\n|---|---|---|\n| 0.00-2.40 | Dawn push-in; the sun clears the hills; \"Good morning.\" rises; backlit steam | Pad swell, birdsong, kalimba pickup, reverse swell into the cut |\n| 2.40 | **Hard cut on the downbeat**; the creamer swings in | Groove enters |\n| 2.55-4.62 | The stream lands (2.70) and traces the smile (2.75-4.50) | Pour: bubbles + stream hiss panned with the landing point; music ducks 3 dB |\n| 5.40 / 6.00 | Eye drops land (fall 0.22 s each) | Tuned plips A5, C♯6 |\n| 6.60 | Face complete; sparkles | Celesta glissando |\n| 7.50-7.84 | Wink | \"Tink\" |\n| 8.10-10.40 | Crane reaches overhead and pulls back | Air whoosh, a one-beat break and riser |\n| 9.60 | \"Brew Bliss\" presses in; the gold mark lands with a glint | Letterpress thunks, foil chime |\n| 10.80 / 11.40 / 12.00 | \"Sip,\" \"Savor,\" \"Smile.\" press in; the swash draws | V-I cadence on \"Smile.\" |\n| 12.00-15.00 | End card held 3 s with a breathing push-in | Dmaj9 rings out; birds return; fade |\n\n**Press animation:** each element descends for 0.14 s with a soft shadow that tightens, lands on the beat with a small overshoot, and sends a ripple through the coffee.\n\n## How the composition develops\nLow and backlit (an object against the sky) → high and lit (the product's surface, where the delight happens) → overhead and pulled back (a flat, graphic end card). The camera's rise mirrors the sun's, and the arc motif travels from sky to coffee to foil.\n\n## Individual assets\n| Asset | File | Source |\n|---|---|---|\n| Cup, saucer, creamer (3D, with glaze textures) | `assets/models/cup.glb`, `saucer.glb`, `creamer.glb`; preview `models-preview.png` (simple preview lighting, not the film's) | `buildCup()`, `buildSaucer()`, `buildPitcher()` in `src/scene/props.js` |\n| Glaze colour map, throwing-ring bump | `assets/textures/glaze-map.png`, `throwing-rings-bump.png` | `glazeTexture()`, `throwingRingsTexture()` in `src/scene/textures.js` |\n| Limewash table map + bump, contact shadow | `assets/textures/table-limewash-map.png`, `table-limewash-bump.png`, `contact-shadow.png` | `tableTextures()`, `contactShadowTexture()` |\n| Horizon type (\"Good morning.\", mid-rise at 2.3 s) | `assets/type/horizon-good-morning_t2.3.png` | `buildHorizonType()` in `src/scene/typeWorld.js` |\n| End card layers at 15 s: ink, bump, foil, sheen | `assets/type/endcard-*_t15.png` | `buildTableType()` |\n| Cream-art face | (shader) | `FACE`, `smilePoint()` and the GLSL in `src/scene/coffee.js` |\n| Stream, drops, steam; sky dome; sparkles, caption, vignette, grain | (code) | `stream.js`, `sky.js`, `overlay.js` |\n\nAll assets were exported by `scripts/export-assets.mjs`, which runs the film's own modules, so they match the film exactly. Everything is procedural: no photographs, samples or generated images, so there are no prompts to record.\n\n## Sound\n**Score:** \"Morning Smile\", original, D major at 100 BPM. Dmaj9 (dawn) · Gmaj9 (pour) · F♯m11 · Bm9 (eyes) · Em9 (wink) · A7sus4 (pull back) · Gmaj9 (logo) · A7 (Sip, Savor) · Dmaj9 (Smile.). Pad, e-piano, kalimba, bells and celesta; a bass line; a kick, brush and shaker groove from the cut.\n\n**Stems** (48 kHz / 24-bit FLAC, post-fader, summing to the mix before bus processing): `01_keys_pad`, `02_bass`, `03_drums`, `04_melody_bells`, `05_sfx`, `06_ambience_birds`. `audio/cues.json` lists every sync event. Master: **−14.4 LUFS, −1.3 dBTP** (measured).\n\n| Event | Sound |\n|---|---|\n| Pour | a bubble model + stream hiss, panned with the landing point |\n| Eye drops | tuned plips (A5, C♯6) on beats 9 and 10 |\n| Face alive / wink | celesta glissando / bright tink |\n| Crane | air whoosh, a one-beat break and riser |\n| Presses | letterpress thunks; a foil chime for the mark |\n\n## Reusable prompt\n> Create a {15}-second {1080×1920} 3D product film for {brand}. One hero object made with visible hand-made imperfection (wobble, uneven glaze, contact shadows) on a warm table at sunrise. Shot 1: low and backlit at the object's rim height; the opening words rise from behind the horizon like the sun and are occluded by the table. Hard cut on a downbeat to a high three-quarter view; one delight happens *on the product's surface* (drawn by a physical action, not faded in). One continuous crane to overhead, then a pull back where the brand name and tagline are letterpressed into the table on the beat (shadows, overshoot, ripples), with a gold-foil mark. Warm 100 BPM groove; foley for every physical event; hold the end card for 3 s.\n\n## Adaptation guidance\n| Change | Safe? | Notes |\n|---|---|---|\n| Brand, words, palette | ✅ | `PALETTE` and `T` in `timeline.js`; layout in `buildTableType()` (`L`); re-check contrast against the lit table, not the swatch. |\n| Hero product | ✅ | Replace the lathe profiles (`props.js`) or load a GLB; keep the imperfection pass and the contact shadow. |\n| The delight | ⚠️ | Must happen *on* the product and be caused by a physical action (pour, press, drop). Design it to read at phone size (here, the face spans about half the cup). |\n| Real brand / real product | ⚠️ | Use the real product's geometry and approved claims; never invent features. |\n| Timing | ✅ | Keep events on the beat grid (`beat(n)`); the score reads the same `T`. |\n| 16:9 | ⚠️ | Re-block both shots; the end card layout is portrait-specific. |\n| Render budget | ⚠️ | Time the slowest frame first. The end card is about 3× slower because it redraws large text canvases every frame; skip redraws once an element has landed. |\n| **Essential** | , | One light for product and type, type inside the scene, one delight caused by physics, a hard cut on a downbeat, one continuous crane, presses on the beat, a 3 s end-card hold. |\n\n## Accessibility\n- **Contrast (measured on decoded frames):** wordmark ≈ 10.2:1 against the lit table; \"Sip, Savor,\" ≈ 8.8:1; \"Smile.\" ≈ 6.5:1; caption ≈ 7.3:1; \"Good morning.\" ≈ 5.5:1 against the sunrise sky at 2.0 s. The first design used pale type on a pale sky and failed; the backlit-silhouette fix is recorded in `CASE_STUDY.md`.\n- **Motion:** one hard cut (on a downbeat); no flashes; the foil glint is small and slow.\n- **Reading:** the end card holds 3 s.\n\n## Provenance\n- **Source:** the Phase 1 brand film of this project (`source/`), repackaged as a template. No Animate seed was used.\n- **Originality:** all geometry, textures, type layouts, music and sound are code-generated (2026-10-07). Brew Bliss is fictional.\n- **Fonts:** Fraunces, DM Sans (SIL OFL). **Libraries:** three.js (MIT), Playwright (Apache-2.0).", "review": { "technical": { "state": "Supplied checks passed", "scope": "Source handoff records complete decode, stream dimensions and audio measurements. Browser playback is checked separately.", "artifactSha256": "1f56a6ade1882c83a5fa8c8e9d26512b283f8694cbc2f636c90484fb308d88a4" }, "creative": { "state": "Not independently accepted", "scope": "not independently established", "artifactSha256": "1f56a6ade1882c83a5fa8c8e9d26512b283f8694cbc2f636c90484fb308d88a4" }, "listening": { "state": "Not verified", "scope": "No perceptual listening pass is established by this library import.", "artifactSha256": "1f56a6ade1882c83a5fa8c8e9d26512b283f8694cbc2f636c90484fb308d88a4" }, "reproduction": { "state": "Not tested", "scope": "Source is supplied. Cross-machine cold-start reproduction has not been established.", "artifactSha256": "1f56a6ade1882c83a5fa8c8e9d26512b283f8694cbc2f636c90484fb308d88a4" } }, "detailUrl": "https://library.jkylehobson.chatgpt.site/video-library/#family=sunlit-product-3d&example=claude-cloud", "processUrl": "/video-library/process.html?family=sunlit-product-3d&example=claude-cloud", "downloads": { "prompt": { "available": true, "url": "/video-library/prompts/sunlit-product-3d--claude-cloud.txt", "sha256": "947ab01590530080cd86eefd28a2ea10fde1eb64aeb8d071236c0d1188600bb1", "bytes": 1797, "label": "Reusable, example-specific instructions" }, "video": { "name": "sunlit-product-3d--claude-cloud.mp4", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/sunlit-product-3d--claude-cloud.mp4", "bytes": 26775215, "sha256": "1f56a6ade1882c83a5fa8c8e9d26512b283f8694cbc2f636c90484fb308d88a4", "available": true, "label": "25.5 MB" }, "source": { "name": "sunlit-product-3d--claude-cloud--source.zip", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/sunlit-product-3d--claude-cloud--source.zip", "bytes": 27196060, "sha256": "601e0e3704789f8016f88a15f807fe6637b28de14f03f481682150bbd081e5ae", "available": true, "label": "25.9 MB", "contents": [ "editable source", "variant guidance", "source assets", "audio inputs", "dependency declarations", "file manifest" ], "includedFiles": 66, "includedFilePaths": [ "CASE_STUDY.md", "RUN.md", "SKILL.md", "STYLE.md", "assets/models/creamer.glb", "assets/models/cup.glb", "assets/models/models-preview.png", "assets/models/saucer.glb", "assets/textures/contact-shadow.png", "assets/textures/glaze-map.png", "assets/textures/table-limewash-bump.png", "assets/textures/table-limewash-map.png", "assets/textures/throwing-rings-bump.png", "assets/type/endcard-bump_t15.png", "assets/type/endcard-foil_t15.png", "assets/type/endcard-ink_t15.png", "assets/type/endcard-sheen_t15.png", "assets/type/horizon-good-morning_t2.3.png", "audio/cues.json", "audio/mix.flac", "audio/stems/01_keys_pad.flac", "audio/stems/02_bass.flac", "audio/stems/03_drums.flac", "audio/stems/04_melody_bells.flac", "audio/stems/05_sfx.flac", "audio/stems/06_ambience_birds.flac", "film/contact_sheet.jpg", "film/spectrogram.png", "film/stills/01_1.80s.jpg", "film/stills/02_3.60s.jpg", "film/stills/03_5.70s.jpg", "film/stills/04_6.60s.jpg", "film/stills/05_7.70s.jpg", "film/stills/06_9.80s.jpg", "film/stills/07_12.00s.jpg", "film/stills/08_14.90s.jpg", "overview/encoded-contact-sheet.jpg", "source/README.md", "source/package-lock.json", "source/package.json", "source/scripts/export-assets.mjs", "source/scripts/lib/browser.mjs", "source/scripts/lib/server.mjs", "source/scripts/mux.mjs", "source/scripts/package.mjs", "source/scripts/qa.mjs", "source/scripts/render-audio.mjs", "source/scripts/render-video.mjs", "source/src/audio/dsp.js", "source/src/audio/instruments.js", "source/src/audio/score.js", "source/src/audio/sfx.js", "source/src/scene/choreo.js", "source/src/scene/coffee.js", "source/src/scene/index.html", "source/src/scene/main.js", "source/src/scene/overlay.js", "source/src/scene/props.js", "source/src/scene/sky.js", "source/src/scene/stream.js", "source/src/scene/textures.js", "source/src/scene/typeWorld.js", "source/src/scene/util.js", "source/src/timeline.js", "spec.json", "BUNDLE-GUIDE.md" ], "externalPrerequisites": { "runtime": [ "Node.js", "Chromium or Chrome", "FFmpeg and ffprobe" ], "packageDependencies": { "@fontsource/dm-sans": "^5.1.0", "@fontsource/fraunces": "^5.1.0", "three": "0.170.0", "playwright": "1.56.1" }, "lockfileIncluded": true, "coldStart": false }, "license": { "summary": "User-directed publication of supplied authored source; preserve listed third-party notices; no new license granted here.", "includedNoticePaths": [], "newLicenseGranted": false } }, "bundle": { "name": "sunlit-product-3d--claude-cloud--full.zip", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/sunlit-product-3d--claude-cloud--full.zip", "bytes": 54004833, "sha256": "196a38ad2591b7ff55784f89e034d562940748913759790b13cf434e2c32f078", "available": true, "label": "51.5 MB", "contents": [ "selected master", "editable source", "variant guidance", "source assets", "audio inputs", "dependency declarations", "file manifest", "designed cover", "starter prompt" ], "includedFiles": 69, "includedFilePaths": [ "CASE_STUDY.md", "RUN.md", "SKILL.md", "STYLE.md", "assets/models/creamer.glb", "assets/models/cup.glb", "assets/models/models-preview.png", "assets/models/saucer.glb", "assets/textures/contact-shadow.png", "assets/textures/glaze-map.png", "assets/textures/table-limewash-bump.png", "assets/textures/table-limewash-map.png", "assets/textures/throwing-rings-bump.png", "assets/type/endcard-bump_t15.png", "assets/type/endcard-foil_t15.png", "assets/type/endcard-ink_t15.png", "assets/type/endcard-sheen_t15.png", "assets/type/horizon-good-morning_t2.3.png", "audio/cues.json", "audio/mix.flac", "audio/stems/01_keys_pad.flac", "audio/stems/02_bass.flac", "audio/stems/03_drums.flac", "audio/stems/04_melody_bells.flac", "audio/stems/05_sfx.flac", "audio/stems/06_ambience_birds.flac", "display/cover.webp", "film/contact_sheet.jpg", "film/spectrogram.png", "film/stills/01_1.80s.jpg", "film/stills/02_3.60s.jpg", "film/stills/03_5.70s.jpg", "film/stills/04_6.60s.jpg", "film/stills/05_7.70s.jpg", "film/stills/06_9.80s.jpg", "film/stills/07_12.00s.jpg", "film/stills/08_14.90s.jpg", "film/sunlit-product-3d.mp4", "overview/encoded-contact-sheet.jpg", "source/README.md", "source/package-lock.json", "source/package.json", "source/scripts/export-assets.mjs", "source/scripts/lib/browser.mjs", "source/scripts/lib/server.mjs", "source/scripts/mux.mjs", "source/scripts/package.mjs", "source/scripts/qa.mjs", "source/scripts/render-audio.mjs", "source/scripts/render-video.mjs", "source/src/audio/dsp.js", "source/src/audio/instruments.js", "source/src/audio/score.js", "source/src/audio/sfx.js", "source/src/scene/choreo.js", "source/src/scene/coffee.js", "source/src/scene/index.html", "source/src/scene/main.js", "source/src/scene/overlay.js", "source/src/scene/props.js", "source/src/scene/sky.js", "source/src/scene/stream.js", "source/src/scene/textures.js", "source/src/scene/typeWorld.js", "source/src/scene/util.js", "source/src/timeline.js", "spec.json", "starter-prompt.txt", "BUNDLE-GUIDE.md" ], "externalPrerequisites": { "runtime": [ "Node.js", "Chromium or Chrome", "FFmpeg and ffprobe" ], "packageDependencies": { "@fontsource/dm-sans": "^5.1.0", "@fontsource/fraunces": "^5.1.0", "three": "0.170.0", "playwright": "1.56.1" }, "lockfileIncluded": true, "coldStart": false }, "license": { "summary": "User-directed publication of supplied authored source; preserve listed third-party notices; no new license granted here.", "includedNoticePaths": [], "newLicenseGranted": false } } }, "cadenceNote": "Encoded fps describes the file. Scene evaluation and held actor poses depend on this source recipe.", "starterPrompt": "Create a {15}-second {1080×1920} 3D product film for {brand}. One hero object made with visible hand-made imperfection (wobble, uneven glaze, contact shadows) on a warm table at sunrise. Shot 1: low and backlit at the object's rim height; the opening words rise from behind the horizon like the sun and are occluded by the table. Hard cut on a downbeat to a high three-quarter view; one delight happens *on the product's surface* (drawn by a physical action, not faded in). One continuous crane to overhead, then a pull back where the brand name and tagline are letterpressed into the table on the beat (shadows, overshoot, ripples), with a gold-foil mark. Warm 100 BPM groove; foley for every physical event; hold the end card for 3 s.\n\nSelected example: Brew Bliss: Morning Smile\nFamily: sunlit-product-3d\nVariant: claude-cloud\nTypography: Fraunces italic 400, Fraunces 600, drawn, DM Sans 600\nProduction: three.js on WebGL\nExact reference master SHA-256: 1f56a6ade1882c83a5fa8c8e9d26512b283f8694cbc2f636c90484fb308d88a4\n\nRead the selected STYLE.md, SKILL.md and reproduction instructions before adapting. Keep the declared renderer and source closure; do not assume another family variant has interchangeable parameters. Preserve exact font or custom glyph sources, color roles, spatial continuity and readable text. Record encoded frame rate, scene evaluation and held poses separately. Review the changed render visually and listen to the encoded audio before claiming those checks passed. Existing approval applies only to its recorded artifact.\n\nSuccess check: the adapted story is clear; key type remains readable in motion; the source rebuilds with its declared inputs; all media and review records identify the exact output. State any untested reproduction, listening or rights limits.", "downloadNote": "Downloads match this selected example. The full bundle includes its source, original video, cover and starter prompt. Source packages include artwork, audio inputs and dependency declarations. Requires Node.js, Chromium or Chrome, FFmpeg and ffprobe. Follow the included run guide for package installation and reproduction limits.", "model": "Opus 5.5", "reasoningEffort": "Extra" }, { "id": "local-brew-prime", "title": "Brew Bliss: Prime", "producer": "Local Claude + Codex", "producerEvidence": "The local Brew invocation records requested High effort and returned Claude Opus 5.5 model usage. This is the recorded production lane, not a per-frame model claim.", "relationship": "related family; distinct construction and subject; parameters are not interchangeable", "format": "Portrait", "productionMethod": "Three-dimensional product scene + authored typography", "master": { "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/sunlit-product-3d--local-brew-prime.mp4", "sha256": "99a80c0a92a5b0094786a97caf0128500386bea6daf550b2d5a3a0f196014b10", "bytes": 76566649, "mimeType": "video/mp4", "width": 1080, "height": 1920, "duration": 13.9, "encodedFps": 60 }, "poster": { "url": "/video-library/media/sunlit-product-3d--local-brew-prime/cover.webp", "sha256": "df0423baff50d36748f27dc3df918810b6ccfca734b760ad40b092909815e437", "sourceMasterSha256": "99a80c0a92a5b0094786a97caf0128500386bea6daf550b2d5a3a0f196014b10", "timeSeconds": 11.815, "rationale": "Late story beat selected to show the developed subject and visual system; extracted from this exact master." }, "previewVideo": { "url": "/video-library/media/sunlit-product-3d--local-brew-prime/preview.mp4", "sha256": "11b1b42bec387fcbb1446773554f98f7e2e39db2d9ac45fb99282ba2a0f4b344", "sourceMasterSha256": "99a80c0a92a5b0094786a97caf0128500386bea6daf550b2d5a3a0f196014b10", "width": 540, "height": 960, "label": "Playback preview · 540 px wide · full master in Download finished video" }, "gallery": [ { "id": "overview", "role": "encoded-contact-sheet", "label": "Scenes from the finished render · not a planning storyboard", "url": "/video-library/media/sunlit-product-3d--local-brew-prime/overview.webp", "sourceMasterSha256": "99a80c0a92a5b0094786a97caf0128500386bea6daf550b2d5a3a0f196014b10" }, { "id": "scene-1", "role": "encoded-frame", "label": "Finished-film frame · 2.78 seconds", "url": "/video-library/media/sunlit-product-3d--local-brew-prime/scene-1.webp", "sourceMasterSha256": "99a80c0a92a5b0094786a97caf0128500386bea6daf550b2d5a3a0f196014b10", "timeSeconds": 2.78 }, { "id": "scene-2", "role": "encoded-frame", "label": "Finished-film frame · 6.95 seconds", "url": "/video-library/media/sunlit-product-3d--local-brew-prime/scene-2.webp", "sourceMasterSha256": "99a80c0a92a5b0094786a97caf0128500386bea6daf550b2d5a3a0f196014b10", "timeSeconds": 6.95 }, { "id": "scene-3", "role": "encoded-frame", "label": "Finished-film frame · 11.12 seconds", "url": "/video-library/media/sunlit-product-3d--local-brew-prime/scene-3.webp", "sourceMasterSha256": "99a80c0a92a5b0094786a97caf0128500386bea6daf550b2d5a3a0f196014b10", "timeSeconds": 11.12 } ], "typography": [ "Playfair Display", "Montserrat" ], "palette": null, "usageGuidance": "Change the subject, copy and timing for your audience. Retain the selected example’s visual rules and recheck the entire reading interval after changes.", "styleRules": "# Brew Bliss , Prime , preserved local direction\n\nRead the full [creative treatment](../../../../sources/local-production/films/opus-brew-prime/docs/brief-and-storyboard.md) and original [README](../../../../sources/local-production/films/opus-brew-prime/README.md). Those documents contain the actual palette, materials, composition, shot timing and sound direction. This file is an index, not a replacement for them.\n\nPlayfair Display and Montserrat via @fontsource. Consult src/styles and src/ui for exact sizes/weights; preserve package pinning and bundled license records.\n\nThe cloud and local examples share a family. Their geometry, camera, timing, materials and parameter interfaces are distinct. Choose one complete variant before adapting it. Do not mix a cloud score with local scene timing.\n\nThe treatment records intent; the source and output-bound review record implementation. Earlier rejected studies remain in sources/local-production and are not current approved masters. Keep unknown or partial review status visible.", "review": { "technical": { "state": "Supplied checks passed", "scope": "Source handoff records complete decode, stream dimensions and audio measurements. Browser playback is checked separately.", "artifactSha256": "99a80c0a92a5b0094786a97caf0128500386bea6daf550b2d5a3a0f196014b10" }, "creative": { "state": "Not independently accepted", "scope": "see historical variant review; not newly accepted", "artifactSha256": "99a80c0a92a5b0094786a97caf0128500386bea6daf550b2d5a3a0f196014b10" }, "listening": { "state": "Not verified", "scope": "No perceptual listening pass is established by this library import.", "artifactSha256": "99a80c0a92a5b0094786a97caf0128500386bea6daf550b2d5a3a0f196014b10" }, "reproduction": { "state": "Not tested", "scope": "Source is supplied. Cross-machine cold-start reproduction has not been established.", "artifactSha256": "99a80c0a92a5b0094786a97caf0128500386bea6daf550b2d5a3a0f196014b10" } }, "detailUrl": "https://library.jkylehobson.chatgpt.site/video-library/#family=sunlit-product-3d&example=local-brew-prime", "processUrl": "/video-library/process.html?family=sunlit-product-3d&example=local-brew-prime", "downloads": { "prompt": { "available": true, "url": "/video-library/prompts/sunlit-product-3d--local-brew-prime.txt", "sha256": "4e02a9eaeb03ab9c49843750739d35191f4451a964635703d1b4eacd978d7a04", "bytes": 1283, "label": "Reusable, example-specific instructions" }, "video": { "name": "sunlit-product-3d--local-brew-prime.mp4", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/sunlit-product-3d--local-brew-prime.mp4", "bytes": 76566649, "sha256": "99a80c0a92a5b0094786a97caf0128500386bea6daf550b2d5a3a0f196014b10", "available": true, "label": "73.0 MB" }, "source": { "name": "sunlit-product-3d--local-brew-prime--source.zip", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/sunlit-product-3d--local-brew-prime--source.zip", "bytes": 16173528, "sha256": "9156586af09e4ed1a1afaba0df61bb93acc3d468a3a236313cff7e38e918b666", "available": true, "label": "15.4 MB", "contents": [ "editable source", "variant guidance", "source assets", "audio inputs", "dependency declarations", "file manifest" ], "includedFiles": 53, "includedFilePaths": [ "PORTABILITY/portability.md", "README.md", "assets/asset-manifest.md", "assets/licenses/montserrat-OFL.txt", "assets/licenses/playfair-display-OFL.txt", "assets/licenses/playwright-LICENSE.txt", "assets/licenses/pngjs-LICENSE.txt", "assets/licenses/three-LICENSE.txt", "assets/manifest.json", "audio/audio-map.json", "audio/cues.mjs", "audio/lib/dsp.mjs", "audio/lib/voices.mjs", "audio/render-audio.mjs", "audio/stems/ambience.wav", "audio/stems/music.wav", "audio/stems/sfx.wav", "docs/brief-and-storyboard.md", "docs/production-receipt.md", "docs/project-map.md", "guidance/SKILL.md", "guidance/STYLE.md", "index.html", "outputs/soundtrack.wav", "overview/encoded-contact-sheet.jpg", "package.json", "pnpm-lock.yaml", "scripts/crops.mjs", "scripts/determinism.mjs", "scripts/lib/session.mjs", "scripts/lib/tools.mjs", "scripts/motion-sheet.mjs", "scripts/northstar-strips.mjs", "scripts/render.mjs", "scripts/stills.mjs", "scripts/validate.mjs", "src/config/brand.js", "src/config/timeline.js", "src/film.js", "src/main.js", "src/post/composer.js", "src/scene/cameraPath.js", "src/scene/coffee.js", "src/scene/cupGeometry.js", "src/scene/cupMaterials.js", "src/scene/drop.js", "src/scene/environment.js", "src/scene/glint.js", "src/scene/steam.js", "src/styles/film.css", "src/ui/lockup.js", "src/util/math.js", "BUNDLE-GUIDE.md" ], "externalPrerequisites": { "runtime": [ "Node.js", "Chromium or Chrome", "FFmpeg and ffprobe" ], "packageDependencies": { "@fontsource/montserrat": "5.2.8", "@fontsource/playfair-display": "5.2.8", "playwright": "1.62.1", "pngjs": "7.0.0", "three": "0.180.0" }, "lockfileIncluded": true, "coldStart": false }, "license": { "summary": "User-directed publication of supplied authored source; preserve listed third-party notices; no new license granted here.", "includedNoticePaths": [ "assets/licenses/montserrat-OFL.txt", "assets/licenses/playfair-display-OFL.txt", "assets/licenses/playwright-LICENSE.txt", "assets/licenses/pngjs-LICENSE.txt", "assets/licenses/three-LICENSE.txt" ], "newLicenseGranted": false } }, "bundle": { "name": "sunlit-product-3d--local-brew-prime--full.zip", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/sunlit-product-3d--local-brew-prime--full.zip", "bytes": 92761411, "sha256": "5c4895df72580c2ade7de342c5090a6a85d37f6cfaefbe7f76cec06a86581ee4", "available": true, "label": "88.5 MB", "contents": [ "selected master", "editable source", "variant guidance", "source assets", "audio inputs", "dependency declarations", "file manifest", "designed cover", "starter prompt" ], "includedFiles": 56, "includedFilePaths": [ "PORTABILITY/portability.md", "README.md", "assets/asset-manifest.md", "assets/licenses/montserrat-OFL.txt", "assets/licenses/playfair-display-OFL.txt", "assets/licenses/playwright-LICENSE.txt", "assets/licenses/pngjs-LICENSE.txt", "assets/licenses/three-LICENSE.txt", "assets/manifest.json", "audio/audio-map.json", "audio/cues.mjs", "audio/lib/dsp.mjs", "audio/lib/voices.mjs", "audio/render-audio.mjs", "audio/stems/ambience.wav", "audio/stems/music.wav", "audio/stems/sfx.wav", "display/cover.webp", "docs/brief-and-storyboard.md", "docs/production-receipt.md", "docs/project-map.md", "guidance/SKILL.md", "guidance/STYLE.md", "index.html", "outputs/brew-bliss-prime.mp4", "outputs/soundtrack.wav", "overview/encoded-contact-sheet.jpg", "package.json", "pnpm-lock.yaml", "scripts/crops.mjs", "scripts/determinism.mjs", "scripts/lib/session.mjs", "scripts/lib/tools.mjs", "scripts/motion-sheet.mjs", "scripts/northstar-strips.mjs", "scripts/render.mjs", "scripts/stills.mjs", "scripts/validate.mjs", "src/config/brand.js", "src/config/timeline.js", "src/film.js", "src/main.js", "src/post/composer.js", "src/scene/cameraPath.js", "src/scene/coffee.js", "src/scene/cupGeometry.js", "src/scene/cupMaterials.js", "src/scene/drop.js", "src/scene/environment.js", "src/scene/glint.js", "src/scene/steam.js", "src/styles/film.css", "src/ui/lockup.js", "src/util/math.js", "starter-prompt.txt", "BUNDLE-GUIDE.md" ], "externalPrerequisites": { "runtime": [ "Node.js", "Chromium or Chrome", "FFmpeg and ffprobe" ], "packageDependencies": { "@fontsource/montserrat": "5.2.8", "@fontsource/playfair-display": "5.2.8", "playwright": "1.62.1", "pngjs": "7.0.0", "three": "0.180.0" }, "lockfileIncluded": true, "coldStart": false }, "license": { "summary": "User-directed publication of supplied authored source; preserve listed third-party notices; no new license granted here.", "includedNoticePaths": [ "assets/licenses/montserrat-OFL.txt", "assets/licenses/playfair-display-OFL.txt", "assets/licenses/playwright-LICENSE.txt", "assets/licenses/pngjs-LICENSE.txt", "assets/licenses/three-LICENSE.txt" ], "newLicenseGranted": false } } }, "cadenceNote": "Encoded fps describes the file. Scene evaluation and held actor poses depend on this source recipe.", "starterPrompt": "Create a short Sunlit Product 3D film about {subject} for {audience}. Use the selected example as a visual reference. Preserve its composition, material, type, motion and audio relationships while adapting the story.\n\nSelected example: Brew Bliss: Prime\nFamily: sunlit-product-3d\nVariant: local-brew-prime\nTypography: Playfair Display, Montserrat\nProduction: Three-dimensional product scene + authored typography\nExact reference master SHA-256: 99a80c0a92a5b0094786a97caf0128500386bea6daf550b2d5a3a0f196014b10\n\nRead the selected STYLE.md, SKILL.md and reproduction instructions before adapting. Keep the declared renderer and source closure; do not assume another family variant has interchangeable parameters. Preserve exact font or custom glyph sources, color roles, spatial continuity and readable text. Record encoded frame rate, scene evaluation and held poses separately. Review the changed render visually and listen to the encoded audio before claiming those checks passed. Existing approval applies only to its recorded artifact.\n\nSuccess check: the adapted story is clear; key type remains readable in motion; the source rebuilds with its declared inputs; all media and review records identify the exact output. State any untested reproduction, listening or rights limits.", "downloadNote": "Downloads match this selected example. The full bundle includes its source, original video, cover and starter prompt. Source packages include artwork, audio inputs and dependency declarations. Requires Node.js, Chromium or Chrome, FFmpeg and ffprobe. Follow the included run guide for package installation and reproduction limits.", "model": "Claude Opus 5.5", "reasoningEffort": "High (requested)" } ], "relatedMethodIds": [] }, { "id": "cartographic", "slug": "cartographic", "title": "Cartographic", "premise": "Follow a journey through an animated map, using routes, engraved terrain and carefully placed labels to reveal the story.", "summary": "Follow a journey through an animated map, using routes, engraved terrain and carefully placed labels to reveal the story.", "category": "Information design", "defaultExampleId": "claude-cloud", "facets": { "material": [ "2d", "map", "section", "engraving", "routes", "labels", "camera-travel", "editorial", "vintage" ], "producer": [ "Claude Cloud", "Local Codex" ], "format": [ "Portrait" ], "motion": [], "useCase": [] }, "examples": [ { "id": "claude-cloud", "title": "Seed to Seedling", "producer": "Claude Cloud", "producerEvidence": "The displayed model and reasoning label identify this production lane. Exact runtime model ID and per-film cost are not established by the source packet.", "relationship": "Original family example", "format": "Portrait", "productionMethod": "canvas-2d", "master": { "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/cartographic--claude-cloud.mp4", "sha256": "a773537134e8312656aa3f93f7353054de6bc4733230253835e025eb88949bfa", "bytes": 15695247, "mimeType": "video/mp4", "width": 1080, "height": 1920, "duration": 10.5, "encodedFps": 60 }, "poster": { "url": "/video-library/media/cartographic--claude-cloud/cover.webp", "sha256": "29da68729b530bef98a8547293742459e96d9b430c635c5627d14fe83df733bc", "sourceMasterSha256": "a773537134e8312656aa3f93f7353054de6bc4733230253835e025eb88949bfa", "timeSeconds": 10.08, "rationale": "Late story beat selected to show the developed subject and visual system; extracted from this exact master." }, "previewVideo": { "url": "/video-library/media/cartographic--claude-cloud/preview.mp4", "sha256": "7d72d4de32c26c61db877c28cbc2fffb95a4c9ff130482496001ee825ac4b065", "sourceMasterSha256": "a773537134e8312656aa3f93f7353054de6bc4733230253835e025eb88949bfa", "width": 540, "height": 960, "label": "Playback preview · 540 px wide · full master in Download finished video" }, "gallery": [ { "id": "overview", "role": "encoded-contact-sheet", "label": "Scenes from the finished render · not a planning storyboard", "url": "/video-library/media/cartographic--claude-cloud/overview.webp", "sourceMasterSha256": "a773537134e8312656aa3f93f7353054de6bc4733230253835e025eb88949bfa" }, { "id": "scene-1", "role": "encoded-frame", "label": "Finished-film frame · 2.1 seconds", "url": "/video-library/media/cartographic--claude-cloud/scene-1.webp", "sourceMasterSha256": "a773537134e8312656aa3f93f7353054de6bc4733230253835e025eb88949bfa", "timeSeconds": 2.1 }, { "id": "scene-2", "role": "encoded-frame", "label": "Finished-film frame · 5.25 seconds", "url": "/video-library/media/cartographic--claude-cloud/scene-2.webp", "sourceMasterSha256": "a773537134e8312656aa3f93f7353054de6bc4733230253835e025eb88949bfa", "timeSeconds": 5.25 }, { "id": "scene-3", "role": "encoded-frame", "label": "Finished-film frame · 8.4 seconds", "url": "/video-library/media/cartographic--claude-cloud/scene-3.webp", "sourceMasterSha256": "a773537134e8312656aa3f93f7353054de6bc4733230253835e025eb88949bfa", "timeSeconds": 8.4 } ], "typography": [ "Instrument Serif italic", "Jost 600 caps", "IBM Plex Mono 400", "Fraunces 600 + Fraunces italic 400", "Fraunces italic 40 + Instrument Serif italic 30" ], "palette": { "desk": "#2a2723", "paper": "#efe5cc", "ink": "#2b2620", "sepia": "#6b5034", "contour": "#9a6b3f", "water": "#3a6ea5", "waterLt": "#8fb2d6", "route": "#b23a2a", "shoot": "#4f7d3a", "hatch": "#7d6a52", "faint": "#b9a888", "light": "#c9922e" }, "usageGuidance": "Change the subject, copy and timing for your audience. Retain the selected example’s visual rules and recheck the entire reading interval after changes.", "styleRules": "---\nid: cartographic\nname: Cartographic (an expedition map of one bean)\nfamily: information design\naliases: [map animation, survey sheet, travel map, geological section, expedition map, vintage cartography]\ntags: [2d, map, section, engraving, routes, labels, camera-travel, editorial, vintage]\nkind: visual-style\nroute: canvas-2d (CPU-backed canvas; baked static sheet + live story layer)\nreadiness: { research: authored, rights: original-work, referenceImages: own-render, code: built, render: rendered-and-measured }\n---\n\n# Cartographic (an expedition map of one bean)\n\nAn animated survey sheet: \"Section A-A′ through a garden bed\".\n- **The sheet:** aged paper with fold creases and foxing. It carries engraved strata, each with its own geological fill pattern (stipple topsoil, dashed loam, hatched subsoil) and dashed \"inferred\" boundaries, a depth scale in centimetres, and italic feature labels set along their features (an earthworm burrow, an old root channel, a pebble).\n- **The routes:** moisture spreads as blue isolines. The root advances as a red dashed expedition route with dated camps (\"Day 2 · root breaks out\", \"Day 4\"…). The shoot climbs as a green route to a summit of engraved leaves beneath a compass-rose sun labelled LIGHT.\n- **The camera:** it travels the sheet like a documentary map sequence, then pulls back to reveal the whole map on a dark desk, with neatline, legend, scale bar, locator inset and a title cartouche whose letters ink in.\n\n**The one rule:** *it must read as a real map.* Every element uses cartographic conventions: legend symbols, scale, labels with paper halos, dashed routes, isolines, hachures and a neatline. Nothing is pictorial without being a map symbol.\n\n## Creative direction\n- **Audience:** documentary and museum audiences, geography and earth-science education, outdoor and heritage brands, editorial features.\n- **Purpose:** turn a process into a *journey* with a place, a route and dated milestones.\n- **Feeling:** adventurous, scholarly, calm, crafted.\n- **Central visual idea:** *a seedling's growth as an expedition.* The root's descent and the shoot's climb are routes across a surveyed section; days are camps. The final pull-back turns the journey into an artefact (the map itself).\n- **How the parts work together:**\n - *Composition* is a portrait map sheet whose content sits in a 900 px-wide central column, so close-ups never crop labels.\n - *Colour* follows map conventions: sepia/ink linework, hydrography blue, route red, vegetation green, sun ochre.\n - *Type* follows the cartographic hierarchy: italic serif for natural features, spaced caps for regions/strata, mono for measurements, and a Fraunces cartouche title.\n - *Motion* is a smooth camera travel that follows the active route tip, with routes drawing continuously and labels inking in.\n - *Sound* is a documentary pizzicato ostinato plus the sounds of the map: unfolding paper, a pen nib on the routes, a stamp at each camp.\n\n## Fit\n- **Best for:** journeys, migrations, supply chains, process timelines with places, history sequences, \"how far / how deep\" explainers, heritage and outdoor brands.\n- **Avoid when:** speed or energy is needed (the camera grammar is slow), for abstract topics with no spatial metaphor, or for youth/playful brands.\n- **Cost:** medium for 2D. A 1500 × 2400 baked sheet plus a live story layer.\n\n## Visual fingerprint\n| Element | Rule |\n|---|---|\n| Sheet | 1500 × 2400 map px; 1 cm = 60 px; ground (0 cm) at y 1000; seed at (750, 1150) = 2.5 cm deep. The central content column runs x 300-1200 (close-ups at scale 1.12-1.22 show 885-965 px of map width). |\n| Paper | Baked: 3-octave value-noise mottling (±8), foxing spots, fold creases at x 750 and y 800/1600 (light line + shadow line), edges darkened over 110 px. Sits on a dark desk `#2a2723` with a soft shadow during the pull-back. |\n| Strata | Topsoil: 2600 stipple dots. Loam: 16 px dashes in brick rows (22 px). Subsoil: 45° hatch every 16 px. Boundaries: wavy ±16 px, dashed 14/8 (inferred). Ground: 4 px ink + hachure ticks every 26 px. |\n| Isolines | 6 half-ellipses from the surface (rx 70 + 52i, ry 40 + 38i, slight wobble), drawn outward from the centre in 0.5 s each, 0.24 s apart; the outer one is darker and labelled \"wet front · Day 1\". |\n| Routes | 5 px dashed (16/9): root red `#b23a2a`, shoot green `#4f7d3a`. Rootlets 3 px (10/7). Travelling tip: a filled dot r 9 with an expanding ring (1.6 Hz). Camps: triangle with a 2 px ink stroke, 40 px leader, italic label on alternating sides. |\n| Symbols | Engraved bean (outline + curved hatching + hilum), pebble (outline + 45° hatch), compass-rose sun (16 rays, alternate filled/outlined), engraved leaves (outline + hatch + midrib). |\n| Furniture | Neatline (3 px + 1.5 px double border with alternating 1 cm bars), title cartouche (double frame, corner rings), legend box (5 entries), scale bar 0-5 cm, locator inset (plan view with section line A-A′), imprint line. |\n| Palette | Desk `#2a2723` · paper `#efe5cc` · ink `#2b2620` · sepia `#6b5034` · contour `#9a6b3f` · water `#3a6ea5` / `#8fb2d6` · route `#b23a2a` · shoot `#4f7d3a` · hatch `#7d6a52` · faint `#b9a888` · light `#c9922e`. |\n\n### Typography (exact)\n| Role | Family / weight | Size (map px) | Treatment | Enter → settle |\n|---|---|---|---|---|\n| Feature labels (\"pebble\", \"wet front · Day 1\", camp labels) | Instrument Serif italic | 30-34 | ink or sepia/water, with a 7 px paper-coloured halo stroke behind | fade 0.35 s; camp labels appear when the route reaches the camp |\n| Curved labels (\"earthworm burrow\", \"old root channel\") | Instrument Serif italic | 30-32 | glyphs placed along the feature's polyline, rotated to its tangent, 6 px halo | fade 0.35 s |\n| Regions / strata | Jost 600 caps, letters spaced with spaces + tracking 4 | 26 | sepia, centred | fade 0.35 s, staggered 0.15 s |\n| Section ends \"A\" / \"A′\" | Fraunces 600 | 44 | ink with halo | static |\n| Measurements (depth scale, scale bar) | IBM Plex Mono 400 | 22 | ink | static |\n| Seed label | Fraunces italic 40 + Instrument Serif italic 30 | , | right-aligned left of the seed | fade 0.35 s at 0.5 s / 0.7 s |\n| Cartouche kicker | Jost 600 caps, tracking 3 | 22 | sepia | static |\n| Title | Fraunces 600 \"From seed\" (ink) / Fraunces italic 400 \"to seedling\" (green) | 84 | centred in the cartouche at baselines 290 / 382 | letters ink in left → right over 0.5 s at 8.6 s and 8.85 s |\n| Legend title / entries | Jost 600 caps 24 (tracking 4) / Instrument Serif italic 32 | , | in the legend box | fade 0.4 s at 8.9 s |\n| Imprint | Instrument Serif italic | 30 | centred at y 2318 | fade 0.4 s at 9.3 s |\n\nOn-screen sizes are map px × camera scale: about 1.2× in close-ups and 0.72× on the full sheet.\n\n## Temporal fingerprint\n| Element | Rule |\n|---|---|\n| Grid | 100 BPM. Steps at 1.0 s, 3.0 s and 5.6 s; pull-back 7.6-8.8 s. |\n| Camera | Frame centre (540, 960) shows map point (x, y) at scale s. Keys: (750,1170,1.22)@0 → (750,1200,1.2)@3.0 → (760,1420,1.12)@5.4 → (770,1300,1.12)@5.8 → (800,900,1.12)@7.4 → (750,1200,0.72)@8.8 → 0.715@10.5. Smootherstep between keys. The camera follows the active tip. |\n| Routes | The root draws with smoothstep progress over 3.2-5.4 s (days 1.5 → 8); the shoot over 5.8-7.4 s (days 4.3 → 7). Camps appear the moment the route reaches them. |\n| Labels | Ink-in or fade 0.35-0.5 s; never moving once placed (maps don't animate their labels). |\n| Holds | The full sheet holds 1.7 s after the title has inked in. |\n\n## How the composition develops\n| Time | Beat | What happens |\n|---|---|---|\n| 0-1.0 s | Arrival | Close on the topsoil around the seed; strata and feature labels ink in; \"The Seed · planted Day 0, 2.5 cm deep\". |\n| 1.0-3.0 s | ① Water wakes the seed | Six moisture isolines spread from the surface; the engraved seed swells 18 %; \"wet front · Day 1\". |\n| 3.0-5.6 s | ② A root reaches down | The camera descends with the red route; camps Day 2, 4, 6, 8; rootlets branch; the route passes the burrow, pebble and old channel. |\n| 5.6-7.6 s | ③ A shoot finds the light | The camera climbs with the green route; \"Day 5 · breaks the surface\", Day 6, \"Day 7 · first leaves\"; engraved leaves open under the LIGHT compass rose. |\n| 7.6-10.5 s | The map | The pull-back reveals the full sheet on the desk: neatline, legend, scale bar, locator inset; the cartouche title inks in; imprint. |\n\n## Sound fingerprint\nA documentary cue at 100 BPM in D Dorian (Dm add9 · C · B♭ · C) that resolves to F major on the pull-back. Instruments: a Karplus-Strong pizzicato ostinato on 8ths, a warm pad, a bell melody, and a soft kick and shaker from step 2.\n\nThe map is audible:\n- **Paper:** an unfold (rustle + low thunk) at the start and on the pull-back.\n- **Water:** a trickle of bubbles while the isolines spread.\n- **Routes:** a pen-nib scribble for the whole of each route draw.\n- **Camps:** a rubber-stamp thunk plus a pluck at each camp (root camps descend D4 A3 F3 D3; shoot camps ascend A4 D5 F5).\n- **Arrival:** a bell \"ting\" at the light, then a pen scratch as the title inks in.\n\nMix −15.4 LUFS, −1.3 dBTP.\n\n## Reusable prompt\n> Create a {10.5}-second {1080×1920} animated map about {journey/process}. Treat it as a real survey sheet on aged paper (mottling, foxing, fold creases): a {section/plan} with engraved fill patterns, dashed inferred boundaries, a measurement scale, italic serif feature labels with paper halos (some set along their features), spaced-caps region names, and isolines for spreading quantities. Show progress as dashed expedition routes in red and green with dated camp symbols and a travelling tip ring. The camera smoothly follows the active route, then pulls back to reveal the whole sheet on a desk, with neatline, legend, scale bar, locator inset and a title cartouche whose letters ink in. Score: a pizzicato documentary ostinato, a pen-nib scratch for routes, a stamp for each camp, paper unfolding. Avoid: pictorial illustration that isn't a map symbol, moving labels, cropped labels in close-ups.\n\n## Adaptation guidance\n| Change | Safe? | Notes |\n|---|---|---|\n| Subject / route | ✅ | Any journey with milestones: replace `ROOT`/`SHOOT`, camps and features. Keep content in a column narrower than the close-up view. |\n| Map type | ✅ | Plan view, section or topographic all work; keep the legend and scale honest to the view. |\n| Palette | ✅ | Keep map conventions (blue water, red routes, sepia linework) unless the brand demands otherwise. |\n| Fonts | ✅ | An italic serif for features, spaced caps for regions, mono for numbers, a display serif for the cartouche. |\n| Camera keys | ⚠️ | Re-check every label against the frame at each key: map labels cannot be moved per shot. |\n| 16:9 | ✅ easier | Wide sheets suit maps; use a horizontal section. |\n| **Essential** | , | Real map conventions, routes with dated camps, labels with halos, the camera travel and the reveal of the whole sheet. |\n\n## Accessibility\n- Labels have paper halos so they read over linework.\n- Routes differ by colour **and** by direction (down vs up) **and** by legend.\n- Close-up label sizes are 36-41 px on screen; the full-sheet view is an overview, not where facts are first introduced.\n- There is no flashing; camera speed is gentle (smootherstep).\n\n## Provenance\nOriginal style authored for this library (2026-10-07); no Animate seed. Conventions follow general cartographic practice (no map data was copied). Fonts: Fraunces, Instrument Serif, Jost and IBM Plex Mono (SIL OFL) via Fontsource. The paper, linework, symbols and sound are procedural.", "review": { "technical": { "state": "Supplied checks passed", "scope": "Source handoff records complete decode, stream dimensions and audio measurements. Browser playback is checked separately.", "artifactSha256": "a773537134e8312656aa3f93f7353054de6bc4733230253835e025eb88949bfa" }, "creative": { "state": "Not independently accepted", "scope": "not independently established", "artifactSha256": "a773537134e8312656aa3f93f7353054de6bc4733230253835e025eb88949bfa" }, "listening": { "state": "Not verified", "scope": "No perceptual listening pass is established by this library import.", "artifactSha256": "a773537134e8312656aa3f93f7353054de6bc4733230253835e025eb88949bfa" }, "reproduction": { "state": "Not tested", "scope": "Source is supplied. Cross-machine cold-start reproduction has not been established.", "artifactSha256": "a773537134e8312656aa3f93f7353054de6bc4733230253835e025eb88949bfa" } }, "detailUrl": "https://library.jkylehobson.chatgpt.site/video-library/#family=cartographic&example=claude-cloud", "processUrl": "/video-library/process.html?family=cartographic&example=claude-cloud", "downloads": { "prompt": { "available": true, "url": "/video-library/prompts/cartographic--claude-cloud.txt", "sha256": "2466f880057a7892680fdcac0387e90760e6594abc7e561e84f193ffffb329bc", "bytes": 2029, "label": "Reusable, example-specific instructions" }, "video": { "name": "cartographic--claude-cloud.mp4", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/cartographic--claude-cloud.mp4", "bytes": 15695247, "sha256": "a773537134e8312656aa3f93f7353054de6bc4733230253835e025eb88949bfa", "available": true, "label": "15.0 MB" }, "source": { "name": "cartographic--claude-cloud--source.zip", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/cartographic--claude-cloud--source.zip", "bytes": 22740005, "sha256": "16fa1e20f91251c0abcfda7ca1b4c271bee670147af2af895e9a12a31137a71a", "available": true, "label": "21.7 MB", "contents": [ "editable source", "variant guidance", "source assets", "audio inputs", "dependency declarations", "file manifest" ], "includedFiles": 59, "includedFilePaths": [ "CASE_STUDY.md", "RUN.md", "SKILL.md", "STYLE.md", "assets/components/full-sheet.png", "assets/components/symbols.png", "assets/layers/t10.20/01_cartography.png", "assets/layers/t10.20/02_story.png", "assets/layers/t10.20/03_furniture.png", "assets/layers/t2.60/01_cartography.png", "assets/layers/t2.60/02_story.png", "assets/layers/t2.60/03_furniture.png", "assets/layers/t4.60/01_cartography.png", "assets/layers/t4.60/02_story.png", "assets/layers/t4.60/03_furniture.png", "assets/paths/rootRoute.json", "assets/paths/rootRoute.svg", "assets/paths/rootletA.json", "assets/paths/rootletA.svg", "assets/paths/rootletB.json", "assets/paths/rootletB.svg", "assets/paths/shootRoute.json", "assets/paths/shootRoute.svg", "assets/textures/aged-paper-sheet.png", "audio/cues.json", "audio/mix.flac", "audio/stems/drums.flac", "audio/stems/music.flac", "audio/stems/sfx.flac", "engine/audio.mjs", "engine/audio/dsp.js", "engine/audio/instruments.js", "engine/audio/sfx.js", "engine/browser.mjs", "engine/export.mjs", "engine/finish.mjs", "engine/lib/draw.js", "engine/lib/util.js", "engine/page.html", "engine/render.mjs", "engine/runtime.js", "engine/server.mjs", "film/FILM_DELIVERED_SEPARATELY.txt", "film/contact_sheet.jpg", "film/spectrogram.png", "film/stills/01_1.00s.jpg", "film/stills/02_2.60s.jpg", "film/stills/03_4.60s.jpg", "film/stills/04_6.60s.jpg", "film/stills/05_8.00s.jpg", "film/stills/06_10.20s.jpg", "overview/encoded-contact-sheet.jpg", "package.json", "qa.json", "spec.json", "styles/cartographic/scene.js", "styles/cartographic/score.js", "styles/cartographic/timeline.js", "BUNDLE-GUIDE.md" ], "externalPrerequisites": { "runtime": [ "Node.js", "Chromium or Chrome", "FFmpeg and ffprobe" ], "packageDependencies": { "@fontsource/anton": "^5.1.0", "@fontsource/archivo-black": "^5.1.0", "@fontsource/bangers": "^5.1.0", "@fontsource/bebas-neue": "^5.1.0", "@fontsource/caveat": "^5.1.0", "@fontsource/dm-sans": "^5.1.0", "@fontsource/dm-serif-display": "^5.1.0", "@fontsource/fraunces": "^5.1.0", "@fontsource/ibm-plex-mono": "^5.1.0", "@fontsource/instrument-serif": "^5.1.0", "@fontsource/inter": "^5.1.0", "@fontsource/jetbrains-mono": "^5.1.0", "@fontsource/jost": "^5.3.0", "@fontsource/nunito": "^5.1.0", "@fontsource/permanent-marker": "^5.1.0", "@fontsource/playfair-display": "^5.1.0", "@fontsource/press-start-2p": "^5.1.0", "@fontsource/space-grotesk": "^5.1.0", "@fontsource/space-mono": "^5.1.0", "@fontsource/syne": "^5.1.0", "@fontsource/vt323": "^5.1.0", "three": "0.170.0", "playwright": "1.56.1" }, "lockfileIncluded": false, "coldStart": false }, "license": { "summary": "User-directed publication of supplied authored source; preserve listed third-party notices; no new license granted here.", "includedNoticePaths": [], "newLicenseGranted": false } }, "bundle": { "name": "cartographic--claude-cloud--full.zip", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/cartographic--claude-cloud--full.zip", "bytes": 38509200, "sha256": "e2251b49d7c96a2a098586ff964b89816fb46e54308474fc2117039f634768d0", "available": true, "label": "36.7 MB", "contents": [ "selected master", "editable source", "variant guidance", "source assets", "audio inputs", "dependency declarations", "file manifest", "designed cover", "starter prompt" ], "includedFiles": 62, "includedFilePaths": [ "CASE_STUDY.md", "RUN.md", "SKILL.md", "STYLE.md", "assets/components/full-sheet.png", "assets/components/symbols.png", "assets/layers/t10.20/01_cartography.png", "assets/layers/t10.20/02_story.png", "assets/layers/t10.20/03_furniture.png", "assets/layers/t2.60/01_cartography.png", "assets/layers/t2.60/02_story.png", "assets/layers/t2.60/03_furniture.png", "assets/layers/t4.60/01_cartography.png", "assets/layers/t4.60/02_story.png", "assets/layers/t4.60/03_furniture.png", "assets/paths/rootRoute.json", "assets/paths/rootRoute.svg", "assets/paths/rootletA.json", "assets/paths/rootletA.svg", "assets/paths/rootletB.json", "assets/paths/rootletB.svg", "assets/paths/shootRoute.json", "assets/paths/shootRoute.svg", "assets/textures/aged-paper-sheet.png", "audio/cues.json", "audio/mix.flac", "audio/stems/drums.flac", "audio/stems/music.flac", "audio/stems/sfx.flac", "display/cover.webp", "engine/audio.mjs", "engine/audio/dsp.js", "engine/audio/instruments.js", "engine/audio/sfx.js", "engine/browser.mjs", "engine/export.mjs", "engine/finish.mjs", "engine/lib/draw.js", "engine/lib/util.js", "engine/page.html", "engine/render.mjs", "engine/runtime.js", "engine/server.mjs", "film/FILM_DELIVERED_SEPARATELY.txt", "film/cartographic.mp4", "film/contact_sheet.jpg", "film/spectrogram.png", "film/stills/01_1.00s.jpg", "film/stills/02_2.60s.jpg", "film/stills/03_4.60s.jpg", "film/stills/04_6.60s.jpg", "film/stills/05_8.00s.jpg", "film/stills/06_10.20s.jpg", "overview/encoded-contact-sheet.jpg", "package.json", "qa.json", "spec.json", "starter-prompt.txt", "styles/cartographic/scene.js", "styles/cartographic/score.js", "styles/cartographic/timeline.js", "BUNDLE-GUIDE.md" ], "externalPrerequisites": { "runtime": [ "Node.js", "Chromium or Chrome", "FFmpeg and ffprobe" ], "packageDependencies": { "@fontsource/anton": "^5.1.0", "@fontsource/archivo-black": "^5.1.0", "@fontsource/bangers": "^5.1.0", "@fontsource/bebas-neue": "^5.1.0", "@fontsource/caveat": "^5.1.0", "@fontsource/dm-sans": "^5.1.0", "@fontsource/dm-serif-display": "^5.1.0", "@fontsource/fraunces": "^5.1.0", "@fontsource/ibm-plex-mono": "^5.1.0", "@fontsource/instrument-serif": "^5.1.0", "@fontsource/inter": "^5.1.0", "@fontsource/jetbrains-mono": "^5.1.0", "@fontsource/jost": "^5.3.0", "@fontsource/nunito": "^5.1.0", "@fontsource/permanent-marker": "^5.1.0", "@fontsource/playfair-display": "^5.1.0", "@fontsource/press-start-2p": "^5.1.0", "@fontsource/space-grotesk": "^5.1.0", "@fontsource/space-mono": "^5.1.0", "@fontsource/syne": "^5.1.0", "@fontsource/vt323": "^5.1.0", "three": "0.170.0", "playwright": "1.56.1" }, "lockfileIncluded": false, "coldStart": false }, "license": { "summary": "User-directed publication of supplied authored source; preserve listed third-party notices; no new license granted here.", "includedNoticePaths": [], "newLicenseGranted": false } } }, "cadenceNote": "Encoded fps describes the file. Scene evaluation and held actor poses depend on this source recipe.", "starterPrompt": "Create a {10.5}-second {1080×1920} animated map about {journey/process}. Treat it as a real survey sheet on aged paper (mottling, foxing, fold creases): a {section/plan} with engraved fill patterns, dashed inferred boundaries, a measurement scale, italic serif feature labels with paper halos (some set along their features), spaced-caps region names, and isolines for spreading quantities. Show progress as dashed expedition routes in red and green with dated camp symbols and a travelling tip ring. The camera smoothly follows the active route, then pulls back to reveal the whole sheet on a desk, with neatline, legend, scale bar, locator inset and a title cartouche whose letters ink in. Score: a pizzicato documentary ostinato, a pen-nib scratch for routes, a stamp for each camp, paper unfolding. Avoid: pictorial illustration that isn't a map symbol, moving labels, cropped labels in close-ups.\n\nSelected example: Seed to Seedling\nFamily: cartographic\nVariant: claude-cloud\nTypography: Instrument Serif italic, Jost 600 caps, IBM Plex Mono 400, Fraunces 600 + Fraunces italic 400, Fraunces italic 40 + Instrument Serif italic 30\nProduction: canvas-2d\nExact reference master SHA-256: a773537134e8312656aa3f93f7353054de6bc4733230253835e025eb88949bfa\n\nRead the selected STYLE.md, SKILL.md and reproduction instructions before adapting. Keep the declared renderer and source closure; do not assume another family variant has interchangeable parameters. Preserve exact font or custom glyph sources, color roles, spatial continuity and readable text. Record encoded frame rate, scene evaluation and held poses separately. Review the changed render visually and listen to the encoded audio before claiming those checks passed. Existing approval applies only to its recorded artifact.\n\nSuccess check: the adapted story is clear; key type remains readable in motion; the source rebuilds with its declared inputs; all media and review records identify the exact output. State any untested reproduction, listening or rights limits.", "downloadNote": "Downloads match this selected example. The full bundle includes its source, original video, cover and starter prompt. Source packages include artwork, audio inputs and dependency declarations. Requires Node.js, Chromium or Chrome, FFmpeg and ffprobe. Follow the included run guide for package installation and reproduction limits.", "model": "Opus 5.5", "reasoningEffort": "Extra" }, { "id": "local-a-way-through-r3", "title": "A Way Through R3", "producer": "Local Codex", "producerEvidence": "Contributor attribution follows the supplied source record; no per-film cost is inferred.", "relationship": "related family; distinct construction and subject; parameters are not interchangeable", "format": "Portrait", "productionMethod": "Authored map animation", "master": { "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/cartographic--local-a-way-through-r3.mp4", "sha256": "c22e5f04075b8a473458fa058a35f5b1c041df1675d41e75ddf259400d0a407d", "bytes": 17448182, "mimeType": "video/mp4", "width": 1080, "height": 1920, "duration": 13.0, "encodedFps": 60 }, "poster": { "url": "/video-library/media/cartographic--local-a-way-through-r3/cover.webp", "sha256": "5e51aedf88046f92dce508a6048af3faf2bd91224d340a7c3b2cc0d7353d9916", "sourceMasterSha256": "c22e5f04075b8a473458fa058a35f5b1c041df1675d41e75ddf259400d0a407d", "timeSeconds": 11.05, "rationale": "Late story beat selected to show the developed subject and visual system; extracted from this exact master." }, "previewVideo": { "url": "/video-library/media/cartographic--local-a-way-through-r3/preview.mp4", "sha256": "43b99f560c8949dbbfd59dbe988e4289584536e1724f757718224fafefbc9747", "sourceMasterSha256": "c22e5f04075b8a473458fa058a35f5b1c041df1675d41e75ddf259400d0a407d", "width": 540, "height": 960, "label": "Playback preview · 540 px wide · full master in Download finished video" }, "gallery": [ { "id": "overview", "role": "encoded-contact-sheet", "label": "Scenes from the finished render · not a planning storyboard", "url": "/video-library/media/cartographic--local-a-way-through-r3/overview.webp", "sourceMasterSha256": "c22e5f04075b8a473458fa058a35f5b1c041df1675d41e75ddf259400d0a407d" }, { "id": "scene-1", "role": "encoded-frame", "label": "Finished-film frame · 2.6 seconds", "url": "/video-library/media/cartographic--local-a-way-through-r3/scene-1.webp", "sourceMasterSha256": "c22e5f04075b8a473458fa058a35f5b1c041df1675d41e75ddf259400d0a407d", "timeSeconds": 2.6 }, { "id": "scene-2", "role": "encoded-frame", "label": "Finished-film frame · 6.5 seconds", "url": "/video-library/media/cartographic--local-a-way-through-r3/scene-2.webp", "sourceMasterSha256": "c22e5f04075b8a473458fa058a35f5b1c041df1675d41e75ddf259400d0a407d", "timeSeconds": 6.5 }, { "id": "scene-3", "role": "encoded-frame", "label": "Finished-film frame · 10.4 seconds", "url": "/video-library/media/cartographic--local-a-way-through-r3/scene-3.webp", "sourceMasterSha256": "c22e5f04075b8a473458fa058a35f5b1c041df1675d41e75ddf259400d0a407d", "timeSeconds": 10.4 } ], "typography": [ "Playfair Display 600", "Montserrat 500" ], "palette": null, "usageGuidance": "Change the subject, copy and timing for your audience. Retain the selected example’s visual rules and recheck the entire reading interval after changes.", "styleRules": "# A Way Through R3 , preserved local direction\n\nRead the full [creative treatment](../../../../sources/local-production/films/cartographic-storytelling-r3/docs/creative-treatment.md) and original [README](../../../../sources/local-production/films/cartographic-storytelling-r3/README.md). Those documents contain the actual palette, materials, composition, shot timing and sound direction. This file is an index, not a replacement for them.\n\nPlayfair Display 600 engraved capitals; Montserrat 500 village names and final invitation. Font files are in assets/fonts. Per-glyph timing and contrast reversals are authored against the geography.\n\nThe cloud and local examples share a family. Their geometry, camera, timing, materials and parameter interfaces are distinct. Choose one complete variant before adapting it. Do not mix a cloud score with local scene timing.\n\nThe treatment records intent; the source and output-bound review record implementation. Earlier rejected studies remain in sources/local-production and are not current approved masters. Keep unknown or partial review status visible.", "review": { "technical": { "state": "Supplied checks passed", "scope": "Source handoff records complete decode, stream dimensions and audio measurements. Browser playback is checked separately.", "artifactSha256": "c22e5f04075b8a473458fa058a35f5b1c041df1675d41e75ddf259400d0a407d" }, "creative": { "state": "Not independently accepted", "scope": "see historical variant review; not newly accepted", "artifactSha256": "c22e5f04075b8a473458fa058a35f5b1c041df1675d41e75ddf259400d0a407d" }, "listening": { "state": "Not verified", "scope": "No perceptual listening pass is established by this library import.", "artifactSha256": "c22e5f04075b8a473458fa058a35f5b1c041df1675d41e75ddf259400d0a407d" }, "reproduction": { "state": "Not tested", "scope": "Source is supplied. Cross-machine cold-start reproduction has not been established.", "artifactSha256": "c22e5f04075b8a473458fa058a35f5b1c041df1675d41e75ddf259400d0a407d" } }, "detailUrl": "https://library.jkylehobson.chatgpt.site/video-library/#family=cartographic&example=local-a-way-through-r3", "processUrl": "/video-library/process.html?family=cartographic&example=local-a-way-through-r3", "downloads": { "prompt": { "available": true, "url": "/video-library/prompts/cartographic--local-a-way-through-r3.txt", "sha256": "a3d7bc24b72f6d29eb220fe77d9d9d5e8c5803554bc1e6a8a26bea569448f427", "bytes": 1255, "label": "Reusable, example-specific instructions" }, "video": { "name": "cartographic--local-a-way-through-r3.mp4", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/cartographic--local-a-way-through-r3.mp4", "bytes": 17448182, "sha256": "c22e5f04075b8a473458fa058a35f5b1c041df1675d41e75ddf259400d0a407d", "available": true, "label": "16.6 MB" }, "source": { "name": "cartographic--local-a-way-through-r3--source.zip", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/cartographic--local-a-way-through-r3--source.zip", "bytes": 15167534, "sha256": "8514c2e4d7a62f953d3ad5591d613f409003bbf74883024d1d2a4ec356c155b9", "available": true, "label": "14.5 MB", "contents": [ "editable source", "variant guidance", "source assets", "audio inputs", "dependency declarations", "file manifest" ], "includedFiles": 30, "includedFilePaths": [ "PORTABILITY/portability.md", "README.md", "assets/fonts/montserrat-latin-500-normal.woff2", "assets/fonts/playfair-display-latin-600-normal.woff2", "assets/manifest.json", "assets/montserrat-LICENSE.txt", "assets/playfair-display-LICENSE.txt", "audio/dsp.mjs", "audio/score.mjs", "audio/stems/ambience.wav", "audio/stems/music.wav", "audio/stems/sfx.wav", "docs/creative-treatment.md", "docs/project-map.md", "guidance/SKILL.md", "guidance/STYLE.md", "index.html", "outputs/soundtrack.wav", "overview/encoded-contact-sheet.jpg", "package.json", "scripts/render.mjs", "scripts/validate.mjs", "src/atlas.js", "src/journey.js", "src/main.js", "src/math.js", "src/terrain.js", "src/timeline.js", "src/typography.js", "BUNDLE-GUIDE.md" ], "externalPrerequisites": { "runtime": [ "Node.js", "Chromium or Chrome", "FFmpeg and ffprobe" ], "packageDependencies": { "three": "0.180.0", "playwright": "1.62.1", "pngjs": "7.0.0" }, "lockfileIncluded": false, "coldStart": false }, "license": { "summary": "User-directed publication of supplied authored source; preserve listed third-party notices; no new license granted here.", "includedNoticePaths": [ "assets/montserrat-LICENSE.txt", "assets/playfair-display-LICENSE.txt" ], "newLicenseGranted": false } }, "bundle": { "name": "cartographic--local-a-way-through-r3--full.zip", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/cartographic--local-a-way-through-r3--full.zip", "bytes": 32677408, "sha256": "b5a7ddcd9d6cd9f0c738fc49f22101b41666aaa211b9a87be97a7bc87a3d3d00", "available": true, "label": "31.2 MB", "contents": [ "selected master", "editable source", "variant guidance", "source assets", "audio inputs", "dependency declarations", "file manifest", "designed cover", "starter prompt" ], "includedFiles": 33, "includedFilePaths": [ "PORTABILITY/portability.md", "README.md", "assets/fonts/montserrat-latin-500-normal.woff2", "assets/fonts/playfair-display-latin-600-normal.woff2", "assets/manifest.json", "assets/montserrat-LICENSE.txt", "assets/playfair-display-LICENSE.txt", "audio/dsp.mjs", "audio/score.mjs", "audio/stems/ambience.wav", "audio/stems/music.wav", "audio/stems/sfx.wav", "display/cover.webp", "docs/creative-treatment.md", "docs/project-map.md", "guidance/SKILL.md", "guidance/STYLE.md", "index.html", "outputs/a-way-through.mp4", "outputs/soundtrack.wav", "overview/encoded-contact-sheet.jpg", "package.json", "scripts/render.mjs", "scripts/validate.mjs", "src/atlas.js", "src/journey.js", "src/main.js", "src/math.js", "src/terrain.js", "src/timeline.js", "src/typography.js", "starter-prompt.txt", "BUNDLE-GUIDE.md" ], "externalPrerequisites": { "runtime": [ "Node.js", "Chromium or Chrome", "FFmpeg and ffprobe" ], "packageDependencies": { "three": "0.180.0", "playwright": "1.62.1", "pngjs": "7.0.0" }, "lockfileIncluded": false, "coldStart": false }, "license": { "summary": "User-directed publication of supplied authored source; preserve listed third-party notices; no new license granted here.", "includedNoticePaths": [ "assets/montserrat-LICENSE.txt", "assets/playfair-display-LICENSE.txt" ], "newLicenseGranted": false } } }, "cadenceNote": "Encoded fps describes the file. Scene evaluation and held actor poses depend on this source recipe.", "starterPrompt": "Create a short Cartographic film about {subject} for {audience}. Use the selected example as a visual reference. Preserve its composition, material, type, motion and audio relationships while adapting the story.\n\nSelected example: A Way Through R3\nFamily: cartographic\nVariant: local-a-way-through-r3\nTypography: Playfair Display 600, Montserrat 500\nProduction: Authored map animation\nExact reference master SHA-256: c22e5f04075b8a473458fa058a35f5b1c041df1675d41e75ddf259400d0a407d\n\nRead the selected STYLE.md, SKILL.md and reproduction instructions before adapting. Keep the declared renderer and source closure; do not assume another family variant has interchangeable parameters. Preserve exact font or custom glyph sources, color roles, spatial continuity and readable text. Record encoded frame rate, scene evaluation and held poses separately. Review the changed render visually and listen to the encoded audio before claiming those checks passed. Existing approval applies only to its recorded artifact.\n\nSuccess check: the adapted story is clear; key type remains readable in motion; the source rebuilds with its declared inputs; all media and review records identify the exact output. State any untested reproduction, listening or rights limits.", "downloadNote": "Downloads match this selected example. The full bundle includes its source, original video, cover and starter prompt. Source packages include artwork, audio inputs and dependency declarations. Requires Node.js, Chromium or Chrome, FFmpeg and ffprobe. Follow the included run guide for package installation and reproduction limits.", "model": null, "reasoningEffort": null } ], "relatedMethodIds": [] }, { "id": "clay-3d", "slug": "clay-3d", "title": "Clay 3D", "premise": "Handmade-looking characters, soft clay forms and miniature sets give small stories a tactile sense of scale.", "summary": "Handmade-looking characters, soft clay forms and miniature sets give small stories a tactile sense of scale.", "category": "Material 3d", "defaultExampleId": "claude-cloud", "facets": { "material": [ "3d", "clay", "stop-motion", "tactile", "character", "playful", "diorama" ], "producer": [ "Claude Cloud", "Local Codex + Claude" ], "format": [ "Portrait" ], "motion": [], "useCase": [] }, "examples": [ { "id": "claude-cloud", "title": "Seed to Seedling", "producer": "Claude Cloud", "producerEvidence": "The displayed model and reasoning label identify this production lane. Exact runtime model ID and per-film cost are not established by the source packet.", "relationship": "Original family example", "format": "Portrait", "productionMethod": "three-webgl", "master": { "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/clay-3d--claude-cloud.mp4", "sha256": "25231698fbd5f97ff4c2917477b782d9d8ef579906e2817bd856d28b035016cc", "bytes": 7273324, "mimeType": "video/mp4", "width": 1080, "height": 1920, "duration": 9.6, "encodedFps": 60 }, "poster": { "url": "/video-library/media/clay-3d--claude-cloud/cover.webp", "sha256": "6d105b4af27ef0d497c92d4d82c6db5f1b765cbcf3d104f88e5fedd1fb44956c", "sourceMasterSha256": "25231698fbd5f97ff4c2917477b782d9d8ef579906e2817bd856d28b035016cc", "timeSeconds": 8.16, "rationale": "Late story beat selected to show the developed subject and visual system; extracted from this exact master." }, "previewVideo": { "url": "/video-library/media/clay-3d--claude-cloud/preview.mp4", "sha256": "d56964a9e6f0ae17459bcf4a85845b1e43cdb3880acddb981b9ecc528043bfc1", "sourceMasterSha256": "25231698fbd5f97ff4c2917477b782d9d8ef579906e2817bd856d28b035016cc", "width": 540, "height": 960, "label": "Playback preview · 540 px wide · full master in Download finished video" }, "gallery": [ { "id": "overview", "role": "encoded-contact-sheet", "label": "Scenes from the finished render · not a planning storyboard", "url": "/video-library/media/clay-3d--claude-cloud/overview.webp", "sourceMasterSha256": "25231698fbd5f97ff4c2917477b782d9d8ef579906e2817bd856d28b035016cc" }, { "id": "scene-1", "role": "encoded-frame", "label": "Finished-film frame · 1.92 seconds", "url": "/video-library/media/clay-3d--claude-cloud/scene-1.webp", "sourceMasterSha256": "25231698fbd5f97ff4c2917477b782d9d8ef579906e2817bd856d28b035016cc", "timeSeconds": 1.92 }, { "id": "scene-2", "role": "encoded-frame", "label": "Finished-film frame · 4.8 seconds", "url": "/video-library/media/clay-3d--claude-cloud/scene-2.webp", "sourceMasterSha256": "25231698fbd5f97ff4c2917477b782d9d8ef579906e2817bd856d28b035016cc", "timeSeconds": 4.8 }, { "id": "scene-3", "role": "encoded-frame", "label": "Finished-film frame · 7.68 seconds", "url": "/video-library/media/clay-3d--claude-cloud/scene-3.webp", "sourceMasterSha256": "25231698fbd5f97ff4c2917477b782d9d8ef579906e2817bd856d28b035016cc", "timeSeconds": 7.68 } ], "typography": [ "Nunito", "Droid Sans Bold (three.js typeface, Apache-2.0)" ], "palette": { "backdrop": "#A9D3F0", "backdropLow": "#F3E6D8", "table": "#F1E4CF", "soilTop": "#5E3A26", "soilMid": "#B8643A", "soilLow": "#8A4A2C", "seed": "#E7C796", "seedStripe": "#7A5232", "eyeWhite": "#FFFDF6", "pupil": "#2A1C14", "water": "#5FB7EA", "root": "#F2E3C4", "stem": "#5DB548", "leaf": "#86CF54", "leafDark": "#4E9B3A", "sun": "#FFC94A", "sunRay": "#FFB238", "wire": "#8B8F96", "letters": [ "#5DB548", "#E2683C", "#FFC94A", "#5FB7EA", "#E7C796", "#5DB548", "#E2683C", "#FFC94A" ], "label": "#3B2A20", "pill": "#FFF7EA" }, "usageGuidance": "Change the subject, copy and timing for your audience. Retain the selected example’s visual rules and recheck the entire reading interval after changes.", "styleRules": "---\nid: clay-3d\nname: Clay 3D (plasticine diorama)\nfamily: material 3D\naliases: [claymation, plasticine, clay stop-motion, handmade 3D, diorama]\ntags: [3d, clay, stop-motion, tactile, character, playful, diorama]\nkind: visual-style\nroute: three-webgl (+ Canvas 2D overlay)\nreadiness: { research: authored, rights: original-work, referenceImages: own-render, code: built, render: rendered-and-measured }\n---\n\n# Clay 3D (plasticine diorama)\n\nA handmade plasticine world on a tabletop, shot like stop-motion. Lumpy clay forms carry thumbprints. A chunky layered soil slab is cut away at the front so we can see underground. The seed has googly clay eyes, water drops squish into flat pancakes, and coils of clay become the root and shoot. A clay sun rises on a visible wire rig. Everything moves on twos, with tiny re-posing jitter and light flicker. It feels warm, funny, tactile and made by hands.\n\n**The one rule:** *it must look touchable and re-posed by hand.* Every form is lumpy and thumb-printed, nothing is perfectly smooth or perfectly still, and motion steps on twos.\n\n## Creative direction\n- **Audience:** families, kids' education, friendly brands, social audiences that reward charm.\n- **Purpose:** make a process lovable and memorable through character and physical comedy (squash, plop, boing).\n- **Feeling:** cosy, playful, handmade, gently funny.\n- **Central visual idea:** *a cutaway diorama.* The front face of the soil slab shows the underground story, as if a craftsperson built a teaching model and animated it frame by frame.\n- **How the parts work together:**\n - *Material* (rough clay with sheen + thumbprint bump) sells touch.\n - *Lighting* (warm key, cool sky fill, rim) sells a real tabletop set.\n - *Motion* on twos with boil and flicker sells stop-motion.\n - *Type* is sculpted: chunky rounded clay letters plop onto the table at the end; beat labels are soft sticker pills (Nunito 800) that pop.\n - *Sound* is squelches, plops and boings over pizzicato and marimba.\n\n## Fit\n- **Best for:** kids/education, food, friendly product mascots, playful explainers, holiday/social content.\n- **Avoid when:** precision, data or seriousness is required; a fast cut rhythm is needed; render budget is tight (3D).\n- **Cost:** medium-high. Three.js on software WebGL ≈ 0.3-0.5 s per pose; poses on twos halve the work (288 renders for 9.6 s ≈ 2-3 min with 3 workers). Geometry is rebuilt per pose for growing tubes.\n\n## Visual fingerprint\n| Element | Rule |\n|---|---|\n| Composition | Tabletop diorama centred; slab 28 × 27 × 16 units with the cutaway front at z = 8; table plane; pastel backdrop with a vertical gradient. Subject in the lower 60 % of the frame, labels top-centre. |\n| Shape language | Rounded boxes (radius 1.2), spheres, coils (tubes with ±12 % radius noise), lens leaves, cones for sun rays. Lumpiness = 3D noise displacement (amp 0.05-0.25, freq 0.35-2). |\n| Material | `MeshPhysicalMaterial`: roughness 0.62, sheen 0.35, thumbprint bump (scale 1.2; 0.3-0.9 on small parts). Water is glossy (roughness 0.3, clearcoat 0.7). The rig wire is metal. |\n| Lighting / depth | Warm key `#FFE6C8` 2.7 from the upper left with soft PCF shadows (radius 6); sky/ground hemisphere fill 0.95; white rim from the back right 0.9; Neutral tone mapping. Shadows ground every object. |\n| Typography | See below; exact values in `spec.json → typography`. |\n\n### Typography (exact)\n| Role | Family / weight | Size | Treatment | Enter → settle |\n|---|---|---|---|---|\n| Beat labels (\"Water wakes the seed\") | Nunito 800 | 64 px | `#3B2A20` on a cream pill `#FFF7EA` (h 108, radius 54, pad 45), soft shadow 0 8 18 rgba(80,50,30,.28), centred at y 190 | scale pop with `easeOutBack` (overshoot 2.6) over 0.2 s, read through the twos cadence; cut at the next label |\n| End title SEEDLING (3D) | Droid Sans Bold typeface (three.js, Apache-2.0) | size 3.4, depth 1.5, bevel 0.45/0.32 × 5 segments, gap 0.45 | clay material, colours alternating green/terracotta/yellow/blue/beige; standing on the table at z = 16, tilted −0.08 rad | each letter drops 9 units (ease-in) and squashes: `1 − 0.35·e^(−8a)·cos 26a`, 0.1 s apart, then boils |\n| Caption | Nunito 400 | 34 px | `#6B5A4E`, centred, baseline 1830 | fade 0.3 s |\n\n### Palette roles\n| Role | Value |\n|---|---|\n| Backdrop top / bottom | `#A9D3F0` / `#F3E6D8` |\n| Table | `#F1E4CF` |\n| Soil layers top / mid / low | `#5E3A26` / `#B8643A` / `#8A4A2C` |\n| Seed / stripes | `#E7C796` / `#7A5232` |\n| Eyes | `#FFFDF6` + `#2A1C14` |\n| Water | `#5FB7EA` (glossy) |\n| Root | `#F2E3C4` |\n| Stem / leaf / rib | `#5DB548` / `#86CF54` / `#4E9B3A` |\n| Sun / rays / wire | `#FFC94A` / `#FFB238` / `#8B8F96` |\n\n**Invariants:** lumpy + thumb-printed clay; real lighting and shadows; on twos with boil; physical squash and stretch; a handmade set (visible rig welcome). **Adaptable tokens:** palette, backdrop colour, characters, the 3D typeface.\n\n## Temporal fingerprint\n| Element | Rule |\n|---|---|\n| Pose cadence | **Twos** (`poseStep: 2`). The pose index `P = floor(frame/2)` seeds the boil. |\n| Boil | Animated objects: ±0.025-0.04 units of position and ±0.006-0.01 rad of rotation per pose. Static set pieces are still (like a real set). Key light flickers ±1.5 %. |\n| Easing | Squash on landings `1 − A·e^(−k·a)·cos(ω·a)` (seed: A 0.32, k 9, ω 24; letters: A 0.35, k 8, ω 26). Falls are ease-in (`k²`); swelling `easeOutBack`. |\n| Camera | Tabletop camera, fov 30, position `(8, ty + 0.36·d, d)` looking at `(0, ty, 0)`. It moves between beat framings over 0.8 s (cubic), updating only on poses. Framings in `spec.json → camera.keys`. |\n| Transitions | No cuts: camera moves + label pops. The ending pulls back before the letters drop. |\n| Continuity object | The seed character (eyes stay visible; one blink at 4.4 s). |\n| Text holds | Labels ≥ 1.5 s; the final title holds 1.4 s after the last letter lands. |\n\n## How the composition develops\n| Phase | Camera (d / ty) | Action |\n|---|---|---|\n| 0-1.5 s | 108 / 21 | The seed falls onto the slab top, squashes, burrows into the front pocket |\n| 1.5-3.0 | 94 / 20 (closer) | Two blue drops squish into pancakes; blue coils seep down the cutaway face; the seed puffs up twice |\n| 3.0-5.4 | 100 / 13 (lower) | Crack line; a cream root coil grows down the face with two rootlets; the seed blinks |\n| 5.4-6.95 | 104 / 27 (higher) | A green hooked coil rises through the top and straightens; leaves boing open; the sun rises on its wire |\n| 6.95-9.6 | 124 / 17 (wide) | Pull back; SEEDLING letters drop onto the table one by one; caption; hold |\n\n## Sound fingerprint\nWhimsical stop-motion in G major at 100 BPM: pizzicato (Karplus-Strong plucks) arpeggios, a round tuba-ish bass, a marimba-like kalimba melody and woodblocks on beats. SFX are physical:\n- **Squelch** (low-passed noise sweep + falling sine) on every landing and squash.\n- **Plop/boing** for leaves and letters.\n- **Creaky scratch** under the root.\n- **Swell** under the shoot.\n- **A ding** when the sun arrives.\n\nThe music ducks under the drops and the letter cascade.\n\n## Reusable prompt\n> Create a {9.6}-second {1080×1920} clay/plasticine stop-motion video about {subject}. Build a tabletop diorama in 3D: lumpy rounded clay forms (3D-noise displacement) with a thumbprint bump map, rough-with-sheen material, glossy clay for liquids, warm key light with soft shadows, cool sky fill, rim light, pastel backdrop. Show the inside with a cutaway. Give the hero object simple clay eyes. Animate on twos with per-pose boil (tiny jitter) and ±1.5 % light flicker; squash on every landing; grow coils for organic growth. Labels are soft sticker pills (rounded heavy sans) that pop; end with chunky extruded clay letters that drop onto the table one by one. Score: pizzicato + marimba + tuba bass + woodblocks; squelch/plop/boing SFX for every contact. Avoid: perfectly smooth surfaces, motion on ones, hard specular plastic, letters falling during camera moves.\n\n## Adaptation guidance\n| Change | Safe? | Notes |\n|---|---|---|\n| Subject / characters | ✅ | Keep forms simple and chunky; give one hero eyes; use a cutaway or diorama to show insides. |\n| Palette | ✅ | Pastel backdrop + saturated clay; keep warm key / cool fill. |\n| Copy | ✅ | Labels ≤ 26 characters at 64 px; the 3D title ≤ 9 letters at size 3.4 (or scale down). |\n| Typeface (3D) | ✅ | Any three.js typeface JSON; keep bevel ≥ 0.3 so letters read as rolled clay. |\n| 16:9 | ✅ easier | A wider frame suits dioramas; reduce camera distance about 25 %. |\n| Motion on ones | ❌ | Loses the stop-motion identity. |\n| **Essential** | , | Lumpy thumb-printed clay; real light and shadow; twos + boil; squash and stretch; handmade set logic. |\n\n## Accessibility\nLabels: dark brown on cream is about 12:1. No flashing; light flicker is only ±1.5 %. The boil is subtle. Captions restate each beat.\n\n## Provenance\nOriginal work (2026-10-07). Fonts: Nunito (OFL), Droid Sans Bold typeface JSON shipped with three.js (Apache-2.0). three.js MIT. All geometry and textures are procedural.", "review": { "technical": { "state": "Supplied checks passed", "scope": "Source handoff records complete decode, stream dimensions and audio measurements. Browser playback is checked separately.", "artifactSha256": "25231698fbd5f97ff4c2917477b782d9d8ef579906e2817bd856d28b035016cc" }, "creative": { "state": "Not independently accepted", "scope": "not independently established", "artifactSha256": "25231698fbd5f97ff4c2917477b782d9d8ef579906e2817bd856d28b035016cc" }, "listening": { "state": "Not verified", "scope": "No perceptual listening pass is established by this library import.", "artifactSha256": "25231698fbd5f97ff4c2917477b782d9d8ef579906e2817bd856d28b035016cc" }, "reproduction": { "state": "Not tested", "scope": "Source is supplied. Cross-machine cold-start reproduction has not been established.", "artifactSha256": "25231698fbd5f97ff4c2917477b782d9d8ef579906e2817bd856d28b035016cc" } }, "detailUrl": "https://library.jkylehobson.chatgpt.site/video-library/#family=clay-3d&example=claude-cloud", "processUrl": "/video-library/process.html?family=clay-3d&example=claude-cloud", "downloads": { "prompt": { "available": true, "url": "/video-library/prompts/clay-3d--claude-cloud.txt", "sha256": "7de3838bdc8a03c04d012296092c37a56b1ad91c9325dcbed352ba60827ec109", "bytes": 1904, "label": "Reusable, example-specific instructions" }, "video": { "name": "clay-3d--claude-cloud.mp4", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/clay-3d--claude-cloud.mp4", "bytes": 7273324, "sha256": "25231698fbd5f97ff4c2917477b782d9d8ef579906e2817bd856d28b035016cc", "available": true, "label": "6.9 MB" }, "source": { "name": "clay-3d--claude-cloud--source.zip", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/clay-3d--claude-cloud--source.zip", "bytes": 11749743, "sha256": "a5628c7de97ce4bd894a72588e1695af1a1992d7ca9c7c0a641ed52f88e09671", "available": true, "label": "11.2 MB", "contents": [ "editable source", "variant guidance", "source assets", "audio inputs", "dependency declarations", "file manifest" ], "includedFiles": 57, "includedFilePaths": [ "CASE_STUDY.md", "RUN.md", "SKILL.md", "STYLE.md", "assets/components/letter-S.png", "assets/components/seed-character.png", "assets/components/sun-on-wire.png", "assets/components/thumbprint-sample.png", "assets/layers/t2.70/01_set.png", "assets/layers/t2.70/02_characters.png", "assets/layers/t2.70/03_type-3d.png", "assets/layers/t2.70/04_overlay.png", "assets/layers/t6.40/01_set.png", "assets/layers/t6.40/02_characters.png", "assets/layers/t6.40/03_type-3d.png", "assets/layers/t6.40/04_overlay.png", "assets/layers/t9.30/01_set.png", "assets/layers/t9.30/02_characters.png", "assets/layers/t9.30/03_type-3d.png", "assets/layers/t9.30/04_overlay.png", "assets/paths/rootFrontFace.json", "assets/paths/rootFrontFace.svg", "assets/textures/thumbprint-bump.png", "audio/cues.json", "audio/mix.flac", "audio/stems/music.flac", "audio/stems/percussion.flac", "audio/stems/sfx.flac", "engine/audio.mjs", "engine/audio/dsp.js", "engine/audio/instruments.js", "engine/audio/sfx.js", "engine/browser.mjs", "engine/export.mjs", "engine/finish.mjs", "engine/lib/draw.js", "engine/lib/util.js", "engine/page.html", "engine/render.mjs", "engine/runtime.js", "engine/server.mjs", "film/contact_sheet.jpg", "film/spectrogram.png", "film/stills/01_1.20s.jpg", "film/stills/02_2.70s.jpg", "film/stills/03_4.60s.jpg", "film/stills/04_6.40s.jpg", "film/stills/05_7.90s.jpg", "film/stills/06_9.30s.jpg", "overview/encoded-contact-sheet.jpg", "package.json", "qa.json", "spec.json", "styles/clay-3d/scene.js", "styles/clay-3d/score.js", "styles/clay-3d/timeline.js", "BUNDLE-GUIDE.md" ], "externalPrerequisites": { "runtime": [ "Node.js", "Chromium or Chrome", "FFmpeg and ffprobe" ], "packageDependencies": { "three": "0.170.0", "@fontsource/fraunces": "^5.1.0", "@fontsource/dm-sans": "^5.1.0", "@fontsource/inter": "^5.1.0", "@fontsource/space-grotesk": "^5.1.0", "@fontsource/ibm-plex-mono": "^5.1.0", "@fontsource/jetbrains-mono": "^5.1.0", "@fontsource/playfair-display": "^5.1.0", "@fontsource/bebas-neue": "^5.1.0", "@fontsource/archivo-black": "^5.1.0", "@fontsource/caveat": "^5.1.0", "@fontsource/press-start-2p": "^5.1.0", "@fontsource/instrument-serif": "^5.1.0", "@fontsource/syne": "^5.1.0", "@fontsource/permanent-marker": "^5.1.0", "@fontsource/vt323": "^5.1.0", "@fontsource/dm-serif-display": "^5.1.0", "@fontsource/anton": "^5.1.0", "@fontsource/nunito": "^5.1.0", "@fontsource/bangers": "^5.1.0", "@fontsource/space-mono": "^5.1.0", "playwright": "1.56.1" }, "lockfileIncluded": false, "coldStart": false }, "license": { "summary": "User-directed publication of supplied authored source; preserve listed third-party notices; no new license granted here.", "includedNoticePaths": [], "newLicenseGranted": false } }, "bundle": { "name": "clay-3d--claude-cloud--full.zip", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/clay-3d--claude-cloud--full.zip", "bytes": 19046934, "sha256": "2d49f4b75d7e1e59ae500e226e102ff9cffb2385e29fbc6c128ddb6c3c85db54", "available": true, "label": "18.2 MB", "contents": [ "selected master", "editable source", "variant guidance", "source assets", "audio inputs", "dependency declarations", "file manifest", "designed cover", "starter prompt" ], "includedFiles": 60, "includedFilePaths": [ "CASE_STUDY.md", "RUN.md", "SKILL.md", "STYLE.md", "assets/components/letter-S.png", "assets/components/seed-character.png", "assets/components/sun-on-wire.png", "assets/components/thumbprint-sample.png", "assets/layers/t2.70/01_set.png", "assets/layers/t2.70/02_characters.png", "assets/layers/t2.70/03_type-3d.png", "assets/layers/t2.70/04_overlay.png", "assets/layers/t6.40/01_set.png", "assets/layers/t6.40/02_characters.png", "assets/layers/t6.40/03_type-3d.png", "assets/layers/t6.40/04_overlay.png", "assets/layers/t9.30/01_set.png", "assets/layers/t9.30/02_characters.png", "assets/layers/t9.30/03_type-3d.png", "assets/layers/t9.30/04_overlay.png", "assets/paths/rootFrontFace.json", "assets/paths/rootFrontFace.svg", "assets/textures/thumbprint-bump.png", "audio/cues.json", "audio/mix.flac", "audio/stems/music.flac", "audio/stems/percussion.flac", "audio/stems/sfx.flac", "display/cover.webp", "engine/audio.mjs", "engine/audio/dsp.js", "engine/audio/instruments.js", "engine/audio/sfx.js", "engine/browser.mjs", "engine/export.mjs", "engine/finish.mjs", "engine/lib/draw.js", "engine/lib/util.js", "engine/page.html", "engine/render.mjs", "engine/runtime.js", "engine/server.mjs", "film/clay-3d.mp4", "film/contact_sheet.jpg", "film/spectrogram.png", "film/stills/01_1.20s.jpg", "film/stills/02_2.70s.jpg", "film/stills/03_4.60s.jpg", "film/stills/04_6.40s.jpg", "film/stills/05_7.90s.jpg", "film/stills/06_9.30s.jpg", "overview/encoded-contact-sheet.jpg", "package.json", "qa.json", "spec.json", "starter-prompt.txt", "styles/clay-3d/scene.js", "styles/clay-3d/score.js", "styles/clay-3d/timeline.js", "BUNDLE-GUIDE.md" ], "externalPrerequisites": { "runtime": [ "Node.js", "Chromium or Chrome", "FFmpeg and ffprobe" ], "packageDependencies": { "three": "0.170.0", "@fontsource/fraunces": "^5.1.0", "@fontsource/dm-sans": "^5.1.0", "@fontsource/inter": "^5.1.0", "@fontsource/space-grotesk": "^5.1.0", "@fontsource/ibm-plex-mono": "^5.1.0", "@fontsource/jetbrains-mono": "^5.1.0", "@fontsource/playfair-display": "^5.1.0", "@fontsource/bebas-neue": "^5.1.0", "@fontsource/archivo-black": "^5.1.0", "@fontsource/caveat": "^5.1.0", "@fontsource/press-start-2p": "^5.1.0", "@fontsource/instrument-serif": "^5.1.0", "@fontsource/syne": "^5.1.0", "@fontsource/permanent-marker": "^5.1.0", "@fontsource/vt323": "^5.1.0", "@fontsource/dm-serif-display": "^5.1.0", "@fontsource/anton": "^5.1.0", "@fontsource/nunito": "^5.1.0", "@fontsource/bangers": "^5.1.0", "@fontsource/space-mono": "^5.1.0", "playwright": "1.56.1" }, "lockfileIncluded": false, "coldStart": false }, "license": { "summary": "User-directed publication of supplied authored source; preserve listed third-party notices; no new license granted here.", "includedNoticePaths": [], "newLicenseGranted": false } } }, "cadenceNote": "Encoded fps describes the file. Scene evaluation and held actor poses depend on this source recipe.", "starterPrompt": "Create a {9.6}-second {1080×1920} clay/plasticine stop-motion video about {subject}. Build a tabletop diorama in 3D: lumpy rounded clay forms (3D-noise displacement) with a thumbprint bump map, rough-with-sheen material, glossy clay for liquids, warm key light with soft shadows, cool sky fill, rim light, pastel backdrop. Show the inside with a cutaway. Give the hero object simple clay eyes. Animate on twos with per-pose boil (tiny jitter) and ±1.5 % light flicker; squash on every landing; grow coils for organic growth. Labels are soft sticker pills (rounded heavy sans) that pop; end with chunky extruded clay letters that drop onto the table one by one. Score: pizzicato + marimba + tuba bass + woodblocks; squelch/plop/boing SFX for every contact. Avoid: perfectly smooth surfaces, motion on ones, hard specular plastic, letters falling during camera moves.\n\nSelected example: Seed to Seedling\nFamily: clay-3d\nVariant: claude-cloud\nTypography: Nunito, Droid Sans Bold (three.js typeface, Apache-2.0)\nProduction: three-webgl\nExact reference master SHA-256: 25231698fbd5f97ff4c2917477b782d9d8ef579906e2817bd856d28b035016cc\n\nRead the selected STYLE.md, SKILL.md and reproduction instructions before adapting. Keep the declared renderer and source closure; do not assume another family variant has interchangeable parameters. Preserve exact font or custom glyph sources, color roles, spatial continuity and readable text. Record encoded frame rate, scene evaluation and held poses separately. Review the changed render visually and listen to the encoded audio before claiming those checks passed. Existing approval applies only to its recorded artifact.\n\nSuccess check: the adapted story is clear; key type remains readable in motion; the source rebuilds with its declared inputs; all media and review records identify the exact output. State any untested reproduction, listening or rights limits.", "downloadNote": "Downloads match this selected example. The full bundle includes its source, original video, cover and starter prompt. Source packages include artwork, audio inputs and dependency declarations. Requires Node.js, Chromium or Chrome, FFmpeg and ffprobe. Follow the included run guide for package installation and reproduction limits.", "model": "Opus 5.5", "reasoningEffort": "Extra" }, { "id": "local-room-for-two-r3", "title": "Room for Two R3", "producer": "Local Codex + Claude", "producerEvidence": "Contributor attribution follows the supplied source record; no per-film cost is inferred.", "relationship": "related family; distinct construction and subject; parameters are not interchangeable", "format": "Portrait", "productionMethod": "Generated clay artwork + 2.5D mesh-skinned puppets", "master": { "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/clay-3d--local-room-for-two-r3.mp4", "sha256": "c26398adb5ef129772eb38515427bdda95bb315c381766d859678dc8dca6236a", "bytes": 23655236, "mimeType": "video/mp4", "width": 1080, "height": 1920, "duration": 10.0, "encodedFps": 60 }, "poster": { "url": "/video-library/media/clay-3d--local-room-for-two-r3/cover.webp", "sha256": "f304b99c8d18635674589db96707736c6767a28ad4f89f0480755d1d20d9325e", "sourceMasterSha256": "c26398adb5ef129772eb38515427bdda95bb315c381766d859678dc8dca6236a", "timeSeconds": 8.5, "rationale": "Late story beat selected to show the developed subject and visual system; extracted from this exact master." }, "previewVideo": { "url": "/video-library/media/clay-3d--local-room-for-two-r3/preview.mp4", "sha256": "17ae4b52cbcf172b9168e3a48fdd1d83d925e5ead2515e608e1f1481e2c5748c", "sourceMasterSha256": "c26398adb5ef129772eb38515427bdda95bb315c381766d859678dc8dca6236a", "width": 540, "height": 960, "label": "Playback preview · 540 px wide · full master in Download finished video" }, "gallery": [ { "id": "overview", "role": "encoded-contact-sheet", "label": "Scenes from the finished render · not a planning storyboard", "url": "/video-library/media/clay-3d--local-room-for-two-r3/overview.webp", "sourceMasterSha256": "c26398adb5ef129772eb38515427bdda95bb315c381766d859678dc8dca6236a" }, { "id": "scene-1", "role": "encoded-frame", "label": "Finished-film frame · 2 seconds", "url": "/video-library/media/clay-3d--local-room-for-two-r3/scene-1.webp", "sourceMasterSha256": "c26398adb5ef129772eb38515427bdda95bb315c381766d859678dc8dca6236a", "timeSeconds": 2.0 }, { "id": "scene-2", "role": "encoded-frame", "label": "Finished-film frame · 5 seconds", "url": "/video-library/media/clay-3d--local-room-for-two-r3/scene-2.webp", "sourceMasterSha256": "c26398adb5ef129772eb38515427bdda95bb315c381766d859678dc8dca6236a", "timeSeconds": 5.0 }, { "id": "scene-3", "role": "encoded-frame", "label": "Finished-film frame · 8 seconds", "url": "/video-library/media/clay-3d--local-room-for-two-r3/scene-3.webp", "sourceMasterSha256": "c26398adb5ef129772eb38515427bdda95bb315c381766d859678dc8dca6236a", "timeSeconds": 8.0 } ], "typography": [ "Custom incised sign artwork · no font family" ], "palette": null, "usageGuidance": "Change the subject, copy and timing for your audience. Retain the selected example’s visual rules and recheck the entire reading interval after changes.", "styleRules": "# Room for Two , clay miniature style contract (R3)\n\nStatus: **R3 delivered** , `outputs/room-for-two-r3.mp4` (SHA-256 `c26398ad…6236a`), technical pass, encoded review done, awaiting Kyle. Artwork direction accepted by Kyle on Oct 7. R2 motion was \"really close / almost there\" , direction feedback, not acceptance. Nothing here claims final approval; audio not listened to.\n\n## Story and feeling\n\nA ten-second vertical short. A small teal seedling stands exposed in the rain beside a garden path; a big oat-coloured mushroom stands dry under its own cap. A drop falls on the seedling, the seedling notices the shelter, the mushroom raises an open palm , \"come in\" , and the seedling hops twice into the dry. The mushroom wraps an arm around it, a gust carries the camera up to a hanging clay sign that reads **Room for Two**, and a last drip from the sign lands harmlessly on the cap. Feeling: exposure → hesitation → welcome → shared warmth. No offer/CTA; this is a brand-free showcase.\n\nThe opening drop and the closing drip are deliberate bookends: the same physical event, first as a problem, then as proof of shelter.\n\n## Material and image identity\n\n- **Generated clay artwork, not procedural CGI.** Hand-modelled plasticine look: tool marks follow the volume, coarse speckle, fingerprints, slightly glossy wet highlights. Kyle rejected the earlier smooth-CGI clay (\"no texture… does not look like clay\"). Never replace the textures with smooth shaded primitives or add film grain as a substitute for surface structure.\n- **Wet miniature set:** shallow depth of field, warm low sun from the left, cool wet foliage, glistening soil, a glowing cottage window upper right.\n- 2.5D composite: generated transparent puppets mesh-skinned over a generated environment plate. Not photographed stop motion, not volumetric 3D. Puppets have no unseen views.\n\n## Palette roles (median of 31×31 px patches of the source art)\n\n| Role | Value | Source point |\n|---|---|---|\n| Cap terracotta | `#b04221` | host-offer (300,400) |\n| Cap underside / gill shadow | `#976135` | host-offer (880,300) |\n| Host oat body | `#c38e5e` | host-offer (560,880) |\n| Visitor teal body | `#597167` - `#658275` | visitor-poses (330,620), (1000,600) |\n| Sprout sage | `#8a9673` | visitor-poses (470,180) |\n| Sign clay ivory | `#f4cba1` | sign-board (880,410) |\n| Incised letter green | `#3a4638` | sign-board (760,600) |\n| Soil / path | `#be7954` | environment (470,1250) |\n| Jute rope | `#ca8b5e` | garden-sign (428,345) |\n| Cottage glow | `#fde8bd` | environment (912,232) |\n| Rain (front) | `rgba(236,242,230,.46)` 1.5 px world | code |\n| Rain (back) | `rgba(208,224,216,.20)` 1.1 px world | code |\n| Resolution warmth | soft-light `rgba(255,190,110,.38·warmth)` radial from (900,300) | code |\n| Lens falloff | `rgba(10,16,12,.32)` radial, inner r 520 | code |\n\n## Typography\n\n- **One typographic object: the hanging sign.** Lettering is **generated custom incised serif artwork** inside `assets/generated/sign-board.png` , carved into an ivory clay slab with green-filled grooves, set in a bark frame with moss, leaves and a water drop. **No font family is identified or used.** Do not credit Cormorant, Garamond or any other face.\n- Hierarchy: `Room` large on line 1; `for Two` on line 2 with a smaller lowercase `for` and capital `T`. Rendered at board scale 0.47: the `R` of `Room` is about 120 px tall and the board is ~690 px wide on the 1080 frame at the final view.\n- Integration: the board hangs from a fixed branch on two jute ropes, sways physically, casts a soft drop shadow and is revealed by camera movement. There is no overlay title, no header/footer label.\n- Cormorant Garamond (OFL, `assets/fonts`) belonged to the rejected R2 overlay and is archived only.\n\n## Layout and world coordinates\n\nWorld = 1080×1920 plate space (the 941×1672 environment plate is resampled ×1.148). Ground line y = 1540.\n\n- Host: translate (−100, 615), scale 0.76 of the 1254² sheet; cap crops slightly at frame-left in the final view, as in the key art.\n- Visitor: scale 0.64; root (ground point between the feet) travels x 870 → 780 → 690 in two hops.\n- Sign: board pivot (540, 88), scale 0.47; branch (garden-sign.png) at (−10, −170), scale 1100/1448; rope anchors at the branch wraps, rope ends at the board's drilled holes.\n- Opening drip source: glossy plate-leaf tip at (912, 846); lands on the sprout at (912, 1110).\n- Final drip: the leaf drop on the sign (board source 127,828) falls to the cap top.\n\n## Camera (authored, `camera()` in `src/score-clock.js`)\n\nMonotone-cubic keys (no overshoot, continuous velocity), clamped to the plate:\n\n| Frame | Scale | Centre | Purpose |\n|---|---|---|---|\n| 0 | 1.90 | (796,1110) | already moving: tight on the exposed visitor, drip leaf above, cap rim at edge |\n| 22 | 1.97 | (804,1176) | tilts down with the falling drop, small push on impact |\n| 48 | 1.95 | (796,1196) | hold for the flinch/recovery |\n| 120 | 1.40 | (690,1230) | visitor's glance motivates the pan that reveals the host and the offer |\n| 176-248 | 1.42→1.48 | (650→592) | follows the two hops |\n| 316-348 | 1.55 | (560,1250) | intimate two-shot for hug and relief |\n| 470 | 1.03 | (540,975) | gust carries the camera up to the sign |\n| 600 | 1.00 | (540,960) | settle to zero velocity |\n\n## Motion and timing\n\n- Master: **native 60 fps, 600 frames, 10.000 s.**\n- **Puppet rig state on twos: 30 Hz (2-frame holds).** The camera projection, garden, rain, splashes, sign, light and sound are 60 Hz. Holds are intentional stop-motion cadence, not dropped frames. R2 used 12 Hz; Codex's R3 draft used 20 Hz; this R3 uses 30 Hz because the visible step during travel was the core \"choppy\" complaint.\n- Replacement drawings change only at acting beats (18 keys across 15 drawings). In-betweens come from the rig: squash/stretch anchored at the feet (volume-preserving), lean, shiver bursts, breathing, and a spring-driven sprout follow-through (2.3 Hz, ζ 0.2) kicked by the drop, take-offs, landings, the pat and the gust.\n- Hop grammar: crouch (12 f) → push-off drawing → reach drawing → contact with squash −0.11 and damped recovery. Root translates only while airborne; feet hold world position on contact.\n- Host: two-bone arm (shoulder + elbow) by angle blending. Rest = elbow straightened (+0.74) so the arm hangs; offer = raised open palm (−0.55 overshoot → −0.42); hug sweeps the arm behind the visitor (+0.62) with a pat at frame 292.\n- Sign: damped pendulum (0.52 Hz, ζ 0.085) with gentle resonant drive, pushed by the gust; rotation = 0.0021 rad per px of sway.\n\nStory beats (frames; all character beats even): drop release 10 · hit 20 · notice 46 · host notices 62 · offer 76-118 · brighten 132 · hop 1 146/158/178 · look 198 · hop 2 212/222/242 · hug 262 · pat 292 · relief 316 · gust 336 · sign readable 470 · final drip 512→523.\n\n## Sound (`audio/score-r3.mjs`, original synthesis, no samples)\n\nEvery cue is read from the same `EVENTS` table as the picture; 1 frame = 800 samples at 48 kHz. Plucked-tine (kalimba-like) notes land only on visible actions: D5 drop hit, F♯5 notice, A4+D5 offer, E5 and F♯5 footsteps, A5 pat, D6 final drip. A D-major pad blooms only at relief. The rain bed is bright while the visitor is exposed and darkens after the second footstep (the listener is now under the cap), with patter ticks scheduled from the same `capPatter()` that draws the cap splashes. Gust swell, cord-and-wood creak at the sign's swing reversal, wet footsteps (first splashy, second drier), clay stretch/slide/pat. Master ≈ −16.5 LUFS integrated, ≤ −1.5 dBTP before encode; 3 ms look-ahead limiter touches only the footstep accents.\n\n## Replaceable parameters (safe adaptations)\n\n- Sign text: requires a new generated sign board (keep incised-clay treatment, two holes, transparent background) and new `SIGN.holes` / `leafDrip` points. Do not typeset over the board.\n- Beat frames in `F`, hop distances `X_*`, camera keys, rain density/slant, gust timing, palette of the light grade.\n- Sound: note choices (stay in one pentatonic key), bed levels, which events carry notes.\n\n## What breaks the style\n\n- Smooth/shaded procedural characters, airbrushed or plastic surfaces, film grain as fake texture.\n- Overlay titles or any font credited as the sign lettering.\n- Puppets evaluated at 60 Hz (loses the handmade cadence) or held longer than ~3 frames during travel (reads choppy).\n- Swapping drawings every few frames for \"more poses\" , mismatched generated drawings read as boil/pop. Change drawings on acting beats; let the rig in-between.\n- Camera moves without motivation, zoom-only sequences, or showing beyond the plate edge.\n- Sounds not tied to a visible event; music laid over the top as a separate bed.", "review": { "technical": { "state": "Supplied checks passed", "scope": "Source handoff records complete decode, stream dimensions and audio measurements. Browser playback is checked separately.", "artifactSha256": "c26398adb5ef129772eb38515427bdda95bb315c381766d859678dc8dca6236a" }, "creative": { "state": "Not independently accepted", "scope": "see historical variant review; not newly accepted", "artifactSha256": "c26398adb5ef129772eb38515427bdda95bb315c381766d859678dc8dca6236a" }, "listening": { "state": "Not verified", "scope": "No perceptual listening pass is established by this library import.", "artifactSha256": "c26398adb5ef129772eb38515427bdda95bb315c381766d859678dc8dca6236a" }, "reproduction": { "state": "Not tested", "scope": "Source is supplied. Cross-machine cold-start reproduction has not been established.", "artifactSha256": "c26398adb5ef129772eb38515427bdda95bb315c381766d859678dc8dca6236a" } }, "detailUrl": "https://library.jkylehobson.chatgpt.site/video-library/#family=clay-3d&example=local-room-for-two-r3", "processUrl": "/video-library/process.html?family=clay-3d&example=local-room-for-two-r3", "downloads": { "prompt": { "available": true, "url": "/video-library/prompts/clay-3d--local-room-for-two-r3.txt", "sha256": "6659d06335c7134088a5914e7900013b831571cea62e327baeb7d33286181674", "bytes": 1280, "label": "Reusable, example-specific instructions" }, "video": { "name": "clay-3d--local-room-for-two-r3.mp4", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/clay-3d--local-room-for-two-r3.mp4", "bytes": 23655236, "sha256": "c26398adb5ef129772eb38515427bdda95bb315c381766d859678dc8dca6236a", "available": true, "label": "22.6 MB" }, "source": { "name": "clay-3d--local-room-for-two-r3--source.zip", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/clay-3d--local-room-for-two-r3--source.zip", "bytes": 31009997, "sha256": "eac23128c9938ae5e21cae29c768f5c1535052291744f8ee1e9935ba48275ced", "available": true, "label": "29.6 MB", "contents": [ "editable source", "variant guidance", "source assets", "audio inputs", "dependency declarations", "file manifest" ], "includedFiles": 55, "includedFilePaths": [ "PORTABILITY/portability.md", "README.md", "SKILL.md", "STYLE.md", "assets/fonts/CormorantGaramond.ttf", "assets/fonts/OFL.txt", "assets/generated/environment.png", "assets/generated/environment.prompt.txt", "assets/generated/garden-sign.png", "assets/generated/garden-sign.prompt.txt", "assets/generated/host-offer.png", "assets/generated/host.prompt.txt", "assets/generated/sign-board-clean.prompt.txt", "assets/generated/sign-board.png", "assets/generated/sign-board.prompt.txt", "assets/generated/visitor-opening.png", "assets/generated/visitor-opening.prompt.txt", "assets/generated/visitor-poses.png", "assets/generated/visitor-walk-a.png", "assets/generated/visitor-walk-a.prompt.txt", "assets/generated/visitor-walk-b.png", "assets/generated/visitor-walk-b.prompt.txt", "assets/generated/visitor-walk-c.png", "assets/generated/visitor-walk-c.prompt.txt", "assets/generated/visitor.prompt.txt", "assets/manifest.json", "audio/score-r3.mjs", "audio/score.mjs", "audio/stems-r3/ambience.wav", "audio/stems-r3/effects.wav", "audio/stems-r3/music.wav", "audio/stems/effects.wav", "audio/stems/music.wav", "docs/creative-treatment.md", "docs/production-log.md", "docs/project-map.md", "index.html", "outputs/soundtrack-r3.wav", "outputs/soundtrack.wav", "overview/encoded-contact-sheet.jpg", "package.json", "scripts/render.mjs", "scripts/validate.mjs", "src/garden.js", "src/main-r3.js", "src/main.js", "src/puppets.js", "src/score-clock.js", "src/sign.js", "src/skin-gl.js", "src/timeline.js", "src/type.js", "src/weather-r3.js", "src/weather.js", "BUNDLE-GUIDE.md" ], "externalPrerequisites": { "runtime": [ "Node.js", "Chromium or Chrome", "FFmpeg and ffprobe" ], "packageDependencies": { "playwright": "1.62.1", "pngjs": "7.0.0" }, "lockfileIncluded": false, "coldStart": false }, "license": { "summary": "User-directed publication of supplied authored source; preserve listed third-party notices; no new license granted here.", "includedNoticePaths": [ "assets/fonts/OFL.txt" ], "newLicenseGranted": false } }, "bundle": { "name": "clay-3d--local-room-for-two-r3--full.zip", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/clay-3d--local-room-for-two-r3--full.zip", "bytes": 54800493, "sha256": "fcb5c06794ea9713378729a81ad0f6443c9c9dd6290ae9662769014999c412f4", "available": true, "label": "52.3 MB", "contents": [ "selected master", "editable source", "variant guidance", "source assets", "audio inputs", "dependency declarations", "file manifest", "designed cover", "starter prompt" ], "includedFiles": 58, "includedFilePaths": [ "PORTABILITY/portability.md", "README.md", "SKILL.md", "STYLE.md", "assets/fonts/CormorantGaramond.ttf", "assets/fonts/OFL.txt", "assets/generated/environment.png", "assets/generated/environment.prompt.txt", "assets/generated/garden-sign.png", "assets/generated/garden-sign.prompt.txt", "assets/generated/host-offer.png", "assets/generated/host.prompt.txt", "assets/generated/sign-board-clean.prompt.txt", "assets/generated/sign-board.png", "assets/generated/sign-board.prompt.txt", "assets/generated/visitor-opening.png", "assets/generated/visitor-opening.prompt.txt", "assets/generated/visitor-poses.png", "assets/generated/visitor-walk-a.png", "assets/generated/visitor-walk-a.prompt.txt", "assets/generated/visitor-walk-b.png", "assets/generated/visitor-walk-b.prompt.txt", "assets/generated/visitor-walk-c.png", "assets/generated/visitor-walk-c.prompt.txt", "assets/generated/visitor.prompt.txt", "assets/manifest.json", "audio/score-r3.mjs", "audio/score.mjs", "audio/stems-r3/ambience.wav", "audio/stems-r3/effects.wav", "audio/stems-r3/music.wav", "audio/stems/effects.wav", "audio/stems/music.wav", "display/cover.webp", "docs/creative-treatment.md", "docs/production-log.md", "docs/project-map.md", "index.html", "outputs/room-for-two-r3.mp4", "outputs/soundtrack-r3.wav", "outputs/soundtrack.wav", "overview/encoded-contact-sheet.jpg", "package.json", "scripts/render.mjs", "scripts/validate.mjs", "src/garden.js", "src/main-r3.js", "src/main.js", "src/puppets.js", "src/score-clock.js", "src/sign.js", "src/skin-gl.js", "src/timeline.js", "src/type.js", "src/weather-r3.js", "src/weather.js", "starter-prompt.txt", "BUNDLE-GUIDE.md" ], "externalPrerequisites": { "runtime": [ "Node.js", "Chromium or Chrome", "FFmpeg and ffprobe" ], "packageDependencies": { "playwright": "1.62.1", "pngjs": "7.0.0" }, "lockfileIncluded": false, "coldStart": false }, "license": { "summary": "User-directed publication of supplied authored source; preserve listed third-party notices; no new license granted here.", "includedNoticePaths": [ "assets/fonts/OFL.txt" ], "newLicenseGranted": false } } }, "cadenceNote": "Encoded fps describes the file. Scene evaluation and held actor poses depend on this source recipe.", "starterPrompt": "Create a short Clay 3D film about {subject} for {audience}. Use the selected example as a visual reference. Preserve its composition, material, type, motion and audio relationships while adapting the story.\n\nSelected example: Room for Two R3\nFamily: clay-3d\nVariant: local-room-for-two-r3\nTypography: Custom incised sign artwork · no font family\nProduction: Generated clay artwork + 2.5D mesh-skinned puppets\nExact reference master SHA-256: c26398adb5ef129772eb38515427bdda95bb315c381766d859678dc8dca6236a\n\nRead the selected STYLE.md, SKILL.md and reproduction instructions before adapting. Keep the declared renderer and source closure; do not assume another family variant has interchangeable parameters. Preserve exact font or custom glyph sources, color roles, spatial continuity and readable text. Record encoded frame rate, scene evaluation and held poses separately. Review the changed render visually and listen to the encoded audio before claiming those checks passed. Existing approval applies only to its recorded artifact.\n\nSuccess check: the adapted story is clear; key type remains readable in motion; the source rebuilds with its declared inputs; all media and review records identify the exact output. State any untested reproduction, listening or rights limits.", "downloadNote": "Downloads match this selected example. The full bundle includes its source, original video, cover and starter prompt. Source packages include artwork, audio inputs and dependency declarations. Requires Node.js, Chromium or Chrome, FFmpeg and ffprobe. Follow the included run guide for package installation and reproduction limits.", "model": null, "reasoningEffort": null } ], "relatedMethodIds": [] }, { "id": "comic-halftone", "slug": "comic-halftone", "title": "Comic Halftone", "premise": "Bold ink, halftone texture and expressive lettering turn a vertical comic into a moving story.", "summary": "Bold ink, halftone texture and expressive lettering turn a vertical comic into a moving story.", "category": "Illustrative 2d", "defaultExampleId": "claude-cloud", "facets": { "material": [ "2d", "comic", "halftone", "ink", "speech-bubbles", "sfx-lettering", "vertical-scroll", "playful" ], "producer": [ "Claude Cloud" ], "format": [ "Portrait" ], "motion": [], "useCase": [] }, "examples": [ { "id": "claude-cloud", "title": "Seed to Seedling", "producer": "Claude Cloud", "producerEvidence": "The displayed model and reasoning label identify this production lane. Exact runtime model ID and per-film cost are not established by the source packet.", "relationship": "Original family example", "format": "Portrait", "productionMethod": "canvas-2d", "master": { "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/comic-halftone--claude-cloud.mp4", "sha256": "79c59f6b2d1a36e3daec2ce75b378460276732cb2ec03fa29dddba74036ad091", "bytes": 19761690, "mimeType": "video/mp4", "width": 1080, "height": 1920, "duration": 10.5, "encodedFps": 60 }, "poster": { "url": "/video-library/media/comic-halftone--claude-cloud/cover.webp", "sha256": "978aba3905a7b70e10d82dd8823387717400fbee83d9bfc7d56ff7c984c58bfc", "sourceMasterSha256": "79c59f6b2d1a36e3daec2ce75b378460276732cb2ec03fa29dddba74036ad091", "timeSeconds": 8.925, "rationale": "Late story beat selected to show the developed subject and visual system; extracted from this exact master." }, "previewVideo": { "url": "/video-library/media/comic-halftone--claude-cloud/preview.mp4", "sha256": "72f7f5b9c79d3c6164b374c5039d38068d0bb8673e4f6de3145b4bdd6a10ddaf", "sourceMasterSha256": "79c59f6b2d1a36e3daec2ce75b378460276732cb2ec03fa29dddba74036ad091", "width": 540, "height": 960, "label": "Playback preview · 540 px wide · full master in Download finished video" }, "gallery": [ { "id": "overview", "role": "encoded-contact-sheet", "label": "Scenes from the finished render · not a planning storyboard", "url": "/video-library/media/comic-halftone--claude-cloud/overview.webp", "sourceMasterSha256": "79c59f6b2d1a36e3daec2ce75b378460276732cb2ec03fa29dddba74036ad091" }, { "id": "scene-1", "role": "encoded-frame", "label": "Finished-film frame · 2.1 seconds", "url": "/video-library/media/comic-halftone--claude-cloud/scene-1.webp", "sourceMasterSha256": "79c59f6b2d1a36e3daec2ce75b378460276732cb2ec03fa29dddba74036ad091", "timeSeconds": 2.1 }, { "id": "scene-2", "role": "encoded-frame", "label": "Finished-film frame · 5.25 seconds", "url": "/video-library/media/comic-halftone--claude-cloud/scene-2.webp", "sourceMasterSha256": "79c59f6b2d1a36e3daec2ce75b378460276732cb2ec03fa29dddba74036ad091", "timeSeconds": 5.25 }, { "id": "scene-3", "role": "encoded-frame", "label": "Finished-film frame · 8.4 seconds", "url": "/video-library/media/comic-halftone--claude-cloud/scene-3.webp", "sourceMasterSha256": "79c59f6b2d1a36e3daec2ce75b378460276732cb2ec03fa29dddba74036ad091", "timeSeconds": 8.4 } ], "typography": [ "Bangers 400", "Comic Neue 700 italic", "Comic Neue 700" ], "palette": { "paper": "#f4ecd8", "ink": "#141414", "cyan": "#00a8e8", "magenta": "#ec008c", "yellow": "#ffe600", "sky": "#bfe6f5", "skyDot": "#5cc3ea", "soil": "#c98a5b", "soilDk": "#8c5a3a", "soilDot": "#7a3f52", "seed": "#ffcf3f", "seedDot": "#e8742c", "green": "#5cbf4a", "greenDk": "#2f8a3a", "sun": "#ffe14d", "caption": "#ffe9a0", "white": "#ffffff", "cloud": "#c9ccd6", "red": "#e8322c" }, "usageGuidance": "Change the subject, copy and timing for your audience. Retain the selected example’s visual rules and recheck the entire reading interval after changes.", "styleRules": "---\nid: comic-halftone\nname: Comic Halftone (a webtoon strip)\nfamily: illustrative 2D\naliases: [comic book, pop-art, Ben-Day, motion comic, webtoon, onomatopoeia]\ntags: [2d, comic, halftone, ink, speech-bubbles, sfx-lettering, vertical-scroll, playful]\nkind: visual-style\nroute: canvas-2d (CPU canvas; vector panels, Ben-Day pattern screens, misregistered colour plate)\nreadiness: { research: authored, rights: original-work, referenceImages: own-render, code: built, render: rendered-and-measured }\n---\n\n# Comic Halftone (a webtoon strip)\n\nA vertical webtoon (the phone-native comic format) in four inked panels, read by a thumb-flick camera.\n- **A , Rain:** narration \"MEANWHILE, BENEATH THE GARDEN…\"; the seed sleeps (Zz) while the sky rains \"PLIP!\" and \"PLOP!\". Drops sink, the seed jolts awake (\"!\"), and the bubble reads \"W-WATER?!\". Beat caption: \"WATER WAKES THE SEED\".\n- *Gutter:* \"DAY 3.\"\n- **B , Root:** an extreme close-up; the seed strains with gritted teeth (\"NNNGH!\") as the root drills down between speed lines and \"KRAK!\" bursts.\n- *Gutter:* \"DAY 6.\"\n- **C , Shoot:** the soil bulges, \"POP!\" explodes with radial lines, and the shoot shoots up into sunbeams as the leaves unfold (\"AAAH… LIGHT!\").\n- **D , Splash:** a triumphant seedling in a sunburst under the logo \"FROM SEED / TO SEEDLING!\", with \"THE END?\" in the corner.\n\nThe look is newsprint: black ink, Ben-Day dot screens, a colour plate printed 3 px off-register, and extruded lettering.\n\n**The one rule:** *it must look printed and lettered.* Every colour area is a flat ink plus a dot screen, every edge has a black ink line, and every sound and every word is lettered on the page.\n\n## Creative direction\n- **Audience:** social and youth audiences, families, playful brands, education with humour, webtoon/manga readers.\n- **Purpose:** turn a quiet process into an action story with a hero and sound effects you can *see*.\n- **Feeling:** punchy, funny, triumphant, nostalgic-pop.\n- **Central visual idea:** *the seed as a comic hero.* Germination is told as a four-panel action strip (awakening, struggle, breakthrough, victory splash) in the vertical scroll format native to phones.\n- **How the parts work together:**\n - *Composition:* one panel per beat, each filling the frame when the camera arrives.\n - *Colour:* CMY-like flats with dot screens, plus black.\n - *Type:* three registers: Bangers for sound effects and the logo, Comic Neue for dialogue and captions, and italic gutter narration.\n - *Motion:* snappy pops on letters, holds on panels, and flicks between them.\n - *Sound:* each onomatopoeia gets the sound it spells.\n\n## Fit\n- **Best for:** playful explainers, product \"origin stories\", kids' science, social series (episodic: \"№1\"), campaign teasers.\n- **Avoid when:** a serious or premium tone is needed, data must be read precisely, or the copy is long.\n- **Cost:** low. 630 frames in about 40 s (CPU canvas).\n\n## Visual fingerprint\n| Element | Rule |\n|---|---|\n| Strip | Panels 1000 × 1500 at x 40, separated by 160 px gutters (narration centred in gutters), plus a header line \"№1 · A TALE OF GROWTH\" above the first panel. Panel borders are 9 px ink. |\n| Ink | Black `#141414`, 5-10 px, round joins. The colour plate is drawn offset +3, +2 px from the ink plate (misregistration). |\n| Ben-Day screens | Pattern tiles: sky `#5cc3ea` dots (16 px, r 3, 15°); soil `#7a3f52` (14 px, r 3.6, 45°); seed shading `#e8742c` (10 px, r 2.6) in a crescent; leaves `#2f8a3a`; sun `#ff9f1c`; cloud `#8a8fa0`. |\n| Hero | Yellow bean (`#ffcf3f`) with dot shading and big comic eyes; moods sleep / shock / strain (brows, gritted teeth, sweat drop, jitter) / joy (∩ eyes, open smile with tongue). |\n| Action devices | Speed lines (vertical streaks beside the drilling root); radial burst lines from the break point; 12-18-point burst shapes behind KRAK!/POP!; dirt clods flying. |\n| Paper | Newsprint `#f4ecd8` with a speckle tile. |\n| Palette | Ink `#141414` · cyan `#00a8e8` · magenta `#ec008c` · yellow `#ffe600` · sky `#bfe6f5` · soil `#c98a5b` / `#8c5a3a` · seed `#ffcf3f` · green `#5cbf4a` / `#2f8a3a` · sun `#ffe14d` · caption `#ffe9a0` · red `#e8322c`. |\n\n### Typography (exact)\n| Role | Family / weight | Size | Treatment | Enter → settle |\n|---|---|---|---|---|\n| Onomatopoeia (PLIP!, PLOP!, !, KRAK!, POP!) | Bangers 400 | 110-140 px | extrusion: stacked black copies offset (+0.8, +1) × 8-10 px; black stroke 12 % of size; colour fill (cyan, red, magenta); white highlight band across the top third; tilted ±0.12-0.18 rad | pop: easeOutBack(2.6) over 0.2 s with a 0.3 rad rotation settle |\n| Speech | Comic Neue 700 italic, caps | 30 % of balloon height | white ellipse (or an 18-point jagged shout balloon) with 10 px ink and a tail aimed at the speaker | scale pop 0.25 s |\n| Captions / beat labels | Comic Neue 700, caps | 34 (narration) / 44 (beats) | `#ffe9a0` box, 5 px ink border, padding 0.6 em; narration top-left (24, 24), beats bottom-left (24, 1400) in panel coordinates | slide in 30 px + fade 0.25 s |\n| Gutter narration (\"DAY 3.\") | Comic Neue 700 italic | 46 | centred in the gutter | scrolls in with the strip |\n| Header | Bangers 400, tracking 6 | 40 | centred above panel A | static |\n| Title logo | Bangers 400 | 170 / 150 | \"FROM SEED\" yellow / \"TO SEEDLING!\" green, extrusion 14, −0.05 rad | pop 0.35 s; the second line 0.15 s later |\n\n## Temporal fingerprint\n| Element | Rule |\n|---|---|\n| Cadence | Ones for the camera; letters and bursts are snappy (0.2-0.35 s pops). |\n| Camera | Frame centre = panel centre; slow push 1.00 → 1.035 during each hold; thumb-flick scrolls of 0.55 s (easeInOutCubic + 2 % settle, slight pull-out mid-scroll) at 2.55, 5.3 and 7.95 s. |\n| Panel beats | A: narration 0.2 → beat 0.55 → PLIP 0.85 → PLOP 1.25 → \"!\" 1.55 → bubble 1.75. B: beat 3.25 → NNNGH 3.35 → root 3.45-4.7 → KRAK 3.55. C: beat 5.95 → bulge 6.0 → POP 6.3 → shoot 6.3-6.8 → leaves 6.85 → bubble 7.15. D: title 8.6 → THE END? 9.25 → note 9.45. |\n| Holds | Each panel holds ≥ 0.8 s after its last pop. |\n\n## How the composition develops\n| Time | Panel | Beat |\n|---|---|---|\n| 0-2.55 s | A (rain) | ① Water wakes the seed |\n| 2.55-3.1 s | scroll (\"DAY 3.\") | , |\n| 3.1-5.3 s | B (root close-up) | ② A root reaches down |\n| 5.3-5.85 s | scroll (\"DAY 6.\") | , |\n| 5.85-7.95 s | C (shoot breakthrough) | ③ A shoot finds the light |\n| 7.95-10.5 s | D (splash) | Title, \"THE END?\", note |\n\n## Sound fingerprint\nA cartoon-orchestra cue at about 110 BPM:\n- **Music by panel:**\n - A: sneaky B♭ pizzicato while the seed sleeps\n - B: a tense G-minor ostinato with brush snare\n - C: bright B♭ - E♭ - F with woodblocks\n - D: a brass-like saw fanfare (B♭ - D - F - B♭) with a cymbal and a final pad\n- **Onomatopoeia** (each matched to its word):\n - PLIP: a high drip; PLOP: a low drip; \"!\": a glock + woodblock sting\n - NNNGH: a rising filtered saw growl; KRAK: an impact with crack clicks\n - POP: a pop with a cork squeak; AAAH: a pad swell\n- **Paper:** caption and scroll sounds are paper rustles and flicks.\n\nMix −15.0 LUFS, −1.3 dBTP.\n\n## Reusable prompt\n> Create a {10.5}-second {1080×1920} motion comic about {subject} as a vertical webtoon strip of {4} panels (1000 × 1500, 160 px gutters with italic narration). Ink everything in black (5-10 px), fill with flat colours plus Ben-Day dot screens, and print the colour plate 3 px off-register on newsprint. Make the subject a hero with comic eyes and moods. Each panel = one beat with lettered onomatopoeia (Bangers, extruded, inked, popping with overshoot), speech/shout balloons and caption boxes (Comic Neue). Use action devices: speed lines, radial burst lines, burst shapes. Camera: hold on each panel with a slow push, thumb-flick scroll between panels. End on a splash panel with an extruded comic logo. Score: cartoon orchestra; each onomatopoeia gets the sound it spells.\n\n## Adaptation guidance\n| Change | Safe? | Notes |\n|---|---|---|\n| Story / hero | ✅ | 3-5 panels: awakening, struggle, breakthrough, splash. |\n| Palette | ✅ | Keep flats + dot screens + black ink; ≤ 6 hues. |\n| Lettering | ✅ | Any heavy condensed display face for SFX; any comic hand for dialogue. Keep extrusion and ink strokes. |\n| Format | ✅ | 16:9: switch to a classic page grid and zoom panel to panel. |\n| Copy | ✅ | Balloons ≤ 14 characters; captions ≤ 26 characters at 44 px. |\n| **Essential** | , | Ink + dot screens + misregistration, lettered sound, a hero with expressions, panel-by-panel reading with holds. |\n\n## Accessibility\n- **Legibility:** balloon and caption text is black on white or pale yellow (very high contrast). Bursts are brief, and no full-frame flashes are used.\n- **Repetition:** beat captions restate the story in plain words alongside the sound effects.\n\n## Provenance\nOriginal style and characters authored for this library (2026-10-07); no Animate seed. Comic conventions (Ben-Day dots, onomatopoeia, balloons) are public visual vocabulary; no existing comic art was copied. Fonts: Bangers and Comic Neue (SIL OFL) via Fontsource. All art and audio are procedural.", "review": { "technical": { "state": "Supplied checks passed", "scope": "Source handoff records complete decode, stream dimensions and audio measurements. Browser playback is checked separately.", "artifactSha256": "79c59f6b2d1a36e3daec2ce75b378460276732cb2ec03fa29dddba74036ad091" }, "creative": { "state": "Not independently accepted", "scope": "not independently established", "artifactSha256": "79c59f6b2d1a36e3daec2ce75b378460276732cb2ec03fa29dddba74036ad091" }, "listening": { "state": "Not verified", "scope": "No perceptual listening pass is established by this library import.", "artifactSha256": "79c59f6b2d1a36e3daec2ce75b378460276732cb2ec03fa29dddba74036ad091" }, "reproduction": { "state": "Not tested", "scope": "Source is supplied. Cross-machine cold-start reproduction has not been established.", "artifactSha256": "79c59f6b2d1a36e3daec2ce75b378460276732cb2ec03fa29dddba74036ad091" } }, "detailUrl": "https://library.jkylehobson.chatgpt.site/video-library/#family=comic-halftone&example=claude-cloud", "processUrl": "/video-library/process.html?family=comic-halftone&example=claude-cloud", "downloads": { "prompt": { "available": true, "url": "/video-library/prompts/comic-halftone--claude-cloud.txt", "sha256": "df76c85a8a5f7e3377989f046c26857f2008d7f2009ef95461487516b76c33bf", "bytes": 1814, "label": "Reusable, example-specific instructions" }, "video": { "name": "comic-halftone--claude-cloud.mp4", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/comic-halftone--claude-cloud.mp4", "bytes": 19761690, "sha256": "79c59f6b2d1a36e3daec2ce75b378460276732cb2ec03fa29dddba74036ad091", "available": true, "label": "18.8 MB" }, "source": { "name": "comic-halftone--claude-cloud--source.zip", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/comic-halftone--claude-cloud--source.zip", "bytes": 24501621, "sha256": "ed8122c9d84be35d0d28db7568925ac400e4165a9cf92d7715bc5613a22f0e34", "available": true, "label": "23.4 MB", "contents": [ "editable source", "variant guidance", "source assets", "audio inputs", "dependency declarations", "file manifest" ], "includedFiles": 53, "includedFilePaths": [ "CASE_STUDY.md", "RUN.md", "SKILL.md", "STYLE.md", "assets/components/balloons.png", "assets/components/benday-screens.png", "assets/components/panel-A.png", "assets/components/panel-B.png", "assets/components/panel-C.png", "assets/components/panel-D.png", "assets/components/seed-expressions.png", "assets/components/sfx-kit.png", "assets/layers/t1.90/01_paper.png", "assets/layers/t1.90/02_panels.png", "assets/layers/t4.60/01_paper.png", "assets/layers/t4.60/02_panels.png", "assets/layers/t7.30/01_paper.png", "assets/layers/t7.30/02_panels.png", "assets/layers/t9.90/01_paper.png", "assets/layers/t9.90/02_panels.png", "audio/cues.json", "audio/mix.flac", "audio/stems/drums.flac", "audio/stems/music.flac", "audio/stems/sfx.flac", "engine/audio.mjs", "engine/audio/dsp.js", "engine/audio/instruments.js", "engine/audio/sfx.js", "engine/browser.mjs", "engine/export.mjs", "engine/finish.mjs", "engine/lib/draw.js", "engine/lib/util.js", "engine/page.html", "engine/render.mjs", "engine/runtime.js", "engine/server.mjs", "film/FILM_DELIVERED_SEPARATELY.txt", "film/contact_sheet.jpg", "film/spectrogram.png", "film/stills/01_1.90s.jpg", "film/stills/02_4.60s.jpg", "film/stills/03_7.30s.jpg", "film/stills/04_9.90s.jpg", "overview/encoded-contact-sheet.jpg", "package.json", "qa.json", "spec.json", "styles/comic-halftone/scene.js", "styles/comic-halftone/score.js", "styles/comic-halftone/timeline.js", "BUNDLE-GUIDE.md" ], "externalPrerequisites": { "runtime": [ "Node.js", "Chromium or Chrome", "FFmpeg and ffprobe" ], "packageDependencies": { "@fontsource/anton": "^5.1.0", "@fontsource/archivo-black": "^5.1.0", "@fontsource/bangers": "^5.1.0", "@fontsource/bebas-neue": "^5.1.0", "@fontsource/caveat": "^5.1.0", "@fontsource/comic-neue": "^5.3.0", "@fontsource/dm-sans": "^5.1.0", "@fontsource/dm-serif-display": "^5.1.0", "@fontsource/fraunces": "^5.1.0", "@fontsource/ibm-plex-mono": "^5.1.0", "@fontsource/instrument-serif": "^5.1.0", "@fontsource/inter": "^5.1.0", "@fontsource/jetbrains-mono": "^5.1.0", "@fontsource/jost": "^5.3.0", "@fontsource/kaushan-script": "^5.3.0", "@fontsource/nunito": "^5.1.0", "@fontsource/permanent-marker": "^5.1.0", "@fontsource/playfair-display": "^5.1.0", "@fontsource/press-start-2p": "^5.1.0", "@fontsource/space-grotesk": "^5.1.0", "@fontsource/space-mono": "^5.1.0", "@fontsource/syne": "^5.1.0", "@fontsource/vt323": "^5.1.0", "three": "0.170.0", "playwright": "1.56.1" }, "lockfileIncluded": false, "coldStart": false }, "license": { "summary": "User-directed publication of supplied authored source; preserve listed third-party notices; no new license granted here.", "includedNoticePaths": [], "newLicenseGranted": false } }, "bundle": { "name": "comic-halftone--claude-cloud--full.zip", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/comic-halftone--claude-cloud--full.zip", "bytes": 44419563, "sha256": "d206350d524ed231fe520f736b9483aa8a80f2205df741e37131e3e132b3714c", "available": true, "label": "42.4 MB", "contents": [ "selected master", "editable source", "variant guidance", "source assets", "audio inputs", "dependency declarations", "file manifest", "designed cover", "starter prompt" ], "includedFiles": 56, "includedFilePaths": [ "CASE_STUDY.md", "RUN.md", "SKILL.md", "STYLE.md", "assets/components/balloons.png", "assets/components/benday-screens.png", "assets/components/panel-A.png", "assets/components/panel-B.png", "assets/components/panel-C.png", "assets/components/panel-D.png", "assets/components/seed-expressions.png", "assets/components/sfx-kit.png", "assets/layers/t1.90/01_paper.png", "assets/layers/t1.90/02_panels.png", "assets/layers/t4.60/01_paper.png", "assets/layers/t4.60/02_panels.png", "assets/layers/t7.30/01_paper.png", "assets/layers/t7.30/02_panels.png", "assets/layers/t9.90/01_paper.png", "assets/layers/t9.90/02_panels.png", "audio/cues.json", "audio/mix.flac", "audio/stems/drums.flac", "audio/stems/music.flac", "audio/stems/sfx.flac", "display/cover.webp", "engine/audio.mjs", "engine/audio/dsp.js", "engine/audio/instruments.js", "engine/audio/sfx.js", "engine/browser.mjs", "engine/export.mjs", "engine/finish.mjs", "engine/lib/draw.js", "engine/lib/util.js", "engine/page.html", "engine/render.mjs", "engine/runtime.js", "engine/server.mjs", "film/FILM_DELIVERED_SEPARATELY.txt", "film/comic-halftone.mp4", "film/contact_sheet.jpg", "film/spectrogram.png", "film/stills/01_1.90s.jpg", "film/stills/02_4.60s.jpg", "film/stills/03_7.30s.jpg", "film/stills/04_9.90s.jpg", "overview/encoded-contact-sheet.jpg", "package.json", "qa.json", "spec.json", "starter-prompt.txt", "styles/comic-halftone/scene.js", "styles/comic-halftone/score.js", "styles/comic-halftone/timeline.js", "BUNDLE-GUIDE.md" ], "externalPrerequisites": { "runtime": [ "Node.js", "Chromium or Chrome", "FFmpeg and ffprobe" ], "packageDependencies": { "@fontsource/anton": "^5.1.0", "@fontsource/archivo-black": "^5.1.0", "@fontsource/bangers": "^5.1.0", "@fontsource/bebas-neue": "^5.1.0", "@fontsource/caveat": "^5.1.0", "@fontsource/comic-neue": "^5.3.0", "@fontsource/dm-sans": "^5.1.0", "@fontsource/dm-serif-display": "^5.1.0", "@fontsource/fraunces": "^5.1.0", "@fontsource/ibm-plex-mono": "^5.1.0", "@fontsource/instrument-serif": "^5.1.0", "@fontsource/inter": "^5.1.0", "@fontsource/jetbrains-mono": "^5.1.0", "@fontsource/jost": "^5.3.0", "@fontsource/kaushan-script": "^5.3.0", "@fontsource/nunito": "^5.1.0", "@fontsource/permanent-marker": "^5.1.0", "@fontsource/playfair-display": "^5.1.0", "@fontsource/press-start-2p": "^5.1.0", "@fontsource/space-grotesk": "^5.1.0", "@fontsource/space-mono": "^5.1.0", "@fontsource/syne": "^5.1.0", "@fontsource/vt323": "^5.1.0", "three": "0.170.0", "playwright": "1.56.1" }, "lockfileIncluded": false, "coldStart": false }, "license": { "summary": "User-directed publication of supplied authored source; preserve listed third-party notices; no new license granted here.", "includedNoticePaths": [], "newLicenseGranted": false } } }, "cadenceNote": "Encoded fps describes the file. Scene evaluation and held actor poses depend on this source recipe.", "starterPrompt": "Create a {10.5}-second {1080×1920} motion comic about {subject} as a vertical webtoon strip of {4} panels (1000 × 1500, 160 px gutters with italic narration). Ink everything in black (5-10 px), fill with flat colours plus Ben-Day dot screens, and print the colour plate 3 px off-register on newsprint. Make the subject a hero with comic eyes and moods. Each panel = one beat with lettered onomatopoeia (Bangers, extruded, inked, popping with overshoot), speech/shout balloons and caption boxes (Comic Neue). Use action devices: speed lines, radial burst lines, burst shapes. Camera: hold on each panel with a slow push, thumb-flick scroll between panels. End on a splash panel with an extruded comic logo. Score: cartoon orchestra; each onomatopoeia gets the sound it spells.\n\nSelected example: Seed to Seedling\nFamily: comic-halftone\nVariant: claude-cloud\nTypography: Bangers 400, Comic Neue 700 italic, Comic Neue 700\nProduction: canvas-2d\nExact reference master SHA-256: 79c59f6b2d1a36e3daec2ce75b378460276732cb2ec03fa29dddba74036ad091\n\nRead the selected STYLE.md, SKILL.md and reproduction instructions before adapting. Keep the declared renderer and source closure; do not assume another family variant has interchangeable parameters. Preserve exact font or custom glyph sources, color roles, spatial continuity and readable text. Record encoded frame rate, scene evaluation and held poses separately. Review the changed render visually and listen to the encoded audio before claiming those checks passed. Existing approval applies only to its recorded artifact.\n\nSuccess check: the adapted story is clear; key type remains readable in motion; the source rebuilds with its declared inputs; all media and review records identify the exact output. State any untested reproduction, listening or rights limits.", "downloadNote": "Downloads match this selected example. The full bundle includes its source, original video, cover and starter prompt. Source packages include artwork, audio inputs and dependency declarations. Requires Node.js, Chromium or Chrome, FFmpeg and ffprobe. Follow the included run guide for package installation and reproduction limits.", "model": "Opus 5.5", "reasoningEffort": "Extra" } ], "relatedMethodIds": [] }, { "id": "crosshatch", "slug": "crosshatch", "title": "Crosshatch", "premise": "Sketch the plan, then bring it to life in ink. Hatching, boiling lines and pencil accents explain how things work.", "summary": "Sketch the plan, then bring it to life in ink. Hatching, boiling lines and pencil accents explain how things work.", "category": "Hand-drawn 2d", "defaultExampleId": "claude-cloud", "facets": { "material": [ "2d", "ink", "hatching", "boil", "plan-then-do", "iris", "two-worlds", "handwritten" ], "producer": [ "Claude Cloud" ], "format": [ "Portrait" ], "motion": [], "useCase": [] }, "examples": [ { "id": "claude-cloud", "title": "Seed to Seedling", "producer": "Claude Cloud", "producerEvidence": "The displayed model and reasoning label identify this production lane. Exact runtime model ID and per-film cost are not established by the source packet.", "relationship": "Original family example", "format": "Portrait", "productionMethod": "canvas-2d", "master": { "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/crosshatch--claude-cloud.mp4", "sha256": "5cd3e8fd8687238645c9c46d6a7d5faa2894cacddc8326f32514b55e773b1312", "bytes": 18015568, "mimeType": "video/mp4", "width": 1080, "height": 1920, "duration": 10.2, "encodedFps": 60 }, "poster": { "url": "/video-library/media/crosshatch--claude-cloud/cover.webp", "sha256": "536d15e81ec8e625892b3c97ed08624a5804afd9f66c8bdd6ce255711e0c775b", "sourceMasterSha256": "5cd3e8fd8687238645c9c46d6a7d5faa2894cacddc8326f32514b55e773b1312", "timeSeconds": 8.67, "rationale": "Late story beat selected to show the developed subject and visual system; extracted from this exact master." }, "previewVideo": { "url": "/video-library/media/crosshatch--claude-cloud/preview.mp4", "sha256": "f4adb058f1ae080da196f0f6dc1e5791529ec0849051a703328b2f970548f5e6", "sourceMasterSha256": "5cd3e8fd8687238645c9c46d6a7d5faa2894cacddc8326f32514b55e773b1312", "width": 540, "height": 960, "label": "Playback preview · 540 px wide · full master in Download finished video" }, "gallery": [ { "id": "overview", "role": "encoded-contact-sheet", "label": "Scenes from the finished render · not a planning storyboard", "url": "/video-library/media/crosshatch--claude-cloud/overview.webp", "sourceMasterSha256": "5cd3e8fd8687238645c9c46d6a7d5faa2894cacddc8326f32514b55e773b1312" }, { "id": "scene-1", "role": "encoded-frame", "label": "Finished-film frame · 2.04 seconds", "url": "/video-library/media/crosshatch--claude-cloud/scene-1.webp", "sourceMasterSha256": "5cd3e8fd8687238645c9c46d6a7d5faa2894cacddc8326f32514b55e773b1312", "timeSeconds": 2.04 }, { "id": "scene-2", "role": "encoded-frame", "label": "Finished-film frame · 5.1 seconds", "url": "/video-library/media/crosshatch--claude-cloud/scene-2.webp", "sourceMasterSha256": "5cd3e8fd8687238645c9c46d6a7d5faa2894cacddc8326f32514b55e773b1312", "timeSeconds": 5.1 }, { "id": "scene-3", "role": "encoded-frame", "label": "Finished-film frame · 8.16 seconds", "url": "/video-library/media/crosshatch--claude-cloud/scene-3.webp", "sourceMasterSha256": "5cd3e8fd8687238645c9c46d6a7d5faa2894cacddc8326f32514b55e773b1312", "timeSeconds": 8.16 } ], "typography": [ "Caveat 700" ], "palette": { "ink": "#3a2417", "paper": "#f4ecd9", "cream": "#efe5cf", "wood": "#d6a466", "yellow": "#f0c55a", "green": "#5f9c5c", "red": "#d4382c", "sky": "#9cc4d6", "water": "#3f7ea6", "rose": "#d98b8b", "navy0": "#0c0d1c", "navy1": "#15173a", "peri": "#c8d0f0", "cyan": "#52d6c4", "magenta": "#e0368f", "glow": "#5de37a", "hero": "#d97757" }, "usageGuidance": "Change the subject, copy and timing for your audience. Retain the selected example’s visual rules and recheck the entire reading interval after changes.", "styleRules": "---\nid: crosshatch\nname: Crosshatch Ink (plan, then ink)\nfamily: hand-drawn 2D\naliases: [ink illustration, pen and ink, hatching, editorial ink, sketchy line, two-world explainer]\ntags: [2d, ink, hatching, boil, plan-then-do, iris, two-worlds, handwritten]\nkind: visual-style\nroute: canvas-2d (CPU canvas; wobbled ink polylines + clipped textures, on twos)\nreadiness: { research: seed-extended, rights: original-work, referenceImages: own-render, code: built, render: rendered-and-measured }\n---\n\n# Crosshatch Ink (plan, then ink)\n\nA sketchy pen-and-ink explainer that **shows the plan before it shows the doing**. Every beat is first sketched in red-pencil dashes, then the same thing is done for real in a boiling ink line, and filled shapes get hatching, cross-hatching, coloured pencil or stipple shaded by light from the top-left.\n- **Paper world:** a watering can tilts; a red dashed arc plans the water's path; then an ink stream and drops follow it. The terracotta hero (with its asterisk mark) wakes and swells.\n- **The dive:** an inked iris dives into the **navy underground world** (periwinkle lines, stipple soil). A red plan marks the root's path, then the root draws itself in glowing cyan ink with rootlets.\n- **The return:** the iris brings us back to paper, where a red plan points the stem to the sun; ink draws the stem, leaves are coloured in with green pencil and hatching, and a pencil-yellow sun appears.\n- **Title:** hand-lettered with a red-pencil underline.\n\n**The one rule:** *nothing is still and nothing is flat.* Every line re-wobbles on twos (the drawing is alive in held frames), and every filled shape carries a texture shaped by light.\n\n## Creative direction\n- **Audience:** tech explainers, education, editorial, product \"how it works\", process-minded audiences.\n- **Purpose:** make intention visible: the plan (red) and the execution (ink) are separate, so viewers see *what will happen*, then *that it happened*.\n- **Feeling:** thoughtful, handmade, warm, a little magical when we dive inside.\n- **Central visual idea:** *plan, then ink.* Red dashes predict, ink confirms. The two worlds (paper outside, navy inside) make \"inside the soil\" a different place, entered and left through an inked iris.\n- **How the parts work together:**\n - *Composition:* a cross-section on paper; a close-up in the dark world.\n - *Colour:* ink + cream with small wood/yellow/green fills by day; navy + periwinkle + cyan glow by night; terracotta only for the hero; red only for plans and the title underline.\n - *Type:* Caveat handwriting, written on.\n - *Motion:* boil on twos, write-ons, an iris matched on the hero.\n - *Sound:* acoustic outside, synth inside, plus pen, pencil and water sounds.\n\n## Fit\n- **Best for:** AI/agent and software explainers (planning vs doing), science processes, internal tools, editorial illustration.\n- **Avoid when:** a slick, corporate or photographic look is required; very fast cutting (the boil wants holds).\n- **Cost:** low. 306 poses in about 30 s.\n\n## Visual fingerprint\n| Element | Rule |\n|---|---|\n| Ink | Polyline resampled every 6 px, offset by 2D noise (amp 2.2) reseeded **every pose** (on twos); a second thinner pass (40 % width, 70 % alpha, amp ×1.4) that doesn't quite agree. Widths 2.4-9 px. |\n| Plan | Red pencil `rgba(212,56,44,0.92)`, 3 px, dashes 14/12, low wobble; drawn first and removed once the ink has done the same thing. |\n| Textures (clipped in shapes) | **hatch:** 20 px dashes on lines every 7-13 px at −0.7…−0.8 rad, kept where density(x, y) > random. **cross:** hatch + a second pass rotated +1.4 rad. **pencil:** coloured strokes 10-26 px at −1.0 rad, 55-80 %. **stipple:** density-driven dots. Density = light from the top-left: `0.15 + ((x − cx) + (y − cy)) / (2.2 r)`. |\n| Paper world | Paper `#f4ecd9`; soil = cream fill + hatch darkening with depth + stipple; ink grass flicks; hatched pebbles; can in wood + yellow pencil. |\n| Night world | Navy gradient `#15173a → #0c0d1c`, periwinkle `#c8d0f0` lines and stipple, hatched pebbles, glowing cyan root (shadow blur 24 + white core). The hero glows (blur 40). |\n| Hero | Terracotta `#d97757` bean with cross-hatch shading, a three-stroke asterisk, and eyes with moods (sleep, open, up, down, joy). It appears at 1.35× by day and 2× in the night close-up. |\n| Iris | Circle centred on the hero, `R = 30 + 2200·k²` over 0.5 s, double ink rim (periwinkle on the way out). The new world arrives offset so its hero sits exactly where the old hero was, then settles over 0.5 s. |\n| Grain | A speckle tile offset every pose (the grain boils too). |\n| Palette | Day: ink `#3a2417` · paper `#f4ecd9` · cream `#efe5cf` · wood `#d6a466` · yellow `#f0c55a` · green `#5f9c5c` · red `#d4382c` · sky `#9cc4d6` · water `#3f7ea6`. Night: navy `#0c0d1c`/`#15173a` · periwinkle `#c8d0f0` · cyan `#52d6c4`. Hero: terracotta `#d97757`. |\n\n### Typography (exact)\n| Role | Family / weight | Size | Placement | Enter → settle |\n|---|---|---|---|---|\n| Beat captions (\"1 · water wakes the seed\" …) | Caveat 700 | 64 | day: left at (80, 250); night: left at (80, 1770) in periwinkle | written on by a left → right clip over 0.6 s; boils ±0.8 px; erased (clip back) 0.2 s before the next world |\n| Title \"From seed to seedling\" | Caveat 700 | 96 | centred, baseline 250 | written on over 0.7 s; then a red-pencil underline drawn over 0.5 s |\n| Note | Caveat 700 | 40 | centred, y 1860 | written on over 0.5 s |\n\n## Temporal fingerprint\n| Element | Rule |\n|---|---|\n| Grid | 120 BPM; poses on twos (`poseStep: 2`). |\n| Plan → ink | Each beat: plan 0.35-0.5 s, then ink 0.7-1.4 s along the same path; the plan fades once the ink completes. |\n| Worlds | Paper 0-3.0 s → iris → night 3.5-5.7 s → iris → paper 6.2-10.2 s. |\n| Camera | A slow push of 3 % over the film, plus the 0.5 s hero-matching settle after each iris. |\n\n## How the composition develops\n| Time | World | Action |\n|---|---|---|\n| 0-0.8 s | paper | The scene inks in: ground, grass, pebbles, can; soil hatching reveals. |\n| 0.8-3.0 s | paper | ① Plan arc → the can tilts and pours → drops → a soak ring → the hero wakes (\"!\") and swells. |\n| 3.0-3.5 s | iris | Dive into the soil on the hero. |\n| 3.5-5.7 s | night | ② Plan down → the glowing root draws → two rootlets. |\n| 5.7-6.2 s | iris | Back to paper on the hero. |\n| 6.2-8.0 s | paper | ③ Plan to the sun → the sun is pencilled → the stem is inked → leaves are coloured in. |\n| 8.0-10.2 s | paper | Title + red underline; note; hold. |\n\n## Sound fingerprint\nTwo worlds, two sounds:\n- **Paper world:** acoustic at 120 BPM in C major. Karplus-Strong pluck figures (C - Am - F - G), a bass, brushes, kalimba accents.\n- **Underground:** a dark A-minor synth pulse (saw bass 8ths, bell arps, pad).\n- **Return:** a brighter acoustic reprise with a shaker.\n\nThe medium is audible:\n- **Pen and pencil:** a pen scratch for every ink write-on; pencil ticks while each red plan is dashed in.\n- **Water:** the pour as filtered noise, drips as bubbles, a bell when the seed wakes.\n- **Transitions:** iris sweeps with a thunk; a low saw hum under the glowing root and bells on the rootlets.\n- **Title:** a pen scratch and a red-pencil swish.\n\nMix −14.9 LUFS, −2.1 dBTP.\n\n## Reusable prompt\n> Create a {10}-second {1080×1920} pen-and-ink explainer about {process} that shows the plan before the doing. Every line is a wobbly ink stroke (with a second thin pass) that re-wobbles every two frames; every filled shape gets hatching, cross-hatching, coloured pencil or stipple, denser toward the bottom-right (light from the top-left). For each beat, first draw the plan as red-pencil dashes, then do it for real in ink along the same path and remove the plan. Use two worlds: cream paper outside and a navy \"inside\" world with periwinkle lines and a glow accent, entered and left through an inked iris centred on the hero (the new world arrives with the hero in the same place). A terracotta hero with a small mark carries the story. Hand-lettered captions write on. Score: acoustic outside, synth inside; pen scratch for ink, pencil ticks for plans.\n\n## Adaptation guidance\n| Change | Safe? | Notes |\n|---|---|---|\n| Subject | ✅ | Any process with intent → result. Agent/software stories map perfectly: plan = red dashes, tool calls = ink. |\n| Worlds | ✅ | Outside/inside can be desk/computer, body/cell, city/underground. Keep a strong colour contrast between them. |\n| Palette | ✅ | Keep ink + paper; keep red exclusively for plans; one hero colour. |\n| Font | ✅ | Any legible handwriting with a bold weight. |\n| 16:9 | ✅ | The cross-section widens; place captions at the top. |\n| **Essential** | , | Boil on twos, texture in every fill, plan → ink, the iris between worlds matched on the hero. |\n\n## Accessibility\nCaptions are ink on cream (about 12:1) and periwinkle on navy (about 11:1). The boil is small (±2 px) with no flicker. The iris is a reveal, not a flash.\n\n## Provenance\nBuilt from the Animate seed `crosshatch` (cth9191/animate @ 7e5eb56feb2dd573f890e1b7b34748af43d58263, MIT): the medium (boiling ink, clipped textures shaded by a density function, red plans vs ink, day/night worlds, terracotta hero with an asterisk, iris). The seed was used as source material only; nothing was installed or executed. All code, art and audio here are original to this library (2026-10-07). Font: Caveat (SIL OFL).", "review": { "technical": { "state": "Supplied checks passed", "scope": "Source handoff records complete decode, stream dimensions and audio measurements. Browser playback is checked separately.", "artifactSha256": "5cd3e8fd8687238645c9c46d6a7d5faa2894cacddc8326f32514b55e773b1312" }, "creative": { "state": "Not independently accepted", "scope": "not independently established", "artifactSha256": "5cd3e8fd8687238645c9c46d6a7d5faa2894cacddc8326f32514b55e773b1312" }, "listening": { "state": "Not verified", "scope": "No perceptual listening pass is established by this library import.", "artifactSha256": "5cd3e8fd8687238645c9c46d6a7d5faa2894cacddc8326f32514b55e773b1312" }, "reproduction": { "state": "Not tested", "scope": "Source is supplied. Cross-machine cold-start reproduction has not been established.", "artifactSha256": "5cd3e8fd8687238645c9c46d6a7d5faa2894cacddc8326f32514b55e773b1312" } }, "detailUrl": "https://library.jkylehobson.chatgpt.site/video-library/#family=crosshatch&example=claude-cloud", "processUrl": "/video-library/process.html?family=crosshatch&example=claude-cloud", "downloads": { "prompt": { "available": true, "url": "/video-library/prompts/crosshatch--claude-cloud.txt", "sha256": "0eb2df7b9daf2c230b9b4431483b483004a0441cc5ada7e2c2904d0df82be85d", "bytes": 1848, "label": "Reusable, example-specific instructions" }, "video": { "name": "crosshatch--claude-cloud.mp4", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/crosshatch--claude-cloud.mp4", "bytes": 18015568, "sha256": "5cd3e8fd8687238645c9c46d6a7d5faa2894cacddc8326f32514b55e773b1312", "available": true, "label": "17.2 MB" }, "source": { "name": "crosshatch--claude-cloud--source.zip", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/crosshatch--claude-cloud--source.zip", "bytes": 13376582, "sha256": "6ee13a1dd6fb9d44829d9e640e5552a8b7b4205802d29a730c7900c2ce5a8dc7", "available": true, "label": "12.8 MB", "contents": [ "editable source", "variant guidance", "source assets", "audio inputs", "dependency declarations", "file manifest" ], "includedFiles": 50, "includedFilePaths": [ "CASE_STUDY.md", "RUN.md", "SKILL.md", "STYLE.md", "THIRD-PARTY-NOTICES/animate-MIT.txt", "assets/components/hero-moods.png", "assets/components/plan-vs-ink.png", "assets/components/texture-swatches.png", "assets/layers/t2.40/01_world.png", "assets/layers/t2.40/02_type.png", "assets/layers/t4.80/01_world.png", "assets/layers/t4.80/02_type.png", "assets/layers/t9.80/01_world.png", "assets/layers/t9.80/02_type.png", "audio/cues.json", "audio/mix.flac", "audio/stems/drums.flac", "audio/stems/music.flac", "audio/stems/sfx.flac", "engine/audio.mjs", "engine/audio/dsp.js", "engine/audio/instruments.js", "engine/audio/sfx.js", "engine/browser.mjs", "engine/export.mjs", "engine/finish.mjs", "engine/lib/draw.js", "engine/lib/util.js", "engine/page.html", "engine/render.mjs", "engine/runtime.js", "engine/server.mjs", "film/FILM_DELIVERED_SEPARATELY.txt", "film/contact_sheet.jpg", "film/spectrogram.png", "film/stills/01_1.00s.jpg", "film/stills/02_2.40s.jpg", "film/stills/03_3.60s.jpg", "film/stills/04_4.80s.jpg", "film/stills/05_6.60s.jpg", "film/stills/06_7.60s.jpg", "film/stills/07_9.80s.jpg", "overview/encoded-contact-sheet.jpg", "package.json", "qa.json", "spec.json", "styles/crosshatch/scene.js", "styles/crosshatch/score.js", "styles/crosshatch/timeline.js", "BUNDLE-GUIDE.md" ], "externalPrerequisites": { "runtime": [ "Node.js", "Chromium or Chrome", "FFmpeg and ffprobe" ], "packageDependencies": { "@fontsource/anton": "^5.1.0", "@fontsource/archivo-black": "^5.1.0", "@fontsource/bangers": "^5.1.0", "@fontsource/bebas-neue": "^5.1.0", "@fontsource/caveat": "^5.1.0", "@fontsource/comic-neue": "^5.3.0", "@fontsource/dm-sans": "^5.1.0", "@fontsource/dm-serif-display": "^5.1.0", "@fontsource/fraunces": "^5.1.0", "@fontsource/ibm-plex-mono": "^5.1.0", "@fontsource/instrument-serif": "^5.1.0", "@fontsource/inter": "^5.1.0", "@fontsource/jetbrains-mono": "^5.1.0", "@fontsource/jost": "^5.3.0", "@fontsource/kaushan-script": "^5.3.0", "@fontsource/nunito": "^5.1.0", "@fontsource/permanent-marker": "^5.1.0", "@fontsource/playfair-display": "^5.1.0", "@fontsource/press-start-2p": "^5.1.0", "@fontsource/space-grotesk": "^5.1.0", "@fontsource/space-mono": "^5.1.0", "@fontsource/syne": "^5.1.0", "@fontsource/vt323": "^5.1.0", "three": "0.170.0", "playwright": "1.56.1" }, "lockfileIncluded": false, "coldStart": false }, "license": { "summary": "User-directed publication of supplied authored source; preserve listed third-party notices; no new license granted here.", "includedNoticePaths": [ "THIRD-PARTY-NOTICES/animate-MIT.txt" ], "newLicenseGranted": false } }, "bundle": { "name": "crosshatch--claude-cloud--full.zip", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/crosshatch--claude-cloud--full.zip", "bytes": 31488103, "sha256": "3f0c773c4d1d120ebb322c6f1137906eeb2b2df0c16734676c7398da8728db2f", "available": true, "label": "30.0 MB", "contents": [ "selected master", "editable source", "variant guidance", "source assets", "audio inputs", "dependency declarations", "file manifest", "designed cover", "starter prompt" ], "includedFiles": 53, "includedFilePaths": [ "CASE_STUDY.md", "RUN.md", "SKILL.md", "STYLE.md", "THIRD-PARTY-NOTICES/animate-MIT.txt", "assets/components/hero-moods.png", "assets/components/plan-vs-ink.png", "assets/components/texture-swatches.png", "assets/layers/t2.40/01_world.png", "assets/layers/t2.40/02_type.png", "assets/layers/t4.80/01_world.png", "assets/layers/t4.80/02_type.png", "assets/layers/t9.80/01_world.png", "assets/layers/t9.80/02_type.png", "audio/cues.json", "audio/mix.flac", "audio/stems/drums.flac", "audio/stems/music.flac", "audio/stems/sfx.flac", "display/cover.webp", "engine/audio.mjs", "engine/audio/dsp.js", "engine/audio/instruments.js", "engine/audio/sfx.js", "engine/browser.mjs", "engine/export.mjs", "engine/finish.mjs", "engine/lib/draw.js", "engine/lib/util.js", "engine/page.html", "engine/render.mjs", "engine/runtime.js", "engine/server.mjs", "film/FILM_DELIVERED_SEPARATELY.txt", "film/contact_sheet.jpg", "film/crosshatch.mp4", "film/spectrogram.png", "film/stills/01_1.00s.jpg", "film/stills/02_2.40s.jpg", "film/stills/03_3.60s.jpg", "film/stills/04_4.80s.jpg", "film/stills/05_6.60s.jpg", "film/stills/06_7.60s.jpg", "film/stills/07_9.80s.jpg", "overview/encoded-contact-sheet.jpg", "package.json", "qa.json", "spec.json", "starter-prompt.txt", "styles/crosshatch/scene.js", "styles/crosshatch/score.js", "styles/crosshatch/timeline.js", "BUNDLE-GUIDE.md" ], "externalPrerequisites": { "runtime": [ "Node.js", "Chromium or Chrome", "FFmpeg and ffprobe" ], "packageDependencies": { "@fontsource/anton": "^5.1.0", "@fontsource/archivo-black": "^5.1.0", "@fontsource/bangers": "^5.1.0", "@fontsource/bebas-neue": "^5.1.0", "@fontsource/caveat": "^5.1.0", "@fontsource/comic-neue": "^5.3.0", "@fontsource/dm-sans": "^5.1.0", "@fontsource/dm-serif-display": "^5.1.0", "@fontsource/fraunces": "^5.1.0", "@fontsource/ibm-plex-mono": "^5.1.0", "@fontsource/instrument-serif": "^5.1.0", "@fontsource/inter": "^5.1.0", "@fontsource/jetbrains-mono": "^5.1.0", "@fontsource/jost": "^5.3.0", "@fontsource/kaushan-script": "^5.3.0", "@fontsource/nunito": "^5.1.0", "@fontsource/permanent-marker": "^5.1.0", "@fontsource/playfair-display": "^5.1.0", "@fontsource/press-start-2p": "^5.1.0", "@fontsource/space-grotesk": "^5.1.0", "@fontsource/space-mono": "^5.1.0", "@fontsource/syne": "^5.1.0", "@fontsource/vt323": "^5.1.0", "three": "0.170.0", "playwright": "1.56.1" }, "lockfileIncluded": false, "coldStart": false }, "license": { "summary": "User-directed publication of supplied authored source; preserve listed third-party notices; no new license granted here.", "includedNoticePaths": [ "THIRD-PARTY-NOTICES/animate-MIT.txt" ], "newLicenseGranted": false } } }, "cadenceNote": "Encoded fps describes the file. Scene evaluation and held actor poses depend on this source recipe.", "starterPrompt": "Create a {10}-second {1080×1920} pen-and-ink explainer about {process} that shows the plan before the doing. Every line is a wobbly ink stroke (with a second thin pass) that re-wobbles every two frames; every filled shape gets hatching, cross-hatching, coloured pencil or stipple, denser toward the bottom-right (light from the top-left). For each beat, first draw the plan as red-pencil dashes, then do it for real in ink along the same path and remove the plan. Use two worlds: cream paper outside and a navy \"inside\" world with periwinkle lines and a glow accent, entered and left through an inked iris centred on the hero (the new world arrives with the hero in the same place). A terracotta hero with a small mark carries the story. Hand-lettered captions write on. Score: acoustic outside, synth inside; pen scratch for ink, pencil ticks for plans.\n\nSelected example: Seed to Seedling\nFamily: crosshatch\nVariant: claude-cloud\nTypography: Caveat 700\nProduction: canvas-2d\nExact reference master SHA-256: 5cd3e8fd8687238645c9c46d6a7d5faa2894cacddc8326f32514b55e773b1312\n\nRead the selected STYLE.md, SKILL.md and reproduction instructions before adapting. Keep the declared renderer and source closure; do not assume another family variant has interchangeable parameters. Preserve exact font or custom glyph sources, color roles, spatial continuity and readable text. Record encoded frame rate, scene evaluation and held poses separately. Review the changed render visually and listen to the encoded audio before claiming those checks passed. Existing approval applies only to its recorded artifact.\n\nSuccess check: the adapted story is clear; key type remains readable in motion; the source rebuilds with its declared inputs; all media and review records identify the exact output. State any untested reproduction, listening or rights limits.", "downloadNote": "Downloads match this selected example. The full bundle includes its source, original video, cover and starter prompt. Source packages include artwork, audio inputs and dependency declarations. Requires Node.js, Chromium or Chrome, FFmpeg and ffprobe. Follow the included run guide for package installation and reproduction limits.", "model": "Opus 5.5", "reasoningEffort": "Extra" } ], "relatedMethodIds": [ "crosshatch" ] }, { "id": "cut-paper", "slug": "cut-paper", "title": "Cut Paper", "premise": "Torn edges, layered shadows and crayon texture create a warm picture-book world with depth.", "summary": "Torn edges, layered shadows and crayon texture create a warm picture-book world with depth.", "category": "Handmade 2d", "defaultExampleId": "claude-cloud", "facets": { "material": [ "2d", "paper", "collage", "torn-edge", "multiplane", "character", "hand-lettering", "warm", "playful" ], "producer": [ "Claude Cloud" ], "format": [ "Portrait" ], "motion": [], "useCase": [] }, "examples": [ { "id": "claude-cloud", "title": "Seed to Seedling", "producer": "Claude Cloud", "producerEvidence": "The displayed model and reasoning label identify this production lane. Exact runtime model ID and per-film cost are not established by the source packet.", "relationship": "Original family example", "format": "Portrait", "productionMethod": "canvas-2d", "master": { "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/cut-paper--claude-cloud.mp4", "sha256": "f6674973a61fdc6a6830155254857b5c828c17c8bbb58d684d331874d4e7ec7c", "bytes": 14915653, "mimeType": "video/mp4", "width": 1080, "height": 1920, "duration": 10.2, "encodedFps": 60 }, "poster": { "url": "/video-library/media/cut-paper--claude-cloud/cover.webp", "sha256": "fec63cc7089f25582b2c8cba92b1d005a5a1e8ae775e1b78de3d477839229c03", "sourceMasterSha256": "f6674973a61fdc6a6830155254857b5c828c17c8bbb58d684d331874d4e7ec7c", "timeSeconds": 8.67, "rationale": "Late story beat selected to show the developed subject and visual system; extracted from this exact master." }, "previewVideo": { "url": "/video-library/media/cut-paper--claude-cloud/preview.mp4", "sha256": "69d53aa9cae67f82eb08332c4e383a2156fa6647b7e233396115255c038e3ada", "sourceMasterSha256": "f6674973a61fdc6a6830155254857b5c828c17c8bbb58d684d331874d4e7ec7c", "width": 540, "height": 960, "label": "Playback preview · 540 px wide · full master in Download finished video" }, "gallery": [ { "id": "overview", "role": "encoded-contact-sheet", "label": "Scenes from the finished render · not a planning storyboard", "url": "/video-library/media/cut-paper--claude-cloud/overview.webp", "sourceMasterSha256": "f6674973a61fdc6a6830155254857b5c828c17c8bbb58d684d331874d4e7ec7c" }, { "id": "scene-1", "role": "encoded-frame", "label": "Finished-film frame · 2.04 seconds", "url": "/video-library/media/cut-paper--claude-cloud/scene-1.webp", "sourceMasterSha256": "f6674973a61fdc6a6830155254857b5c828c17c8bbb58d684d331874d4e7ec7c", "timeSeconds": 2.04 }, { "id": "scene-2", "role": "encoded-frame", "label": "Finished-film frame · 5.1 seconds", "url": "/video-library/media/cut-paper--claude-cloud/scene-2.webp", "sourceMasterSha256": "f6674973a61fdc6a6830155254857b5c828c17c8bbb58d684d331874d4e7ec7c", "timeSeconds": 5.1 }, { "id": "scene-3", "role": "encoded-frame", "label": "Finished-film frame · 8.16 seconds", "url": "/video-library/media/cut-paper--claude-cloud/scene-3.webp", "sourceMasterSha256": "f6674973a61fdc6a6830155254857b5c828c17c8bbb58d684d331874d4e7ec7c", "timeSeconds": 8.16 } ], "typography": [ "Caveat 700", "Caveat 400" ], "palette": { "ink": "#2a1d18", "paper": "#fbf6ea", "cream": "#f3ead6", "tape": "#eadcae", "navy": "#26315f", "wood": "#c08048", "mustard": "#d9a441", "yellow": "#f6cf55", "teal": "#3f9f9a", "mint": "#a9d9c6", "pink": "#f3a3bf", "sky": "#cfe2ee", "blue": "#4c6fb5", "green": "#5aa05a", "leaf": "#7cc06a", "grass": "#6fb35a", "charcoal": "#4a4a52", "stone": "#b9b2a6", "soil1": "#a86a3a", "soil2": "#8a5530", "soil3": "#6e4226", "soil4": "#553220", "worm": "#e98fa0", "cheek": "#f59a86", "hero": "#ec7a4f" }, "usageGuidance": "Change the subject, copy and timing for your audience. Retain the selected example’s visual rules and recheck the entire reading interval after changes.", "styleRules": "---\nid: cut-paper\nname: Cut Paper (three paper worlds)\nfamily: handmade 2D\naliases: [paper cutout, collage, torn paper, papercraft, construction paper, kids' picture book]\ntags: [2d, paper, collage, torn-edge, multiplane, character, hand-lettering, warm, playful]\nkind: visual-style\nroute: canvas-2d (CPU-backed canvas; torn polygons, shadows, tiled textures)\nreadiness: { research: seed-extended, rights: original-work, referenceImages: own-render, code: built, render: rendered-and-measured }\n---\n\n# Cut Paper (three paper worlds)\n\nA picture book made of torn paper. Every piece has a torn edge with its white paper core showing, a soft shadow that lifts it off the page, crayon strokes and grain. The story moves through three full-bleed worlds, each with its own wall colour:\n1. **A rainy garden.** Sky blue, a blue rain cloud, birds on a wire, a snail.\n2. **Underground.** Brown soil strata, a sleeping worm, a walking beetle, a buried button.\n3. **A sunny day.** Mint sky, a smiling sun, bunting, a bee and a butterfly.\n\nThe orange seed has a face and moods. It sleeps, wakes to the rain, concentrates while its root digs, and beams in the sun. The worlds are joined by **torn-hole match cuts**: the camera pushes or pulls until the seed sits exactly where it will be in the next world, then a hole rips open around it.\n\n**The one rule:** *everything is a paper cutout you could pick up.* Every shape has a torn edge, a white core rim, a drop shadow and texture. Nothing fades (no alpha on props): pieces pop on and off, tear, or slide.\n\n## Creative direction\n- **Audience:** families, early learners, friendly brands, nonprofits, social feeds that reward warmth.\n- **Purpose:** turn a process into a little story with a character the viewer roots for.\n- **Feeling:** cosy, handmade, gently funny, optimistic.\n- **Central visual idea:** *three worlds, one hero.* Each beat is a different paper world (scene = wall colour). The hero is the bridge between them, so the cuts feel like page turns that tear through the book.\n- **How the parts work together:**\n - *Composition:* full-bleed worlds; the hero is always on the centre line and is the transition anchor.\n - *Colour:* one dominant wall per world, saturated props, and the orange `#ec7a4f` reserved for the hero alone.\n - *Type:* hand lettering (Caveat) on torn paper tags with washi tape, never bare type.\n - *Motion:* on twos with a tiny boil on living pieces, pops with overshoot, and a multiplane camera.\n - *Sound:* ukulele and glockenspiel lullaby, plus every paper action audible (slap, rip, scratch).\n\n## Fit\n- **Best for:** children's science, onboarding with a mascot, NGO stories, food and craft brands, seasonal social content, \"how it grows/works\" explainers.\n- **Avoid when:** the subject needs precision (data, technical diagrams), the tone must be serious, or the brand is sleek and digital.\n- **Cost:** low-medium. Canvas 2D on the CPU raster path is about 0.2 s per pose with 3 workers: 306 poses in about 70 s. **Use `meta.cpuCanvas: true`.** The default emulated-GPU canvas was about 40× slower on shadow- and clip-heavy frames.\n\n## Visual fingerprint\n| Element | Rule |\n|---|---|\n| Cutout | Resample the outline every 5 px. Offset each sample along its normal by `amp·(0.7·noise(s/34) + 0.45·noise(s/8)) + fibre jitter`, with amp 2.4 px (3 px for big strips, 2 px for small). |\n| White core rim | A second torn outline +2.8 px outward (own noise, amp ×1.25) in paper `#fbf6ea`, drawn first. It carries the shadow. |\n| Shadow | `rgba(40,22,10, 0.26 + 0.06·lift)`, blur `8 + 9·lift`, offset `(2 + 2·lift, 4 + 5·lift)`. Lift ranges from 0.3 (tape) and 0.6 (critters) to 1.0 (ground) and 1.4 (hero). |\n| Texture | Three 512 px tiles at a per-piece offset: dark crayon strokes (16 %), light crayon strokes (20 %), and speckle + fibre grain. Then a top-light/bottom-dark gradient (±10-12 %). |\n| Patterns | Dots (clouds, flags, butterfly), stripes (bee, tape), gingham (flags), strata flecks (soil). At least one pattern per frame. |\n| Strips | Roots and stems are torn strips along a polyline, tapering `w0 → w1`. Edge noise is keyed to arc length, so a growing strip never re-tears its edge. |\n| Hero | A bean (ellipse with a hilum dent) 100 × 70 units scaled per world (rx 80 / 120 / 80), with a cream hilum, reserved orange, lift 1.4. Face moods: `sleep` (arc eyes + z's), `wow` (big eyes, O mouth), `focus` (slanted brows, flat mouth), `joy` (∩ eyes, wide smile, cheeks). |\n| Background life | At least 3 per world. W1: birds on a wire, a snail, a peeking worm, rain. W2: a sleeping worm with z's, a walking beetle, a button, pebbles, other plants' roots. W3: a bee, a butterfly, bunting, a snail, a smiling sun. |\n\n### Palette\nInk `#2a1d18` · paper `#fbf6ea` · cream `#f3ead6` · tape `#eadcae` · navy `#26315f` · wood `#c08048` · mustard `#d9a441` · yellow `#f6cf55` · teal `#3f9f9a` · mint `#a9d9c6` · pink `#f3a3bf` · sky `#cfe2ee` · blue `#4c6fb5` · green `#5aa05a` · leaf `#7cc06a` · grass `#6fb35a` · stone `#b9b2a6` · soil `#a86a3a #8a5530 #6e4226 #553220` · worm `#e98fa0` · cheek `#f59a86` · **hero `#ec7a4f` (the seed only)**. Walls: W1 sky, W2 soil, W3 mint.\n\n### Typography (exact)\n| Role | Family / weight | Size | Box | Position | Enter → settle |\n|---|---|---|---|---|---|\n| Day tag (\"Day 1/3/8\") | Caveat 700 | 76 px | torn paper tag; padding 0.45 em × 0.28 em; washi tape 1.3 em × 0.42 em at −3.4° with diagonal mustard stripes | centre (210, 230), −2.9° | `easeOutBack` pop (overshoot 2.2) over 0.3 s; boils ±0.2°; the W3 tag pops out (ease-in 0.2 s) just before the title |\n| Caption strip | Caveat 700 | 64 px | torn strip, no tape | centre (540, 1700), +0.7° | pop 0.25 s, then a hand write-on wipe left → right over 0.6 s (on twos), with a pencil scratch sound |\n| End title | Caveat 700 | 118 px, line height 1.02 | big torn tag + tape | centre (520, 330), −2° | pop 0.4 s at 7.8 s; holds 2.4 s, overlapping the sun like a collage |\n| Note | Caveat 400 | 56 px | torn strip | centre (540, 1700) | replaces the caption (old strip pops out over 0.18 s), write-on 0.5 s |\n\nCopy limits: caption ≤ 26 characters at 64 px (one line, ≤ 900 px wide); Day tag ≤ 8 characters; title 2 lines of ≤ 12 characters at 118 px.\n\n## Temporal fingerprint\n| Element | Rule |\n|---|---|\n| Grid | 100 BPM (0.6 s beats); worlds start at 0 s, 2.75 s and 5.45 s. |\n| Pose cadence | Twos. Living pieces (hero, critters, tags) boil ±1.2 px and ±0.4° per pose; set pieces are still. |\n| Camera (multiplane) | `screen = (p − focus)·s_d + target_d` with `s_d = 1 + (s − 1)·d`. Depths: wall 0.25, back 0.6, ground/life/hero 1, type in screen space. Idle drift +1.2 % per world (+2 % in W3). |\n| Match moves | Push (2.25-2.75 s, easeInOutCubic): W1 seed (540, 1340, rx 80 × swell 1.18) → (540, 700, rx 120). Pull (5.0-5.45 s): W2 seed (540, 700, rx 120) → (540, 1420, rx 80). |\n| Torn-hole cut | 0.5 s. `R = 26 + (Rmax − 26)·k^2.1` (Rmax 1600 / 1800). Hole radius × (1 + 0.11·noise + 0.04·fine noise) + 3.2 px fibres. White band 9 px (+4.5 px noise) between the hole and the old world. Inner shadow rgba(30,15,5,0.45) blur 26, +10 px down. The old world is frozen at the tear start; the new world is live. |\n| Pops | `easeOutBack(k, 2.2)` over 0.25-0.4 s; leaves 0.35 s; drinks swell the seed +6 % each (overshoot 2.5). |\n| Holds | Captions are readable ≥ 1.6 s; title 2.4 s; note 1.7 s. |\n\n## How the composition develops\n| Time | World | What happens |\n|---|---|---|\n| 0-2.25 s | W1 rainy garden | \"Day 1\" tag; the caption writes on. The seed sleeps (z's) until rain starts (0.6 s). \"!\" at 1.4 s; three blue drops sink to the seed and it swells with a gulp each time (1.5, 1.9, 2.3 s). A bird hops; the snail creeps. |\n| 2.25-3.25 s | push → tear | The camera pushes in on the seed (back layers lag: multiplane). A hole rips open around it and world 2 is already there, with the seed in the same place. |\n| 3.25-5.0 s | W2 underground | \"Day 3\". The seed concentrates; crack at 3.45 s; a cream root strip digs down (3.55-5.0 s) and sprouts two rootlets. The worm snores; the beetle walks across. |\n| 5.0-5.95 s | pull → tear | The camera pulls back and reveals sky and clouds; the second tear opens on the seed into world 3. |\n| 5.95-10.2 s | W3 sunny day | \"Day 8\". The shoot rises hooked, breaks the surface (6.45 s), straightens, and two leaves pop (7.0, 7.25 s). The bee loops, the butterfly flutters, the bunting sways. Title tag at 7.8 s; note at 8.5 s; hold. |\n\n## Sound fingerprint\nD major, 100 BPM handmade lullaby: Karplus-Strong ukulele strums (14 ms spread, down/up), FM glockenspiel, upright bass, brushes and a shaker.\n\n| World | Harmony and arrangement |\n|---|---|\n| W1 | Dmaj7 ↔ Bm7, sparse, plus a rain bed |\n| W2 | Em7 → A7 with a walking bass and brushes |\n| W3 | D - G - A - D with a glock melody; a glock arpeggio and a soft kick on the title |\n\nSound effects:\n- **Paper:** each tag/strip pop is a rustle plus a low paper flap; each tear is a 0.5 s rising band-passed noise with crackle; each write-on is a pencil scratch.\n- **Life:** rain drops, a gulp per drink, bird chirps, snores (seed, worm), beetle footsteps, a bee buzz panned with its flight, pops and rustles for the leaves.\n\nMusic ducks −3 dB under the tears. Mix −15.4 LUFS, −1.3 dBTP.\n\n## Reusable prompt\n> Create a {10}-second {1080×1920} cut-paper video about {subject}. Build {3} full-bleed paper worlds, one per beat, each with its own wall colour, a ground, and at least three bits of background life. Every shape is a torn cutout: noisy torn edge, a white paper-core rim, a soft drop shadow, crayon strokes and paper grain, with patterns (dots, stripes, gingham). The hero is a simple shape with a face and moods, in a colour reserved only for it. Animate on twos with a tiny boil on living pieces; pop things in with overshoot; grow roots and stems as torn paper strips. Join the worlds with match cuts: push or pull a multiplane camera until the hero sits where it will be in the next world, then tear a hole around it to reveal that world. All text is hand lettering on torn paper tags with washi tape; captions write on. Score: ukulele + glockenspiel + upright bass + brushes; every paper action makes a paper sound. Avoid: alpha fades, bare type, objects floating on blank paper, blending two wall colours.\n\n## Adaptation guidance\n| Change | Safe? | Notes |\n|---|---|---|\n| Subject / hero | ✅ | Keep the hero simple (bean, star, mug, drop) with a face; reserve one colour for it. |\n| Number of worlds | ✅ | 2-5. Each needs its own wall colour; each cut needs a hero position/size match (`SEEDPOS`). |\n| Palette | ✅ | Keep warm, saturated paper colours on cream; keep the white core rim and warm shadows. |\n| Copy | ✅ | Respect the limits above; any hand font with a real bold works (Caveat, Patrick Hand, Gochi Hand). |\n| Transition | ⚠️ | A torn hole is the signature. A paper slide or flip is acceptable; never a crossfade. |\n| 16:9 | ✅ | Put the hero at the centre; side-by-side worlds also work. |\n| **Essential** | , | Torn edge + white core + shadow + texture on every piece; full-bleed worlds; a hero with a face; hand lettering on paper; on twos; audible paper. |\n\n## Accessibility\nAll text is ink `#2a1d18` on paper `#fbf6ea` (about 15:1), always on a tag and never over busy texture. Captions restate each beat. There is no flashing; transitions are reveals. Motion is gentle (boil ≤ 1.2 px). Sound effects are informative but never startling (tear peaks are ducked under the music bus).\n\n## Provenance\nBuilt from the Animate seed `cut-paper` (cth9191/animate @ 7e5eb56feb2dd573f890e1b7b34748af43d58263, MIT): the medium description (torn edge, shadow, grain, crayon, patterns, full-bleed worlds, a reserved hero colour, hand-lettered tags, the torn-hole window, background life). The seed was read as source material only; nothing was installed or executed. All code here (torn-edge generator, strips, tile textures, characters, camera, transitions, score) is original to this library (2026-10-07). Font: Caveat (SIL OFL) via Fontsource. No external images or samples.", "review": { "technical": { "state": "Supplied checks passed", "scope": "Source handoff records complete decode, stream dimensions and audio measurements. Browser playback is checked separately.", "artifactSha256": "f6674973a61fdc6a6830155254857b5c828c17c8bbb58d684d331874d4e7ec7c" }, "creative": { "state": "Not independently accepted", "scope": "not independently established", "artifactSha256": "f6674973a61fdc6a6830155254857b5c828c17c8bbb58d684d331874d4e7ec7c" }, "listening": { "state": "Not verified", "scope": "No perceptual listening pass is established by this library import.", "artifactSha256": "f6674973a61fdc6a6830155254857b5c828c17c8bbb58d684d331874d4e7ec7c" }, "reproduction": { "state": "Not tested", "scope": "Source is supplied. Cross-machine cold-start reproduction has not been established.", "artifactSha256": "f6674973a61fdc6a6830155254857b5c828c17c8bbb58d684d331874d4e7ec7c" } }, "detailUrl": "https://library.jkylehobson.chatgpt.site/video-library/#family=cut-paper&example=claude-cloud", "processUrl": "/video-library/process.html?family=cut-paper&example=claude-cloud", "downloads": { "prompt": { "available": true, "url": "/video-library/prompts/cut-paper--claude-cloud.txt", "sha256": "8929aaf0b1d05fcecdc81e04719772277c20ea903134bc36147add3a71b6afdf", "bytes": 2015, "label": "Reusable, example-specific instructions" }, "video": { "name": "cut-paper--claude-cloud.mp4", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/cut-paper--claude-cloud.mp4", "bytes": 14915653, "sha256": "f6674973a61fdc6a6830155254857b5c828c17c8bbb58d684d331874d4e7ec7c", "available": true, "label": "14.2 MB" }, "source": { "name": "cut-paper--claude-cloud--source.zip", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/cut-paper--claude-cloud--source.zip", "bytes": 21673863, "sha256": "fa7a63c034731d2abe4569b73dd189f3d609f11abf295fe4ff6484752875ffec", "available": true, "label": "20.7 MB", "contents": [ "editable source", "variant guidance", "source assets", "audio inputs", "dependency declarations", "file manifest" ], "includedFiles": 77, "includedFilePaths": [ "CASE_STUDY.md", "RUN.md", "SKILL.md", "STYLE.md", "THIRD-PARTY-NOTICES/animate-MIT.txt", "assets/components/critters.png", "assets/components/growth-pieces.png", "assets/components/seed-moods.png", "assets/components/sky-pieces.png", "assets/components/torn-hole.png", "assets/components/torn-tag.png", "assets/layers/t2.10/01_wall.png", "assets/layers/t2.10/02_back.png", "assets/layers/t2.10/03_ground.png", "assets/layers/t2.10/04_life.png", "assets/layers/t2.10/05_hero.png", "assets/layers/t2.10/06_type.png", "assets/layers/t4.40/01_wall.png", "assets/layers/t4.40/02_back.png", "assets/layers/t4.40/03_ground.png", "assets/layers/t4.40/04_life.png", "assets/layers/t4.40/05_hero.png", "assets/layers/t4.40/06_type.png", "assets/layers/t9.60/01_wall.png", "assets/layers/t9.60/02_back.png", "assets/layers/t9.60/03_ground.png", "assets/layers/t9.60/04_life.png", "assets/layers/t9.60/05_hero.png", "assets/layers/t9.60/06_type.png", "assets/paths/rootW2.json", "assets/paths/rootW2.svg", "assets/paths/rootletA.json", "assets/paths/rootletA.svg", "assets/paths/rootletB.json", "assets/paths/rootletB.svg", "assets/paths/shootW3.json", "assets/paths/shootW3.svg", "assets/textures/crayon-dark-tile.png", "assets/textures/crayon-light-tile.png", "assets/textures/palette-swatches.png", "assets/textures/paper-grain-tile.png", "audio/cues.json", "audio/mix.flac", "audio/stems/drums.flac", "audio/stems/music.flac", "audio/stems/sfx.flac", "engine/audio.mjs", "engine/audio/dsp.js", "engine/audio/instruments.js", "engine/audio/sfx.js", "engine/browser.mjs", "engine/export.mjs", "engine/finish.mjs", "engine/lib/draw.js", "engine/lib/util.js", "engine/page.html", "engine/render.mjs", "engine/runtime.js", "engine/server.mjs", "film/FILM_DELIVERED_SEPARATELY.txt", "film/contact_sheet.jpg", "film/spectrogram.png", "film/stills/01_0.90s.jpg", "film/stills/02_2.10s.jpg", "film/stills/03_2.90s.jpg", "film/stills/04_4.40s.jpg", "film/stills/05_5.60s.jpg", "film/stills/06_7.40s.jpg", "film/stills/07_9.60s.jpg", "overview/encoded-contact-sheet.jpg", "package.json", "qa.json", "spec.json", "styles/cut-paper/scene.js", "styles/cut-paper/score.js", "styles/cut-paper/timeline.js", "BUNDLE-GUIDE.md" ], "externalPrerequisites": { "runtime": [ "Node.js", "Chromium or Chrome", "FFmpeg and ffprobe" ], "packageDependencies": { "three": "0.170.0", "@fontsource/fraunces": "^5.1.0", "@fontsource/dm-sans": "^5.1.0", "@fontsource/inter": "^5.1.0", "@fontsource/space-grotesk": "^5.1.0", "@fontsource/ibm-plex-mono": "^5.1.0", "@fontsource/jetbrains-mono": "^5.1.0", "@fontsource/playfair-display": "^5.1.0", "@fontsource/bebas-neue": "^5.1.0", "@fontsource/archivo-black": "^5.1.0", "@fontsource/caveat": "^5.1.0", "@fontsource/press-start-2p": "^5.1.0", "@fontsource/instrument-serif": "^5.1.0", "@fontsource/syne": "^5.1.0", "@fontsource/permanent-marker": "^5.1.0", "@fontsource/vt323": "^5.1.0", "@fontsource/dm-serif-display": "^5.1.0", "@fontsource/anton": "^5.1.0", "@fontsource/nunito": "^5.1.0", "@fontsource/bangers": "^5.1.0", "@fontsource/space-mono": "^5.1.0", "playwright": "1.56.1" }, "lockfileIncluded": false, "coldStart": false }, "license": { "summary": "User-directed publication of supplied authored source; preserve listed third-party notices; no new license granted here.", "includedNoticePaths": [ "THIRD-PARTY-NOTICES/animate-MIT.txt" ], "newLicenseGranted": false } }, "bundle": { "name": "cut-paper--claude-cloud--full.zip", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/cut-paper--claude-cloud--full.zip", "bytes": 36667703, "sha256": "1c74f003380154d1fd523f572920af57926a34eb4d4b7ac3891ad49c812f8428", "available": true, "label": "35.0 MB", "contents": [ "selected master", "editable source", "variant guidance", "source assets", "audio inputs", "dependency declarations", "file manifest", "designed cover", "starter prompt" ], "includedFiles": 80, "includedFilePaths": [ "CASE_STUDY.md", "RUN.md", "SKILL.md", "STYLE.md", "THIRD-PARTY-NOTICES/animate-MIT.txt", "assets/components/critters.png", "assets/components/growth-pieces.png", "assets/components/seed-moods.png", "assets/components/sky-pieces.png", "assets/components/torn-hole.png", "assets/components/torn-tag.png", "assets/layers/t2.10/01_wall.png", "assets/layers/t2.10/02_back.png", "assets/layers/t2.10/03_ground.png", "assets/layers/t2.10/04_life.png", "assets/layers/t2.10/05_hero.png", "assets/layers/t2.10/06_type.png", "assets/layers/t4.40/01_wall.png", "assets/layers/t4.40/02_back.png", "assets/layers/t4.40/03_ground.png", "assets/layers/t4.40/04_life.png", "assets/layers/t4.40/05_hero.png", "assets/layers/t4.40/06_type.png", "assets/layers/t9.60/01_wall.png", "assets/layers/t9.60/02_back.png", "assets/layers/t9.60/03_ground.png", "assets/layers/t9.60/04_life.png", "assets/layers/t9.60/05_hero.png", "assets/layers/t9.60/06_type.png", "assets/paths/rootW2.json", "assets/paths/rootW2.svg", "assets/paths/rootletA.json", "assets/paths/rootletA.svg", "assets/paths/rootletB.json", "assets/paths/rootletB.svg", "assets/paths/shootW3.json", "assets/paths/shootW3.svg", "assets/textures/crayon-dark-tile.png", "assets/textures/crayon-light-tile.png", "assets/textures/palette-swatches.png", "assets/textures/paper-grain-tile.png", "audio/cues.json", "audio/mix.flac", "audio/stems/drums.flac", "audio/stems/music.flac", "audio/stems/sfx.flac", "display/cover.webp", "engine/audio.mjs", "engine/audio/dsp.js", "engine/audio/instruments.js", "engine/audio/sfx.js", "engine/browser.mjs", "engine/export.mjs", "engine/finish.mjs", "engine/lib/draw.js", "engine/lib/util.js", "engine/page.html", "engine/render.mjs", "engine/runtime.js", "engine/server.mjs", "film/FILM_DELIVERED_SEPARATELY.txt", "film/contact_sheet.jpg", "film/cut-paper.mp4", "film/spectrogram.png", "film/stills/01_0.90s.jpg", "film/stills/02_2.10s.jpg", "film/stills/03_2.90s.jpg", "film/stills/04_4.40s.jpg", "film/stills/05_5.60s.jpg", "film/stills/06_7.40s.jpg", "film/stills/07_9.60s.jpg", "overview/encoded-contact-sheet.jpg", "package.json", "qa.json", "spec.json", "starter-prompt.txt", "styles/cut-paper/scene.js", "styles/cut-paper/score.js", "styles/cut-paper/timeline.js", "BUNDLE-GUIDE.md" ], "externalPrerequisites": { "runtime": [ "Node.js", "Chromium or Chrome", "FFmpeg and ffprobe" ], "packageDependencies": { "three": "0.170.0", "@fontsource/fraunces": "^5.1.0", "@fontsource/dm-sans": "^5.1.0", "@fontsource/inter": "^5.1.0", "@fontsource/space-grotesk": "^5.1.0", "@fontsource/ibm-plex-mono": "^5.1.0", "@fontsource/jetbrains-mono": "^5.1.0", "@fontsource/playfair-display": "^5.1.0", "@fontsource/bebas-neue": "^5.1.0", "@fontsource/archivo-black": "^5.1.0", "@fontsource/caveat": "^5.1.0", "@fontsource/press-start-2p": "^5.1.0", "@fontsource/instrument-serif": "^5.1.0", "@fontsource/syne": "^5.1.0", "@fontsource/permanent-marker": "^5.1.0", "@fontsource/vt323": "^5.1.0", "@fontsource/dm-serif-display": "^5.1.0", "@fontsource/anton": "^5.1.0", "@fontsource/nunito": "^5.1.0", "@fontsource/bangers": "^5.1.0", "@fontsource/space-mono": "^5.1.0", "playwright": "1.56.1" }, "lockfileIncluded": false, "coldStart": false }, "license": { "summary": "User-directed publication of supplied authored source; preserve listed third-party notices; no new license granted here.", "includedNoticePaths": [ "THIRD-PARTY-NOTICES/animate-MIT.txt" ], "newLicenseGranted": false } } }, "cadenceNote": "Encoded fps describes the file. Scene evaluation and held actor poses depend on this source recipe.", "starterPrompt": "Create a {10}-second {1080×1920} cut-paper video about {subject}. Build {3} full-bleed paper worlds, one per beat, each with its own wall colour, a ground, and at least three bits of background life. Every shape is a torn cutout: noisy torn edge, a white paper-core rim, a soft drop shadow, crayon strokes and paper grain, with patterns (dots, stripes, gingham). The hero is a simple shape with a face and moods, in a colour reserved only for it. Animate on twos with a tiny boil on living pieces; pop things in with overshoot; grow roots and stems as torn paper strips. Join the worlds with match cuts: push or pull a multiplane camera until the hero sits where it will be in the next world, then tear a hole around it to reveal that world. All text is hand lettering on torn paper tags with washi tape; captions write on. Score: ukulele + glockenspiel + upright bass + brushes; every paper action makes a paper sound. Avoid: alpha fades, bare type, objects floating on blank paper, blending two wall colours.\n\nSelected example: Seed to Seedling\nFamily: cut-paper\nVariant: claude-cloud\nTypography: Caveat 700, Caveat 400\nProduction: canvas-2d\nExact reference master SHA-256: f6674973a61fdc6a6830155254857b5c828c17c8bbb58d684d331874d4e7ec7c\n\nRead the selected STYLE.md, SKILL.md and reproduction instructions before adapting. Keep the declared renderer and source closure; do not assume another family variant has interchangeable parameters. Preserve exact font or custom glyph sources, color roles, spatial continuity and readable text. Record encoded frame rate, scene evaluation and held poses separately. Review the changed render visually and listen to the encoded audio before claiming those checks passed. Existing approval applies only to its recorded artifact.\n\nSuccess check: the adapted story is clear; key type remains readable in motion; the source rebuilds with its declared inputs; all media and review records identify the exact output. State any untested reproduction, listening or rights limits.", "downloadNote": "Downloads match this selected example. The full bundle includes its source, original video, cover and starter prompt. Source packages include artwork, audio inputs and dependency declarations. Requires Node.js, Chromium or Chrome, FFmpeg and ffprobe. Follow the included run guide for package installation and reproduction limits.", "model": "Opus 5.5", "reasoningEffort": "Extra" } ], "relatedMethodIds": [ "cut-paper" ] }, { "id": "data-journalism", "slug": "data-journalism", "title": "Data Journalism", "premise": "Let a chart carry the story. Editorial type and annotations connect each visual change to an interpretable quantity.", "summary": "Let a chart carry the story. Editorial type and annotations connect each visual change to an interpretable quantity.", "category": "Information design", "defaultExampleId": "claude-cloud", "facets": { "material": [ "2d", "chart", "annotation", "editorial", "serif-headline", "data", "explainer", "calm" ], "producer": [ "Claude Cloud" ], "format": [ "Portrait" ], "motion": [], "useCase": [] }, "examples": [ { "id": "claude-cloud", "title": "Seed to Seedling", "producer": "Claude Cloud", "producerEvidence": "The displayed model and reasoning label identify this production lane. Exact runtime model ID and per-film cost are not established by the source packet.", "relationship": "Original family example", "format": "Portrait", "productionMethod": "canvas-2d", "master": { "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/data-journalism--claude-cloud.mp4", "sha256": "dd9a773cbe3441da5cef5b61600cb3469dd96c15d8842659cd1171fa9748077a", "bytes": 2102988, "mimeType": "video/mp4", "width": 1080, "height": 1920, "duration": 10.0, "encodedFps": 60 }, "poster": { "url": "/video-library/media/data-journalism--claude-cloud/cover.webp", "sha256": "0ca6d6048f4e23572a49b6eb00a2dec951e2531dce9095f8f0c120ac1b61ec4a", "sourceMasterSha256": "dd9a773cbe3441da5cef5b61600cb3469dd96c15d8842659cd1171fa9748077a", "timeSeconds": 8.5, "rationale": "Late story beat selected to show the developed subject and visual system; extracted from this exact master." }, "previewVideo": { "url": "/video-library/media/data-journalism--claude-cloud/preview.mp4", "sha256": "70ac9d908e82274aced5364ab1da3b364dca380e32c44bbc110bbce24541085d", "sourceMasterSha256": "dd9a773cbe3441da5cef5b61600cb3469dd96c15d8842659cd1171fa9748077a", "width": 540, "height": 960, "label": "Playback preview · 540 px wide · full master in Download finished video" }, "gallery": [ { "id": "overview", "role": "encoded-contact-sheet", "label": "Scenes from the finished render · not a planning storyboard", "url": "/video-library/media/data-journalism--claude-cloud/overview.webp", "sourceMasterSha256": "dd9a773cbe3441da5cef5b61600cb3469dd96c15d8842659cd1171fa9748077a" }, { "id": "scene-1", "role": "encoded-frame", "label": "Finished-film frame · 2 seconds", "url": "/video-library/media/data-journalism--claude-cloud/scene-1.webp", "sourceMasterSha256": "dd9a773cbe3441da5cef5b61600cb3469dd96c15d8842659cd1171fa9748077a", "timeSeconds": 2.0 }, { "id": "scene-2", "role": "encoded-frame", "label": "Finished-film frame · 5 seconds", "url": "/video-library/media/data-journalism--claude-cloud/scene-2.webp", "sourceMasterSha256": "dd9a773cbe3441da5cef5b61600cb3469dd96c15d8842659cd1171fa9748077a", "timeSeconds": 5.0 }, { "id": "scene-3", "role": "encoded-frame", "label": "Finished-film frame · 8 seconds", "url": "/video-library/media/data-journalism--claude-cloud/scene-3.webp", "sourceMasterSha256": "dd9a773cbe3441da5cef5b61600cb3469dd96c15d8842659cd1171fa9748077a", "timeSeconds": 8.0 } ], "typography": [ "Inter 800", "DM Serif Display 400", "Inter 400", "Inter 600", "DM Serif Display italic", "Inter 800 24 / Inter 400 22" ], "palette": { "paper": "#f6f2ea", "ink": "#1f1d1a", "body": "#4a4640", "grey": "#8a857c", "grid": "#ddd6ca", "soil": "#ece2d2", "soilLine": "#7a6a55", "root": "#c0532b", "rootFill": "rgba(192,83,43,0.12)", "shoot": "#2f8a4e", "shootFill": "rgba(47,138,78,0.12)", "water": "#2c6fae", "seed": "#c9a46a", "seedDark": "#8a6a3a", "hi": "#f7d977", "white": "#ffffff" }, "usageGuidance": "Change the subject, copy and timing for your audience. Retain the selected example’s visual rules and recheck the entire reading interval after changes.", "styleRules": "---\nid: data-journalism\nname: Data Journalism (the chart is the plant)\nfamily: information design\naliases: [explanatory chart, news graphic, scrollytelling video, annotated chart, editorial data viz]\ntags: [2d, chart, annotation, editorial, serif-headline, data, explainer, calm]\nkind: visual-style\nroute: canvas-2d (CPU-backed canvas)\nreadiness: { research: authored, rights: original-work, referenceImages: own-render, code: built, render: rendered-and-measured }\n---\n\n# Data Journalism (the chart is the plant)\n\nA news-graphics explainer in which the chart itself is the subject.\n- **The chart:** the zero line is the soil surface, so root depth plots downward and shoot height plots upward.\n- **The specimen:** a small plant rides a \"Day n.n\" scrubber along the time axis, and its root tip and shoot tip draw the two data traces as it goes.\n- **The editorial wrapper:** a kicker, a serif headline, a dek, a legend, three numbered annotation callouts (one per story beat), a magnifier inset for the seed drinking, a stat row that counts up with the data, a highlighted takeaway, and a source note that says plainly the values are illustrative.\n\n**The one rule:** *every moving thing is data.* Motion comes from the scrubber advancing through time and the traces it draws; annotations appear only to explain what the data just did. Nothing decorative moves while the viewer reads.\n\n## Creative direction\n- **Audience:** curious adults, students and teachers, newsroom and science-communication audiences, LinkedIn/Instagram explainers.\n- **Purpose:** make a process *measurable*: when things happen, in what order, and by how much.\n- **Feeling:** calm, credible, quietly delightful (the \"aha\" that the chart is the plant).\n- **Central visual idea:** *the chart is the plant.* A diverging time chart whose zero line is the ground line. A specimen walks along the x-axis, so the viewer sees the plant and its data history at once.\n- **How the parts work together:**\n - *Composition* follows the news-graphic stack: kicker → headline → dek → legend → chart → stat row → footer.\n - *Colour* encodes meaning only: water blue (step 1), root terracotta, shoot green, highlighter yellow for the takeaway.\n - *Type* pairs a high-contrast serif (DM Serif Display) for the headline and numbers with a neutral sans (Inter) for labels and annotations.\n - *Motion* is a uniform scrubber within each step; callouts fade and rise; the other series recedes for focus.\n - *Sound* marks data events: a tick per day crossed, a pluck per callout, a chime when the shoot crosses 0 mm.\n\n## Fit\n- **Best for:** any process with a timeline and two opposing quantities (income vs. spend, inflow vs. outflow, roots vs. shoots), science explainers, report trailers, \"how long does X take\" stories.\n- **Avoid when:** there is no real or clearly labelled data, when emotion should lead, or for youth/playful brands (pair with cut-paper or flat-vector instead).\n- **Data ethics:** if the values are not measured, say so on screen. This film uses illustrative values (see `data.csv`), labelled in the kicker and the footer.\n- **Cost:** very low. 600 frames render in about 13 s (3 workers, `cpuCanvas`).\n\n## Visual fingerprint\n| Element | Rule |\n|---|---|\n| Stack | Kicker y 150 · headline baseline 252 · dek 318/364 · legend 478 · scrubber gutter 510-552 · chart 560-1420 · day labels 1464 · axis title 1512 · stat rule 1560 · stats 1586-1730 · footer 1808/1846. Left margin 86-90 px. |\n| Chart | x: days 0-8 over x 190-950 (95 px/day). y: soil surface at y 900; 4.4 px/mm; +70 to −115 mm. Soil band `#ece2d2` below zero; dashed gridlines at +50/−50/−100 mm; vertical day gridlines `#ddd6ca` 2 px. Zero line 4 px `#7a6a55`, labelled \"Soil surface\". |\n| Traces | 6 px round lines; the root from day 1, the shoot from day 3 (emergence, not day 0). Hollow dots (r 8, paper fill, 4 px stroke) at each whole day passed. 12 % area fill to the seed depth (−25 mm). Monotone cubic interpolation, so there is no overshoot between data points. |\n| Specimen | Drawn at the scrubber x: seed ellipse 17 × 12 px scaled by ∛(weight) (weight → volume → radius); root 6 px to the root tip, with two lateral rootlets after day 3.5; shoot 7 px to the shoot tip, hooked until the surface + 0.4 day; leaves from day 6.8. |\n| Scrubber | Dotted 2 px ink line; ink pill \"Day n.n\" (Inter 800 24, white) in the gutter above the chart, clamped inside the chart. |\n| Callouts | Numbered badge (r 24, step colour), title, body (max 3 lines), 2 px leader to a data point with a 6 px dot. They live in empty chart space and never cross a trace that is still drawing. |\n| Inset | Magnifier circle r 150 at (740, 1160) showing the seed at 4×. Dry wrinkles smooth out; water dots stream in. A leader runs from the specimen. |\n| Palette | Paper `#f6f2ea` · ink `#1f1d1a` · body `#4a4640` · grey `#8a857c` · grid `#ddd6ca` · soil `#ece2d2` · soil line `#7a6a55` · root `#c0532b` · shoot `#2f8a4e` · water `#2c6fae` · seed `#c9a46a`/`#8a6a3a` · highlighter `#f7d977`. |\n\n### Typography (exact)\n| Role | Family / weight | Size / leading | Colour | Position | Enter → settle |\n|---|---|---|---|---|---|\n| Kicker | Inter 800, tracking +3 px, caps | 24 | root `#c0532b` | (90, 150) | fade 0.3 s |\n| Headline | DM Serif Display 400 | 92 | ink | (86, 252) | fade + rise 24 px, 0.5 s easeOutCubic |\n| Dek | Inter 400 | 34 / 46 | body | (90, 318) | fade 0.4 s |\n| Legend, axis titles | Inter 600 | 26 | ink / grey | legend y 487 | fade 0.3 s |\n| Tick labels | Inter 600 | 24 | grey | right-aligned at x 174; days centred at y 1464 | stagger with the gridline draw |\n| Callout title | Inter 800 | 32 | ink | badge + 62 px | fade 0.3 s after the badge pops (easeOutBack 2, 0.25 s) |\n| Callout body | Inter 400 | 28 / 38 | body | wrap at callout width − 62 | fade + rise 14 px, 0.35 s |\n| Stat number | DM Serif Display 400, fixed-advance digits (0.58 em) | 88 | ink | baseline 1686, columns at x 90/400/710 | fade in, then counts live with the data |\n| Stat label | Inter 600 | 26 | body | baseline 1730 | , |\n| Takeaway | DM Serif Display italic | 60 | ink on a highlighter swipe | (210, 664) | fade 0.35 s; swipe draws 0.45 s under the first phrase |\n| Footer | Inter 800 24 / Inter 400 22 | , | ink / grey | (90, 1808 / 1846) | fade 0.4 s |\n\nCopy limits: headline ≤ 22 characters on one line at 92 px; callout title ≤ 24 characters; callout body ≤ 3 lines; stat values ≤ 6 characters.\n\n## Temporal fingerprint\n| Element | Rule |\n|---|---|\n| Grid | 120 BPM. Steps start at 1.4 s, 3.0 s and 5.5 s; summary at 8.0 s. |\n| Cadence | Ones (60 fps): digital motion should be smooth. |\n| Scrubber | Linear within a step: day 0→1 (1.6-2.9 s), 1→5 (3.1-5.3 s), 5→8 (5.6-7.8 s). Each step compresses time differently, which is stated as \"time-compressed\". |\n| Callouts | In at the step start (+0.1 s); out 0.25 s before the next step; ≥ 1.3 s fully readable. |\n| Focus | During step 3 the root trace recedes to 35 %; both return at full strength for the summary. |\n| Summary | Callouts collapse to numbered markers on the chart; the takeaway appears and is highlighted; the footer note arrives at 8.5 s; hold ≥ 1.5 s. |\n\n## How the composition develops\n| Time | Beat | What happens |\n|---|---|---|\n| 0-1.4 s | Set-up | Kicker, headline, dek; the axes and soil band draw left → right; legend. |\n| 1.4-3.0 s | ① Water wakes the seed | Callout 1; the magnifier opens on the seed; water streams in and the seed swells to ×1.9 weight; the scrubber reaches day 1; stat ×1.9. |\n| 3.0-5.5 s | ② A root reaches down | Callout 2 with a leader to the root trace; the root draws downward with day dots; \"Root length\" counts 0 → 40 mm. |\n| 5.5-8.0 s | ③ A shoot finds the light | Callout 3; the shoot trace rises and crosses 0 mm at day 5.4 (ring + chime); leaves open at 6.8; \"Shoot above ground\" counts to 60 mm; the root recedes for focus. |\n| 8.0-10.0 s | Summary | Markers ①②③ on the chart; \"Root first, shoot second.\" with a highlighter swipe; footer note; hold. |\n\n## Sound fingerprint\nA calm news-graphics bed: 120 BPM in A minor, resolving to C major on the takeaway. Instruments: FM electric piano 8ths, soft pad, round bass, and light hats with a soft kick from step 2.\n\nData sounds:\n- A click at each whole day the scrubber crosses (1400 Hz × 2^(day/12): the pitch climbs with time).\n- A kalimba pluck for each callout.\n- A lens whoosh with water bubbles in the inset.\n- A bell chime at the surface crossing and a pop when the leaves open.\n- A highlighter scribble, then a C-major kalimba arpeggio on the takeaway.\n\nMix −15.4 LUFS, −1.9 dBTP.\n\n## Reusable prompt\n> Create a {10}-second {1080×1920} news-graphics explainer about {process} where the chart itself is the subject. Use a diverging time chart whose zero line has physical meaning ({soil surface}); plot {quantity A} up and {quantity B} down. A specimen glyph rides a \"Day n.n\" scrubber along the x-axis and its tips draw the traces (monotone interpolation, hollow dots at whole units, 12 % area fills). Wrap it in editorial grammar: kicker, serif headline, sans dek, legend, three numbered callouts with leader lines (one per beat), a magnifier inset for the smallest event, a stat row whose numbers count with the data (tabular digits), a highlighted one-line takeaway, and a footer stating the data source or that values are illustrative. Colours encode meaning only. Sound marks data events (a tick per unit crossed, a pluck per callout, a chime at a threshold). Avoid: decorative motion, unlabelled or invented-looking precision, 3D charts, callouts crossing live traces.\n\n## Adaptation guidance\n| Change | Safe? | Notes |\n|---|---|---|\n| Data | ✅ | Replace `DATA` and `data.csv`; keep emergence days for the traces. Re-check `SURFACE_DAY`-style thresholds. |\n| Axis meaning | ✅ | The zero line must mean something physical or conceptual (break-even, sea level, the ground). |\n| Number of steps | ✅ | 2-4 callouts; each needs empty space in the chart for its whole duration. |\n| Palette | ✅ | Keep one colour per series and a neutral paper; avoid red/green-only distinctions for critical meaning (here the labels and position also separate them). |\n| Fonts | ✅ | Any high-contrast serif + neutral sans; the numbers need fixed-advance digits. |\n| 16:9 | ✅ | Put the chart left and the callouts/stat row in a right column. |\n| **Essential** | , | Data-driven motion only; an honest source note; annotation grammar; a scrubber with traces; numbers that count with the data. |\n\n## Accessibility\nBody text is `#4a4640` on `#f6f2ea` (about 8:1) and ink about 15:1. Series are distinguished by colour **and** position (above/below the soil line) **and** legend labels. Numbers are large (88 px). There is no flashing. Callouts stay up for ≥ 1.3 s. The footer states that the data is illustrative.\n\n## Provenance\nOriginal style authored for this library (2026-10-07); no Animate seed. Data: illustrative values modelled on typical common-bean germination at ~25 °C (`data.csv`), not measured, and labelled as such on screen. Fonts: DM Serif Display and Inter (SIL OFL) via Fontsource. All drawing and audio are procedural.", "review": { "technical": { "state": "Supplied checks passed", "scope": "Source handoff records complete decode, stream dimensions and audio measurements. Browser playback is checked separately.", "artifactSha256": "dd9a773cbe3441da5cef5b61600cb3469dd96c15d8842659cd1171fa9748077a" }, "creative": { "state": "Not independently accepted", "scope": "not independently established", "artifactSha256": "dd9a773cbe3441da5cef5b61600cb3469dd96c15d8842659cd1171fa9748077a" }, "listening": { "state": "Not verified", "scope": "No perceptual listening pass is established by this library import.", "artifactSha256": "dd9a773cbe3441da5cef5b61600cb3469dd96c15d8842659cd1171fa9748077a" }, "reproduction": { "state": "Not tested", "scope": "Source is supplied. Cross-machine cold-start reproduction has not been established.", "artifactSha256": "dd9a773cbe3441da5cef5b61600cb3469dd96c15d8842659cd1171fa9748077a" } }, "detailUrl": "https://library.jkylehobson.chatgpt.site/video-library/#family=data-journalism&example=claude-cloud", "processUrl": "/video-library/process.html?family=data-journalism&example=claude-cloud", "downloads": { "prompt": { "available": true, "url": "/video-library/prompts/data-journalism--claude-cloud.txt", "sha256": "13a681d04de45e88002ccac988b6dfc9a4ae92637d45ad2214636b8a65255a68", "bytes": 2067, "label": "Reusable, example-specific instructions" }, "video": { "name": "data-journalism--claude-cloud.mp4", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/data-journalism--claude-cloud.mp4", "bytes": 2102988, "sha256": "dd9a773cbe3441da5cef5b61600cb3469dd96c15d8842659cd1171fa9748077a", "available": true, "label": "2.0 MB" }, "source": { "name": "data-journalism--claude-cloud--source.zip", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/data-journalism--claude-cloud--source.zip", "bytes": 8316255, "sha256": "3278ac1e7e45b2f3f900a80fd8395ffb33c7805299bf493e6b9472361137fa0f", "available": true, "label": "7.9 MB", "contents": [ "editable source", "variant guidance", "source assets", "audio inputs", "dependency declarations", "file manifest" ], "includedFiles": 62, "includedFilePaths": [ "CASE_STUDY.md", "RUN.md", "SKILL.md", "STYLE.md", "assets/components/callout-kit.png", "assets/components/legend.png", "assets/components/specimens.png", "assets/components/stat-block.png", "assets/layers/t2.60/01_paper.png", "assets/layers/t2.60/02_grid.png", "assets/layers/t2.60/03_data.png", "assets/layers/t2.60/04_annotation.png", "assets/layers/t2.60/05_text.png", "assets/layers/t4.60/01_paper.png", "assets/layers/t4.60/02_grid.png", "assets/layers/t4.60/03_data.png", "assets/layers/t4.60/04_annotation.png", "assets/layers/t4.60/05_text.png", "assets/layers/t9.50/01_paper.png", "assets/layers/t9.50/02_grid.png", "assets/layers/t9.50/03_data.png", "assets/layers/t9.50/04_annotation.png", "assets/layers/t9.50/05_text.png", "assets/paths/rootTrace.json", "assets/paths/rootTrace.svg", "assets/paths/shootTrace.json", "assets/paths/shootTrace.svg", "audio/cues.json", "audio/mix.flac", "audio/stems/drums.flac", "audio/stems/music.flac", "audio/stems/sfx.flac", "engine/audio.mjs", "engine/audio/dsp.js", "engine/audio/instruments.js", "engine/audio/sfx.js", "engine/browser.mjs", "engine/export.mjs", "engine/finish.mjs", "engine/lib/draw.js", "engine/lib/util.js", "engine/page.html", "engine/render.mjs", "engine/runtime.js", "engine/server.mjs", "film/contact_sheet.jpg", "film/spectrogram.png", "film/stills/01_1.20s.jpg", "film/stills/02_2.60s.jpg", "film/stills/03_4.60s.jpg", "film/stills/04_6.20s.jpg", "film/stills/05_7.60s.jpg", "film/stills/06_9.50s.jpg", "overview/encoded-contact-sheet.jpg", "package.json", "qa.json", "spec.json", "styles/data-journalism/data.csv", "styles/data-journalism/scene.js", "styles/data-journalism/score.js", "styles/data-journalism/timeline.js", "BUNDLE-GUIDE.md" ], "externalPrerequisites": { "runtime": [ "Node.js", "Chromium or Chrome", "FFmpeg and ffprobe" ], "packageDependencies": { "three": "0.170.0", "@fontsource/fraunces": "^5.1.0", "@fontsource/dm-sans": "^5.1.0", "@fontsource/inter": "^5.1.0", "@fontsource/space-grotesk": "^5.1.0", "@fontsource/ibm-plex-mono": "^5.1.0", "@fontsource/jetbrains-mono": "^5.1.0", "@fontsource/playfair-display": "^5.1.0", "@fontsource/bebas-neue": "^5.1.0", "@fontsource/archivo-black": "^5.1.0", "@fontsource/caveat": "^5.1.0", "@fontsource/press-start-2p": "^5.1.0", "@fontsource/instrument-serif": "^5.1.0", "@fontsource/syne": "^5.1.0", "@fontsource/permanent-marker": "^5.1.0", "@fontsource/vt323": "^5.1.0", "@fontsource/dm-serif-display": "^5.1.0", "@fontsource/anton": "^5.1.0", "@fontsource/nunito": "^5.1.0", "@fontsource/bangers": "^5.1.0", "@fontsource/space-mono": "^5.1.0", "playwright": "1.56.1" }, "lockfileIncluded": false, "coldStart": false }, "license": { "summary": "User-directed publication of supplied authored source; preserve listed third-party notices; no new license granted here.", "includedNoticePaths": [], "newLicenseGranted": false } }, "bundle": { "name": "data-journalism--claude-cloud--full.zip", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/data-journalism--claude-cloud--full.zip", "bytes": 10452588, "sha256": "8f282dd45479648940c1586bf1ac2b2a04389278fa95713efeb2c04d86451a33", "available": true, "label": "10.0 MB", "contents": [ "selected master", "editable source", "variant guidance", "source assets", "audio inputs", "dependency declarations", "file manifest", "designed cover", "starter prompt" ], "includedFiles": 65, "includedFilePaths": [ "CASE_STUDY.md", "RUN.md", "SKILL.md", "STYLE.md", "assets/components/callout-kit.png", "assets/components/legend.png", "assets/components/specimens.png", "assets/components/stat-block.png", "assets/layers/t2.60/01_paper.png", "assets/layers/t2.60/02_grid.png", "assets/layers/t2.60/03_data.png", "assets/layers/t2.60/04_annotation.png", "assets/layers/t2.60/05_text.png", "assets/layers/t4.60/01_paper.png", "assets/layers/t4.60/02_grid.png", "assets/layers/t4.60/03_data.png", "assets/layers/t4.60/04_annotation.png", "assets/layers/t4.60/05_text.png", "assets/layers/t9.50/01_paper.png", "assets/layers/t9.50/02_grid.png", "assets/layers/t9.50/03_data.png", "assets/layers/t9.50/04_annotation.png", "assets/layers/t9.50/05_text.png", "assets/paths/rootTrace.json", "assets/paths/rootTrace.svg", "assets/paths/shootTrace.json", "assets/paths/shootTrace.svg", "audio/cues.json", "audio/mix.flac", "audio/stems/drums.flac", "audio/stems/music.flac", "audio/stems/sfx.flac", "display/cover.webp", "engine/audio.mjs", "engine/audio/dsp.js", "engine/audio/instruments.js", "engine/audio/sfx.js", "engine/browser.mjs", "engine/export.mjs", "engine/finish.mjs", "engine/lib/draw.js", "engine/lib/util.js", "engine/page.html", "engine/render.mjs", "engine/runtime.js", "engine/server.mjs", "film/contact_sheet.jpg", "film/data-journalism.mp4", "film/spectrogram.png", "film/stills/01_1.20s.jpg", "film/stills/02_2.60s.jpg", "film/stills/03_4.60s.jpg", "film/stills/04_6.20s.jpg", "film/stills/05_7.60s.jpg", "film/stills/06_9.50s.jpg", "overview/encoded-contact-sheet.jpg", "package.json", "qa.json", "spec.json", "starter-prompt.txt", "styles/data-journalism/data.csv", "styles/data-journalism/scene.js", "styles/data-journalism/score.js", "styles/data-journalism/timeline.js", "BUNDLE-GUIDE.md" ], "externalPrerequisites": { "runtime": [ "Node.js", "Chromium or Chrome", "FFmpeg and ffprobe" ], "packageDependencies": { "three": "0.170.0", "@fontsource/fraunces": "^5.1.0", "@fontsource/dm-sans": "^5.1.0", "@fontsource/inter": "^5.1.0", "@fontsource/space-grotesk": "^5.1.0", "@fontsource/ibm-plex-mono": "^5.1.0", "@fontsource/jetbrains-mono": "^5.1.0", "@fontsource/playfair-display": "^5.1.0", "@fontsource/bebas-neue": "^5.1.0", "@fontsource/archivo-black": "^5.1.0", "@fontsource/caveat": "^5.1.0", "@fontsource/press-start-2p": "^5.1.0", "@fontsource/instrument-serif": "^5.1.0", "@fontsource/syne": "^5.1.0", "@fontsource/permanent-marker": "^5.1.0", "@fontsource/vt323": "^5.1.0", "@fontsource/dm-serif-display": "^5.1.0", "@fontsource/anton": "^5.1.0", "@fontsource/nunito": "^5.1.0", "@fontsource/bangers": "^5.1.0", "@fontsource/space-mono": "^5.1.0", "playwright": "1.56.1" }, "lockfileIncluded": false, "coldStart": false }, "license": { "summary": "User-directed publication of supplied authored source; preserve listed third-party notices; no new license granted here.", "includedNoticePaths": [], "newLicenseGranted": false } } }, "cadenceNote": "Encoded fps describes the file. Scene evaluation and held actor poses depend on this source recipe.", "starterPrompt": "Create a {10}-second {1080×1920} news-graphics explainer about {process} where the chart itself is the subject. Use a diverging time chart whose zero line has physical meaning ({soil surface}); plot {quantity A} up and {quantity B} down. A specimen glyph rides a \"Day n.n\" scrubber along the x-axis and its tips draw the traces (monotone interpolation, hollow dots at whole units, 12 % area fills). Wrap it in editorial grammar: kicker, serif headline, sans dek, legend, three numbered callouts with leader lines (one per beat), a magnifier inset for the smallest event, a stat row whose numbers count with the data (tabular digits), a highlighted one-line takeaway, and a footer stating the data source or that values are illustrative. Colours encode meaning only. Sound marks data events (a tick per unit crossed, a pluck per callout, a chime at a threshold). Avoid: decorative motion, unlabelled or invented-looking precision, 3D charts, callouts crossing live traces.\n\nSelected example: Seed to Seedling\nFamily: data-journalism\nVariant: claude-cloud\nTypography: Inter 800, DM Serif Display 400, Inter 400, Inter 600, DM Serif Display italic, Inter 800 24 / Inter 400 22\nProduction: canvas-2d\nExact reference master SHA-256: dd9a773cbe3441da5cef5b61600cb3469dd96c15d8842659cd1171fa9748077a\n\nRead the selected STYLE.md, SKILL.md and reproduction instructions before adapting. Keep the declared renderer and source closure; do not assume another family variant has interchangeable parameters. Preserve exact font or custom glyph sources, color roles, spatial continuity and readable text. Record encoded frame rate, scene evaluation and held poses separately. Review the changed render visually and listen to the encoded audio before claiming those checks passed. Existing approval applies only to its recorded artifact.\n\nSuccess check: the adapted story is clear; key type remains readable in motion; the source rebuilds with its declared inputs; all media and review records identify the exact output. State any untested reproduction, listening or rights limits.", "downloadNote": "Downloads match this selected example. The full bundle includes its source, original video, cover and starter prompt. Source packages include artwork, audio inputs and dependency declarations. Requires Node.js, Chromium or Chrome, FFmpeg and ffprobe. Follow the included run guide for package installation and reproduction limits.", "model": "Opus 5.5", "reasoningEffort": "Extra" } ], "relatedMethodIds": [] }, { "id": "documentary-collage", "slug": "documentary-collage", "title": "Documentary Collage", "premise": "Photographs, notes and paper fragments assemble into an evidence board, with camera movement connecting the details.", "summary": "Photographs, notes and paper fragments assemble into an evidence board, with camera movement connecting the details.", "category": "Documentary / archival", "defaultExampleId": "claude-cloud", "facets": { "material": [ "2d", "photographic", "black-and-white", "archival", "ken-burns", "typewriter", "grease-pencil", "stamps", "tape", "film-grain", "evidence" ], "producer": [ "Claude Cloud", "Local Codex; related photographic direction" ], "format": [ "Portrait" ], "motion": [], "useCase": [] }, "examples": [ { "id": "claude-cloud", "title": "Seed to Seedling", "producer": "Claude Cloud", "producerEvidence": "The displayed model and reasoning label identify this production lane. Exact runtime model ID and per-film cost are not established by the source packet.", "relationship": "Original family example", "format": "Portrait", "productionMethod": "canvas-2d", "master": { "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/documentary-collage--claude-cloud.mp4", "sha256": "c6ab43a5b880274e14621205f61d4c05584fe6da865521399f5bde3263e6431c", "bytes": 14092546, "mimeType": "video/mp4", "width": 1080, "height": 1920, "duration": 11.4, "encodedFps": 60 }, "poster": { "url": "/video-library/media/documentary-collage--claude-cloud/cover.webp", "sha256": "16979cb4ab42dd071298750902bfce903d0913411c7d7e69b9776e675dd42fb1", "sourceMasterSha256": "c6ab43a5b880274e14621205f61d4c05584fe6da865521399f5bde3263e6431c", "timeSeconds": 9.69, "rationale": "Late story beat selected to show the developed subject and visual system; extracted from this exact master." }, "previewVideo": { "url": "/video-library/media/documentary-collage--claude-cloud/preview.mp4", "sha256": "b4c3a078451c19e9cc0643c230f7eac1d693e8c688ebfe7f71aaf9824ff29608", "sourceMasterSha256": "c6ab43a5b880274e14621205f61d4c05584fe6da865521399f5bde3263e6431c", "width": 540, "height": 960, "label": "Playback preview · 540 px wide · full master in Download finished video" }, "gallery": [ { "id": "overview", "role": "encoded-contact-sheet", "label": "Scenes from the finished render · not a planning storyboard", "url": "/video-library/media/documentary-collage--claude-cloud/overview.webp", "sourceMasterSha256": "c6ab43a5b880274e14621205f61d4c05584fe6da865521399f5bde3263e6431c" }, { "id": "scene-1", "role": "encoded-frame", "label": "Finished-film frame · 2.28 seconds", "url": "/video-library/media/documentary-collage--claude-cloud/scene-1.webp", "sourceMasterSha256": "c6ab43a5b880274e14621205f61d4c05584fe6da865521399f5bde3263e6431c", "timeSeconds": 2.28 }, { "id": "scene-2", "role": "encoded-frame", "label": "Finished-film frame · 5.7 seconds", "url": "/video-library/media/documentary-collage--claude-cloud/scene-2.webp", "sourceMasterSha256": "c6ab43a5b880274e14621205f61d4c05584fe6da865521399f5bde3263e6431c", "timeSeconds": 5.7 }, { "id": "scene-3", "role": "encoded-frame", "label": "Finished-film frame · 9.12 seconds", "url": "/video-library/media/documentary-collage--claude-cloud/scene-3.webp", "sourceMasterSha256": "c6ab43a5b880274e14621205f61d4c05584fe6da865521399f5bde3263e6431c", "timeSeconds": 9.12 } ], "typography": [ "Courier Prime 700 (line 1) / 400", "Courier Prime 700 header / 400 body", "Courier Prime 700/400", "Permanent Marker 400", "Courier Prime 700", "Playfair Display 900", "Courier Prime 400" ], "palette": { "desk": "#24211e", "print": "#efe9dc", "card": "#f3ecd9", "strip": "#ece4d0", "tag": "#f6f1e6", "film": "#17130f", "title": "#f2ead6", "ink": "#23201c", "inkSoft": "#5a544a", "pencil": "#c8322a", "stamp": "#3a4796", "tape": "rgba(226,214,180,0.82)", "rule": "rgba(110,150,200,0.55)", "header": "rgba(205,70,60,0.75)", "edge": "#e2d2a8", "toneDark": [ 24, 20, 17 ], "toneLight": [ 238, 229, 210 ] }, "usageGuidance": "Change the subject, copy and timing for your audience. Retain the selected example’s visual rules and recheck the entire reading interval after changes.", "styleRules": "---\nid: documentary-collage\nname: Documentary Collage (Seed to Seedling: an evidence board)\nfamily: documentary / archival\naliases: [evidence board, archival collage, ken burns, photo documentary, investigation board, scrapbook documentary]\ntags: [2d, photographic, black-and-white, archival, ken-burns, typewriter, grease-pencil, stamps, tape, film-grain, evidence]\nkind: visual-style\nroute: canvas-2d (CPU canvas; baked photographic plates and paper sprites moved under a keyframed world camera)\nreadiness: { research: research-handoff-candidate, rights: original-work, referenceImages: own-render, code: built, render: rendered-and-measured }\n---\n\n# Documentary Collage (Seed to Seedling: an evidence board)\n\nA documentary told through evidence on a desk. Black-and-white prints, a typed caption strip, an index card of field notes, a time-lapse contact strip and a title card land one by one on a dark desk under a warm lamp. A slow Ken Burns camera glides from item to item. Captions type on key by key, a red grease pencil circles what matters, paper tags carry handwritten notes, and rubber stamps date each stage.\n- **FIG. 1, day 0:** a dry pinto bean on a steel rule (10-24 mm), with the caption typed underneath and the species name underlined, as typists did instead of italics.\n- **Day 2:** a petri-dish print. The swollen seed's coat has split; it is circled in red and tagged \"coat splits\". An index card of field notes explains, and a stamp dates it DAY 2.\n- **Days 3-6:** a contact strip. Each frame \"fires\" with a shutter flash as the root lengthens; the best frame is boxed in red and tagged \"root\".\n- **FIG. 3, day 9:** the seedling print, its first leaves tagged, stamped DAY 9.\n- **Ending:** the camera pulls back to reveal the whole board as a title card slaps down: **FROM SEED TO SEEDLING**, *Nine days of one bean, in evidence*, with a source line stating that the images are reconstructions drawn in code.\n\n**The one rule:** *everything on screen is a physical document, and everything is accounted for.* Every image has a figure number, a date and a source. The camera only reads what is on the desk.\n\n## Creative direction\n- **Audience:** documentary, journalism and history audiences, museums and archives, investigative explainers, science communication with an evidence angle.\n- **Purpose:** build trust by showing the evidence and its provenance, then guide attention through it at a reading pace.\n- **Feeling:** quiet, serious, curious, tactile; a researcher's desk at night.\n- **Central visual idea:** *growth as a case file.* Germination is reconstructed as an archive of dated figures, and the camera is the investigator.\n- **How the parts work together:**\n - *Composition:* one item framed at a time, about 80-90 % of the frame width, with the neighbouring evidence visible at the edges so the board keeps growing.\n - *Colour:* warm black-and-white prints, cream papers, and only two inks for marking (red pencil, violet-blue stamp).\n - *Type:* typewriter for facts, marker for human judgement, a heavy serif only for the title.\n - *Motion:* slow eased camera glides and pushes; quick paper slaps; nothing bounces.\n - *Sound:* soft piano and strings under a close, intimate foley layer.\n\n## Fit\n- **Best for:** history and archival stories, investigations and timelines, \"how we know\" science, case studies, founder and product origin stories with real artefacts, and museum and heritage content.\n- **Avoid when:** you have no real evidence and cannot label reconstructions honestly, or the brand is bright and playful. Also avoid fast product promos, or any subject where a fake archive could mislead.\n- **Cost:** plates bake at setup in about 6 s per worker; 684 frames render in about 1-2 minutes with 3 workers.\n\n## Visual fingerprint\n| Element | Rule |\n|---|---|\n| Desk | Tileable charcoal `#24211e` (512 px fBm tile) moving with the camera; a warm screen-space lamp pool falls to near-black at the edges; overlay film grain at 5 %, changing every 2 frames. |\n| Photographs | Black-and-white, toned warm. Pipeline: grey painting, then vignette (1 − 0.38·v²), contrast 1.2, grain ±0.045 and a gentle S-curve, mapped from `[24,20,17]` to `[238,229,210]`. Prints have 22 px borders (58 px at the bottom) in `#efe9dc`. |\n| Papers | Caption strip `#ece4d0`; index card `#f3ecd9` with a red header rule at 62 px and blue rules every 40 px from 102 px; title card `#f2ead6` with a 2 px inner frame; torn note tags `#f6f1e6`. All have speckle and age darkening at the edges. |\n| Contact strip | Film base `#17130f`, sprocket holes cut through (the desk shows), amber edge printing `#e2d2a8` (DAY 3 … DAY 6, 14A … 17A), four 280 × 200 frames. |\n| Marks | Red grease pencil `#c8322a`: 7-8 px round strokes plus a broken, lighter wax pass, revealed along the path. Rubber stamps in `#3a4796`: a double rounded border, distressed with noise, drawn with multiply. Masking tape: translucent `rgba(226,214,180,0.82)` with torn ends. |\n| Shadows | Pre-blurred (14 px) shadow sprites at 60 % opacity; offset 26 px while a sheet is in the air, 7 px when it has landed. |\n| Layout | Board positions (world px) are in `ITEMS`. Items tilt between −4° and +2.5°. Later items overlap earlier ones; the title card overlaps everything. |\n\n### Typography (exact)\n| Role | Family / weight | Size (world px) | Details | Enter |\n|---|---|---|---|---|\n| Typed captions | Courier Prime 700 (line 1) / 400 | 26, line height 40 | Mono advance 0.6 em; per-character baseline jitter ±2.5 % and ink 78-100 %. The species name is underlined. | One character at a time, evenly spread over the window (caption 1: 51 characters in 0.9 s), with a carriage bell at the end. |\n| Field notes (pre-typed) | Courier Prime 700 header / 400 body | 24 | On the card's rules, starting at x 30. | Arrives already typed (it is an archival document). |\n| Figure label on a print border | Courier Prime 700 | 26 | \"FIG. 3 , DAY 9\", bottom border | Typed over 0.4 s. |\n| Edge printing | Courier Prime 700 / 400 | 16 | Amber on film | Printed (static). |\n| Notes on tags | Permanent Marker 400 | 34 | Red, centred on a torn slip | The slip slaps down with the first stroke of its leader arrow, then the words write on with a left-to-right wipe. |\n| Stamps | Courier Prime 700 | 44, tracking 6 | Violet-blue, distressed, multiply | Scale 1.25 → 1 in 0.12 s. |\n| Title | Playfair Display 900 | 110, tracking 2 | Two lines centred at −95 / +25 from the card centre; a 400 × 2 px rule at +68 | Printed on the card; the card slaps down. |\n| Subtitle | Courier Prime 400 | 34 | Centred at +140 | Typed over 0.6 s. |\n| Source line | Courier Prime 400 | 26 | `#5a544a`, centred at +198 | Fades in over 0.35 s. |\n\n## Temporal fingerprint\n| Element | Rule |\n|---|---|\n| Camera | Keyframed centre + zoom (`CAM`), eased with smootherstep between keys. There are three moves: a Ken Burns push (1.42 → 1.52 over 1.8 s), a glide to the next item (0.5-0.6 s), and a slow pan across the contact strip (600 px over 1.5 s). The ending pulls out to 0.76 and holds with a 2 % push. |\n| Arrivals | Paper slap: scale 1.07 → 1, rotation +2.5° → 0, shadow 26 → 7 px, easeOutCubic over 0.32 s; opacity in 0.05 s. Items land while the camera is still settling on them. |\n| Exposures | Each contact frame develops in 0.15 s under a 0.25 s white flash. Frames fire every 0.4 s as the camera pans. |\n| Marks | Grease-pencil ring 0.35 s; box 0.3 s; tag notes 0.3-0.6 s; stamps 0.12 s. |\n| Beats | FIG. 1 0.15 s · caption typed 0.85-1.75 · glide 1.8 · FIG. 2 2.2, card 2.45, ring 3.05, note 3.4, stamp 3.95 · glide 4.15 · strip 4.35, frames 4.65 / 5.05 / 5.45 / 5.85, box 6.05, note 6.35 · glide 6.75 · FIG. 3 7.15, label typed 7.55, note 8.05, stamp 8.8 · pull-out 9.0-9.6, title card 9.55, subtitle 9.85-10.45, source 10.55 · end 11.4. |\n\n## How the composition develops\nThe board starts empty: one print, centred and pushed in on, with its caption typed beneath. Each glide moves down the board, and the previous evidence stays visible at the top edge, so viewers feel the case file growing. The contact strip is the one horizontal move, where time passes left to right. The final pull-out is the reveal: every item at once, organised top to bottom by day, with the title card overlapping the middle like the cover of a dossier.\n\n## Individual assets\nThe plates are code-generated reconstructions; nothing in this packet is a real archival photograph. Each can be regenerated from `scene.js`. To swap in real photographs (or images from an image model), replace a plate with an image of the same aspect ratio and keep the honest source line.\n\n| Asset | File | Source function | Replacement prompt (optional; real photos preferred) |\n|---|---|---|---|\n| FIG. 1 plate (600 × 420, baked at 2×) | `assets/textures/plate-fig1-seed-on-ruler.png` | `paintSeedRuler()` | \"Black-and-white silver-gelatin photograph, a single dry pinto bean resting on a steel ruler showing 1-3 cm, soft window light from upper left, shallow depth of field, fine film grain, warm paper tone, 1950s laboratory documentation style\" |\n| FIG. 2 plate (520 × 520) | `…/plate-fig2-petri-day2.png` | `paintPetri()` | \"Black-and-white top-down photograph of a glass petri dish on a dark bench, wet quilted paper towel, one swollen bean with a split seed coat showing the pale cotyledon, water droplets, rim highlights, film grain\" |\n| Contact frames, days 3-6 (280 × 200 each) | `…/plate-contact-day3…6.png` | `paintJar(i)`, `ROOT_LEN` | \"Black-and-white time-lapse frame: a bean inside a glass jar pressed against wet paper towel, the white root emerging and growing downward (day N), glass highlight at right, film grain\" |\n| FIG. 3 plate (520 × 620) | `…/plate-fig3-seedling-day9.png` | `paintSeedling()` | \"Black-and-white photograph of a young bean seedling in a pot: straight stem, two shrivelling cotyledons, a pair of heart-shaped first leaves opening, dark crumbly soil, blurred window behind, film grain\" |\n| Desk tile / lamp pool | `…/desk-tile-512.png`; the lamp pool is `assets/layers/static/05_light.png` | `bakeDesk()`, `bakeLamp()` | , |\n| Finished pieces | `assets/components/print-fig1.png`, `index-card.png`, `contact-strip.png`, `title-card.png`, `tape.png`, `stamp-day-9.png`, `note-tag.png`, `grease-marks.png` | `drawComponent()` | , |\n| Layers | Static: `assets/layers/static/01_desk.png` (at the final framing) and `05_light.png` (screen-space lamp). Per time: `assets/layers/t*/02_prints`, `03_marks`, `04_title` at 1.6, 3.95, 6.65 and 11.2 s | `drawLayer()` | , |\n\nThere are no masks beyond the sprocket holes (cut with `destination-out`) and the clip that writes the notes.\n\n## Sound\n**Score:** 84 BPM in D minor, resolving to F major. Dm, then B♭, then Gm-C, then F (the title lands in the F bar). A low-velocity electric piano plays 8th-note arpeggios over a low string pad and a string drone. A room-tone bed (warm hiss + low hum) runs underneath.\n\n**Foley:**\n| Event | Sound |\n|---|---|\n| Every sheet lands | paper slap: soft thunk + rustle |\n| Tape | fast high noise rip + click |\n| Typing | one typewriter key per character (`cues.json → typed`), a ratchet click at each new line, and a carriage bell (F6) at the end of each caption |\n| Contact frames | shutter (two clicks + noise) and a piano note D4 → F4 → A4 → D5: pitch follows root length |\n| Grease pencil | low scribble (1.6 kHz) |\n| Marker on tags | low then high scribble (1.6 → 3.2 kHz) |\n| Stamps | low thunk + felt impact |\n| Camera glides | faint air whoosh |\n| Title | F-major piano chord |\n\n**Stems:** `audio/stems/music.flac`, `foley.flac` and `room.flac`. The mix targets −16 LUFS (−15.5 measured internally).\n\n## Reusable prompt\n> Create a {11}-second {1080×1920} documentary-collage video about {subject}. A dark charcoal desk under a warm lamp; black-and-white, warm-toned photographic prints with white borders, a typed caption strip, an index card of notes, a contact strip and a title card land one by one with paper slaps (scale 1.07→1, a 2.5° settle, the shadow tightening). A slow Ken Burns camera pushes and glides from item to item and finally pulls out to reveal the whole board. Captions type on character by character in Courier Prime; red grease-pencil circles and boxes mark the evidence; torn paper tags carry red marker notes; violet rubber stamps date each stage; masking tape holds things down. Every image has a figure number, a date and an honest source line. Sound: soft piano and strings, room tone, and close foley for paper, tape, typewriter, shutter, pencil and stamps.\n\n## Adaptation guidance\n| Change | Safe? | Notes |\n|---|---|---|\n| Subject / evidence | ✅ | Replace the plates (same aspect ratios) and the copy in `TEXT`; keep figure numbers, dates and sources. |\n| Real photographs | ✅ (preferred) | Feed them through `photo()`'s tone pass for a consistent print look, or keep them in colour as one deliberate exception. |\n| Generated photographs | ⚠️ | Only with a visible source line that says so; never imitate a real archive, publication or person. |\n| Number of items | ✅ | Add items to `ITEMS` and camera keys; keep one item framed per beat and the board growing downward or rightward. |\n| Desk colour | ✅ | A light archive table also works (`#d8d2c6`); then use darker shadows and a black pencil instead of red. |\n| 16:9 | ✅ | Lay the board out horizontally; the contact strip becomes the hero move. |\n| Fast cuts, glitches, bouncy easing, saturated colour | ❌ | They break the evidence register. |\n| **Essential** | , | Physical documents only; the camera reads the desk; typed facts, marker judgements; every image dated and sourced; quiet piano + close foley. |\n\n## Accessibility\n- **Contrast:** typed ink `#23201c` on the index card is 13.8:1. Red marker on the tags is 4.7:1. The source line `#5a544a` on the title card is 6.3:1.\n- **Text size:** in the end frame the source line renders at about 20 px, so add it to the description or end card if it must be read.\n- **Flashing:** the contact-strip flash is a single 0.25 s white fade per frame, four in 1.2 s, on a small area (well under the flash thresholds).\n- **Reading:** text appears at reading pace, and the camera holds on each item for at least 1.4 s.\n\n## Provenance\n- **Source:** built from the research handoff's candidate \"documentary/photo collage: evidence images, archival material, dates and source captions\". No Animate seed was used.\n- **Originality:** all code, painted plates, layout and audio are original (2026-10-08). The plates are reconstructions, and the film says so on screen.\n- **Fonts:** Courier Prime, Permanent Marker, Playfair Display and Inter (all SIL OFL).\n- **References** (descriptive conventions, not copied):\n - the Ken Burns pan-and-zoom over still photographs\n - contact sheets marked with grease pencil\n - laboratory documentation photography with a scale rule\n - typewritten index cards", "review": { "technical": { "state": "Supplied checks passed", "scope": "Source handoff records complete decode, stream dimensions and audio measurements. Browser playback is checked separately.", "artifactSha256": "c6ab43a5b880274e14621205f61d4c05584fe6da865521399f5bde3263e6431c" }, "creative": { "state": "Not independently accepted", "scope": "not independently established", "artifactSha256": "c6ab43a5b880274e14621205f61d4c05584fe6da865521399f5bde3263e6431c" }, "listening": { "state": "Not verified", "scope": "No perceptual listening pass is established by this library import.", "artifactSha256": "c6ab43a5b880274e14621205f61d4c05584fe6da865521399f5bde3263e6431c" }, "reproduction": { "state": "Not tested", "scope": "Source is supplied. Cross-machine cold-start reproduction has not been established.", "artifactSha256": "c6ab43a5b880274e14621205f61d4c05584fe6da865521399f5bde3263e6431c" } }, "detailUrl": "https://library.jkylehobson.chatgpt.site/video-library/#family=documentary-collage&example=claude-cloud", "processUrl": "/video-library/process.html?family=documentary-collage&example=claude-cloud", "downloads": { "prompt": { "available": true, "url": "/video-library/prompts/documentary-collage--claude-cloud.txt", "sha256": "ff8ffe7a785987eb6babb085f748af07cfdae986935bef53cb383217e14cc22c", "bytes": 2034, "label": "Reusable, example-specific instructions" }, "video": { "name": "documentary-collage--claude-cloud.mp4", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/documentary-collage--claude-cloud.mp4", "bytes": 14092546, "sha256": "c6ab43a5b880274e14621205f61d4c05584fe6da865521399f5bde3263e6431c", "available": true, "label": "13.4 MB" }, "source": { "name": "documentary-collage--claude-cloud--source.zip", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/documentary-collage--claude-cloud--source.zip", "bytes": 28984835, "sha256": "17144e6358baf39aefbf9b258dbc9094aaade3270c37ea20816be19bb74ca1d1", "available": true, "label": "27.6 MB", "contents": [ "editable source", "variant guidance", "source assets", "audio inputs", "dependency declarations", "file manifest" ], "includedFiles": 73, "includedFilePaths": [ "CASE_STUDY.md", "RUN.md", "SKILL.md", "STYLE.md", "assets/components/contact-strip.png", "assets/components/grease-marks.png", "assets/components/index-card.png", "assets/components/note-tag.png", "assets/components/print-fig1.png", "assets/components/stamp-day-9.png", "assets/components/tape.png", "assets/components/title-card.png", "assets/layers/static/01_desk.png", "assets/layers/static/05_light.png", "assets/layers/t1.60/02_prints.png", "assets/layers/t1.60/03_marks.png", "assets/layers/t1.60/04_title.png", "assets/layers/t11.20/02_prints.png", "assets/layers/t11.20/03_marks.png", "assets/layers/t11.20/04_title.png", "assets/layers/t3.95/02_prints.png", "assets/layers/t3.95/03_marks.png", "assets/layers/t3.95/04_title.png", "assets/layers/t6.65/02_prints.png", "assets/layers/t6.65/03_marks.png", "assets/layers/t6.65/04_title.png", "assets/paths/box.json", "assets/paths/box.svg", "assets/paths/ring.json", "assets/paths/ring.svg", "assets/textures/desk-tile-512.png", "assets/textures/plate-contact-day3.png", "assets/textures/plate-contact-day4.png", "assets/textures/plate-contact-day5.png", "assets/textures/plate-contact-day6.png", "assets/textures/plate-fig1-seed-on-ruler.png", "assets/textures/plate-fig2-petri-day2.png", "assets/textures/plate-fig3-seedling-day9.png", "audio/cues.json", "audio/mix.flac", "audio/stems/foley.flac", "audio/stems/music.flac", "audio/stems/room.flac", "engine/audio.mjs", "engine/audio/dsp.js", "engine/audio/instruments.js", "engine/audio/sfx.js", "engine/browser.mjs", "engine/export.mjs", "engine/finish.mjs", "engine/lib/draw.js", "engine/lib/util.js", "engine/page.html", "engine/render.mjs", "engine/runtime.js", "engine/server.mjs", "film/FILM_DELIVERED_SEPARATELY.txt", "film/contact_sheet.jpg", "film/spectrogram.png", "film/stills/01_1.60s.jpg", "film/stills/02_3.95s.jpg", "film/stills/03_5.00s.jpg", "film/stills/04_6.65s.jpg", "film/stills/05_8.75s.jpg", "film/stills/06_11.20s.jpg", "overview/encoded-contact-sheet.jpg", "package.json", "qa.json", "spec.json", "styles/documentary-collage/scene.js", "styles/documentary-collage/score.js", "styles/documentary-collage/timeline.js", "BUNDLE-GUIDE.md" ], "externalPrerequisites": { "runtime": [ "Node.js", "Chromium or Chrome", "FFmpeg and ffprobe" ], "packageDependencies": { "@fontsource/anton": "^5.1.0", "@fontsource/archivo-black": "^5.1.0", "@fontsource/bangers": "^5.1.0", "@fontsource/bebas-neue": "^5.1.0", "@fontsource/caveat": "^5.1.0", "@fontsource/comic-neue": "^5.3.0", "@fontsource/courier-prime": "^5.3.0", "@fontsource/dm-sans": "^5.1.0", "@fontsource/dm-serif-display": "^5.1.0", "@fontsource/fraunces": "^5.1.0", "@fontsource/ibm-plex-mono": "^5.1.0", "@fontsource/instrument-serif": "^5.1.0", "@fontsource/inter": "^5.1.0", "@fontsource/jetbrains-mono": "^5.1.0", "@fontsource/jost": "^5.3.0", "@fontsource/kaushan-script": "^5.3.0", "@fontsource/nunito": "^5.1.0", "@fontsource/permanent-marker": "^5.1.0", "@fontsource/playfair-display": "^5.1.0", "@fontsource/press-start-2p": "^5.1.0", "@fontsource/space-grotesk": "^5.1.0", "@fontsource/space-mono": "^5.1.0", "@fontsource/stix-two-text": "^5.3.0", "@fontsource/syne": "^5.1.0", "@fontsource/vt323": "^5.1.0", "three": "0.170.0", "playwright": "1.56.1" }, "lockfileIncluded": false, "coldStart": false }, "license": { "summary": "User-directed publication of supplied authored source; preserve listed third-party notices; no new license granted here.", "includedNoticePaths": [], "newLicenseGranted": false } }, "bundle": { "name": "documentary-collage--claude-cloud--full.zip", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/documentary-collage--claude-cloud--full.zip", "bytes": 43122246, "sha256": "b4d6a1b43dd76c321a019d4ebc4685f734226531cb98d0b62a2e13137e418115", "available": true, "label": "41.1 MB", "contents": [ "selected master", "editable source", "variant guidance", "source assets", "audio inputs", "dependency declarations", "file manifest", "designed cover", "starter prompt" ], "includedFiles": 76, "includedFilePaths": [ "CASE_STUDY.md", "RUN.md", "SKILL.md", "STYLE.md", "assets/components/contact-strip.png", "assets/components/grease-marks.png", "assets/components/index-card.png", "assets/components/note-tag.png", "assets/components/print-fig1.png", "assets/components/stamp-day-9.png", "assets/components/tape.png", "assets/components/title-card.png", "assets/layers/static/01_desk.png", "assets/layers/static/05_light.png", "assets/layers/t1.60/02_prints.png", "assets/layers/t1.60/03_marks.png", "assets/layers/t1.60/04_title.png", "assets/layers/t11.20/02_prints.png", "assets/layers/t11.20/03_marks.png", "assets/layers/t11.20/04_title.png", "assets/layers/t3.95/02_prints.png", "assets/layers/t3.95/03_marks.png", "assets/layers/t3.95/04_title.png", "assets/layers/t6.65/02_prints.png", "assets/layers/t6.65/03_marks.png", "assets/layers/t6.65/04_title.png", "assets/paths/box.json", "assets/paths/box.svg", "assets/paths/ring.json", "assets/paths/ring.svg", "assets/textures/desk-tile-512.png", "assets/textures/plate-contact-day3.png", "assets/textures/plate-contact-day4.png", "assets/textures/plate-contact-day5.png", "assets/textures/plate-contact-day6.png", "assets/textures/plate-fig1-seed-on-ruler.png", "assets/textures/plate-fig2-petri-day2.png", "assets/textures/plate-fig3-seedling-day9.png", "audio/cues.json", "audio/mix.flac", "audio/stems/foley.flac", "audio/stems/music.flac", "audio/stems/room.flac", "display/cover.webp", "engine/audio.mjs", "engine/audio/dsp.js", "engine/audio/instruments.js", "engine/audio/sfx.js", "engine/browser.mjs", "engine/export.mjs", "engine/finish.mjs", "engine/lib/draw.js", "engine/lib/util.js", "engine/page.html", "engine/render.mjs", "engine/runtime.js", "engine/server.mjs", "film/FILM_DELIVERED_SEPARATELY.txt", "film/contact_sheet.jpg", "film/documentary-collage.mp4", "film/spectrogram.png", "film/stills/01_1.60s.jpg", "film/stills/02_3.95s.jpg", "film/stills/03_5.00s.jpg", "film/stills/04_6.65s.jpg", "film/stills/05_8.75s.jpg", "film/stills/06_11.20s.jpg", "overview/encoded-contact-sheet.jpg", "package.json", "qa.json", "spec.json", "starter-prompt.txt", "styles/documentary-collage/scene.js", "styles/documentary-collage/score.js", "styles/documentary-collage/timeline.js", "BUNDLE-GUIDE.md" ], "externalPrerequisites": { "runtime": [ "Node.js", "Chromium or Chrome", "FFmpeg and ffprobe" ], "packageDependencies": { "@fontsource/anton": "^5.1.0", "@fontsource/archivo-black": "^5.1.0", "@fontsource/bangers": "^5.1.0", "@fontsource/bebas-neue": "^5.1.0", "@fontsource/caveat": "^5.1.0", "@fontsource/comic-neue": "^5.3.0", "@fontsource/courier-prime": "^5.3.0", "@fontsource/dm-sans": "^5.1.0", "@fontsource/dm-serif-display": "^5.1.0", "@fontsource/fraunces": "^5.1.0", "@fontsource/ibm-plex-mono": "^5.1.0", "@fontsource/instrument-serif": "^5.1.0", "@fontsource/inter": "^5.1.0", "@fontsource/jetbrains-mono": "^5.1.0", "@fontsource/jost": "^5.3.0", "@fontsource/kaushan-script": "^5.3.0", "@fontsource/nunito": "^5.1.0", "@fontsource/permanent-marker": "^5.1.0", "@fontsource/playfair-display": "^5.1.0", "@fontsource/press-start-2p": "^5.1.0", "@fontsource/space-grotesk": "^5.1.0", "@fontsource/space-mono": "^5.1.0", "@fontsource/stix-two-text": "^5.3.0", "@fontsource/syne": "^5.1.0", "@fontsource/vt323": "^5.1.0", "three": "0.170.0", "playwright": "1.56.1" }, "lockfileIncluded": false, "coldStart": false }, "license": { "summary": "User-directed publication of supplied authored source; preserve listed third-party notices; no new license granted here.", "includedNoticePaths": [], "newLicenseGranted": false } } }, "cadenceNote": "Encoded fps describes the file. Scene evaluation and held actor poses depend on this source recipe.", "starterPrompt": "Create a {11}-second {1080×1920} documentary-collage video about {subject}. A dark charcoal desk under a warm lamp; black-and-white, warm-toned photographic prints with white borders, a typed caption strip, an index card of notes, a contact strip and a title card land one by one with paper slaps (scale 1.07→1, a 2.5° settle, the shadow tightening). A slow Ken Burns camera pushes and glides from item to item and finally pulls out to reveal the whole board. Captions type on character by character in Courier Prime; red grease-pencil circles and boxes mark the evidence; torn paper tags carry red marker notes; violet rubber stamps date each stage; masking tape holds things down. Every image has a figure number, a date and an honest source line. Sound: soft piano and strings, room tone, and close foley for paper, tape, typewriter, shutter, pencil and stamps.\n\nSelected example: Seed to Seedling\nFamily: documentary-collage\nVariant: claude-cloud\nTypography: Courier Prime 700 (line 1) / 400, Courier Prime 700 header / 400 body, Courier Prime 700/400, Permanent Marker 400, Courier Prime 700, Playfair Display 900, Courier Prime 400\nProduction: canvas-2d\nExact reference master SHA-256: c6ab43a5b880274e14621205f61d4c05584fe6da865521399f5bde3263e6431c\n\nRead the selected STYLE.md, SKILL.md and reproduction instructions before adapting. Keep the declared renderer and source closure; do not assume another family variant has interchangeable parameters. Preserve exact font or custom glyph sources, color roles, spatial continuity and readable text. Record encoded frame rate, scene evaluation and held poses separately. Review the changed render visually and listen to the encoded audio before claiming those checks passed. Existing approval applies only to its recorded artifact.\n\nSuccess check: the adapted story is clear; key type remains readable in motion; the source rebuilds with its declared inputs; all media and review records identify the exact output. State any untested reproduction, listening or rights limits.", "downloadNote": "Downloads match this selected example. The full bundle includes its source, original video, cover and starter prompt. Source packages include artwork, audio inputs and dependency declarations. Requires Node.js, Chromium or Chrome, FFmpeg and ffprobe. Follow the included run guide for package installation and reproduction limits.", "model": "Opus 5.5", "reasoningEffort": "Extra" }, { "id": "local-between-moments-r2", "title": "Between Moments R2", "producer": "Local Codex; related photographic direction", "producerEvidence": "Contributor attribution follows the supplied source record; no per-film cost is inferred.", "relationship": "related family; distinct construction and subject; parameters are not interchangeable", "format": "Portrait", "productionMethod": "Photographic collage + authored glyph reveal", "master": { "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/documentary-collage--local-between-moments-r2.mp4", "sha256": "4019d2e43f89a5c28266b6ed80f23c2ab91ec7e55323ad88a2f704558d4ba966", "bytes": 4810173, "mimeType": "video/mp4", "width": 1080, "height": 1920, "duration": 12.0, "encodedFps": 60 }, "poster": { "url": "/video-library/media/documentary-collage--local-between-moments-r2/cover.webp", "sha256": "0d54a46dd0431ca6f13253bb6ce81af005cd394f9315c28af5edf82205092384", "sourceMasterSha256": "4019d2e43f89a5c28266b6ed80f23c2ab91ec7e55323ad88a2f704558d4ba966", "timeSeconds": 10.2, "rationale": "Late story beat selected to show the developed subject and visual system; extracted from this exact master." }, "previewVideo": { "url": "/video-library/media/documentary-collage--local-between-moments-r2/preview.mp4", "sha256": "cdc067a721e2848f1cacc678ab101a956050fde1cdfa8e910291b3c234a129f4", "sourceMasterSha256": "4019d2e43f89a5c28266b6ed80f23c2ab91ec7e55323ad88a2f704558d4ba966", "width": 540, "height": 960, "label": "Playback preview · 540 px wide · full master in Download finished video" }, "gallery": [ { "id": "overview", "role": "encoded-contact-sheet", "label": "Scenes from the finished render · not a planning storyboard", "url": "/video-library/media/documentary-collage--local-between-moments-r2/overview.webp", "sourceMasterSha256": "4019d2e43f89a5c28266b6ed80f23c2ab91ec7e55323ad88a2f704558d4ba966" }, { "id": "scene-1", "role": "encoded-frame", "label": "Finished-film frame · 2.4 seconds", "url": "/video-library/media/documentary-collage--local-between-moments-r2/scene-1.webp", "sourceMasterSha256": "4019d2e43f89a5c28266b6ed80f23c2ab91ec7e55323ad88a2f704558d4ba966", "timeSeconds": 2.4 }, { "id": "scene-2", "role": "encoded-frame", "label": "Finished-film frame · 6 seconds", "url": "/video-library/media/documentary-collage--local-between-moments-r2/scene-2.webp", "sourceMasterSha256": "4019d2e43f89a5c28266b6ed80f23c2ab91ec7e55323ad88a2f704558d4ba966", "timeSeconds": 6.0 }, { "id": "scene-3", "role": "encoded-frame", "label": "Finished-film frame · 9.6 seconds", "url": "/video-library/media/documentary-collage--local-between-moments-r2/scene-3.webp", "sourceMasterSha256": "4019d2e43f89a5c28266b6ed80f23c2ab91ec7e55323ad88a2f704558d4ba966", "timeSeconds": 9.6 } ], "typography": [ "Pinyon Script Regular · supplied OFL font" ], "palette": null, "usageGuidance": "Change the subject, copy and timing for your audience. Retain the selected example’s visual rules and recheck the entire reading interval after changes.", "styleRules": "# Between Moments R2 , preserved local direction\n\nRead the full [creative treatment](../../../../sources/local-production/films/documentary-photo-collage-r2/docs/creative-treatment.md) and original [README](../../../../sources/local-production/films/documentary-photo-collage-r2/README.md). Those documents contain the actual palette, materials, composition, shot timing and sound direction. This file is an index, not a replacement for them.\n\nPinyon Script Regular (PinyonScript-Regular.ttf, OFL). Glyph-specific curved ink-impression masks; this is not a reconstructed historical pen stroke.\n\nThe cloud and local examples share a family. Their geometry, camera, timing, materials and parameter interfaces are distinct. Choose one complete variant before adapting it. Do not mix a cloud score with local scene timing.\n\nThe treatment records intent; the source and output-bound review record implementation. Earlier rejected studies remain in sources/local-production and are not current approved masters. Keep unknown or partial review status visible.", "review": { "technical": { "state": "Supplied checks passed", "scope": "Source handoff records complete decode, stream dimensions and audio measurements. Browser playback is checked separately.", "artifactSha256": "4019d2e43f89a5c28266b6ed80f23c2ab91ec7e55323ad88a2f704558d4ba966" }, "creative": { "state": "Not independently accepted", "scope": "see historical variant review; not newly accepted", "artifactSha256": "4019d2e43f89a5c28266b6ed80f23c2ab91ec7e55323ad88a2f704558d4ba966" }, "listening": { "state": "Not verified", "scope": "No perceptual listening pass is established by this library import.", "artifactSha256": "4019d2e43f89a5c28266b6ed80f23c2ab91ec7e55323ad88a2f704558d4ba966" }, "reproduction": { "state": "Not tested", "scope": "Source is supplied. Cross-machine cold-start reproduction has not been established.", "artifactSha256": "4019d2e43f89a5c28266b6ed80f23c2ab91ec7e55323ad88a2f704558d4ba966" } }, "detailUrl": "https://library.jkylehobson.chatgpt.site/video-library/#family=documentary-collage&example=local-between-moments-r2", "processUrl": "/video-library/process.html?family=documentary-collage&example=local-between-moments-r2", "downloads": { "prompt": { "available": true, "url": "/video-library/prompts/documentary-collage--local-between-moments-r2.txt", "sha256": "53c7f5ca559284cc579c183b0eb14867dba0e2bd08c2118860cb24218f8bfc23", "bytes": 1301, "label": "Reusable, example-specific instructions" }, "video": { "name": "documentary-collage--local-between-moments-r2.mp4", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/documentary-collage--local-between-moments-r2.mp4", "bytes": 4810173, "sha256": "4019d2e43f89a5c28266b6ed80f23c2ab91ec7e55323ad88a2f704558d4ba966", "available": true, "label": "4.6 MB" }, "source": { "name": "documentary-collage--local-between-moments-r2--source.zip", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/documentary-collage--local-between-moments-r2--source.zip", "bytes": 17443488, "sha256": "656d01307d2ac8b3e93c6dda41e6c4539326b89dbd005fe7736802a97d66c41d", "available": true, "label": "16.6 MB", "contents": [ "editable source", "variant guidance", "source assets", "audio inputs", "dependency declarations", "file manifest" ], "includedFiles": 34, "includedFilePaths": [ "PORTABILITY/portability.md", "README.md", "assets/fonts/OFL.txt", "assets/fonts/PinyonScript-Regular.ttf", "assets/manifest.json", "assets/montserrat-LICENSE.txt", "assets/photos/000.png", "assets/photos/007.png", "assets/photos/014.png", "assets/playfair-display-LICENSE.txt", "audio/dsp.mjs", "audio/score.mjs", "audio/stems/ambience.wav", "audio/stems/music.wav", "audio/stems/sfx.wav", "docs/brief.md", "docs/creative-treatment.md", "docs/implementation-decisions.md", "docs/project-map.md", "guidance/SKILL.md", "guidance/STYLE.md", "index.html", "outputs/soundtrack.wav", "overview/encoded-contact-sheet.jpg", "package.json", "scripts/render.mjs", "scripts/validate.mjs", "src/album-scene.js", "src/lettering.js", "src/main.js", "src/materials.js", "src/math.js", "src/timeline.js", "BUNDLE-GUIDE.md" ], "externalPrerequisites": { "runtime": [ "Node.js", "Chromium or Chrome", "FFmpeg and ffprobe" ], "packageDependencies": { "playwright": "1.62.1" }, "lockfileIncluded": false, "coldStart": false }, "license": { "summary": "User-directed publication of supplied authored source; preserve listed third-party notices; no new license granted here.", "includedNoticePaths": [ "assets/fonts/OFL.txt", "assets/montserrat-LICENSE.txt", "assets/playfair-display-LICENSE.txt" ], "newLicenseGranted": false } }, "bundle": { "name": "documentary-collage--local-between-moments-r2--full.zip", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/documentary-collage--local-between-moments-r2--full.zip", "bytes": 22291600, "sha256": "58abc620489fe2c51853cbd3db2ce178930f7e51df0e698d9bc4e67b230baef9", "available": true, "label": "21.3 MB", "contents": [ "selected master", "editable source", "variant guidance", "source assets", "audio inputs", "dependency declarations", "file manifest", "designed cover", "starter prompt" ], "includedFiles": 37, "includedFilePaths": [ "PORTABILITY/portability.md", "README.md", "assets/fonts/OFL.txt", "assets/fonts/PinyonScript-Regular.ttf", "assets/manifest.json", "assets/montserrat-LICENSE.txt", "assets/photos/000.png", "assets/photos/007.png", "assets/photos/014.png", "assets/playfair-display-LICENSE.txt", "audio/dsp.mjs", "audio/score.mjs", "audio/stems/ambience.wav", "audio/stems/music.wav", "audio/stems/sfx.wav", "display/cover.webp", "docs/brief.md", "docs/creative-treatment.md", "docs/implementation-decisions.md", "docs/project-map.md", "guidance/SKILL.md", "guidance/STYLE.md", "index.html", "outputs/documentary-photo-collage.mp4", "outputs/soundtrack.wav", "overview/encoded-contact-sheet.jpg", "package.json", "scripts/render.mjs", "scripts/validate.mjs", "src/album-scene.js", "src/lettering.js", "src/main.js", "src/materials.js", "src/math.js", "src/timeline.js", "starter-prompt.txt", "BUNDLE-GUIDE.md" ], "externalPrerequisites": { "runtime": [ "Node.js", "Chromium or Chrome", "FFmpeg and ffprobe" ], "packageDependencies": { "playwright": "1.62.1" }, "lockfileIncluded": false, "coldStart": false }, "license": { "summary": "User-directed publication of supplied authored source; preserve listed third-party notices; no new license granted here.", "includedNoticePaths": [ "assets/fonts/OFL.txt", "assets/montserrat-LICENSE.txt", "assets/playfair-display-LICENSE.txt" ], "newLicenseGranted": false } } }, "cadenceNote": "Encoded fps describes the file. Scene evaluation and held actor poses depend on this source recipe.", "starterPrompt": "Create a short Documentary Collage film about {subject} for {audience}. Use the selected example as a visual reference. Preserve its composition, material, type, motion and audio relationships while adapting the story.\n\nSelected example: Between Moments R2\nFamily: documentary-collage\nVariant: local-between-moments-r2\nTypography: Pinyon Script Regular · supplied OFL font\nProduction: Photographic collage + authored glyph reveal\nExact reference master SHA-256: 4019d2e43f89a5c28266b6ed80f23c2ab91ec7e55323ad88a2f704558d4ba966\n\nRead the selected STYLE.md, SKILL.md and reproduction instructions before adapting. Keep the declared renderer and source closure; do not assume another family variant has interchangeable parameters. Preserve exact font or custom glyph sources, color roles, spatial continuity and readable text. Record encoded frame rate, scene evaluation and held poses separately. Review the changed render visually and listen to the encoded audio before claiming those checks passed. Existing approval applies only to its recorded artifact.\n\nSuccess check: the adapted story is clear; key type remains readable in motion; the source rebuilds with its declared inputs; all media and review records identify the exact output. State any untested reproduction, listening or rights limits.", "downloadNote": "Downloads match this selected example. The full bundle includes its source, original video, cover and starter prompt. Source packages include artwork, audio inputs and dependency declarations. Requires Node.js, Chromium or Chrome, FFmpeg and ffprobe. Follow the included run guide for package installation and reproduction limits.", "model": null, "reasoningEffort": null } ], "relatedMethodIds": [] }, { "id": "flat-vector-editorial", "slug": "flat-vector-editorial", "title": "Flat Vector Editorial", "premise": "Simple shapes, restrained color and a travelling camera turn one illustrated world into a clear visual explanation.", "summary": "Simple shapes, restrained color and a travelling camera turn one illustrated world into a clear visual explanation.", "category": "Vector / editorial", "defaultExampleId": "claude-cloud", "facets": { "material": [ "2d", "flat", "vector", "editorial", "explainer", "cross-section", "camera-crane", "highlight-bar", "world-anchored-type" ], "producer": [ "Claude Cloud" ], "format": [ "Portrait" ], "motion": [], "useCase": [] }, "examples": [ { "id": "claude-cloud", "title": "Seed to Seedling", "producer": "Claude Cloud", "producerEvidence": "The displayed model and reasoning label identify this production lane. Exact runtime model ID and per-film cost are not established by the source packet.", "relationship": "Original family example", "format": "Portrait", "productionMethod": "canvas-2d", "master": { "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/flat-vector-editorial--claude-cloud.mp4", "sha256": "754ba62c823440cea387dd13ca67f09fbd6d4a8b1584d671248c692b8455ea26", "bytes": 2328477, "mimeType": "video/mp4", "width": 1080, "height": 1920, "duration": 9.0, "encodedFps": 60 }, "poster": { "url": "/video-library/media/flat-vector-editorial--claude-cloud/cover.webp", "sha256": "e19bc7eff2a7a54e1b8d84d588df1ef4c00236af926eebb61178e24e74845c70", "sourceMasterSha256": "754ba62c823440cea387dd13ca67f09fbd6d4a8b1584d671248c692b8455ea26", "timeSeconds": 7.65, "rationale": "Late story beat selected to show the developed subject and visual system; extracted from this exact master." }, "previewVideo": { "url": "/video-library/media/flat-vector-editorial--claude-cloud/preview.mp4", "sha256": "fb6e3ceae0367daf6f0a3114f7cd219215640ba43568005922a1bf064c632c62", "sourceMasterSha256": "754ba62c823440cea387dd13ca67f09fbd6d4a8b1584d671248c692b8455ea26", "width": 540, "height": 960, "label": "Playback preview · 540 px wide · full master in Download finished video" }, "gallery": [ { "id": "overview", "role": "encoded-contact-sheet", "label": "Scenes from the finished render · not a planning storyboard", "url": "/video-library/media/flat-vector-editorial--claude-cloud/overview.webp", "sourceMasterSha256": "754ba62c823440cea387dd13ca67f09fbd6d4a8b1584d671248c692b8455ea26" }, { "id": "scene-1", "role": "encoded-frame", "label": "Finished-film frame · 1.8 seconds", "url": "/video-library/media/flat-vector-editorial--claude-cloud/scene-1.webp", "sourceMasterSha256": "754ba62c823440cea387dd13ca67f09fbd6d4a8b1584d671248c692b8455ea26", "timeSeconds": 1.8 }, { "id": "scene-2", "role": "encoded-frame", "label": "Finished-film frame · 4.5 seconds", "url": "/video-library/media/flat-vector-editorial--claude-cloud/scene-2.webp", "sourceMasterSha256": "754ba62c823440cea387dd13ca67f09fbd6d4a8b1584d671248c692b8455ea26", "timeSeconds": 4.5 }, { "id": "scene-3", "role": "encoded-frame", "label": "Finished-film frame · 7.2 seconds", "url": "/video-library/media/flat-vector-editorial--claude-cloud/scene-3.webp", "sourceMasterSha256": "754ba62c823440cea387dd13ca67f09fbd6d4a8b1584d671248c692b8455ea26", "timeSeconds": 7.2 } ], "typography": [ "Space Grotesk 700", "Inter 600" ], "palette": { "bg": "#F4EFE6", "ink": "#1E2A44", "soil": "#C8643B", "soilEdge": "#B4552F", "soilBand": "#B85A33", "soilDeep": "#A44C2B", "pebble": "#D98560", "pebbleDark": "#9A4527", "water": "#3E8FE0", "waterLight": "#8CC2F2", "green": "#2FA36B", "leaf": "#43C27F", "leafDark": "#2A9460", "cream": "#F6E7C8", "seed": "#6B3E26", "seedLight": "#8C5638", "sun": "#F2C14E", "sunDeep": "#E8A93A" }, "usageGuidance": "Change the subject, copy and timing for your audience. Retain the selected example’s visual rules and recheck the entire reading interval after changes.", "styleRules": "---\nid: flat-vector-editorial\nname: Flat Vector Editorial (Seed to Seedling: one world, one camera)\nfamily: Vector / editorial\naliases: [flat illustration, editorial explainer, geometric flat, cross-section explainer]\ntags: [2d, flat, vector, editorial, explainer, cross-section, camera-crane, highlight-bar, world-anchored-type]\nkind: visual-style\nroute: canvas-2d (one flat illustrated world drawn under a single camera transform; labels anchored in the world)\nreadiness: { research: authored, rights: original-work, referenceImages: own-render, code: built, render: rendered-and-measured }\n---\n\n# Flat Vector Editorial (Seed to Seedling: one world, one camera)\n\nA seed drops through an off-white sky into a terracotta soil cross-section while the headline \"From **seed** to seedling\" rises out of a mask.\n- Three water drops fall, splash and seep down; the seed swells with each drink (\"**Water** wakes the seed.\").\n- The seed cracks and the camera follows the root down through the soil bands; the label is cream, set inside the soil (\"A **root** reaches down.\").\n- The camera leads back up; a hooked shoot breaks the surface and straightens, two leaves spring open and the sun pops in (\"A shoot finds the **light**.\").\n- The camera pulls back to the whole seedling: \"**Seedling.**\"\n\n**The one rule:** *one world, one camera.* There are no cuts. Every beat is a camera move to a new region of the same flat illustration, and every label lives in the layer it describes.\n\n## Creative direction\n- **Audience:** product and service explainers, science and education, onboarding, internal comms; general audiences on phones.\n- **Purpose:** explain a sequence clearly and warmly, with every step in a place you can point to.\n- **Feeling:** calm, clear, friendly and precise, like a magazine spread that moves.\n- **Central visual idea:** *a cross-section you travel through.* The flat-vector genre often looks generic because it is a slideshow of centred icons; here the camera cranes through one continuous world instead.\n- **How the parts work together:**\n - *Composition:* an asymmetric editorial grid: a text column on the left (x 72-620), the subject column on the right (x ≈ 700-900), generous sky.\n - *Colour:* six flat hues on warm paper; depth only by darker tints of the same hue.\n - *Type:* bold geometric grotesk headlines in sentence case with full stops; one key word per label gets a highlight bar in the colour of the thing it names.\n - *Motion:* a move-hold-move crane; springy entrances; squash on landings.\n - *Sound:* bright plucked chords and kalimba, one sound per action.\n\n## Fit\n- **Best for:** process explainers (how X becomes Y), product and service journeys, onboarding, anything with a clear physical or spatial sequence.\n- **Avoid when:** you need photographic evidence, documentary weight, dense data (use data-journalism), or a handmade feel (use cut-paper or sketchbook).\n- **Cost:** very low. Canvas 2D at about 0.07 s per frame; 540 frames rendered in about 40 s.\n\n## Visual fingerprint\n| Element | Rule |\n|---|---|\n| Palette | paper `#F4EFE6`, ink `#1E2A44`; soil `#C8643B` with edge `#B4552F`, band `#B85A33`, deep `#A44C2B`, pebbles `#D98560`; water `#3E8FE0` / `#8CC2F2`; stem `#2FA36B`, leaf `#43C27F` / `#2A9460`; sun `#F2C14E` / rays `#E8A93A`; cream `#F6E7C8`; seed `#6B3E26` / `#8C5638`. |\n| Shape language | Circles, ellipses, lens leaves, an almond seed, round caps on every stroke. |\n| Line | No outlines. \"Lines\" are tapered filled strokes on dense Catmull-Rom points (root 20 → 6 px, rootlets 8 → 3, shoot 18 → 13). |\n| Texture, light | None. Flat fills only; one flat white sheen at 18 % is the most \"lighting\" allowed. Depth by overlap and darker tints (soil bands, the shaded half of the seed and each leaf). No gradients or drop shadows. |\n| World | Soil from y 1150 with a 14 px edge, a wavy band at y ≈ 1640 and deep soil from y 1990; 8 pebbles for scale. The seed sits at (760, 1320). |\n| Camera | One world transform `setTransform(s, 0, 0, s, 540 − cx·s, 960 − cy·s)`. `cy`: 1150 → 1170 (3.0 s) → 1560 (4.6, hold to 4.75) → 990 (5.9, hold to 7.2) → 1150 (7.9). Scale: 1.3 → 1.36 → 1.3 → 1.2 → 1.0 → 0.985. All easeInOutCubic; repeating a key makes a hold. |\n| Highlight bar | Behind one key word per label, in the colour of the thing named (soil for \"seed\", water for \"Water\", cream for \"root\", sun for \"light\", leaf for \"Seedling\"); the word is redrawn in a contrast ink inside the bar. |\n\n### Typography (exact)\n| Role | Family / weight | Size (world px) | Leading | Notes |\n|---|---|---|---|---|\n| Labels | Space Grotesk 700 | 86-92 (on screen ≈ 110-125 after camera scale) | 90-96 | Sentence case with a full stop; ≤ 9 characters per line in the left column |\n| End word | Space Grotesk 700 | 128 | , | \"Seedling.\" with a leaf-green bar |\n| Caption | Inter 600 | 30 (screen space) | , | Uppercase, tracking 3 px: \"ILLUSTRATION · TIME-COMPRESSED\" at (72, 1846), cream |\n\nLabel positions (world): title (200, 750); \"Water wakes the seed.\" (200, 660); \"A root reaches down.\" (200, 1770) in cream on soil; \"A shoot finds the light.\" (170, 600); \"Seedling.\" (72, 600).\n\n## Temporal fingerprint\n100 BPM (beat 0.6 s = 36 frames); actions sit on beats.\n\n| Element | Rule |\n|---|---|\n| Seed | Falls 0.45-1.2 s (beat 2, ease-in) and lands with a squash `1 − 0.2·e^(−11a)·cos 30a`. |\n| Water | Drops land at 1.8 / 2.4 / 2.7 s (beats 3, 4, 4.5) after a 0.36 s ease-in fall; a splash ring for 0.4 s; a seep to the seed over 0.28 s; the seed swells +8.5 % per drink (easeOutBack 2.5). |\n| Crack, root | Crack at 3.0 s (beat 5) as a zigzag drawn over 0.12 s; root 3.08-4.8 s; rootlets at 3.9 and 4.25 s. |\n| Shoot | 4.9-6.2 s; the hooked tip (last 120 px curled by up to 2.6 rad) unhooks 5.6-6.4 s; it breaks the surface at 5.4 s (beat 9). |\n| Leaves, sun | Leaves spring open at 6.3 / 6.6 s (beats 10.5, 11) with about 20 % overshoot; the sun pops in at 6.45 s and its rays turn at 0.25 rad/s (the only idle motion). |\n| Labels | Lines rise out of a mask (1.05 line-heights → 0 in 0.45 s, 0.08 s stagger); the bar wipes in over 0.3 s; exit upward in 0.18 s. **Labels appear only during camera holds.** |\n| End | Pull-back 7.2-7.9 s; \"Seedling.\" enters at 7.75 s when the camera is about 95 % settled; caption at 8.0 s; hold to 9.0 s. |\n\n## How the composition develops\nSky → soil → deep soil → back up through the surface → the whole plant. The camera goes where the action is, holds while a label is read, and moves on; the seed is the continuity object that never leaves the frame's story.\n\n## Individual assets\n| Asset | File | Source |\n|---|---|---|\n| Paper | `assets/layers/static/01_paper.png` | `draw()` |\n| Layers | per time `02_sun`, `03_soil`, `04_plant`, `05_type` at 0.9, 2.6, 4.4, 6.0 and 8.6 s (camera applied) | `drawLayer()` |\n| Cracked seed, sun badge, leaf pair | `assets/components/seed-cracked.png`, `sun.png`, `leaf-pair.png` | `drawSeed()`, `drawSun()`, `drawLeaf()` |\n| Label with key-word bar | `assets/components/label-key-word.png` | `label()` |\n| Palette swatches | `assets/components/palette.png` | `C` |\n| Root and rootlet paths | `assets/paths/` | `ROOT`, `ROOTLETS` |\n\n## Sound\n**Score:** C major pentatonic at 100 BPM: plucked (Karplus-Strong) chords per bar (C · Am · F · C), a round bass, and a kalimba melody on story beats. Kick and clap enter only when the seed lands.\n\n| Event | Sound |\n|---|---|\n| Seed falls / lands | a swelling whoosh / a thunk |\n| Drops | tuned plips C6, E6, G6 + seep bubbles |\n| Crack | a click and pop |\n| Root | a soft creak; small pops for the rootlets |\n| Shoot breaks the surface | a rising swish and rustle |\n| Leaves, sun | two pitched pops; a ding |\n| Each label | a soft paper swipe |\n\nThe music ducks 2-2.5 dB under the drops and the crack. **Stems:** `music`, `drums`, `foley`; `cues.json` holds every event. Measured: −14.6 LUFS, −1.3 dBTP.\n\n## Reusable prompt\n> Create a {9}-second {1080×1920} flat-vector editorial video explaining {subject} to {audience}; takeaway: {takeaway}. Build ONE continuous flat illustrated world (e.g. a cross-section) and tell the story with a single camera that travels through it, move-hold-move, without cuts. Flat fills only: no outlines, gradients, texture or drop shadows; depth by overlap and darker tints. Palette: off-white paper, navy ink, plus 4 subject hues, each with a darker tint. Text column on the left, subject on the right. Headlines in a bold geometric grotesk at about 110 px on screen, sentence case with a full stop; each line rises from a mask; one key word per label gets a highlight bar in the colour of the thing it names. Labels live in the world layer they describe and appear only during camera holds. Springy entrances; the payoff is a camera pull-back plus a one-word title. Score: plucked chords + kalimba + bass at about 100 BPM; one sound per action; duck the music under key SFX.\n\n## Adaptation guidance\n| Change | Safe? | Notes |\n|---|---|---|\n| Subject / world | ✅ | Map the world first: give each beat its own region, then plan the camera path, then the labels. |\n| Palette | ✅ | Keep the paper/ink structure and one darker tint per hue; ≤ 6 hues. |\n| Typeface | ✅ | Any geometric grotesk with a strong 700. |\n| Label timing | ⚠️ | A world-anchored label is placed for one camera state: show it only inside a hold. |\n| Text on coloured bars | ⚠️ | White on light green fails contrast (2.3:1); use ink on light bars. |\n| 16:9 | ✅ | The left-column grid becomes a left third; the camera pans rather than cranes. |\n| Cuts / outlines / gradients | ❌ | They break the style's premise. |\n| **Essential** | , | One world, one camera, flat fills, world-anchored labels, colour-linked highlight bars. |\n\n## Accessibility\n- **Contrast (computed from the palette):** navy on paper 12.5:1; cream on soil 3.2:1 (acceptable only at display size and bold, so soil labels stay ≥ 86 px); navy on the sun bar 8.5:1; white on the water bar 3.4:1; paper on the soil bar 3.4:1. **Weak spot:** white on the leaf-green bar (\"Seedling.\") is 2.3:1; it is a 128 px word that is also readable outside the bar, but a new version should use ink on the bar.\n- **Motion:** no flashes; camera speed peaks at about 0.4 screen-heights per second.\n- **Reading:** every label holds ≥ 1.4 s; mirror the caption in the post description.\n\n## Provenance\n- **Source:** from the library's style catalogue (style 1). No Animate seed was used.\n- **Originality:** all code, artwork and audio are original (2026-10-07).\n- **Fonts:** Space Grotesk, Inter (SIL OFL 1.1, via Fontsource).", "review": { "technical": { "state": "Supplied checks passed", "scope": "Source handoff records complete decode, stream dimensions and audio measurements. Browser playback is checked separately.", "artifactSha256": "754ba62c823440cea387dd13ca67f09fbd6d4a8b1584d671248c692b8455ea26" }, "creative": { "state": "Not independently accepted", "scope": "not independently established", "artifactSha256": "754ba62c823440cea387dd13ca67f09fbd6d4a8b1584d671248c692b8455ea26" }, "listening": { "state": "Not verified", "scope": "No perceptual listening pass is established by this library import.", "artifactSha256": "754ba62c823440cea387dd13ca67f09fbd6d4a8b1584d671248c692b8455ea26" }, "reproduction": { "state": "Not tested", "scope": "Source is supplied. Cross-machine cold-start reproduction has not been established.", "artifactSha256": "754ba62c823440cea387dd13ca67f09fbd6d4a8b1584d671248c692b8455ea26" } }, "detailUrl": "https://library.jkylehobson.chatgpt.site/video-library/#family=flat-vector-editorial&example=claude-cloud", "processUrl": "/video-library/process.html?family=flat-vector-editorial&example=claude-cloud", "downloads": { "prompt": { "available": true, "url": "/video-library/prompts/flat-vector-editorial--claude-cloud.txt", "sha256": "0e68524af8717d83c39d8d94379cc42af48ad014052233c638e5aac7d2df5bef", "bytes": 2005, "label": "Reusable, example-specific instructions" }, "video": { "name": "flat-vector-editorial--claude-cloud.mp4", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/flat-vector-editorial--claude-cloud.mp4", "bytes": 2328477, "sha256": "754ba62c823440cea387dd13ca67f09fbd6d4a8b1584d671248c692b8455ea26", "available": true, "label": "2.2 MB" }, "source": { "name": "flat-vector-editorial--claude-cloud--source.zip", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/flat-vector-editorial--claude-cloud--source.zip", "bytes": 7850004, "sha256": "993e46d845dd18df440c17ae14a8026fd4182885506b018cc63df2d7b07a1485", "available": true, "label": "7.5 MB", "contents": [ "editable source", "variant guidance", "source assets", "audio inputs", "dependency declarations", "file manifest" ], "includedFiles": 68, "includedFilePaths": [ "CASE_STUDY.md", "RUN.md", "SKILL.md", "STYLE.md", "assets/components/label-key-word.png", "assets/components/leaf-pair.png", "assets/components/palette.png", "assets/components/seed-cracked.png", "assets/components/sun.png", "assets/layers/static/01_paper.png", "assets/layers/t0.90/02_sun.png", "assets/layers/t0.90/03_soil.png", "assets/layers/t0.90/04_plant.png", "assets/layers/t0.90/05_type.png", "assets/layers/t2.60/02_sun.png", "assets/layers/t2.60/03_soil.png", "assets/layers/t2.60/04_plant.png", "assets/layers/t2.60/05_type.png", "assets/layers/t4.40/02_sun.png", "assets/layers/t4.40/03_soil.png", "assets/layers/t4.40/04_plant.png", "assets/layers/t4.40/05_type.png", "assets/layers/t6.00/02_sun.png", "assets/layers/t6.00/03_soil.png", "assets/layers/t6.00/04_plant.png", "assets/layers/t6.00/05_type.png", "assets/layers/t8.60/02_sun.png", "assets/layers/t8.60/03_soil.png", "assets/layers/t8.60/04_plant.png", "assets/layers/t8.60/05_type.png", "assets/paths/root.json", "assets/paths/root.svg", "assets/paths/rootlets.json", "assets/paths/rootlets.svg", "audio/cues.json", "audio/mix.flac", "audio/stems/drums.flac", "audio/stems/music.flac", "audio/stems/sfx.flac", "engine/audio.mjs", "engine/audio/dsp.js", "engine/audio/instruments.js", "engine/audio/sfx.js", "engine/browser.mjs", "engine/export.mjs", "engine/finish.mjs", "engine/lib/draw.js", "engine/lib/util.js", "engine/page.html", "engine/render.mjs", "engine/runtime.js", "engine/server.mjs", "film/contact_sheet.jpg", "film/spectrogram.png", "film/stills/01_0.90s.jpg", "film/stills/02_2.60s.jpg", "film/stills/03_4.40s.jpg", "film/stills/04_6.00s.jpg", "film/stills/05_6.90s.jpg", "film/stills/06_8.60s.jpg", "overview/encoded-contact-sheet.jpg", "package.json", "qa.json", "spec.json", "styles/flat-vector-editorial/scene.js", "styles/flat-vector-editorial/score.js", "styles/flat-vector-editorial/timeline.js", "BUNDLE-GUIDE.md" ], "externalPrerequisites": { "runtime": [ "Node.js", "Chromium or Chrome", "FFmpeg and ffprobe" ], "packageDependencies": { "@fontsource/anton": "^5.1.0", "@fontsource/archivo-black": "^5.1.0", "@fontsource/bangers": "^5.1.0", "@fontsource/bebas-neue": "^5.1.0", "@fontsource/caveat": "^5.1.0", "@fontsource/comic-neue": "^5.3.0", "@fontsource/courier-prime": "^5.3.0", "@fontsource/dm-sans": "^5.1.0", "@fontsource/dm-serif-display": "^5.1.0", "@fontsource/fraunces": "^5.1.0", "@fontsource/ibm-plex-mono": "^5.1.0", "@fontsource/instrument-serif": "^5.1.0", "@fontsource/inter": "^5.1.0", "@fontsource/jetbrains-mono": "^5.1.0", "@fontsource/jost": "^5.3.0", "@fontsource/kaushan-script": "^5.3.0", "@fontsource/nunito": "^5.1.0", "@fontsource/permanent-marker": "^5.1.0", "@fontsource/playfair-display": "^5.1.0", "@fontsource/press-start-2p": "^5.1.0", "@fontsource/space-grotesk": "^5.1.0", "@fontsource/space-mono": "^5.1.0", "@fontsource/stix-two-text": "^5.3.0", "@fontsource/syne": "^5.1.0", "@fontsource/vt323": "^5.1.0", "three": "0.170.0", "playwright": "1.56.1" }, "lockfileIncluded": false, "coldStart": false }, "license": { "summary": "User-directed publication of supplied authored source; preserve listed third-party notices; no new license granted here.", "includedNoticePaths": [], "newLicenseGranted": false } }, "bundle": { "name": "flat-vector-editorial--claude-cloud--full.zip", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/flat-vector-editorial--claude-cloud--full.zip", "bytes": 10188653, "sha256": "376be94c41231997b9258d0da172dce0e3e622ed74aac30d48227ba69691e516", "available": true, "label": "9.7 MB", "contents": [ "selected master", "editable source", "variant guidance", "source assets", "audio inputs", "dependency declarations", "file manifest", "designed cover", "starter prompt" ], "includedFiles": 71, "includedFilePaths": [ "CASE_STUDY.md", "RUN.md", "SKILL.md", "STYLE.md", "assets/components/label-key-word.png", "assets/components/leaf-pair.png", "assets/components/palette.png", "assets/components/seed-cracked.png", "assets/components/sun.png", "assets/layers/static/01_paper.png", "assets/layers/t0.90/02_sun.png", "assets/layers/t0.90/03_soil.png", "assets/layers/t0.90/04_plant.png", "assets/layers/t0.90/05_type.png", "assets/layers/t2.60/02_sun.png", "assets/layers/t2.60/03_soil.png", "assets/layers/t2.60/04_plant.png", "assets/layers/t2.60/05_type.png", "assets/layers/t4.40/02_sun.png", "assets/layers/t4.40/03_soil.png", "assets/layers/t4.40/04_plant.png", "assets/layers/t4.40/05_type.png", "assets/layers/t6.00/02_sun.png", "assets/layers/t6.00/03_soil.png", "assets/layers/t6.00/04_plant.png", "assets/layers/t6.00/05_type.png", "assets/layers/t8.60/02_sun.png", "assets/layers/t8.60/03_soil.png", "assets/layers/t8.60/04_plant.png", "assets/layers/t8.60/05_type.png", "assets/paths/root.json", "assets/paths/root.svg", "assets/paths/rootlets.json", "assets/paths/rootlets.svg", "audio/cues.json", "audio/mix.flac", "audio/stems/drums.flac", "audio/stems/music.flac", "audio/stems/sfx.flac", "display/cover.webp", "engine/audio.mjs", "engine/audio/dsp.js", "engine/audio/instruments.js", "engine/audio/sfx.js", "engine/browser.mjs", "engine/export.mjs", "engine/finish.mjs", "engine/lib/draw.js", "engine/lib/util.js", "engine/page.html", "engine/render.mjs", "engine/runtime.js", "engine/server.mjs", "film/contact_sheet.jpg", "film/flat-vector-editorial.mp4", "film/spectrogram.png", "film/stills/01_0.90s.jpg", "film/stills/02_2.60s.jpg", "film/stills/03_4.40s.jpg", "film/stills/04_6.00s.jpg", "film/stills/05_6.90s.jpg", "film/stills/06_8.60s.jpg", "overview/encoded-contact-sheet.jpg", "package.json", "qa.json", "spec.json", "starter-prompt.txt", "styles/flat-vector-editorial/scene.js", "styles/flat-vector-editorial/score.js", "styles/flat-vector-editorial/timeline.js", "BUNDLE-GUIDE.md" ], "externalPrerequisites": { "runtime": [ "Node.js", "Chromium or Chrome", "FFmpeg and ffprobe" ], "packageDependencies": { "@fontsource/anton": "^5.1.0", "@fontsource/archivo-black": "^5.1.0", "@fontsource/bangers": "^5.1.0", "@fontsource/bebas-neue": "^5.1.0", "@fontsource/caveat": "^5.1.0", "@fontsource/comic-neue": "^5.3.0", "@fontsource/courier-prime": "^5.3.0", "@fontsource/dm-sans": "^5.1.0", "@fontsource/dm-serif-display": "^5.1.0", "@fontsource/fraunces": "^5.1.0", "@fontsource/ibm-plex-mono": "^5.1.0", "@fontsource/instrument-serif": "^5.1.0", "@fontsource/inter": "^5.1.0", "@fontsource/jetbrains-mono": "^5.1.0", "@fontsource/jost": "^5.3.0", "@fontsource/kaushan-script": "^5.3.0", "@fontsource/nunito": "^5.1.0", "@fontsource/permanent-marker": "^5.1.0", "@fontsource/playfair-display": "^5.1.0", "@fontsource/press-start-2p": "^5.1.0", "@fontsource/space-grotesk": "^5.1.0", "@fontsource/space-mono": "^5.1.0", "@fontsource/stix-two-text": "^5.3.0", "@fontsource/syne": "^5.1.0", "@fontsource/vt323": "^5.1.0", "three": "0.170.0", "playwright": "1.56.1" }, "lockfileIncluded": false, "coldStart": false }, "license": { "summary": "User-directed publication of supplied authored source; preserve listed third-party notices; no new license granted here.", "includedNoticePaths": [], "newLicenseGranted": false } } }, "cadenceNote": "Encoded fps describes the file. Scene evaluation and held actor poses depend on this source recipe.", "starterPrompt": "Create a {9}-second {1080×1920} flat-vector editorial video explaining {subject} to {audience}; takeaway: {takeaway}. Build ONE continuous flat illustrated world (e.g. a cross-section) and tell the story with a single camera that travels through it, move-hold-move, without cuts. Flat fills only: no outlines, gradients, texture or drop shadows; depth by overlap and darker tints. Palette: off-white paper, navy ink, plus 4 subject hues, each with a darker tint. Text column on the left, subject on the right. Headlines in a bold geometric grotesk at about 110 px on screen, sentence case with a full stop; each line rises from a mask; one key word per label gets a highlight bar in the colour of the thing it names. Labels live in the world layer they describe and appear only during camera holds. Springy entrances; the payoff is a camera pull-back plus a one-word title. Score: plucked chords + kalimba + bass at about 100 BPM; one sound per action; duck the music under key SFX.\n\nSelected example: Seed to Seedling\nFamily: flat-vector-editorial\nVariant: claude-cloud\nTypography: Space Grotesk 700, Inter 600\nProduction: canvas-2d\nExact reference master SHA-256: 754ba62c823440cea387dd13ca67f09fbd6d4a8b1584d671248c692b8455ea26\n\nRead the selected STYLE.md, SKILL.md and reproduction instructions before adapting. Keep the declared renderer and source closure; do not assume another family variant has interchangeable parameters. Preserve exact font or custom glyph sources, color roles, spatial continuity and readable text. Record encoded frame rate, scene evaluation and held poses separately. Review the changed render visually and listen to the encoded audio before claiming those checks passed. Existing approval applies only to its recorded artifact.\n\nSuccess check: the adapted story is clear; key type remains readable in motion; the source rebuilds with its declared inputs; all media and review records identify the exact output. State any untested reproduction, listening or rights limits.", "downloadNote": "Downloads match this selected example. The full bundle includes its source, original video, cover and starter prompt. Source packages include artwork, audio inputs and dependency declarations. Requires Node.js, Chromium or Chrome, FFmpeg and ffprobe. Follow the included run guide for package installation and reproduction limits.", "model": "Opus 5.5", "reasoningEffort": "Extra" } ], "relatedMethodIds": [] }, { "id": "generative-particles", "slug": "generative-particles", "title": "Generative Particles", "premise": "Points of light gather, drift and reorganize into a subject, making emergence part of the story.", "summary": "Points of light gather, drift and reorganize into a subject, making emergence part of the story.", "category": "Generative / creative coding", "defaultExampleId": "claude-cloud", "facets": { "material": [ "2d", "particles", "additive", "glow", "flow-field", "swarm", "particle-text", "deep-navy", "ambient", "pure-function" ], "producer": [ "Claude Cloud" ], "format": [ "Portrait" ], "motion": [], "useCase": [] }, "examples": [ { "id": "claude-cloud", "title": "Seed to Seedling", "producer": "Claude Cloud", "producerEvidence": "The displayed model and reasoning label identify this production lane. Exact runtime model ID and per-film cost are not established by the source packet.", "relationship": "Original family example", "format": "Portrait", "productionMethod": "canvas-2d", "master": { "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/generative-particles--claude-cloud.mp4", "sha256": "9fc7796b0d96f2fec8ff343a6743298f03964b59fbc3ce86f53a4a3003de1408", "bytes": 16803319, "mimeType": "video/mp4", "width": 1080, "height": 1920, "duration": 10.8, "encodedFps": 60 }, "poster": { "url": "/video-library/media/generative-particles--claude-cloud/cover.webp", "sha256": "b32ca63c1f79429401aeab2c97f08e21e712ad3747af932ca76cd036cbaa8d2c", "sourceMasterSha256": "9fc7796b0d96f2fec8ff343a6743298f03964b59fbc3ce86f53a4a3003de1408", "timeSeconds": 9.18, "rationale": "Late story beat selected to show the developed subject and visual system; extracted from this exact master." }, "previewVideo": { "url": "/video-library/media/generative-particles--claude-cloud/preview.mp4", "sha256": "a572809cd5978a17b0188300d39d3a430e237b099f24c6be188ac345989e8ee5", "sourceMasterSha256": "9fc7796b0d96f2fec8ff343a6743298f03964b59fbc3ce86f53a4a3003de1408", "width": 540, "height": 960, "label": "Playback preview · 540 px wide · full master in Download finished video" }, "gallery": [ { "id": "overview", "role": "encoded-contact-sheet", "label": "Scenes from the finished render · not a planning storyboard", "url": "/video-library/media/generative-particles--claude-cloud/overview.webp", "sourceMasterSha256": "9fc7796b0d96f2fec8ff343a6743298f03964b59fbc3ce86f53a4a3003de1408" }, { "id": "scene-1", "role": "encoded-frame", "label": "Finished-film frame · 2.16 seconds", "url": "/video-library/media/generative-particles--claude-cloud/scene-1.webp", "sourceMasterSha256": "9fc7796b0d96f2fec8ff343a6743298f03964b59fbc3ce86f53a4a3003de1408", "timeSeconds": 2.16 }, { "id": "scene-2", "role": "encoded-frame", "label": "Finished-film frame · 5.4 seconds", "url": "/video-library/media/generative-particles--claude-cloud/scene-2.webp", "sourceMasterSha256": "9fc7796b0d96f2fec8ff343a6743298f03964b59fbc3ce86f53a4a3003de1408", "timeSeconds": 5.4 }, { "id": "scene-3", "role": "encoded-frame", "label": "Finished-film frame · 8.64 seconds", "url": "/video-library/media/generative-particles--claude-cloud/scene-3.webp", "sourceMasterSha256": "9fc7796b0d96f2fec8ff343a6743298f03964b59fbc3ce86f53a4a3003de1408", "timeSeconds": 8.64 } ], "typography": [ "Jost 600", "Jost 500" ], "palette": { "bg": "#05070d", "bg2": "#0d1426", "seed": [ 255, 196, 110 ], "water": [ 110, 200, 255 ], "root": [ 255, 226, 170 ], "plant": [ 140, 255, 160 ], "sun": [ 255, 214, 120 ], "soil": [ 150, 100, 60 ], "dust": [ 200, 214, 255 ], "title": [ 255, 255, 255 ] }, "usageGuidance": "Change the subject, copy and timing for your audience. Retain the selected example’s visual rules and recheck the entire reading interval after changes.", "styleRules": "---\nid: generative-particles\nname: Generative Particles (Seed to Seedling: a swarm that grows)\nfamily: generative / creative coding\naliases: [particle system, swarm, generative art, flow field, particle typography, data dust, creative coding]\ntags: [2d, particles, additive, glow, flow-field, swarm, particle-text, deep-navy, ambient, pure-function]\nkind: visual-style\nroute: canvas-2d (CPU canvas; ~9,000 particles as pure functions of t, colour/alpha-bucketed additive rects, trail samples, half-res bloom)\nreadiness: { research: catalog-candidate, rights: original-work, referenceImages: own-render, code: built, render: rendered-and-measured }\n---\n\n# Generative Particles (Seed to Seedling: a swarm that grows)\n\nAbout 9,000 points of light drift on deep navy like dust in a slow current.\n- **The seed:** the dust gathers, each particle on its own staggered, swirling flight, and condenses into a glowing gold seed above a faint horizon of amber soil particles.\n- **01 Water:** blue rain streaks down and is drawn into the seed, turning gold as it is absorbed; the seed swells.\n- **02 Root:** particles peel off the bottom of the seed and stream down branching paths behind a growing front, like light flowing through veins.\n- **03 Light:** a green swarm rises out of the seed to build the stem and two leaves, and a sun blooms at the upper right as a disc and a slowly turning ring.\n- **Ending:** the leftover dust and rain fly up and assemble into the title.\n\n**The one rule:** *everything is made of the same particles.* No lines, fills or text are drawn directly. Every shape is a swarm that converges on sampled target points, and every change is a migration.\n\n## Creative direction\n- **Audience:** tech, AI and science brands, data and climate stories, music and installations, keynote openers.\n- **Purpose:** show transformation and emergence: many small things becoming one form.\n- **Feeling:** wondrous, calm, alive; a night sky that organises itself.\n- **Central visual idea:** *growth as self-organisation.* A seed is a swarm agreeing on a shape; water joins it; roots are flows; leaves are where the swarm lands next.\n- **How the parts work together:**\n - *Composition:* a centred vertical (seed on the horizon, root below, plant above), with the sun at upper right and the title at the top.\n - *Colour:* additive light on navy, one hue per role (gold seed, blue water, cream root, green leaves, warm sun, white title).\n - *Type:* the title is particles (sampled text); small captions in a quiet geometric sans.\n - *Motion:* drift, gather, stream, bloom.\n - *Sound:* an ambient shimmer whose grain density follows the swarm.\n\n## Fit\n- **Best for:** brand idents and openers, AI/data/network metaphors, environmental and scientific emergence stories, generative-art showcases, ambient loops.\n- **Avoid when:** you need precise information, hard edges, a strong character or narrative clarity at small sizes; or for print/stills, where the motion is the point.\n- **Cost:** about 9,000 particles × up to 3 samples per frame plus a bloom, a few minutes for 648 frames with 2-3 workers. Particles are batched by colour and alpha (one `fillStyle` per bucket).\n\n## Visual fingerprint\n| Element | Rule |\n|---|---|\n| Ground | Radial navy gradient `#0d1426 → #05070d`; a soil band of 1,700 dim amber particles below y 1150, plus a denser horizon line of 320 at 50 %. |\n| Particles | 1.5-3 px squares, additive (`lighter`). Roles and colours: core/seed `[255,196,110]`, water `[110,200,255]`, root `[255,226,170]`, plant `[140,255,160]`, sun `[255,214,120]`, dust `[200,214,255]`, title `[255,255,255]`. |\n| Counts | Core 2,200 · water 900 · title dust 2,400 · root 1,400 · soil 1,700 · sun 500 (≈ 9,100). |\n| Ambient drift | Base + (noise(x·0.0016 + φ, 0.12 t) − 0.5)·amp + a slow sine, rising 6 px/s; amp 140 (core/root) or 220 (dust). |\n| Flights | lerp(from, to, easeInOutCubic(k)) + swirl·sin(πk), with a per-particle swirl of ±120-340 px and a stagger of 0-0.6 s. Paths curve differently for every particle and land exactly. |\n| Targets | Seed: points sampled inside a 270-px bean (×1.16 swell, 3 px breathing noise). Stem: 520 samples along the polyline (±8 px). Leaves: 900 samples inside two bezier leaves. Sun: 60 % disc (r ≤ 80) and 40 % ring (r 125, turning 0.25 rad/s). Title: text pixels of Jost 600 128 px on a 4-px grid. |\n| Streams | Root particles move along their branch at u = ((o + v·(t − start)) mod 1) × growth(t), with v 0.18-0.43 and a perpendicular jitter ≤ 9 px tapering to the tip. Half run on the main root, half on four rootlets. |\n| Rain | Falls at 1,500 px/s from above the frame, then is absorbed at the horizon into seed targets over 0.55 s (blue → gold). Falling drops get tight trail samples (8/16 ms) so they read as streaks. |\n| Light | Two trail samples (25/50 ms at 45 %/20 %) on anything moving > 1.5 px/frame; a half-res copy blurred 7 px and added at 55 % (bloom). |\n\n### Typography (exact)\n| Role | Family / weight | Size | Placement | Behaviour |\n|---|---|---|---|---|\n| Title (particles) | Jost 600, *sampled* | 128 px glyphs, 4-px sampling grid | Centred, baselines 230 / 390: FROM SEED / TO SEEDLING | 3,300 particles (rain + dust) fly in with a 0-0.45 s stagger over 1 s; assembled dots grow to 3 px |\n| Captions | Jost 500 | 30 px, tracking 8 | White 72 %, centred at y 1862: 01 · WATER, 02 · ROOT, 03 · LIGHT | Fade in 0.35 s, out 0.3 s |\n| Note | Jost 500 | 26 px, tracking 4 | White 60 %, same position | Fades in at 9.6 s |\n\n## Temporal fingerprint\n| Element | Rule |\n|---|---|\n| Beats (72 BPM, free-floating) | Dust 0-0.7 s · condense 0.7-2.0 · rain 1.9-3.4 (swell 2.4-3.6) · root 3.7-5.9, rootlets 4.3 / 4.6 / 4.9 / 5.2 (+0.8 s each) · plant 5.8-7.6 · sun 6.6-7.8 · title 8.0-9.4 · note 9.6 · end 10.8. |\n| Overlaps | Every phase overlaps the next by 0.1-0.3 s, so the swarm is never fully at rest until the end. |\n| Determinism | Each particle's state is a pure function of t and its seeded parameters, so any frame renders alone and trails are just earlier evaluations of the same function. |\n\n## How the composition develops\nIt starts formless, with even dust across the frame. Mass gathers to one bright point on the horizon (the seed). Then it extends downward (root streams), then upward (stem and leaves), then sideways and up (sun at right, title at top). The frame fills from the centre outward, and the last thing to form is the words.\n\n## Individual assets\n| Asset | File | Source |\n|---|---|---|\n| Background gradient | `assets/layers/static/01_background.png`, `assets/textures/background-gradient.png` | setup |\n| Condensed seed / grown seedling / particle title / sun bloom (transparent) | `assets/components/seed-swarm.png`, `seedling-swarm.png`, `particle-title.png`, `sun-bloom.png` | `particles()` at fixed times |\n| Layers | per time `02_soil`, `03_plant`, `04_title`, `05_captions` at 1.9, 3.0, 5.0, 7.4 and 10.4 s | `drawLayer()` (no bloom on separated layers; add it in compositing) |\n| Paths | `assets/paths/stem.json/.svg`, `mainRoot.json/.svg` | `STEM`, `ROOTS[0]` |\n\n**Make new shapes:** any closed path (`sampleIn()`), polyline (`along()`) or text (`textPoints()`) becomes a target set; give each particle a role, a target and a stagger.\n\n## Sound\n**Score:** an ambient, free-floating 72 BPM in A major with Lydian colour (D♯). A shimmering pad moves A → F♯m(add9) → A(add9), with slow bell clusters at each phase.\n\n**Sonified events:**\n| Event | Sound |\n|---|---|\n| Throughout | granular sparkle grains whose density follows the swarm (sparse dust, dense at the condense, the swarm rise and the title) |\n| Seed formed | a bell |\n| Rain | a droplet patter |\n| Root | a sub swell plus a pluck per branch (E3 for the main root, then C♯3 B2 A2 F♯2: lower is deeper) |\n| Swarm rising | an ascending A-Lydian kalimba arpeggio |\n| Sun | a bloom chord |\n| Title | a glistening noise rise resolving on A add9 |\n\n**Stems:** `music` and `sparkle` (with dotted-8th delay). The mix targets −16 LUFS.\n\n## Reusable prompt\n> Create a {10}-second {1080×1920} generative particle animation of {transformation}. ~9,000 small additive light particles on a deep navy gradient; every shape is a swarm converging on sampled target points (inside paths, along polylines, on text pixels); no drawn lines or fills. Ambient drift in a slow noise field, then staggered eased flights with a per-particle swirl that peaks mid-flight. One colour per role (gold, blue, cream, green, warm white). Flows stream along paths behind a growing front. Short motion trails and a soft bloom. The title assembles from the leftover particles. Sound: ambient shimmer whose grain density follows the swarm, with sonified events.\n\n## Adaptation guidance\n| Change | Safe? | Notes |\n|---|---|---|\n| Subject / shapes | ✅ | Any logo, icon, product silhouette or word can become a target set. |\n| Particle count | ✅ | 4,000-15,000 at 1080×1920; batching keeps cost linear. Below ~4,000, forms look sparse. |\n| Palette | ✅ | Keep additive light on a dark ground; one hue per role. On a light ground use `multiply` and darker particles. |\n| Precise data / small text | ❌ | Swarms are approximate; put exact numbers in real text. |\n| 16:9 | ✅ | Spread the composition horizontally (seed left, title right). |\n| **Essential** | , | One material for everything (particles), sampled targets, staggered swirling flights, flows along paths, additive glow, the title made of the same swarm. |\n\n## Accessibility\n- **Contrast:** the particle title is ≥ 90 % white dots on navy (very high), but it is a dotted form, so repeat the title in the description or caption.\n- **Motion:** no flashes. The motion is constant and gentle; the fastest movement is the rain.\n- **Captions:** at 72 % white on navy, about 10:1.\n\n## Provenance\n- **Source:** from the library's style catalogue. No Animate seed was used.\n- **Originality:** all code, sampling, motion and audio are original (2026-10-08). It draws on the general creative-coding practice of flow fields and particle typography; no specific artwork was copied.\n- **Fonts:** Jost (SIL OFL).", "review": { "technical": { "state": "Supplied checks passed", "scope": "Source handoff records complete decode, stream dimensions and audio measurements. Browser playback is checked separately.", "artifactSha256": "9fc7796b0d96f2fec8ff343a6743298f03964b59fbc3ce86f53a4a3003de1408" }, "creative": { "state": "Not independently accepted", "scope": "not independently established", "artifactSha256": "9fc7796b0d96f2fec8ff343a6743298f03964b59fbc3ce86f53a4a3003de1408" }, "listening": { "state": "Not verified", "scope": "No perceptual listening pass is established by this library import.", "artifactSha256": "9fc7796b0d96f2fec8ff343a6743298f03964b59fbc3ce86f53a4a3003de1408" }, "reproduction": { "state": "Not tested", "scope": "Source is supplied. Cross-machine cold-start reproduction has not been established.", "artifactSha256": "9fc7796b0d96f2fec8ff343a6743298f03964b59fbc3ce86f53a4a3003de1408" } }, "detailUrl": "https://library.jkylehobson.chatgpt.site/video-library/#family=generative-particles&example=claude-cloud", "processUrl": "/video-library/process.html?family=generative-particles&example=claude-cloud", "downloads": { "prompt": { "available": true, "url": "/video-library/prompts/generative-particles--claude-cloud.txt", "sha256": "f78a477fa7f40d9e75c39cc9d5442c0d9f1318b5b097c261a2972c380e100c7e", "bytes": 1686, "label": "Reusable, example-specific instructions" }, "video": { "name": "generative-particles--claude-cloud.mp4", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/generative-particles--claude-cloud.mp4", "bytes": 16803319, "sha256": "9fc7796b0d96f2fec8ff343a6743298f03964b59fbc3ce86f53a4a3003de1408", "available": true, "label": "16.0 MB" }, "source": { "name": "generative-particles--claude-cloud--source.zip", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/generative-particles--claude-cloud--source.zip", "bytes": 12467680, "sha256": "2336938347f237eec13a941aabfe1e5f0bfa9e0514fded7451007be9dbabbaa8", "available": true, "label": "11.9 MB", "contents": [ "editable source", "variant guidance", "source assets", "audio inputs", "dependency declarations", "file manifest" ], "includedFiles": 67, "includedFilePaths": [ "CASE_STUDY.md", "RUN.md", "SKILL.md", "STYLE.md", "assets/components/particle-title.png", "assets/components/seed-swarm.png", "assets/components/seedling-swarm.png", "assets/components/sun-bloom.png", "assets/layers/static/01_background.png", "assets/layers/t1.90/02_soil.png", "assets/layers/t1.90/03_plant.png", "assets/layers/t1.90/04_title.png", "assets/layers/t1.90/05_captions.png", "assets/layers/t10.40/02_soil.png", "assets/layers/t10.40/03_plant.png", "assets/layers/t10.40/04_title.png", "assets/layers/t10.40/05_captions.png", "assets/layers/t3.00/02_soil.png", "assets/layers/t3.00/03_plant.png", "assets/layers/t3.00/04_title.png", "assets/layers/t3.00/05_captions.png", "assets/layers/t5.00/02_soil.png", "assets/layers/t5.00/03_plant.png", "assets/layers/t5.00/04_title.png", "assets/layers/t5.00/05_captions.png", "assets/layers/t7.40/02_soil.png", "assets/layers/t7.40/03_plant.png", "assets/layers/t7.40/04_title.png", "assets/layers/t7.40/05_captions.png", "assets/paths/mainRoot.json", "assets/paths/mainRoot.svg", "assets/paths/stem.json", "assets/paths/stem.svg", "assets/textures/background-gradient.png", "audio/cues.json", "audio/mix.flac", "audio/stems/music.flac", "audio/stems/sparkle.flac", "engine/audio.mjs", "engine/audio/dsp.js", "engine/audio/instruments.js", "engine/audio/sfx.js", "engine/browser.mjs", "engine/export.mjs", "engine/finish.mjs", "engine/lib/draw.js", "engine/lib/util.js", "engine/page.html", "engine/render.mjs", "engine/runtime.js", "engine/server.mjs", "film/contact_sheet.jpg", "film/spectrogram.png", "film/stills/01_0.60s.jpg", "film/stills/02_1.90s.jpg", "film/stills/03_3.00s.jpg", "film/stills/04_5.00s.jpg", "film/stills/05_7.40s.jpg", "film/stills/06_10.40s.jpg", "overview/encoded-contact-sheet.jpg", "package.json", "qa.json", "spec.json", "styles/generative-particles/scene.js", "styles/generative-particles/score.js", "styles/generative-particles/timeline.js", "BUNDLE-GUIDE.md" ], "externalPrerequisites": { "runtime": [ "Node.js", "Chromium or Chrome", "FFmpeg and ffprobe" ], "packageDependencies": { "@fontsource/anton": "^5.1.0", "@fontsource/archivo-black": "^5.1.0", "@fontsource/bangers": "^5.1.0", "@fontsource/bebas-neue": "^5.1.0", "@fontsource/caveat": "^5.1.0", "@fontsource/comic-neue": "^5.3.0", "@fontsource/courier-prime": "^5.3.0", "@fontsource/dm-sans": "^5.1.0", "@fontsource/dm-serif-display": "^5.1.0", "@fontsource/fraunces": "^5.1.0", "@fontsource/ibm-plex-mono": "^5.1.0", "@fontsource/instrument-serif": "^5.1.0", "@fontsource/inter": "^5.1.0", "@fontsource/jetbrains-mono": "^5.1.0", "@fontsource/jost": "^5.3.0", "@fontsource/kaushan-script": "^5.3.0", "@fontsource/nunito": "^5.1.0", "@fontsource/permanent-marker": "^5.1.0", "@fontsource/playfair-display": "^5.1.0", "@fontsource/press-start-2p": "^5.1.0", "@fontsource/space-grotesk": "^5.1.0", "@fontsource/space-mono": "^5.1.0", "@fontsource/stix-two-text": "^5.3.0", "@fontsource/syne": "^5.1.0", "@fontsource/vt323": "^5.1.0", "three": "0.170.0", "playwright": "1.56.1" }, "lockfileIncluded": false, "coldStart": false }, "license": { "summary": "User-directed publication of supplied authored source; preserve listed third-party notices; no new license granted here.", "includedNoticePaths": [], "newLicenseGranted": false } }, "bundle": { "name": "generative-particles--claude-cloud--full.zip", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/generative-particles--claude-cloud--full.zip", "bytes": 29328758, "sha256": "3704374c29c2bb8c709e533f7b63d5e14ca21ed8b6df05c81f439d0eb62db2f8", "available": true, "label": "28.0 MB", "contents": [ "selected master", "editable source", "variant guidance", "source assets", "audio inputs", "dependency declarations", "file manifest", "designed cover", "starter prompt" ], "includedFiles": 70, "includedFilePaths": [ "CASE_STUDY.md", "RUN.md", "SKILL.md", "STYLE.md", "assets/components/particle-title.png", "assets/components/seed-swarm.png", "assets/components/seedling-swarm.png", "assets/components/sun-bloom.png", "assets/layers/static/01_background.png", "assets/layers/t1.90/02_soil.png", "assets/layers/t1.90/03_plant.png", "assets/layers/t1.90/04_title.png", "assets/layers/t1.90/05_captions.png", "assets/layers/t10.40/02_soil.png", "assets/layers/t10.40/03_plant.png", "assets/layers/t10.40/04_title.png", "assets/layers/t10.40/05_captions.png", "assets/layers/t3.00/02_soil.png", "assets/layers/t3.00/03_plant.png", "assets/layers/t3.00/04_title.png", "assets/layers/t3.00/05_captions.png", "assets/layers/t5.00/02_soil.png", "assets/layers/t5.00/03_plant.png", "assets/layers/t5.00/04_title.png", "assets/layers/t5.00/05_captions.png", "assets/layers/t7.40/02_soil.png", "assets/layers/t7.40/03_plant.png", "assets/layers/t7.40/04_title.png", "assets/layers/t7.40/05_captions.png", "assets/paths/mainRoot.json", "assets/paths/mainRoot.svg", "assets/paths/stem.json", "assets/paths/stem.svg", "assets/textures/background-gradient.png", "audio/cues.json", "audio/mix.flac", "audio/stems/music.flac", "audio/stems/sparkle.flac", "display/cover.webp", "engine/audio.mjs", "engine/audio/dsp.js", "engine/audio/instruments.js", "engine/audio/sfx.js", "engine/browser.mjs", "engine/export.mjs", "engine/finish.mjs", "engine/lib/draw.js", "engine/lib/util.js", "engine/page.html", "engine/render.mjs", "engine/runtime.js", "engine/server.mjs", "film/contact_sheet.jpg", "film/generative-particles.mp4", "film/spectrogram.png", "film/stills/01_0.60s.jpg", "film/stills/02_1.90s.jpg", "film/stills/03_3.00s.jpg", "film/stills/04_5.00s.jpg", "film/stills/05_7.40s.jpg", "film/stills/06_10.40s.jpg", "overview/encoded-contact-sheet.jpg", "package.json", "qa.json", "spec.json", "starter-prompt.txt", "styles/generative-particles/scene.js", "styles/generative-particles/score.js", "styles/generative-particles/timeline.js", "BUNDLE-GUIDE.md" ], "externalPrerequisites": { "runtime": [ "Node.js", "Chromium or Chrome", "FFmpeg and ffprobe" ], "packageDependencies": { "@fontsource/anton": "^5.1.0", "@fontsource/archivo-black": "^5.1.0", "@fontsource/bangers": "^5.1.0", "@fontsource/bebas-neue": "^5.1.0", "@fontsource/caveat": "^5.1.0", "@fontsource/comic-neue": "^5.3.0", "@fontsource/courier-prime": "^5.3.0", "@fontsource/dm-sans": "^5.1.0", "@fontsource/dm-serif-display": "^5.1.0", "@fontsource/fraunces": "^5.1.0", "@fontsource/ibm-plex-mono": "^5.1.0", "@fontsource/instrument-serif": "^5.1.0", "@fontsource/inter": "^5.1.0", "@fontsource/jetbrains-mono": "^5.1.0", "@fontsource/jost": "^5.3.0", "@fontsource/kaushan-script": "^5.3.0", "@fontsource/nunito": "^5.1.0", "@fontsource/permanent-marker": "^5.1.0", "@fontsource/playfair-display": "^5.1.0", "@fontsource/press-start-2p": "^5.1.0", "@fontsource/space-grotesk": "^5.1.0", "@fontsource/space-mono": "^5.1.0", "@fontsource/stix-two-text": "^5.3.0", "@fontsource/syne": "^5.1.0", "@fontsource/vt323": "^5.1.0", "three": "0.170.0", "playwright": "1.56.1" }, "lockfileIncluded": false, "coldStart": false }, "license": { "summary": "User-directed publication of supplied authored source; preserve listed third-party notices; no new license granted here.", "includedNoticePaths": [], "newLicenseGranted": false } } }, "cadenceNote": "Encoded fps describes the file. Scene evaluation and held actor poses depend on this source recipe.", "starterPrompt": "Create a {10}-second {1080×1920} generative particle animation of {transformation}. ~9,000 small additive light particles on a deep navy gradient; every shape is a swarm converging on sampled target points (inside paths, along polylines, on text pixels); no drawn lines or fills. Ambient drift in a slow noise field, then staggered eased flights with a per-particle swirl that peaks mid-flight. One colour per role (gold, blue, cream, green, warm white). Flows stream along paths behind a growing front. Short motion trails and a soft bloom. The title assembles from the leftover particles. Sound: ambient shimmer whose grain density follows the swarm, with sonified events.\n\nSelected example: Seed to Seedling\nFamily: generative-particles\nVariant: claude-cloud\nTypography: Jost 600, Jost 500\nProduction: canvas-2d\nExact reference master SHA-256: 9fc7796b0d96f2fec8ff343a6743298f03964b59fbc3ce86f53a4a3003de1408\n\nRead the selected STYLE.md, SKILL.md and reproduction instructions before adapting. Keep the declared renderer and source closure; do not assume another family variant has interchangeable parameters. Preserve exact font or custom glyph sources, color roles, spatial continuity and readable text. Record encoded frame rate, scene evaluation and held poses separately. Review the changed render visually and listen to the encoded audio before claiming those checks passed. Existing approval applies only to its recorded artifact.\n\nSuccess check: the adapted story is clear; key type remains readable in motion; the source rebuilds with its declared inputs; all media and review records identify the exact output. State any untested reproduction, listening or rights limits.", "downloadNote": "Downloads match this selected example. The full bundle includes its source, original video, cover and starter prompt. Source packages include artwork, audio inputs and dependency declarations. Requires Node.js, Chromium or Chrome, FFmpeg and ffprobe. Follow the included run guide for package installation and reproduction limits.", "model": "Opus 5.5", "reasoningEffort": "Extra" } ], "relatedMethodIds": [] }, { "id": "geometric-abstraction", "slug": "geometric-abstraction", "title": "Geometric Abstraction", "premise": "Circles, bars, triangles and large type assemble like a modernist poster, with color overlaps and beat-driven movement.", "summary": "Circles, bars, triangles and large type assemble like a modernist poster, with color overlaps and beat-driven movement.", "category": "Graphic design / modernist poster", "defaultExampleId": "claude-cloud", "facets": { "material": [ "2d", "geometric", "primary-colours", "overprint", "multiply", "grid", "big-type", "beat-locked", "expo-ease", "minimal" ], "producer": [ "Claude Cloud" ], "format": [ "Portrait" ], "motion": [], "useCase": [] }, "examples": [ { "id": "claude-cloud", "title": "Seed to Seedling", "producer": "Claude Cloud", "producerEvidence": "The displayed model and reasoning label identify this production lane. Exact runtime model ID and per-film cost are not established by the source packet.", "relationship": "Original family example", "format": "Portrait", "productionMethod": "canvas-2d", "master": { "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/geometric-abstraction--claude-cloud.mp4", "sha256": "43e1f20143bda0906da8507069a1207e8212874c2ce4dd3cdc71bd3055d4287a", "bytes": 1186576, "mimeType": "video/mp4", "width": 1080, "height": 1920, "duration": 10.0, "encodedFps": 60 }, "poster": { "url": "/video-library/media/geometric-abstraction--claude-cloud/cover.webp", "sha256": "b3c7a3b49cb95b817e70d296711f9565ca68cf650294d40b3788d69e191d3f4b", "sourceMasterSha256": "43e1f20143bda0906da8507069a1207e8212874c2ce4dd3cdc71bd3055d4287a", "timeSeconds": 8.5, "rationale": "Late story beat selected to show the developed subject and visual system; extracted from this exact master." }, "previewVideo": { "url": "/video-library/media/geometric-abstraction--claude-cloud/preview.mp4", "sha256": "0b639e8d0c47867b40cf9be510fc9500596b09c24eebd1db8758a8fadffd71d6", "sourceMasterSha256": "43e1f20143bda0906da8507069a1207e8212874c2ce4dd3cdc71bd3055d4287a", "width": 540, "height": 960, "label": "Playback preview · 540 px wide · full master in Download finished video" }, "gallery": [ { "id": "overview", "role": "encoded-contact-sheet", "label": "Scenes from the finished render · not a planning storyboard", "url": "/video-library/media/geometric-abstraction--claude-cloud/overview.webp", "sourceMasterSha256": "43e1f20143bda0906da8507069a1207e8212874c2ce4dd3cdc71bd3055d4287a" }, { "id": "scene-1", "role": "encoded-frame", "label": "Finished-film frame · 2 seconds", "url": "/video-library/media/geometric-abstraction--claude-cloud/scene-1.webp", "sourceMasterSha256": "43e1f20143bda0906da8507069a1207e8212874c2ce4dd3cdc71bd3055d4287a", "timeSeconds": 2.0 }, { "id": "scene-2", "role": "encoded-frame", "label": "Finished-film frame · 5 seconds", "url": "/video-library/media/geometric-abstraction--claude-cloud/scene-2.webp", "sourceMasterSha256": "43e1f20143bda0906da8507069a1207e8212874c2ce4dd3cdc71bd3055d4287a", "timeSeconds": 5.0 }, { "id": "scene-3", "role": "encoded-frame", "label": "Finished-film frame · 8 seconds", "url": "/video-library/media/geometric-abstraction--claude-cloud/scene-3.webp", "sourceMasterSha256": "43e1f20143bda0906da8507069a1207e8212874c2ce4dd3cdc71bd3055d4287a", "timeSeconds": 8.0 } ], "typography": [ "Jost 700", "Jost 500" ], "palette": { "cream": "#f1e9d8", "red": "#d6342c", "yellow": "#f2c230", "blue": "#1f4fa3", "black": "#151515", "grid": "rgba(21,21,21,0.18)" }, "usageGuidance": "Change the subject, copy and timing for your audience. Retain the selected example’s visual rules and recheck the entire reading interval after changes.", "styleRules": "---\nid: geometric-abstraction\nname: Geometric Abstraction (Seed to Seedling: circle, square, triangle)\nfamily: graphic design / modernist poster\naliases: [bauhaus, constructivist, primary shapes, swiss-modernist motion, geometric brand motion]\ntags: [2d, geometric, primary-colours, overprint, multiply, grid, big-type, beat-locked, expo-ease, minimal]\nkind: visual-style\nroute: canvas-2d (CPU canvas; filled primitives + multiply compositing)\nreadiness: { research: research-handoff-candidate, rights: original-work, referenceImages: own-render, code: built, render: rendered-and-measured }\n---\n\n# Geometric Abstraction (Seed to Seedling: circle, square, triangle)\n\nA modernist poster that assembles itself to a beat. Only circles, half-circles, bars, triangles and huge words appear, in red, yellow, blue and black on cream, on a visible 12-column grid. Coloured shapes **overprint** (multiply), so overlaps make new colours the way inks do on a press.\n- **Setting up:** the grid draws in, a black ground bar slams in from the left, and a red circle (the seed) drops onto its spot below the bar.\n- **01 WATER:** a vertical blue word rises up the left edge. Blue half-moons fall on the beats, and the circle steps up 10 % on each landing.\n- **02 ROOT:** a vertical black word drops down the right edge. The root steps down beneath the seed as a staircase of black bars, one per 8th note, ending in a small red square.\n- **03 LIGHT:** the word slides across the top, and a huge yellow disc swings in from the top right and overprints it. Four black rays fall toward the plant; a yellow triangle (the shoot) rises through the bar; two blue half-moon leaves hinge open.\n- **Ending:** the words leave the way they came, and the title arrives over the sun: **FROM SEED / TO SEEDLING**.\n\n**The one rule:** *every element is a primary shape, and every arrival lands exactly on the beat.* There are no outlines, textures, gradients or idle motion. Meaning comes from placement, colour and rhythm alone.\n\n## Creative direction\n- **Audience:** brand and identity teams, music, culture and arts institutions, design-literate audiences, and title sequences.\n- **Purpose:** turn a story into a rhythmic visual system. Each concept becomes a shape and a colour, and the composition rebalances on every beat.\n- **Feeling:** confident, playful, rational and musical, like a poster you can hear.\n- **Central visual idea:** *growth as a composition.* The seedling is a sentence written in a shape alphabet: red circle = seed, blue half-moon = water and leaf, black bar = ground and root, yellow triangle = shoot, yellow disc = sun.\n- **How the parts work together:**\n - *Composition:* the grid is visible and every element snaps to it. Big asymmetric masses (vertical words on opposite edges, a sun cropped by the frame) balance against the small centred plant.\n - *Colour:* four inks on cream. Overprinting is the only way new colours appear.\n - *Type:* one geometric sans (Jost) at two extremes: massive 250 px words and tiny 40 px tracked numbers.\n - *Motion:* hard exponential arrivals on beats and 8ths, then complete stillness.\n - *Sound:* each shape has its own timbre, so the soundtrack spells the vocabulary.\n\n## Fit\n- **Best for:** brand idents and transitions, music-led promos, event and festival identities, section openers, explaining a system as a set of parts, and title sequences.\n- **Avoid when:** you need photographic truth, emotional nuance or detailed information. Also avoid long reading: words here are shapes first.\n- **Cost:** trivial. 600 frames render in about 12 s; the packet is 7.4 MB.\n\n## Visual fingerprint\n| Element | Rule |\n|---|---|\n| Palette | Cream `#f1e9d8`, red `#d6342c`, yellow `#f2c230`, blue `#1f4fa3`, black `#151515`. Nothing else, except the colours that overprinting makes. |\n| Overprint | Every coloured shape and every word is drawn with `globalCompositeOperation = 'multiply'`. Yellow over black stays black; yellow over blue gives a dark green (the leaf against the sun); yellow over red gives a deeper red. |\n| Grid | 12 columns × 80 px from x 60, plus rows every 160 px; 1.5 px lines at 18 % black. It draws in over the first 0.75 s and stays visible. |\n| Shapes | Filled, with no stroke, apart from the four 8 px rays and the 6 px shoot spine. Seed: circle r 66 at (540, 1310). Ground: bar at y 1170, h 50. Root: 8 bars from `STEPS`, ending in a 56 px red square. Shoot: triangle with an 80 px base rising to y 700. Leaves: half-moons r 110 hinged at (540, 760). Sun: disc r 290 at (820, 470), cropped by the right edge. |\n| Words | Massive and set against the frame edges: WATER vertical (−90°) on the left, ROOT vertical (+90°) on the right, LIGHT across the top. They overprint whatever they cross, including the ground bar. |\n| Numbers | Small tracked 01 / 02 / 03 beside each word, in the word's colour. |\n| Hierarchy | One small hero (the plant at the centre line) against three huge masses (two vertical words and the sun). |\n\n### Typography (exact)\n| Role | Family / weight | Size | Tracking | Placement | Enter / settle |\n|---|---|---|---|---|---|\n| Section words | Jost 700 | 250 | −4 px | WATER blue, rotated −90°, baseline origin (250, 1760). ROOT black, +90°, origin (840, 300). LIGHT black, 0°, origin (50, 360). | Slides 320 px along its own reading direction (WATER rises, ROOT drops, LIGHT slides right) on expo out over 0.4 s from the beat. Holds. Exits 700 px back the way it came, cubic-in over 0.45 s. |\n| Numbers | Jost 500 | 40 | +4 px | 01 at (290, 1760) blue; 02 at (850, 270); 03 at (60, 130) | 0.1 s after the word; expo over 0.3 s (opacity); exits with the word. |\n| Title | Jost 700 | 150 / 128 | −4 px | FROM SEED black, baseline (50, 300); TO SEEDLING red, baseline (50, 450); both overprint the sun | Slides 320 px right on expo out, 0.4 s, on beats 16 and 16.5. Holds to the end. |\n| Note | Jost 500 | 28 | +4 px | ILLUSTRATION · TIME-COMPRESSED at (60, 1870) | Fades in on expo, 0.4 s, at 8.75 s. |\n\nJost is a free (SIL OFL) revival of the geometric-sans tradition (Futura, 1927). Swap only for another geometric sans with a circular \"O\" (Futura, Avenir, Montserrat, Poppins).\n\n## Temporal fingerprint\n| Element | Rule |\n|---|---|\n| Tempo | 120 BPM: beat 0.5 s, 8th 0.25 s. All event times in `timeline.js` are `b(n) = n × 0.5 s`. |\n| Arrival | `expo(k) = 1 − 2^(−10k)` over 0.2-0.6 s, starting on the beat. Expo is front-loaded (about 50 % of the move in the first 7 %), so the visual hit and the sound coincide on the beat. |\n| Exit | Cubic-in (`k³`) over 0.3-0.5 s. Things accelerate away and never fade. |\n| Cadence | Renders on ones at 60 fps. No overshoot, wobble or idle motion: between hits the frame is a still poster. |\n| Beats | Grid 0-0.75 s · bar 0.5 · seed 0.75 · 01 WATER 1.0, drops 1.5 / 2.0 / 2.5 / 2.75 · 02 ROOT 3.0, root steps on 8ths 3.25-5.0 · 03 LIGHT 5.5, sun 5.75, rays 6.0-6.75 on 8ths, shoot 6.0-6.5, leaves 6.75 · outro 7.5 · title 8.0 / 8.25 · note 8.75 · end 10.0. |\n\n## How the composition develops\n1. **Empty grid → horizon.** The grid sets the rules. The bar divides the frame into sky and soil, and the seed sits just under it, in the lower third.\n2. **Left mass.** WATER fills the left edge. The drops are tiny moving accents above the seed, and the circle grows step by step, pulling weight toward the centre.\n3. **Right mass.** ROOT mirrors WATER on the right edge (opposite rotation, opposite end). The root staircase grows the lower centre downward on the 8ths.\n4. **Top mass.** LIGHT and the sun fill the top. The sun's crop by the frame edge creates tension, and the rays direct the eye down to the plant, which now grows upward to meet them.\n5. **Release.** The three words leave and the poster simplifies to plant, sun and title. That is the end frame, and also the thumbnail.\n\n## Individual assets\nAll assets are code-generated: nothing is painted or AI-generated. To recreate any of them, call the named function in `styles/geometric-abstraction/scene.js`.\n\n| Asset | File in packet | Source |\n|---|---|---|\n| Paper (flat cream) | `assets/layers/static/00_paper.png` | `draw()` → `on('paper')` |\n| Grid | `assets/layers/t*/01_grid.png` | `grid(t)` |\n| Composition (all shapes and type, transparent) | `assets/layers/t*/02_composition.png` at 2.4, 4.4, 7.3 and 9.7 s | `composition(t)` |\n| Shape alphabet (the vocabulary on transparency) | `assets/components/shape-alphabet.png` | `drawComponent('shape-alphabet')` |\n| Overprint demo (how multiply mixes the inks) | `assets/components/overprint-demo.png` | `drawComponent('overprint-demo')` |\n| Root path (centres of the 8 steps) | `assets/paths/rootSteps.json` / `.svg` | `STEPS` in `timeline.js` |\n\nThere are no masks: cropping comes from the frame edge, and colour mixing from multiply.\n\n## Sound\n**Score:** a mechanical, toy-like 120 BPM in C major, in the spirit of a Bauhaus stage ballet. One bass note per beat (C C G G A A G G), a three-note kalimba cell (C-E-G) on the offbeats once ROOT arrives, a kick on every beat, offbeat hats, and a clap on 2 and 4 from ROOT onward.\n\n**Shape timbres:**\n- circle = bell\n- bar = woodblock click\n- triangle and rays = square-wave ping\n- word = low thump plus a click for its number\n\n**Event cues** (`audio/cues.json` has the exact times):\n| Event | Sound |\n|---|---|\n| Grid draw | rising filtered-noise sweep 300 → 2400 Hz |\n| Ground bar | thunk + swish panned left → centre |\n| Seed lands | bell C5 |\n| Each drop | bubble, then the seed bell steps E5 → G5 → A5 → C6 (pitch follows size) |\n| WATER / ROOT / LIGHT | low thump + impact (55 Hz) + number click, panned to the word's side |\n| Root steps | 7 woodblock clicks descending 2400 → 1440 Hz, then a bell G4 for the red square |\n| Sun | long low bell C4 (inharmonic ratio 2.76) + swish from the top right |\n| Rays | square-wave pings G6 E6 D6 C6 |\n| Shoot | square wave gliding C5 → C6 over the rise |\n| Leaves | two hinge clicks |\n| Outro | swish |\n| Title | thump, then a C-E-G-C bell arpeggio |\n\n**Stems:** `audio/stems/music.flac`, `drums.flac` and `sfx.flac`. The mix is −15.5 LUFS integrated with a true peak of −1.3 dBTP and a loudness range of 1.8 LU.\n\n## Reusable prompt\n> Create a {10}-second {1080×1920} geometric-abstraction motion poster about {subject} at {120} BPM. Use only primary shapes (circle, half-circle, bar, triangle) in red #d6342c, yellow #f2c230, blue #1f4fa3 and black #151515 on cream #f1e9d8, on a visible 12-column grid. Coloured shapes and words overprint with multiply. Map each concept to one shape and one colour. Set 2-3 massive words (geometric sans, bold, 250 px, tight tracking) against the frame edges, vertical or horizontal, with tiny tracked section numbers. Every element arrives on a beat or 8th with a hard exponential ease, then holds perfectly still; exits accelerate away. Close on a simplified poster with the title. Sound: dry percussion, one timbre per shape, and pitch that follows size.\n\n## Adaptation guidance\n| Change | Safe? | Notes |\n|---|---|---|\n| Subject / story | ✅ | Write a shape alphabet first: one shape and colour per concept, at most five. |\n| Words | ✅ | 3-6 letters each works best at 250 px. Longer words: drop to 200 px or crop them with the frame edge on purpose. |\n| Palette | ✅ | Any four inks plus paper, as long as they overprint well (a light yellow-type ink is needed for visible mixing). Brand variant: brand primary + black + one warm + one cool. |\n| Tempo | ✅ | Change `BEAT`; every time scales. Keep arrivals at ≤ 0.6 s so they read as hits. |\n| Grid | ⚠️ | It may be hidden in the final frame, but keep snapping positions to it. |\n| 16:9 | ✅ | The vertical words become horizontal bands; put the hero in the left third, the sun at top right. |\n| Outlines, gradients, textures, springs, idle motion | ❌ | They turn the style into flat-vector or riso. |\n| **Essential** | , | Primary shapes only; four inks + overprint; massive type as mass; beat-locked expo arrivals; stillness between hits; one shape per concept. |\n\n## Accessibility\n- **Contrast:** black on cream is 15.1:1 and blue on cream 6.4:1. The red title is 4.0:1, which passes only as large text (it is 128 px); never set small text in the red.\n- **Flashing:** none. Hits are motion, not flashes.\n- **Reading:** the words are decorative masses, so the story is also carried by shapes and by the spoken or caption copy you add. Rotated words are hard to read for some viewers. Never put essential information only in vertical type.\n\n## Provenance and references\nThis style was built from the research handoff's candidate \"geometric abstraction: brand transitions, rhythm and music-led identity\". No Animate seed was used. All code, geometry and audio are original (2026-10-08). The font is Jost (SIL OFL).\n\nLineage (descriptive, not copied):\n- **Bauhaus pedagogy:** Kandinsky's 1923 questionnaire paired the yellow triangle, red square and blue circle. This piece keeps the yellow triangle but makes the circle red, because the seed is the hero.\n- **Constructivist posters:** El Lissitzky's *Beat the Whites with the Red Wedge* (1919).\n- **Swiss grid typography.**\n- **Japanese modernism:** Ikko Tanaka's geometric *Nihon Buyo* poster (1981) shows the same vocabulary used outside Europe.", "review": { "technical": { "state": "Supplied checks passed", "scope": "Source handoff records complete decode, stream dimensions and audio measurements. Browser playback is checked separately.", "artifactSha256": "43e1f20143bda0906da8507069a1207e8212874c2ce4dd3cdc71bd3055d4287a" }, "creative": { "state": "Not independently accepted", "scope": "not independently established", "artifactSha256": "43e1f20143bda0906da8507069a1207e8212874c2ce4dd3cdc71bd3055d4287a" }, "listening": { "state": "Not verified", "scope": "No perceptual listening pass is established by this library import.", "artifactSha256": "43e1f20143bda0906da8507069a1207e8212874c2ce4dd3cdc71bd3055d4287a" }, "reproduction": { "state": "Not tested", "scope": "Source is supplied. Cross-machine cold-start reproduction has not been established.", "artifactSha256": "43e1f20143bda0906da8507069a1207e8212874c2ce4dd3cdc71bd3055d4287a" } }, "detailUrl": "https://library.jkylehobson.chatgpt.site/video-library/#family=geometric-abstraction&example=claude-cloud", "processUrl": "/video-library/process.html?family=geometric-abstraction&example=claude-cloud", "downloads": { "prompt": { "available": true, "url": "/video-library/prompts/geometric-abstraction--claude-cloud.txt", "sha256": "43647896e745bdae7b7209357e624360c44acf96eb8801270b74c55c51fb0850", "bytes": 1771, "label": "Reusable, example-specific instructions" }, "video": { "name": "geometric-abstraction--claude-cloud.mp4", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/geometric-abstraction--claude-cloud.mp4", "bytes": 1186576, "sha256": "43e1f20143bda0906da8507069a1207e8212874c2ce4dd3cdc71bd3055d4287a", "available": true, "label": "1.1 MB" }, "source": { "name": "geometric-abstraction--claude-cloud--source.zip", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/geometric-abstraction--claude-cloud--source.zip", "bytes": 6972073, "sha256": "477f60aef5bbd2737c67d83c56bd23c5051a6b0dc183cbb1aa1f65232c5e69d2", "available": true, "label": "6.6 MB", "contents": [ "editable source", "variant guidance", "source assets", "audio inputs", "dependency declarations", "file manifest" ], "includedFiles": 51, "includedFilePaths": [ "CASE_STUDY.md", "RUN.md", "SKILL.md", "STYLE.md", "assets/components/overprint-demo.png", "assets/components/shape-alphabet.png", "assets/layers/static/00_paper.png", "assets/layers/t2.40/01_grid.png", "assets/layers/t2.40/02_composition.png", "assets/layers/t4.40/01_grid.png", "assets/layers/t4.40/02_composition.png", "assets/layers/t7.30/01_grid.png", "assets/layers/t7.30/02_composition.png", "assets/layers/t9.70/01_grid.png", "assets/layers/t9.70/02_composition.png", "assets/paths/rootSteps.json", "assets/paths/rootSteps.svg", "audio/cues.json", "audio/mix.flac", "audio/stems/drums.flac", "audio/stems/music.flac", "audio/stems/sfx.flac", "engine/audio.mjs", "engine/audio/dsp.js", "engine/audio/instruments.js", "engine/audio/sfx.js", "engine/browser.mjs", "engine/export.mjs", "engine/finish.mjs", "engine/lib/draw.js", "engine/lib/util.js", "engine/page.html", "engine/render.mjs", "engine/runtime.js", "engine/server.mjs", "film/contact_sheet.jpg", "film/spectrogram.png", "film/stills/01_0.90s.jpg", "film/stills/02_2.40s.jpg", "film/stills/03_4.40s.jpg", "film/stills/04_6.60s.jpg", "film/stills/05_7.30s.jpg", "film/stills/06_9.70s.jpg", "overview/encoded-contact-sheet.jpg", "package.json", "qa.json", "spec.json", "styles/geometric-abstraction/scene.js", "styles/geometric-abstraction/score.js", "styles/geometric-abstraction/timeline.js", "BUNDLE-GUIDE.md" ], "externalPrerequisites": { "runtime": [ "Node.js", "Chromium or Chrome", "FFmpeg and ffprobe" ], "packageDependencies": { "@fontsource/anton": "^5.1.0", "@fontsource/archivo-black": "^5.1.0", "@fontsource/bangers": "^5.1.0", "@fontsource/bebas-neue": "^5.1.0", "@fontsource/caveat": "^5.1.0", "@fontsource/comic-neue": "^5.3.0", "@fontsource/dm-sans": "^5.1.0", "@fontsource/dm-serif-display": "^5.1.0", "@fontsource/fraunces": "^5.1.0", "@fontsource/ibm-plex-mono": "^5.1.0", "@fontsource/instrument-serif": "^5.1.0", "@fontsource/inter": "^5.1.0", "@fontsource/jetbrains-mono": "^5.1.0", "@fontsource/jost": "^5.3.0", "@fontsource/kaushan-script": "^5.3.0", "@fontsource/nunito": "^5.1.0", "@fontsource/permanent-marker": "^5.1.0", "@fontsource/playfair-display": "^5.1.0", "@fontsource/press-start-2p": "^5.1.0", "@fontsource/space-grotesk": "^5.1.0", "@fontsource/space-mono": "^5.1.0", "@fontsource/stix-two-text": "^5.3.0", "@fontsource/syne": "^5.1.0", "@fontsource/vt323": "^5.1.0", "three": "0.170.0", "playwright": "1.56.1" }, "lockfileIncluded": false, "coldStart": false }, "license": { "summary": "User-directed publication of supplied authored source; preserve listed third-party notices; no new license granted here.", "includedNoticePaths": [], "newLicenseGranted": false } }, "bundle": { "name": "geometric-abstraction--claude-cloud--full.zip", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/geometric-abstraction--claude-cloud--full.zip", "bytes": 8178158, "sha256": "888b16bf0e20ecdba62bf732a8615063c892b23b7dff3ebeff3fa75c590002bc", "available": true, "label": "7.8 MB", "contents": [ "selected master", "editable source", "variant guidance", "source assets", "audio inputs", "dependency declarations", "file manifest", "designed cover", "starter prompt" ], "includedFiles": 54, "includedFilePaths": [ "CASE_STUDY.md", "RUN.md", "SKILL.md", "STYLE.md", "assets/components/overprint-demo.png", "assets/components/shape-alphabet.png", "assets/layers/static/00_paper.png", "assets/layers/t2.40/01_grid.png", "assets/layers/t2.40/02_composition.png", "assets/layers/t4.40/01_grid.png", "assets/layers/t4.40/02_composition.png", "assets/layers/t7.30/01_grid.png", "assets/layers/t7.30/02_composition.png", "assets/layers/t9.70/01_grid.png", "assets/layers/t9.70/02_composition.png", "assets/paths/rootSteps.json", "assets/paths/rootSteps.svg", "audio/cues.json", "audio/mix.flac", "audio/stems/drums.flac", "audio/stems/music.flac", "audio/stems/sfx.flac", "display/cover.webp", "engine/audio.mjs", "engine/audio/dsp.js", "engine/audio/instruments.js", "engine/audio/sfx.js", "engine/browser.mjs", "engine/export.mjs", "engine/finish.mjs", "engine/lib/draw.js", "engine/lib/util.js", "engine/page.html", "engine/render.mjs", "engine/runtime.js", "engine/server.mjs", "film/contact_sheet.jpg", "film/geometric-abstraction.mp4", "film/spectrogram.png", "film/stills/01_0.90s.jpg", "film/stills/02_2.40s.jpg", "film/stills/03_4.40s.jpg", "film/stills/04_6.60s.jpg", "film/stills/05_7.30s.jpg", "film/stills/06_9.70s.jpg", "overview/encoded-contact-sheet.jpg", "package.json", "qa.json", "spec.json", "starter-prompt.txt", "styles/geometric-abstraction/scene.js", "styles/geometric-abstraction/score.js", "styles/geometric-abstraction/timeline.js", "BUNDLE-GUIDE.md" ], "externalPrerequisites": { "runtime": [ "Node.js", "Chromium or Chrome", "FFmpeg and ffprobe" ], "packageDependencies": { "@fontsource/anton": "^5.1.0", "@fontsource/archivo-black": "^5.1.0", "@fontsource/bangers": "^5.1.0", "@fontsource/bebas-neue": "^5.1.0", "@fontsource/caveat": "^5.1.0", "@fontsource/comic-neue": "^5.3.0", "@fontsource/dm-sans": "^5.1.0", "@fontsource/dm-serif-display": "^5.1.0", "@fontsource/fraunces": "^5.1.0", "@fontsource/ibm-plex-mono": "^5.1.0", "@fontsource/instrument-serif": "^5.1.0", "@fontsource/inter": "^5.1.0", "@fontsource/jetbrains-mono": "^5.1.0", "@fontsource/jost": "^5.3.0", "@fontsource/kaushan-script": "^5.3.0", "@fontsource/nunito": "^5.1.0", "@fontsource/permanent-marker": "^5.1.0", "@fontsource/playfair-display": "^5.1.0", "@fontsource/press-start-2p": "^5.1.0", "@fontsource/space-grotesk": "^5.1.0", "@fontsource/space-mono": "^5.1.0", "@fontsource/stix-two-text": "^5.3.0", "@fontsource/syne": "^5.1.0", "@fontsource/vt323": "^5.1.0", "three": "0.170.0", "playwright": "1.56.1" }, "lockfileIncluded": false, "coldStart": false }, "license": { "summary": "User-directed publication of supplied authored source; preserve listed third-party notices; no new license granted here.", "includedNoticePaths": [], "newLicenseGranted": false } } }, "cadenceNote": "Encoded fps describes the file. Scene evaluation and held actor poses depend on this source recipe.", "starterPrompt": "Create a {10}-second {1080×1920} geometric-abstraction motion poster about {subject} at {120} BPM. Use only primary shapes (circle, half-circle, bar, triangle) in red #d6342c, yellow #f2c230, blue #1f4fa3 and black #151515 on cream #f1e9d8, on a visible 12-column grid. Coloured shapes and words overprint with multiply. Map each concept to one shape and one colour. Set 2-3 massive words (geometric sans, bold, 250 px, tight tracking) against the frame edges, vertical or horizontal, with tiny tracked section numbers. Every element arrives on a beat or 8th with a hard exponential ease, then holds perfectly still; exits accelerate away. Close on a simplified poster with the title. Sound: dry percussion, one timbre per shape, and pitch that follows size.\n\nSelected example: Seed to Seedling\nFamily: geometric-abstraction\nVariant: claude-cloud\nTypography: Jost 700, Jost 500\nProduction: canvas-2d\nExact reference master SHA-256: 43e1f20143bda0906da8507069a1207e8212874c2ce4dd3cdc71bd3055d4287a\n\nRead the selected STYLE.md, SKILL.md and reproduction instructions before adapting. Keep the declared renderer and source closure; do not assume another family variant has interchangeable parameters. Preserve exact font or custom glyph sources, color roles, spatial continuity and readable text. Record encoded frame rate, scene evaluation and held poses separately. Review the changed render visually and listen to the encoded audio before claiming those checks passed. Existing approval applies only to its recorded artifact.\n\nSuccess check: the adapted story is clear; key type remains readable in motion; the source rebuilds with its declared inputs; all media and review records identify the exact output. State any untested reproduction, listening or rights limits.", "downloadNote": "Downloads match this selected example. The full bundle includes its source, original video, cover and starter prompt. Source packages include artwork, audio inputs and dependency declarations. Requires Node.js, Chromium or Chrome, FFmpeg and ffprobe. Follow the included run guide for package installation and reproduction limits.", "model": "Opus 5.5", "reasoningEffort": "Extra" } ], "relatedMethodIds": [] }, { "id": "glitch-digital", "slug": "glitch-digital", "title": "Glitch Digital", "premise": "A clean diagram breaks into controlled signal errors, color splits and displaced fragments at each change in the story.", "summary": "A clean diagram breaks into controlled signal errors, color splits and displaced fragments at each change in the story.", "category": "Digital / new-media", "defaultExampleId": "claude-cloud", "facets": { "material": [ "2d", "glitch", "datamosh", "rgb-split", "monospace-hud", "white-on-black", "quantised-growth", "acid-accent", "flash-safe" ], "producer": [ "Claude Cloud" ], "format": [ "Portrait" ], "motion": [], "useCase": [] }, "examples": [ { "id": "claude-cloud", "title": "Seed to Seedling", "producer": "Claude Cloud", "producerEvidence": "The displayed model and reasoning label identify this production lane. Exact runtime model ID and per-film cost are not established by the source packet.", "relationship": "Original family example", "format": "Portrait", "productionMethod": "canvas-2d", "master": { "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/glitch-digital--claude-cloud.mp4", "sha256": "50901fe02edca300f2d8aafad2bdce2f74c35ab2fdbafd1490988b268f5d2795", "bytes": 12870865, "mimeType": "video/mp4", "width": 1080, "height": 1920, "duration": 10.6, "encodedFps": 60 }, "poster": { "url": "/video-library/media/glitch-digital--claude-cloud/cover.webp", "sha256": "228a072446b6e63b7dc180160a1c773a47b795454e8e3ab67dbb486e4bb93313", "sourceMasterSha256": "50901fe02edca300f2d8aafad2bdce2f74c35ab2fdbafd1490988b268f5d2795", "timeSeconds": 9.01, "rationale": "Late story beat selected to show the developed subject and visual system; extracted from this exact master." }, "previewVideo": { "url": "/video-library/media/glitch-digital--claude-cloud/preview.mp4", "sha256": "4312ad2de5583f74462907cb997ed3d72533b5c31248d1dbb3747e97c7646451", "sourceMasterSha256": "50901fe02edca300f2d8aafad2bdce2f74c35ab2fdbafd1490988b268f5d2795", "width": 540, "height": 960, "label": "Playback preview · 540 px wide · full master in Download finished video" }, "gallery": [ { "id": "overview", "role": "encoded-contact-sheet", "label": "Scenes from the finished render · not a planning storyboard", "url": "/video-library/media/glitch-digital--claude-cloud/overview.webp", "sourceMasterSha256": "50901fe02edca300f2d8aafad2bdce2f74c35ab2fdbafd1490988b268f5d2795" }, { "id": "scene-1", "role": "encoded-frame", "label": "Finished-film frame · 2.12 seconds", "url": "/video-library/media/glitch-digital--claude-cloud/scene-1.webp", "sourceMasterSha256": "50901fe02edca300f2d8aafad2bdce2f74c35ab2fdbafd1490988b268f5d2795", "timeSeconds": 2.12 }, { "id": "scene-2", "role": "encoded-frame", "label": "Finished-film frame · 5.3 seconds", "url": "/video-library/media/glitch-digital--claude-cloud/scene-2.webp", "sourceMasterSha256": "50901fe02edca300f2d8aafad2bdce2f74c35ab2fdbafd1490988b268f5d2795", "timeSeconds": 5.3 }, { "id": "scene-3", "role": "encoded-frame", "label": "Finished-film frame · 8.48 seconds", "url": "/video-library/media/glitch-digital--claude-cloud/scene-3.webp", "sourceMasterSha256": "50901fe02edca300f2d8aafad2bdce2f74c35ab2fdbafd1490988b268f5d2795", "timeSeconds": 8.48 } ], "typography": [ "Archivo Black 400", "JetBrains Mono 400/700" ], "palette": { "bg": "#09090b", "white": "#f4f4f2", "dim": "#4a4a52", "acid": "#b6ff3c", "hud": "rgba(244,244,242,0.82)", "hudDim": "rgba(244,244,242,0.45)" }, "usageGuidance": "Change the subject, copy and timing for your audience. Retain the selected example’s visual rules and recheck the entire reading interval after changes.", "styleRules": "---\nid: glitch-digital\nname: Glitch Digital (Seed to Seedling: a corrupted time-lapse)\nfamily: digital / new-media\naliases: [glitch, datamosh, glitch art, corrupted video, rgb split, signal error, digital decay]\ntags: [2d, glitch, datamosh, rgb-split, monospace-hud, white-on-black, quantised-growth, acid-accent, flash-safe]\nkind: visual-style\nroute: canvas-2d (CPU canvas; clean painter → datamosh blocks → additive RGB split → slices → streaks → resolution drop → HUD)\nreadiness: { research: catalog-candidate, rights: original-work, referenceImages: own-render, code: built, render: rendered-and-measured }\n---\n\n# Glitch Digital (Seed to Seedling: a corrupted time-lapse)\n\nA minimal white-on-black growth diagram plays like a corrupted time-lapse file. Most of the time it is clean: a soil line over a dithered ground, a white bean seed, crisp strokes. Every jump to the next stage tears through the image: blocks of the old frame cling on and smear, the RGB channels split, horizontal bands shear, rows of pixels streak, and the resolution briefly collapses. Then the new stage locks in.\n- **NO SIGNAL → seed.**\n- **WATER:** data packets rain down in columns, turn acid green in the soil and converge on the seed, which swells in three discrete steps.\n- **ROOT:** the seed cracks and the root grows in quantised jumps with dropped-frame holds.\n- **LIGHT:** the stem climbs, the leaves open in three steps and a dithered sun grows in four.\n- **Ending:** the title assembles from sheared slices and a green block cursor blinks.\n\nA monospace HUD frames it all: filename, timecode, a SIG % readout that collapses during every glitch, the DAY counter and the frame counter.\n\n**The one rule:** *the glitch is the edit.* Corruption happens only at cuts (stage changes) and as rare single-frame spikes; between them the image is calm and legible. Growth never animates smoothly, it jumps, and the newest pixels flash acid green.\n\n## Creative direction\n- **Audience:** tech, gaming and music audiences, digital-culture brands, security and data stories, festival and event visuals.\n- **Purpose:** turn transitions into energy and frame a process as data. This is time-lapse as a damaged file.\n- **Feeling:** electric, edgy and precise; controlled chaos.\n- **Central visual idea:** *growth as a corrupted time-lapse.* Nine days compressed into ten seconds drop frames; the \"damage\" is the time compression made visible.\n- **How the parts work together:**\n - *Composition:* one centred column (sun at upper right) on black, with the HUD in the four corners and the stage word above the horizon.\n - *Colour:* white on near-black, plus one acid accent for \"new data\". RGB fringes appear only while glitching.\n - *Type:* a heavy grotesk for the words, a monospace for the system.\n - *Motion:* stillness, then a burst, then stillness.\n - *Sound:* crunchy glitch-hop, with every growth step ticking.\n\n## Fit\n- **Best for:** launches and reveals, tech and security explainers, music and festival promos, \"data in motion\" stories, game UI and loading moments, transitions inside longer edits.\n- **Avoid when:** the audience includes people with photosensitive conditions and you cannot keep effects local; or the brand is gentle, natural or premium-quiet; or you need long reading.\n- **Cost:** 636 frames; the effect chain is native canvas compositing (no per-pixel JavaScript in the frame loop), a couple of minutes with 3 workers.\n\n## Visual fingerprint\n| Element | Rule |\n|---|---|\n| Palette | Background `#09090b`, white `#f4f4f2`, acid `#b6ff3c` (new growth, signal warnings, cursor), HUD white at 82 % / 45 %. RGB fringes come only from the split. |\n| Illustration | Soil line (3 px) at y 1100 over a 6-px Bayer-dithered field of 3-px grey dots (denser with depth, faint strata). Seed: a 205 px white bean with a black hilum; a black crack appears when the root starts. Root: white taper 14 → 4 px plus 4 rootlets (7 → 3 px). Stem 13 → 10 px; two 255 px solid leaves; sun disc r 120 with a dithered halo (r 134-270). |\n| Quantised growth | Root 22 steps, rootlets 8, stem 16, leaves 3, sun 4, seed swell 3; random 2-frame holds (25 % of half-steps) mimic dropped frames. The newest step draws acid for 0.12 s. |\n| Data packets | 14-px squares on a 10-px grid in 5 columns, 0.11 s apart; they fall 0.45 s (quadratic), turn acid in the soil and converge on the seed. |\n| Glitch chain | 1) **Datamosh:** 40-px blocks of the previous stage's last frame persist with probability 0.9·(1−u)^1.4 and slide along per-block vectors (≤ 90·u px, 8-px quantised). 2) **RGB split:** three tinted copies recombined additively, R at +dx/+dy and B at −dx/−dy (dx = 26·I, dy = 6·I). 3) **Slices:** ⌊14·I⌋ bands of 8-80 px sheared ±140·I px. 4) **Streaks** (I > 0.4): 4-8 one-row stretches 2-30 px wide, 80-400 px long. 5) **Resolution drop** (I > 0.78): ⅛ scale, nearest-neighbour. |\n| Intensity | Each stage change: sin(π·min(1, 1.3u))^0.7 over 0.38 s with a tail fade. Spikes: I = 0.35 for 2 frames at 0.9, 2.9, 4.6, 5.3, 6.6, 7.7 and 9.1 s. Title assembly I ≤ 0.45. |\n| Overlay | Static scanlines: 1 px black at 16 % every 3 px. |\n\n### Typography (exact)\n| Role | Family / weight | Size | Placement | Behaviour |\n|---|---|---|---|---|\n| Stage word | Archivo Black 400 | 200 px | Centred, baseline 340 | Bands converge from ±160 px over 0.3 s (easeOutCubic), 0.12 s into the transition; scatter + fade 0.2 s before the next stage |\n| Title | Archivo Black 400 | 104 px | Left 80, baselines 250 / 365: FROM SEED / TO SEEDLING | Slices converge over 0.4 s; acid 34 × 78 block cursor blinking at 2 Hz |\n| HUD file / timecode / signal | JetBrains Mono 400 | 26 px | (60, 92), right-aligned (1020, 92), (60, 130) | Characters swap for block glyphs (▓▒░█…) with probability 0.5·I when I > 0.3; SIG = 100·(1 − I) %, acid while glitching; ends \"[signal restored]\" |\n| HUD day | JetBrains Mono 700 / 400 | 44 / 22 px | (60, 1846) + \"/09\"; label \"DAY\" at (60, 1800) | Random digits during glitches, then settles |\n| HUD frame + progress | JetBrains Mono 400 | 22 px | Right-aligned (1020, 1846); bar at y 1872, x 60-1020 with stage ticks | , |\n| Note | JetBrains Mono 400 | 22 px | Centred, y 1800 | Fades in at 9.4 s |\n\n## Temporal fingerprint\n| Element | Rule |\n|---|---|\n| Stages | boot 0 · seed 0.45 · water 1.75 · root 3.75 · light 5.9 · end 8.3 (each begins with a 0.38 s transition). |\n| Holds | Between transitions, nothing moves except quantised growth and the HUD counters. |\n| Beats (120 BPM) | Packets 2.05-3.5 (swell steps 2.55 / 2.95 / 3.35) · root 4.05-5.75, rootlets 4.6-5.9 · stem 6.15-7.0, leaves 7.05 / 7.25 / 7.45, sun 7.3-7.9 · title 8.55-8.95 · note 9.4 · signal restored 9.7 · end 10.6. |\n\n## How the composition develops\nBlack screen, NO SIGNAL. The first tear reveals the horizon and the seed. Each later tear adds one layer of the plant (packets, then root, then stem, leaves and sun), so the frame accumulates from the centre outward. The final tear brings in the title at the top while the plant stays intact. The last frames are the cleanest of the film, ending on \"[signal restored]\".\n\n## Individual assets\n| Asset | File | Source |\n|---|---|---|\n| Soil dither field / sun halo dither | `assets/textures/soil-dither.png`, `sun-halo-dither.png` | `bakeSoil()`, `bakeHalo()` |\n| The clean final illustration (no glitch, no HUD) | `assets/components/seedling-clean.png` | `paint(10.2)` |\n| Effect demos | `assets/components/rgb-split-demo.png`, `slice-demo.png`, `datamosh-demo.png` | `drawComponent()` |\n| Layers | `assets/layers/static/03_scanlines.png`; per time: `01_clean` (the clean frame), `02_glitched` (after the effect chain), `04_hud` at 1.2, 3.2, 5.2, 7.6 and 10.2 s | `drawLayer()` |\n| Paths | `assets/paths/root.json/.svg`, `stem.json/.svg` | `ROOT_PATH`, `STEM` |\n\n**To apply the look to footage:** feed any clean frame sequence through `composite()`'s chain. It only needs \"previous frame at the cut\" and \"current frame\".\n\n## Sound\n**Score:** a crunchy 120 BPM glitch-hop in E minor. A bit-crushed kick (kick + chip noise) and a clap with a glitch tail, hats with 1/16 stutters, a square-wave sub (E E C D) and a chip arpeggio.\n\n**Sonified events:**\n| Event | Sound |\n|---|---|\n| Each transition | a glitch burst, a 6-click 1/32 stutter, a noise sweep 6 k → 300 Hz and a falling square-wave \"tape stop\" |\n| Each spike | a tiny glitch |\n| Packets | one chip blip per packet, pitched by column |\n| Growth | one tick per quantised step: root ticks fall in pitch, stem ticks rise; 3 chip notes for the leaves, 4 for the sun |\n| Ending | a clean E-minor add9 pad and bass, then a two-note \"signal restored\" chime |\n\n**Stems:** `music`, `drums` (with bus compression) and `sfx`. The mix targets −15.5 LUFS (true peak ≤ −1 dBTP).\n\n## Reusable prompt\n> Create a {10}-second {1080×1920} glitch-art video of {process}. A minimal white-on-black diagram (thin soil line, ordered-dither textures, crisp strokes) that is calm between cuts. Each stage change is a 0.4 s datamosh transition: blocks of the previous frame persist and smear, additive RGB channel split, sheared horizontal slices, pixel streaks, a brief resolution drop. Growth advances in quantised jumps with dropped-frame holds; the newest pixels flash acid green (#b6ff3c). Monospace HUD: filename, timecode, a signal % that collapses during glitches, a day counter, a frame counter and a progress bar. Stage words in a heavy grotesk slice in and out. Keep every effect local, with no full-frame flashes. Sound: glitch-hop with a tick per growth step and a glitch burst per cut.\n\n## Adaptation guidance\n| Change | Safe? | Notes |\n|---|---|---|\n| Subject | ✅ | Any staged process; draw each stage clean first, then let `composite()` do the rest. |\n| Accent colour | ✅ | One accent only (acid, cyan or magenta) for \"new data\". |\n| Glitch amount | ⚠️ | Keep transitions ≤ 0.5 s and ≥ 1.5 s apart; never brighten the whole frame at once. |\n| Footage | ✅ | The chain works on video frames; the datamosh needs the frame before the cut. |\n| VHS / CRT warmth | ❌ | That is a different (retro) style; keep this one digital and crisp. |\n| 16:9 | ✅ | Move the HUD to the corners of the wide frame; same chain. |\n| **Essential** | , | Calm between cuts, glitch as the edit, quantised growth, one accent, monospace HUD, flash-safe effects. |\n\n## Accessibility\n- **Photosensitivity:** the effects displace and recolour content without full-frame luminance flashes. Transitions are ≥ 1.9 s apart, spikes are 2-frame local shears, and the cursor blinks at 2 Hz over a small area. **Always run a flash and pattern analysis (for example PEAT or Harding) before publishing a glitch piece**, and consider a warning card.\n- **Contrast:** white on `#09090b` is 18.1:1. The dim HUD text (white at 45 %) is 4.2:1, so it is used only for secondary labels; the key readouts (day, timecode, file) are at 82-100 %.\n- **Reading:** stage words hold for 1.5-2 s; HUD text is decorative except the day counter, which is also implied by the stage.\n\n## Provenance\n- **Source:** from the library's style catalogue. No Animate seed was used.\n- **Originality:** all code, illustration and audio are original (2026-10-08). The look draws on the general vocabulary of glitch art and datamoshing (compression-artifact aesthetics); no specific artwork was copied.\n- **Fonts:** Archivo Black and JetBrains Mono (SIL OFL).", "review": { "technical": { "state": "Supplied checks passed", "scope": "Source handoff records complete decode, stream dimensions and audio measurements. Browser playback is checked separately.", "artifactSha256": "50901fe02edca300f2d8aafad2bdce2f74c35ab2fdbafd1490988b268f5d2795" }, "creative": { "state": "Not independently accepted", "scope": "not independently established", "artifactSha256": "50901fe02edca300f2d8aafad2bdce2f74c35ab2fdbafd1490988b268f5d2795" }, "listening": { "state": "Not verified", "scope": "No perceptual listening pass is established by this library import.", "artifactSha256": "50901fe02edca300f2d8aafad2bdce2f74c35ab2fdbafd1490988b268f5d2795" }, "reproduction": { "state": "Not tested", "scope": "Source is supplied. Cross-machine cold-start reproduction has not been established.", "artifactSha256": "50901fe02edca300f2d8aafad2bdce2f74c35ab2fdbafd1490988b268f5d2795" } }, "detailUrl": "https://library.jkylehobson.chatgpt.site/video-library/#family=glitch-digital&example=claude-cloud", "processUrl": "/video-library/process.html?family=glitch-digital&example=claude-cloud", "downloads": { "prompt": { "available": true, "url": "/video-library/prompts/glitch-digital--claude-cloud.txt", "sha256": "a2dcbf9b20d7b252525cadce3888001db344f4975e213fc84af83c505f3aaeb9", "bytes": 1814, "label": "Reusable, example-specific instructions" }, "video": { "name": "glitch-digital--claude-cloud.mp4", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/glitch-digital--claude-cloud.mp4", "bytes": 12870865, "sha256": "50901fe02edca300f2d8aafad2bdce2f74c35ab2fdbafd1490988b268f5d2795", "available": true, "label": "12.3 MB" }, "source": { "name": "glitch-digital--claude-cloud--source.zip", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/glitch-digital--claude-cloud--source.zip", "bytes": 11953735, "sha256": "e4d71bcc5f9a72b1e7aa53aea5d0a82c8c7a38876aa41e13d6ebab6edd7520bd", "available": true, "label": "11.4 MB", "contents": [ "editable source", "variant guidance", "source assets", "audio inputs", "dependency declarations", "file manifest" ], "includedFiles": 64, "includedFilePaths": [ "CASE_STUDY.md", "RUN.md", "SKILL.md", "STYLE.md", "assets/components/datamosh-demo.png", "assets/components/rgb-split-demo.png", "assets/components/seedling-clean.png", "assets/components/slice-demo.png", "assets/layers/static/03_scanlines.png", "assets/layers/t1.20/01_clean.png", "assets/layers/t1.20/02_glitched.png", "assets/layers/t1.20/04_hud.png", "assets/layers/t10.20/01_clean.png", "assets/layers/t10.20/02_glitched.png", "assets/layers/t10.20/04_hud.png", "assets/layers/t3.20/01_clean.png", "assets/layers/t3.20/02_glitched.png", "assets/layers/t3.20/04_hud.png", "assets/layers/t5.20/01_clean.png", "assets/layers/t5.20/02_glitched.png", "assets/layers/t5.20/04_hud.png", "assets/layers/t7.60/01_clean.png", "assets/layers/t7.60/02_glitched.png", "assets/layers/t7.60/04_hud.png", "assets/paths/root.json", "assets/paths/root.svg", "assets/paths/stem.json", "assets/paths/stem.svg", "assets/textures/soil-dither.png", "assets/textures/sun-halo-dither.png", "audio/cues.json", "audio/mix.flac", "audio/stems/drums.flac", "audio/stems/music.flac", "audio/stems/sfx.flac", "engine/audio.mjs", "engine/audio/dsp.js", "engine/audio/instruments.js", "engine/audio/sfx.js", "engine/browser.mjs", "engine/export.mjs", "engine/finish.mjs", "engine/lib/draw.js", "engine/lib/util.js", "engine/page.html", "engine/render.mjs", "engine/runtime.js", "engine/server.mjs", "film/contact_sheet.jpg", "film/spectrogram.png", "film/stills/01_1.20s.jpg", "film/stills/02_1.95s.jpg", "film/stills/03_3.20s.jpg", "film/stills/04_5.20s.jpg", "film/stills/05_7.60s.jpg", "film/stills/06_10.20s.jpg", "overview/encoded-contact-sheet.jpg", "package.json", "qa.json", "spec.json", "styles/glitch-digital/scene.js", "styles/glitch-digital/score.js", "styles/glitch-digital/timeline.js", "BUNDLE-GUIDE.md" ], "externalPrerequisites": { "runtime": [ "Node.js", "Chromium or Chrome", "FFmpeg and ffprobe" ], "packageDependencies": { "@fontsource/anton": "^5.1.0", "@fontsource/archivo-black": "^5.1.0", "@fontsource/bangers": "^5.1.0", "@fontsource/bebas-neue": "^5.1.0", "@fontsource/caveat": "^5.1.0", "@fontsource/comic-neue": "^5.3.0", "@fontsource/courier-prime": "^5.3.0", "@fontsource/dm-sans": "^5.1.0", "@fontsource/dm-serif-display": "^5.1.0", "@fontsource/fraunces": "^5.1.0", "@fontsource/ibm-plex-mono": "^5.1.0", "@fontsource/instrument-serif": "^5.1.0", "@fontsource/inter": "^5.1.0", "@fontsource/jetbrains-mono": "^5.1.0", "@fontsource/jost": "^5.3.0", "@fontsource/kaushan-script": "^5.3.0", "@fontsource/nunito": "^5.1.0", "@fontsource/permanent-marker": "^5.1.0", "@fontsource/playfair-display": "^5.1.0", "@fontsource/press-start-2p": "^5.1.0", "@fontsource/space-grotesk": "^5.1.0", "@fontsource/space-mono": "^5.1.0", "@fontsource/stix-two-text": "^5.3.0", "@fontsource/syne": "^5.1.0", "@fontsource/vt323": "^5.1.0", "three": "0.170.0", "playwright": "1.56.1" }, "lockfileIncluded": false, "coldStart": false }, "license": { "summary": "User-directed publication of supplied authored source; preserve listed third-party notices; no new license granted here.", "includedNoticePaths": [], "newLicenseGranted": false } }, "bundle": { "name": "glitch-digital--claude-cloud--full.zip", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/glitch-digital--claude-cloud--full.zip", "bytes": 24901650, "sha256": "89a9110e4f6ccd1c3fc3419faf96685418010aea3d18b2572377810c23f49608", "available": true, "label": "23.7 MB", "contents": [ "selected master", "editable source", "variant guidance", "source assets", "audio inputs", "dependency declarations", "file manifest", "designed cover", "starter prompt" ], "includedFiles": 67, "includedFilePaths": [ "CASE_STUDY.md", "RUN.md", "SKILL.md", "STYLE.md", "assets/components/datamosh-demo.png", "assets/components/rgb-split-demo.png", "assets/components/seedling-clean.png", "assets/components/slice-demo.png", "assets/layers/static/03_scanlines.png", "assets/layers/t1.20/01_clean.png", "assets/layers/t1.20/02_glitched.png", "assets/layers/t1.20/04_hud.png", "assets/layers/t10.20/01_clean.png", "assets/layers/t10.20/02_glitched.png", "assets/layers/t10.20/04_hud.png", "assets/layers/t3.20/01_clean.png", "assets/layers/t3.20/02_glitched.png", "assets/layers/t3.20/04_hud.png", "assets/layers/t5.20/01_clean.png", "assets/layers/t5.20/02_glitched.png", "assets/layers/t5.20/04_hud.png", "assets/layers/t7.60/01_clean.png", "assets/layers/t7.60/02_glitched.png", "assets/layers/t7.60/04_hud.png", "assets/paths/root.json", "assets/paths/root.svg", "assets/paths/stem.json", "assets/paths/stem.svg", "assets/textures/soil-dither.png", "assets/textures/sun-halo-dither.png", "audio/cues.json", "audio/mix.flac", "audio/stems/drums.flac", "audio/stems/music.flac", "audio/stems/sfx.flac", "display/cover.webp", "engine/audio.mjs", "engine/audio/dsp.js", "engine/audio/instruments.js", "engine/audio/sfx.js", "engine/browser.mjs", "engine/export.mjs", "engine/finish.mjs", "engine/lib/draw.js", "engine/lib/util.js", "engine/page.html", "engine/render.mjs", "engine/runtime.js", "engine/server.mjs", "film/contact_sheet.jpg", "film/glitch-digital.mp4", "film/spectrogram.png", "film/stills/01_1.20s.jpg", "film/stills/02_1.95s.jpg", "film/stills/03_3.20s.jpg", "film/stills/04_5.20s.jpg", "film/stills/05_7.60s.jpg", "film/stills/06_10.20s.jpg", "overview/encoded-contact-sheet.jpg", "package.json", "qa.json", "spec.json", "starter-prompt.txt", "styles/glitch-digital/scene.js", "styles/glitch-digital/score.js", "styles/glitch-digital/timeline.js", "BUNDLE-GUIDE.md" ], "externalPrerequisites": { "runtime": [ "Node.js", "Chromium or Chrome", "FFmpeg and ffprobe" ], "packageDependencies": { "@fontsource/anton": "^5.1.0", "@fontsource/archivo-black": "^5.1.0", "@fontsource/bangers": "^5.1.0", "@fontsource/bebas-neue": "^5.1.0", "@fontsource/caveat": "^5.1.0", "@fontsource/comic-neue": "^5.3.0", "@fontsource/courier-prime": "^5.3.0", "@fontsource/dm-sans": "^5.1.0", "@fontsource/dm-serif-display": "^5.1.0", "@fontsource/fraunces": "^5.1.0", "@fontsource/ibm-plex-mono": "^5.1.0", "@fontsource/instrument-serif": "^5.1.0", "@fontsource/inter": "^5.1.0", "@fontsource/jetbrains-mono": "^5.1.0", "@fontsource/jost": "^5.3.0", "@fontsource/kaushan-script": "^5.3.0", "@fontsource/nunito": "^5.1.0", "@fontsource/permanent-marker": "^5.1.0", "@fontsource/playfair-display": "^5.1.0", "@fontsource/press-start-2p": "^5.1.0", "@fontsource/space-grotesk": "^5.1.0", "@fontsource/space-mono": "^5.1.0", "@fontsource/stix-two-text": "^5.3.0", "@fontsource/syne": "^5.1.0", "@fontsource/vt323": "^5.1.0", "three": "0.170.0", "playwright": "1.56.1" }, "lockfileIncluded": false, "coldStart": false }, "license": { "summary": "User-directed publication of supplied authored source; preserve listed third-party notices; no new license granted here.", "includedNoticePaths": [], "newLicenseGranted": false } } }, "cadenceNote": "Encoded fps describes the file. Scene evaluation and held actor poses depend on this source recipe.", "starterPrompt": "Create a {10}-second {1080×1920} glitch-art video of {process}. A minimal white-on-black diagram (thin soil line, ordered-dither textures, crisp strokes) that is calm between cuts. Each stage change is a 0.4 s datamosh transition: blocks of the previous frame persist and smear, additive RGB channel split, sheared horizontal slices, pixel streaks, a brief resolution drop. Growth advances in quantised jumps with dropped-frame holds; the newest pixels flash acid green (#b6ff3c). Monospace HUD: filename, timecode, a signal % that collapses during glitches, a day counter, a frame counter and a progress bar. Stage words in a heavy grotesk slice in and out. Keep every effect local, with no full-frame flashes. Sound: glitch-hop with a tick per growth step and a glitch burst per cut.\n\nSelected example: Seed to Seedling\nFamily: glitch-digital\nVariant: claude-cloud\nTypography: Archivo Black 400, JetBrains Mono 400/700\nProduction: canvas-2d\nExact reference master SHA-256: 50901fe02edca300f2d8aafad2bdce2f74c35ab2fdbafd1490988b268f5d2795\n\nRead the selected STYLE.md, SKILL.md and reproduction instructions before adapting. Keep the declared renderer and source closure; do not assume another family variant has interchangeable parameters. Preserve exact font or custom glyph sources, color roles, spatial continuity and readable text. Record encoded frame rate, scene evaluation and held poses separately. Review the changed render visually and listen to the encoded audio before claiming those checks passed. Existing approval applies only to its recorded artifact.\n\nSuccess check: the adapted story is clear; key type remains readable in motion; the source rebuilds with its declared inputs; all media and review records identify the exact output. State any untested reproduction, listening or rights limits.", "downloadNote": "Downloads match this selected example. The full bundle includes its source, original video, cover and starter prompt. Source packages include artwork, audio inputs and dependency declarations. Requires Node.js, Chromium or Chrome, FFmpeg and ffprobe. Follow the included run guide for package installation and reproduction limits.", "model": "Opus 5.5", "reasoningEffort": "Extra" } ], "relatedMethodIds": [] }, { "id": "isometric", "slug": "isometric", "title": "Isometric", "premise": "Precise hairlines, white space and spring-settled forms reveal a small system through isometric views.", "summary": "Precise hairlines, white space and spring-settled forms reveal a small system through isometric views.", "category": "Technical illustration", "defaultExampleId": "claude-cloud", "facets": { "material": [ "2d", "isometric", "hairline", "white-space", "springs", "exploded-view", "product", "minimal" ], "producer": [ "Claude Cloud" ], "format": [ "Portrait" ], "motion": [], "useCase": [] }, "examples": [ { "id": "claude-cloud", "title": "Seed to Seedling", "producer": "Claude Cloud", "producerEvidence": "The displayed model and reasoning label identify this production lane. Exact runtime model ID and per-film cost are not established by the source packet.", "relationship": "Original family example", "format": "Portrait", "productionMethod": "canvas-2d", "master": { "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/isometric--claude-cloud.mp4", "sha256": "d9130db7b975ea3bd829c2bdd45d770790d42cd3b10067c0aa7e0d02dd92d076", "bytes": 3231275, "mimeType": "video/mp4", "width": 1080, "height": 1920, "duration": 10.4, "encodedFps": 60 }, "poster": { "url": "/video-library/media/isometric--claude-cloud/cover.webp", "sha256": "b50833b498524adf5c31f4698dcfbedb177a04277695954f1c87ea1d7c75001e", "sourceMasterSha256": "d9130db7b975ea3bd829c2bdd45d770790d42cd3b10067c0aa7e0d02dd92d076", "timeSeconds": 8.84, "rationale": "Late story beat selected to show the developed subject and visual system; extracted from this exact master." }, "previewVideo": { "url": "/video-library/media/isometric--claude-cloud/preview.mp4", "sha256": "7ec215797734de75d96a9675c3531769f27738c450847fd1395f4c511f826564", "sourceMasterSha256": "d9130db7b975ea3bd829c2bdd45d770790d42cd3b10067c0aa7e0d02dd92d076", "width": 540, "height": 960, "label": "Playback preview · 540 px wide · full master in Download finished video" }, "gallery": [ { "id": "overview", "role": "encoded-contact-sheet", "label": "Scenes from the finished render · not a planning storyboard", "url": "/video-library/media/isometric--claude-cloud/overview.webp", "sourceMasterSha256": "d9130db7b975ea3bd829c2bdd45d770790d42cd3b10067c0aa7e0d02dd92d076" }, { "id": "scene-1", "role": "encoded-frame", "label": "Finished-film frame · 2.08 seconds", "url": "/video-library/media/isometric--claude-cloud/scene-1.webp", "sourceMasterSha256": "d9130db7b975ea3bd829c2bdd45d770790d42cd3b10067c0aa7e0d02dd92d076", "timeSeconds": 2.08 }, { "id": "scene-2", "role": "encoded-frame", "label": "Finished-film frame · 5.2 seconds", "url": "/video-library/media/isometric--claude-cloud/scene-2.webp", "sourceMasterSha256": "d9130db7b975ea3bd829c2bdd45d770790d42cd3b10067c0aa7e0d02dd92d076", "timeSeconds": 5.2 }, { "id": "scene-3", "role": "encoded-frame", "label": "Finished-film frame · 8.32 seconds", "url": "/video-library/media/isometric--claude-cloud/scene-3.webp", "sourceMasterSha256": "d9130db7b975ea3bd829c2bdd45d770790d42cd3b10067c0aa7e0d02dd92d076", "timeSeconds": 8.32 } ], "typography": [ "Inter 400", "JetBrains Mono 400" ], "palette": { "paper": "#ffffff", "face": "#ffffff", "edge": "#a4a4ac", "inner": "#e0e0e4", "accent": "#232327", "text": "#5c5c64", "textD": "#9a9aa2" }, "usageGuidance": "Change the subject, copy and timing for your audience. Retain the selected example’s visual rules and recheck the entire reading interval after changes.", "styleRules": "---\nid: isometric\nname: Isometric (a seed tray, in hairlines)\nfamily: technical illustration\naliases: [isometric line art, product illustration, exploded view, hairline iso, dimetric]\ntags: [2d, isometric, hairline, white-space, springs, exploded-view, product, minimal]\nkind: visual-style\nroute: canvas-2d (CPU canvas; dimetric projection, convex-hull silhouettes, painter's order)\nreadiness: { research: seed-extended, rights: original-work, referenceImages: own-render, code: built, render: rendered-and-measured }\n---\n\n# Isometric (a seed tray, in hairlines)\n\nCalm, precise product illustration on white, drawn only in constant 2 px hairlines (grey silhouettes, lighter inner lines). White faces hide whatever is behind them.\n- **Setting up:** a 4 × 3 seed tray drops in on a spring, and its soil plugs rise in a diagonal wave. The hero seed (a tiny rounded bean whose dark eyes are the frame's one accent) lands in cell 06.\n- **① Water:** a watering can drops in, tilts and pours drop by drop; the seed swells.\n- **② Root:** the camera dives to an **exploded section** under the hero cell: a glass column with four soil plates and dashed guide lines. The root threads down through them, opening a port in each plate, with a dark diamond marking the root tip (the focus).\n- **③ Shoot:** the section retracts; a stem rises; two leaf plates open on hinges; a sun disc settles at upper right as a ring of twelve pillars rises around it in a wave.\n\n**The one rule:** *precision and restraint.* Every edge lies on an iso axis, every line is the same weight on screen, nearer white faces hide farther lines, detail comes from repetition, and only one thing is dark: the focus.\n\n## Creative direction\n- **Audience:** product, hardware and SaaS marketing, technical documentation, design-literate audiences.\n- **Purpose:** explain a process as a calm, exact diagram: components, a section view, a result.\n- **Feeling:** clean, confident, quiet, engineered.\n- **Central visual idea:** *the seed tray as a product.* Germination is shown with the grammar of hardware illustration: an assembly wave, an exploded section, moving parts on springs.\n- **How the parts work together:**\n - *Composition:* one object group at about 80 % of the frame width, with generous white space and a caption well below.\n - *Colour:* none, only two greys plus one dark accent that moves with the story's focus.\n - *Type:* a neutral sans caption with a short rule above it; mono labels set into faces.\n - *Motion:* springs that settle and hold; one camera dive.\n - *Sound:* soft pitched ticks for every landing.\n\n## Fit\n- **Best for:** product explainers, onboarding diagrams, hardware/IoT, architecture overviews, \"how it's built\" stories.\n- **Avoid when:** emotion, texture or colour drive the brand; organic subjects that resist axes (here the plant is simplified to plates and lines).\n- **Cost:** trivial. 624 frames in about 12 s.\n\n## Visual fingerprint\n| Element | Rule |\n|---|---|\n| Projection | 2:1 dimetric: x → (u, u/2), y → (−u, u/2), z → (0, −1.2247u), × 1.25 px per unit; origin (540, 900). |\n| Lines | 2 px on screen at any zoom (`lineWidth = 2/zoom`); edges `#a4a4ac`, inner/receding `#e0e0e4`; round joins. No wobble, shadow, gradient or grain. |\n| Solids | A rounded rectangle extruded along a normal: white silhouette (convex hull of both caps) + silhouette stroke + viewer-facing cap outline + **one** extrusion line at the corner nearest the viewer (inner colour when rounded). Corner radii are 5-10 % of the long side. |\n| Hidden lines | Painter's order back → front: section, sun, tray, hero, stem/leaves, drops, can. Inside the section, plates go bottom → top with root segments between. |\n| Repetition | 12 cell holes (each with an inner wall line) and soil plugs with grains; 4 section plates; 12 sun pillars. |\n| Accent | `#232327`, one focus at a time: the hero's eyes, then a drop marker, then the root-tip diamond, then the shoot-tip diamond, then the hero's eyes again. |\n| Exploded view | A glass column (inner lines, no fill) under the hero cell, dashed guide lines up to the tray, and ports (small ellipses) that open in each plate as the root passes. |\n\n### Typography (exact)\n| Role | Family / weight | Size | Placement | Enter |\n|---|---|---|---|---|\n| Captions | Inter 400 | 46 | centred, baseline 1720; a 44 × 2 px rule 40 px above; `#5c5c64` | fade + rise 10 px, 0.4 s; out 0.3 s before the next |\n| Title | Inter 400 | 56 | same position | fade 0.5 s |\n| Labels in faces (\"TRAY · 12 CELLS\", \"06\") | JetBrains Mono 400 | 18-20 | set into the x-z face with a (1, 0.5, 0, 1.2247) skew; `#9a9aa2` | ride with their object |\n| Note | JetBrains Mono 400, tracking 3 | 22 | centred, y 1800 | fade 0.5 s |\n\n## Temporal fingerprint\n| Element | Rule |\n|---|---|\n| Springs | Closed form `1 − e^(−ζωx)(cos ω_d x + (ζω/ω_d) sin ω_d x)`; default k 55, damp 0.72; drops from 200-300 units; waves staggered (i + j)·0.028 s. |\n| Holds | After each spring the scene is still, apart from tiny idle life (hero bob ±1.2, leaf sway ±0.03 rad). |\n| Camera | Still with a 3 % push; one dive (zoom 1.25) to the section over 2.9-3.5 s and back over 5.35-5.95 s (easeInOutCubic). |\n| Beats | ① 1.1-3.55 s · ② 3.55-5.95 s · ③ 5.95-8.0 s · title 8.0 s, note 8.6 s. |\n\n## How the composition develops\nThe tray assembles; the can arrives and pours; the camera drops into the exploded section where the root threads down through four plates; the camera returns, the section retracts, the stem and leaves rise and open, and the sun and its pillar ring settle at upper right. The end frame is one tidy product shot with a caption.\n\n## Sound fingerprint\nCalm product music at 110 BPM in A major (A · F♯m · D · E): marimba-like kalimba plucks, an airy pad, a light click/kick pulse.\n- **Landings:** each spring landing is a dry pitched tick. The cell wave is 12 ticks rising on the A-major pentatonic; the sun pillars are another 12.\n- **Events:** the tray and can land with a soft thunk; drops drip; plates click into the section; ports ping as the root passes (descending); the leaves open with hinge clicks.\n- **Ending:** a bell chord on the title.\n\nMix −15.9 LUFS, −4.8 dBTP.\n\n## Reusable prompt\n> Create a {10}-second {1080×1920} isometric hairline illustration of {product/process}. 2:1 dimetric projection; every line 2 px on screen (grey silhouettes #a4a4ac, lighter inner lines #e0e0e4); white faces hide what's behind (painter's order); rounded slabs with visible thickness and one extrusion line at the nearest corner; detail from repetition (grids of cells, keys, pillars); no colour, shadow, gradient or texture; ONE dark accent that marks the current focus. Parts drop in and rise in diagonal waves on springs, then hold still. Use an exploded section with dashed guide lines to show what's inside. Captions: neutral sans, centred, with a short rule above; mono labels set into faces. Score: calm plucks + a soft pitched tick for every landing.\n\n## Adaptation guidance\n| Change | Safe? | Notes |\n|---|---|---|\n| Object | ✅ | Build it from slabs; keep edges on axes; add a repetition grid for detail. |\n| Dark mode | ✅ | Ground/faces `#101014`, edge `#8e8e9a`, inner `#34343c`, accent `#f4f4f6`. |\n| Colour | ⚠️ | Only as a single accent; more colour breaks the style. |\n| Camera | ⚠️ | Pushes ≤ 5 % plus at most one dive; no shake. |\n| 16:9 | ✅ | A wider object group; the caption under it. |\n| **Essential** | , | Constant hairlines, white hidden-line faces, axis-aligned geometry, repetition, one accent, springs then stillness. |\n\n## Accessibility\nCaptions are `#5c5c64` on white (about 6.6:1). There is no flashing or texture, and motion is small and settles quickly. Contrast for hairlines is intentionally soft: key information is restated in captions.\n\n## Provenance\nBuilt from the Animate seed `isometric` (cth9191/animate @ 7e5eb56feb2dd573f890e1b7b34748af43d58263, MIT): the measured hairline system (colours, 2 px constant width, projection, slab construction, single extrusion line, one accent, springs). The seed was used as source material only. All code, geometry and audio here are original (2026-10-08). Fonts: Inter and JetBrains Mono (SIL OFL).", "review": { "technical": { "state": "Supplied checks passed", "scope": "Source handoff records complete decode, stream dimensions and audio measurements. Browser playback is checked separately.", "artifactSha256": "d9130db7b975ea3bd829c2bdd45d770790d42cd3b10067c0aa7e0d02dd92d076" }, "creative": { "state": "Not independently accepted", "scope": "not independently established", "artifactSha256": "d9130db7b975ea3bd829c2bdd45d770790d42cd3b10067c0aa7e0d02dd92d076" }, "listening": { "state": "Not verified", "scope": "No perceptual listening pass is established by this library import.", "artifactSha256": "d9130db7b975ea3bd829c2bdd45d770790d42cd3b10067c0aa7e0d02dd92d076" }, "reproduction": { "state": "Not tested", "scope": "Source is supplied. Cross-machine cold-start reproduction has not been established.", "artifactSha256": "d9130db7b975ea3bd829c2bdd45d770790d42cd3b10067c0aa7e0d02dd92d076" } }, "detailUrl": "https://library.jkylehobson.chatgpt.site/video-library/#family=isometric&example=claude-cloud", "processUrl": "/video-library/process.html?family=isometric&example=claude-cloud", "downloads": { "prompt": { "available": true, "url": "/video-library/prompts/isometric--claude-cloud.txt", "sha256": "cae7a56b3011ed266464c7ba3f128e5e26a5732f2d182f8e36bc649fd2d7990c", "bytes": 1768, "label": "Reusable, example-specific instructions" }, "video": { "name": "isometric--claude-cloud.mp4", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/isometric--claude-cloud.mp4", "bytes": 3231275, "sha256": "d9130db7b975ea3bd829c2bdd45d770790d42cd3b10067c0aa7e0d02dd92d076", "available": true, "label": "3.1 MB" }, "source": { "name": "isometric--claude-cloud--source.zip", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/isometric--claude-cloud--source.zip", "bytes": 7680378, "sha256": "13feb6432507a5c11807ab046363cccb54add112c231335a035d20b24442616d", "available": true, "label": "7.3 MB", "contents": [ "editable source", "variant guidance", "source assets", "audio inputs", "dependency declarations", "file manifest" ], "includedFiles": 50, "includedFilePaths": [ "CASE_STUDY.md", "RUN.md", "SKILL.md", "STYLE.md", "THIRD-PARTY-NOTICES/animate-MIT.txt", "assets/components/exploded-section.png", "assets/components/slab-kit.png", "assets/components/tray-final.png", "assets/layers/t10.10/01_objects.png", "assets/layers/t10.10/02_captions.png", "assets/layers/t2.30/01_objects.png", "assets/layers/t2.30/02_captions.png", "assets/layers/t4.40/01_objects.png", "assets/layers/t4.40/02_captions.png", "assets/layers/t7.60/01_objects.png", "assets/layers/t7.60/02_captions.png", "audio/cues.json", "audio/mix.flac", "audio/stems/drums.flac", "audio/stems/music.flac", "audio/stems/sfx.flac", "engine/audio.mjs", "engine/audio/dsp.js", "engine/audio/instruments.js", "engine/audio/sfx.js", "engine/browser.mjs", "engine/export.mjs", "engine/finish.mjs", "engine/lib/draw.js", "engine/lib/util.js", "engine/page.html", "engine/render.mjs", "engine/runtime.js", "engine/server.mjs", "film/contact_sheet.jpg", "film/spectrogram.png", "film/stills/01_1.20s.jpg", "film/stills/02_2.30s.jpg", "film/stills/03_4.40s.jpg", "film/stills/04_6.00s.jpg", "film/stills/05_7.60s.jpg", "film/stills/06_10.10s.jpg", "overview/encoded-contact-sheet.jpg", "package.json", "qa.json", "spec.json", "styles/isometric/scene.js", "styles/isometric/score.js", "styles/isometric/timeline.js", "BUNDLE-GUIDE.md" ], "externalPrerequisites": { "runtime": [ "Node.js", "Chromium or Chrome", "FFmpeg and ffprobe" ], "packageDependencies": { "@fontsource/anton": "^5.1.0", "@fontsource/archivo-black": "^5.1.0", "@fontsource/bangers": "^5.1.0", "@fontsource/bebas-neue": "^5.1.0", "@fontsource/caveat": "^5.1.0", "@fontsource/comic-neue": "^5.3.0", "@fontsource/dm-sans": "^5.1.0", "@fontsource/dm-serif-display": "^5.1.0", "@fontsource/fraunces": "^5.1.0", "@fontsource/ibm-plex-mono": "^5.1.0", "@fontsource/instrument-serif": "^5.1.0", "@fontsource/inter": "^5.1.0", "@fontsource/jetbrains-mono": "^5.1.0", "@fontsource/jost": "^5.3.0", "@fontsource/kaushan-script": "^5.3.0", "@fontsource/nunito": "^5.1.0", "@fontsource/permanent-marker": "^5.1.0", "@fontsource/playfair-display": "^5.1.0", "@fontsource/press-start-2p": "^5.1.0", "@fontsource/space-grotesk": "^5.1.0", "@fontsource/space-mono": "^5.1.0", "@fontsource/stix-two-text": "^5.3.0", "@fontsource/syne": "^5.1.0", "@fontsource/vt323": "^5.1.0", "three": "0.170.0", "playwright": "1.56.1" }, "lockfileIncluded": false, "coldStart": false }, "license": { "summary": "User-directed publication of supplied authored source; preserve listed third-party notices; no new license granted here.", "includedNoticePaths": [ "THIRD-PARTY-NOTICES/animate-MIT.txt" ], "newLicenseGranted": false } }, "bundle": { "name": "isometric--claude-cloud--full.zip", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/isometric--claude-cloud--full.zip", "bytes": 10928737, "sha256": "4bc9d1f9a9be4f519edf81a20ee3ce5e54926b194a880aaf7d6b41f134284b28", "available": true, "label": "10.4 MB", "contents": [ "selected master", "editable source", "variant guidance", "source assets", "audio inputs", "dependency declarations", "file manifest", "designed cover", "starter prompt" ], "includedFiles": 53, "includedFilePaths": [ "CASE_STUDY.md", "RUN.md", "SKILL.md", "STYLE.md", "THIRD-PARTY-NOTICES/animate-MIT.txt", "assets/components/exploded-section.png", "assets/components/slab-kit.png", "assets/components/tray-final.png", "assets/layers/t10.10/01_objects.png", "assets/layers/t10.10/02_captions.png", "assets/layers/t2.30/01_objects.png", "assets/layers/t2.30/02_captions.png", "assets/layers/t4.40/01_objects.png", "assets/layers/t4.40/02_captions.png", "assets/layers/t7.60/01_objects.png", "assets/layers/t7.60/02_captions.png", "audio/cues.json", "audio/mix.flac", "audio/stems/drums.flac", "audio/stems/music.flac", "audio/stems/sfx.flac", "display/cover.webp", "engine/audio.mjs", "engine/audio/dsp.js", "engine/audio/instruments.js", "engine/audio/sfx.js", "engine/browser.mjs", "engine/export.mjs", "engine/finish.mjs", "engine/lib/draw.js", "engine/lib/util.js", "engine/page.html", "engine/render.mjs", "engine/runtime.js", "engine/server.mjs", "film/contact_sheet.jpg", "film/isometric.mp4", "film/spectrogram.png", "film/stills/01_1.20s.jpg", "film/stills/02_2.30s.jpg", "film/stills/03_4.40s.jpg", "film/stills/04_6.00s.jpg", "film/stills/05_7.60s.jpg", "film/stills/06_10.10s.jpg", "overview/encoded-contact-sheet.jpg", "package.json", "qa.json", "spec.json", "starter-prompt.txt", "styles/isometric/scene.js", "styles/isometric/score.js", "styles/isometric/timeline.js", "BUNDLE-GUIDE.md" ], "externalPrerequisites": { "runtime": [ "Node.js", "Chromium or Chrome", "FFmpeg and ffprobe" ], "packageDependencies": { "@fontsource/anton": "^5.1.0", "@fontsource/archivo-black": "^5.1.0", "@fontsource/bangers": "^5.1.0", "@fontsource/bebas-neue": "^5.1.0", "@fontsource/caveat": "^5.1.0", "@fontsource/comic-neue": "^5.3.0", "@fontsource/dm-sans": "^5.1.0", "@fontsource/dm-serif-display": "^5.1.0", "@fontsource/fraunces": "^5.1.0", "@fontsource/ibm-plex-mono": "^5.1.0", "@fontsource/instrument-serif": "^5.1.0", "@fontsource/inter": "^5.1.0", "@fontsource/jetbrains-mono": "^5.1.0", "@fontsource/jost": "^5.3.0", "@fontsource/kaushan-script": "^5.3.0", "@fontsource/nunito": "^5.1.0", "@fontsource/permanent-marker": "^5.1.0", "@fontsource/playfair-display": "^5.1.0", "@fontsource/press-start-2p": "^5.1.0", "@fontsource/space-grotesk": "^5.1.0", "@fontsource/space-mono": "^5.1.0", "@fontsource/stix-two-text": "^5.3.0", "@fontsource/syne": "^5.1.0", "@fontsource/vt323": "^5.1.0", "three": "0.170.0", "playwright": "1.56.1" }, "lockfileIncluded": false, "coldStart": false }, "license": { "summary": "User-directed publication of supplied authored source; preserve listed third-party notices; no new license granted here.", "includedNoticePaths": [ "THIRD-PARTY-NOTICES/animate-MIT.txt" ], "newLicenseGranted": false } } }, "cadenceNote": "Encoded fps describes the file. Scene evaluation and held actor poses depend on this source recipe.", "starterPrompt": "Create a {10}-second {1080×1920} isometric hairline illustration of {product/process}. 2:1 dimetric projection; every line 2 px on screen (grey silhouettes #a4a4ac, lighter inner lines #e0e0e4); white faces hide what's behind (painter's order); rounded slabs with visible thickness and one extrusion line at the nearest corner; detail from repetition (grids of cells, keys, pillars); no colour, shadow, gradient or texture; ONE dark accent that marks the current focus. Parts drop in and rise in diagonal waves on springs, then hold still. Use an exploded section with dashed guide lines to show what's inside. Captions: neutral sans, centred, with a short rule above; mono labels set into faces. Score: calm plucks + a soft pitched tick for every landing.\n\nSelected example: Seed to Seedling\nFamily: isometric\nVariant: claude-cloud\nTypography: Inter 400, JetBrains Mono 400\nProduction: canvas-2d\nExact reference master SHA-256: d9130db7b975ea3bd829c2bdd45d770790d42cd3b10067c0aa7e0d02dd92d076\n\nRead the selected STYLE.md, SKILL.md and reproduction instructions before adapting. Keep the declared renderer and source closure; do not assume another family variant has interchangeable parameters. Preserve exact font or custom glyph sources, color roles, spatial continuity and readable text. Record encoded frame rate, scene evaluation and held poses separately. Review the changed render visually and listen to the encoded audio before claiming those checks passed. Existing approval applies only to its recorded artifact.\n\nSuccess check: the adapted story is clear; key type remains readable in motion; the source rebuilds with its declared inputs; all media and review records identify the exact output. State any untested reproduction, listening or rights limits.", "downloadNote": "Downloads match this selected example. The full bundle includes its source, original video, cover and starter prompt. Source packages include artwork, audio inputs and dependency declarations. Requires Node.js, Chromium or Chrome, FFmpeg and ffprobe. Follow the included run guide for package installation and reproduction limits.", "model": "Opus 5.5", "reasoningEffort": "Extra" } ], "relatedMethodIds": [ "isometric" ] }, { "id": "isotype-pictogram", "slug": "isotype-pictogram", "title": "Isotype Pictogram", "premise": "Identical pictograms turn quantities into visible units. Motion follows a reading order while preserving the count.", "summary": "Identical pictograms turn quantities into visible units. Motion follows a reading order while preserving the count.", "category": "Information design", "defaultExampleId": "claude-cloud", "facets": { "material": [ "2d", "pictogram", "unit-chart", "counting", "flat", "geometric-sans", "data", "sonification" ], "producer": [ "Claude Cloud" ], "format": [ "Portrait" ], "motion": [], "useCase": [] }, "examples": [ { "id": "claude-cloud", "title": "Seed to Seedling", "producer": "Claude Cloud", "producerEvidence": "The displayed model and reasoning label identify this production lane. Exact runtime model ID and per-film cost are not established by the source packet.", "relationship": "Original family example", "format": "Portrait", "productionMethod": "canvas-2d", "master": { "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/isotype-pictogram--claude-cloud.mp4", "sha256": "8eadf1955f33eabab186762043ef8b8ac25d74abdfacfa30c0cd65634b093992", "bytes": 1613665, "mimeType": "video/mp4", "width": 1080, "height": 1920, "duration": 10.0, "encodedFps": 60 }, "poster": { "url": "/video-library/media/isotype-pictogram--claude-cloud/cover.webp", "sha256": "c4c1c65e77ddf7584439c139dce72df281ef8cbb75c24142b7a7304fe3d4a64d", "sourceMasterSha256": "8eadf1955f33eabab186762043ef8b8ac25d74abdfacfa30c0cd65634b093992", "timeSeconds": 8.5, "rationale": "Late story beat selected to show the developed subject and visual system; extracted from this exact master." }, "previewVideo": { "url": "/video-library/media/isotype-pictogram--claude-cloud/preview.mp4", "sha256": "3d812d8c28b1ae31e1264969d0896c6d368829086daab3a7cb890be9ca67c173", "sourceMasterSha256": "8eadf1955f33eabab186762043ef8b8ac25d74abdfacfa30c0cd65634b093992", "width": 540, "height": 960, "label": "Playback preview · 540 px wide · full master in Download finished video" }, "gallery": [ { "id": "overview", "role": "encoded-contact-sheet", "label": "Scenes from the finished render · not a planning storyboard", "url": "/video-library/media/isotype-pictogram--claude-cloud/overview.webp", "sourceMasterSha256": "8eadf1955f33eabab186762043ef8b8ac25d74abdfacfa30c0cd65634b093992" }, { "id": "scene-1", "role": "encoded-frame", "label": "Finished-film frame · 2 seconds", "url": "/video-library/media/isotype-pictogram--claude-cloud/scene-1.webp", "sourceMasterSha256": "8eadf1955f33eabab186762043ef8b8ac25d74abdfacfa30c0cd65634b093992", "timeSeconds": 2.0 }, { "id": "scene-2", "role": "encoded-frame", "label": "Finished-film frame · 5 seconds", "url": "/video-library/media/isotype-pictogram--claude-cloud/scene-2.webp", "sourceMasterSha256": "8eadf1955f33eabab186762043ef8b8ac25d74abdfacfa30c0cd65634b093992", "timeSeconds": 5.0 }, { "id": "scene-3", "role": "encoded-frame", "label": "Finished-film frame · 8 seconds", "url": "/video-library/media/isotype-pictogram--claude-cloud/scene-3.webp", "sourceMasterSha256": "8eadf1955f33eabab186762043ef8b8ac25d74abdfacfa30c0cd65634b093992", "timeSeconds": 8.0 } ], "typography": [ "Jost 600 caps", "Jost 700", "Jost 500", "Jost 500 34 / 400 30", "Jost 600 28 / Jost 400 26" ], "palette": { "paper": "#f2ead8", "ink": "#1d1b19", "red": "#c8372d", "blue": "#2f5f9e", "green": "#3f7f3a", "ochre": "#c8913a", "seedDry": "#9a6a34", "soil": "#dccfb4", "root": "#6b4a2e", "grey": "#a39d92", "mute": "#6f6a62" }, "usageGuidance": "Change the subject, copy and timing for your audience. Retain the selected example’s visual rules and recheck the entire reading interval after changes.", "styleRules": "---\nid: isotype-pictogram\nname: Isotype (count, don't scale)\nfamily: information design\naliases: [isotype, pictogram chart, Neurath, Arntz, icon array, unit chart]\ntags: [2d, pictogram, unit-chart, counting, flat, geometric-sans, data, sonification]\nkind: visual-style\nroute: canvas-2d (CPU-backed canvas)\nreadiness: { research: authored, rights: original-work, referenceImages: own-render, code: built, render: rendered-and-measured }\n---\n\n# Isotype (count, don't scale)\n\nA moving unit chart in the tradition of the Vienna Method (Otto and Marie Neurath, Gerd Arntz, 1920s-30s).\n- **The tray:** one tray of 20 bean seeds, shown as 20 identical flat pictograms on four soil bands.\n- **The ripples:** each beat moves through the grid in reading order. Every seed takes up water (a drop falls and it swells). Most grow a root, and most of those push up a shoot. The failures flip to grey.\n- **The counter:** a big live count in the header (\"18 of 20 grow a root\") ticks up as each symbol changes.\n- **The sort:** at the end the symbols reorganise themselves by outcome (\"17 seedlings · 1 root only · 2 did not sprout\").\n- **The sound:** you can hear the count. Every change is one note, and every failure is a pitchless thunk.\n\n**The one rule:** *quantity is shown by repetition, never by size.* One symbol = one seed, always the same size, with flat silhouettes, no outlines and no perspective. Colour means category.\n\n## Creative direction\n- **Audience:** general public, students, NGOs, public-health and science communicators, annual-report audiences.\n- **Purpose:** make proportions and outcomes countable at a glance (\"most, but not all\").\n- **Feeling:** clear, civic, quietly optimistic, honest about failure.\n- **Central visual idea:** *count, don't scale.* A population of identical units changes state, and the viewer counts along. The final sort turns the scattered outcomes into a readable proportion.\n- **How the parts work together:**\n - *Composition* is a strict grid of 5 × 4 cells on soil bands, with the header counter above and the key/tally below.\n - *Colour* is category only: water blue, root brown, shoot green, stalled grey, seed ochre.\n - *Type* is a geometric sans (Jost, in the spirit of Futura) with heavy numerals for counts and spaced caps for step labels.\n - *Motion* is a ripple in reading order (each change a quick pop, flip or grow), plus one big reorganisation at the end.\n - *Sound* is sonified counting: water rises up a pentatonic scale, roots step down, shoots climb up, and failures break the pattern.\n\n## Fit\n- **Best for:** survival/success rates, survey results, \"x of y\" stories, population outcomes, before/after counts, accessibility-first data.\n- **Avoid when:** the numbers are large (use one symbol = n units and say so), continuous, or need precise decimals; or when the subject is an individual journey.\n- **Data ethics:** the outcome here is illustrative, not a measured trial, and the footer says so. Real data replaces `FAIL_ROOT`/`FAIL_SHOOT`.\n- **Cost:** trivial. 600 frames in about 15 s.\n\n## Visual fingerprint\n| Element | Rule |\n|---|---|\n| Grid | 5 columns × 4 rows; cell 180 px wide; rows 250 px apart from y 560; ground line 130 px into each row; soil band 940 × 108 px. |\n| Symbols | Seed (bean silhouette 52 × 34 px; dry `#9a6a34` at 82 % size, swollen `#c8913a`), centred 36 px below the ground line. Root: brown taper 66 px down with two laterals. Shoot: green 8 px stem to 100 px above ground plus two leaf shapes. Drop: blue teardrop. Stalled: grey seed. |\n| Palette | Paper `#f2ead8` · ink `#1d1b19` · blue `#2f5f9e` · root `#6b4a2e` · green `#3f7f3a` · ochre `#c8913a` · dry seed `#9a6a34` · soil `#dccfb4` · grey `#a39d92` · muted text `#6f6a62`. |\n| Key | Always visible until the tally replaces it: \"seed = 1 seed\", then the water/root/shoot/stalled swatches. |\n| Header | Step badge + caps label; a giant counter in the step colour; \"of 20\"; a verb line. |\n\n### Typography (exact)\n| Role | Family / weight | Size | Colour | Position | Enter → settle |\n|---|---|---|---|---|---|\n| Step label | Jost 600, caps, tracking +3 | 28 | ink | (142, 160), badge circle r 20 at (108, 150) | fade 0.3 s at the step start |\n| Counter | Jost 700 | 168 | step colour | baseline (84, 360) | increments live with each success; no animation on the digits themselves |\n| \"of 20\" | Jost 500 | 64 | ink | counter right + 20 | fade 0.3 s |\n| Verb line | Jost 500 | 52 | ink | (90, 432) | fade 0.3 s |\n| Title | Jost 700 | 120 | \"From seed\" ink / \"to seedling\" green | baselines 290 / 410 | fade + rise 20 px at 8.3 s (the counter header fades out 0.25 s before) |\n| Key / tally | Jost 500 34 / 400 30 | , | ink / muted | y 1600 | key at 0.85 s; tally replaces it after the sort |\n| Footer | Jost 600 28 / 400 26 | , | ink / muted | y 1790 / 1836 | fade 0.4 s at 8.8 s |\n\n## Temporal fingerprint\n| Element | Rule |\n|---|---|\n| Grid | 120 BPM; steps at 1.2 s, 3.0 s and 5.2 s; sort at 7.35 s; title at 8.3 s. |\n| Ripple order | Reading order (left→right, top→bottom), with failures taking their turn. Stagger: appear 35 ms, water 50 ms, roots 75 ms, shoots 80 ms. Later steps are slower so each change can be counted. |\n| State changes | Appear: pop `easeOutBack(2.4)` 0.2 s. Water: the drop falls 0.25 s, then the seed swells 0.82 → 1 with a 12 % bump (0.2 s). Root: grows 0.3 s. Shoot: stem 70 %, then the leaves pop. Failure: card-flip to grey 0.2 s. |\n| Sort | Each symbol slides to its outcome slot (easeInOutCubic 0.6 s, 25 ms stagger, 26 px arc lift); moving symbols draw on top. |\n| Holds | Each step's final count holds ≥ 0.3 s before the next step; the title and tally hold 1.7 s. |\n\n## How the composition develops\n| Time | Beat | What happens |\n|---|---|---|\n| 0-1.2 s | Set-up | 20 dry seeds pop in, row by row; the counter counts 0 → 20 \"seeds planted\"; the key appears. |\n| 1.2-3.0 s | ① Water wakes the seed | A drop falls onto each seed in turn; each swells and turns ochre; \"20 of 20 take up water\". |\n| 3.0-5.2 s | ② A root reaches down | Roots grow in reading order; seeds 8 and 17 flip grey; \"18 of 20 grow a root\". |\n| 5.2-7.35 s | ③ A shoot finds the light | Shoots rise; seed 13 stalls; \"17 of 20 reach the light\". |\n| 7.35-10 s | Sort + title | The symbols reorganise: 17 seedlings, 1 root-only, 2 seeds. The tally replaces the key; \"From seed / to seedling\"; footer note. |\n\n## Sound fingerprint\nSonified counting in C-major pentatonic at 120 BPM, with columns panned left → right so position is audible.\n- **Appear:** 20 soft clicks rising in pitch.\n- **Water:** kalimba notes climbing the pentatonic scale, one per drop.\n- **Roots:** plucked notes descending (\"down into the soil\").\n- **Shoots:** bell notes ascending (\"up to the light\").\n- **Failures:** a dull, pitchless thunk that audibly breaks the line.\n- **Bed:** a dry pulse (bass on beats, woodblock-like clicks on 8ths) from step 1.\n- **Ending:** the sort is a card shuffle, then a tally chord and a soft pad under the title.\n\nMix −15.4 LUFS, −2.4 dBTP.\n\n## Reusable prompt\n> Create a {10}-second {1080×1920} Isotype-style unit chart about {population and outcome}. Show {20} identical flat pictograms (one symbol = one {unit}; never scale a symbol to show quantity) in a strict grid with a ground band per row. Each beat ripples through the grid in reading order: successes change state (pop, grow), failures card-flip to grey. A giant live counter in a geometric sans counts the successes (\"18 of 20 …\") in the step colour, with a numbered caps step label. Keep a key visible (\"symbol = 1 {unit}\"). End by sorting the symbols by outcome and replacing the key with a tally. Colour = category only; flat silhouettes, no outlines, no perspective. Sound: one pitched note per symbol change (rising for good news, falling for going down, pitchless thunks for failures) over a dry pulse. State whether the numbers are real or illustrative.\n\n## Adaptation guidance\n| Change | Safe? | Notes |\n|---|---|---|\n| Population size | ✅ | 10-50 symbols; above about 50 use one symbol = n units and state it in the key. |\n| Outcomes | ✅ | Edit `FAIL_*` lists (or replace with real data); `sortedOrder()` builds the final arrangement. |\n| Symbols | ✅ | Any flat silhouette family, drawn on the same grid with the same proportions. |\n| Palette | ✅ | Keep ≤ 5 category colours plus ink, grey and paper. |\n| Font | ✅ | Geometric sans (Jost, Futura, Avenir-like, Gill-like). Heavy numerals. |\n| 16:9 | ✅ | 10 × 2 grid, header left, tally right. |\n| **Essential** | , | Identical repeated units, a visible key, reading-order ripples, a live count, the sort, colour = category, honest sourcing. |\n\n## Accessibility\n- **Not colour alone:** categories differ in shape and position (shoot above ground, root below, grey seeds have neither) and in sound (pitch vs thunk).\n- **Legibility:** counters are 168 px.\n- **Contrast:** the paper is warm off-white with ink at about 15:1.\n- **Comfort:** there is no flashing, and the motion is small and regular.\n\n## Provenance\nOriginal style authored for this library (2026-10-07), inspired by the public-domain *ideas* of the Isotype method (Neurath, Arntz). No Isotype symbols were copied; all pictograms were drawn here. Font: Jost (SIL OFL) via Fontsource. Numbers are illustrative.", "review": { "technical": { "state": "Supplied checks passed", "scope": "Source handoff records complete decode, stream dimensions and audio measurements. Browser playback is checked separately.", "artifactSha256": "8eadf1955f33eabab186762043ef8b8ac25d74abdfacfa30c0cd65634b093992" }, "creative": { "state": "Not independently accepted", "scope": "not independently established", "artifactSha256": "8eadf1955f33eabab186762043ef8b8ac25d74abdfacfa30c0cd65634b093992" }, "listening": { "state": "Not verified", "scope": "No perceptual listening pass is established by this library import.", "artifactSha256": "8eadf1955f33eabab186762043ef8b8ac25d74abdfacfa30c0cd65634b093992" }, "reproduction": { "state": "Not tested", "scope": "Source is supplied. Cross-machine cold-start reproduction has not been established.", "artifactSha256": "8eadf1955f33eabab186762043ef8b8ac25d74abdfacfa30c0cd65634b093992" } }, "detailUrl": "https://library.jkylehobson.chatgpt.site/video-library/#family=isotype-pictogram&example=claude-cloud", "processUrl": "/video-library/process.html?family=isotype-pictogram&example=claude-cloud", "downloads": { "prompt": { "available": true, "url": "/video-library/prompts/isotype-pictogram--claude-cloud.txt", "sha256": "b062ae3cc7aab23ff2401baa4072c8a4d701a813510b48c0681cbab1a3d74ece", "bytes": 1934, "label": "Reusable, example-specific instructions" }, "video": { "name": "isotype-pictogram--claude-cloud.mp4", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/isotype-pictogram--claude-cloud.mp4", "bytes": 1613665, "sha256": "8eadf1955f33eabab186762043ef8b8ac25d74abdfacfa30c0cd65634b093992", "available": true, "label": "1.5 MB" }, "source": { "name": "isotype-pictogram--claude-cloud--source.zip", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/isotype-pictogram--claude-cloud--source.zip", "bytes": 7188233, "sha256": "b4956fff7445bb607753a2da0511c62daa8053eed598a3f1b28fe4e96aa5ac77", "available": true, "label": "6.9 MB", "contents": [ "editable source", "variant guidance", "source assets", "audio inputs", "dependency declarations", "file manifest" ], "includedFiles": 53, "includedFilePaths": [ "CASE_STUDY.md", "RUN.md", "SKILL.md", "STYLE.md", "assets/components/glyph-sheet.png", "assets/components/key-row.png", "assets/components/symbol-states.png", "assets/layers/t2.60/01_paper.png", "assets/layers/t2.60/02_bands.png", "assets/layers/t2.60/03_symbols.png", "assets/layers/t2.60/04_type.png", "assets/layers/t4.60/01_paper.png", "assets/layers/t4.60/02_bands.png", "assets/layers/t4.60/03_symbols.png", "assets/layers/t4.60/04_type.png", "assets/layers/t9.60/01_paper.png", "assets/layers/t9.60/02_bands.png", "assets/layers/t9.60/03_symbols.png", "assets/layers/t9.60/04_type.png", "audio/cues.json", "audio/mix.flac", "audio/stems/drums.flac", "audio/stems/music.flac", "audio/stems/sfx.flac", "engine/audio.mjs", "engine/audio/dsp.js", "engine/audio/instruments.js", "engine/audio/sfx.js", "engine/browser.mjs", "engine/export.mjs", "engine/finish.mjs", "engine/lib/draw.js", "engine/lib/util.js", "engine/page.html", "engine/render.mjs", "engine/runtime.js", "engine/server.mjs", "film/contact_sheet.jpg", "film/spectrogram.png", "film/stills/01_0.90s.jpg", "film/stills/02_2.60s.jpg", "film/stills/03_4.60s.jpg", "film/stills/04_6.80s.jpg", "film/stills/05_8.20s.jpg", "film/stills/06_9.60s.jpg", "overview/encoded-contact-sheet.jpg", "package.json", "qa.json", "spec.json", "styles/isotype-pictogram/scene.js", "styles/isotype-pictogram/score.js", "styles/isotype-pictogram/timeline.js", "BUNDLE-GUIDE.md" ], "externalPrerequisites": { "runtime": [ "Node.js", "Chromium or Chrome", "FFmpeg and ffprobe" ], "packageDependencies": { "@fontsource/anton": "^5.1.0", "@fontsource/archivo-black": "^5.1.0", "@fontsource/bangers": "^5.1.0", "@fontsource/bebas-neue": "^5.1.0", "@fontsource/caveat": "^5.1.0", "@fontsource/dm-sans": "^5.1.0", "@fontsource/dm-serif-display": "^5.1.0", "@fontsource/fraunces": "^5.1.0", "@fontsource/ibm-plex-mono": "^5.1.0", "@fontsource/instrument-serif": "^5.1.0", "@fontsource/inter": "^5.1.0", "@fontsource/jetbrains-mono": "^5.1.0", "@fontsource/jost": "^5.3.0", "@fontsource/nunito": "^5.1.0", "@fontsource/permanent-marker": "^5.1.0", "@fontsource/playfair-display": "^5.1.0", "@fontsource/press-start-2p": "^5.1.0", "@fontsource/space-grotesk": "^5.1.0", "@fontsource/space-mono": "^5.1.0", "@fontsource/syne": "^5.1.0", "@fontsource/vt323": "^5.1.0", "three": "0.170.0", "playwright": "1.56.1" }, "lockfileIncluded": false, "coldStart": false }, "license": { "summary": "User-directed publication of supplied authored source; preserve listed third-party notices; no new license granted here.", "includedNoticePaths": [], "newLicenseGranted": false } }, "bundle": { "name": "isotype-pictogram--claude-cloud--full.zip", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/isotype-pictogram--claude-cloud--full.zip", "bytes": 8826454, "sha256": "6360bafbb1dcfc8b578509b7e7d811dc42d47382464d54e83f250b6289719bda", "available": true, "label": "8.4 MB", "contents": [ "selected master", "editable source", "variant guidance", "source assets", "audio inputs", "dependency declarations", "file manifest", "designed cover", "starter prompt" ], "includedFiles": 56, "includedFilePaths": [ "CASE_STUDY.md", "RUN.md", "SKILL.md", "STYLE.md", "assets/components/glyph-sheet.png", "assets/components/key-row.png", "assets/components/symbol-states.png", "assets/layers/t2.60/01_paper.png", "assets/layers/t2.60/02_bands.png", "assets/layers/t2.60/03_symbols.png", "assets/layers/t2.60/04_type.png", "assets/layers/t4.60/01_paper.png", "assets/layers/t4.60/02_bands.png", "assets/layers/t4.60/03_symbols.png", "assets/layers/t4.60/04_type.png", "assets/layers/t9.60/01_paper.png", "assets/layers/t9.60/02_bands.png", "assets/layers/t9.60/03_symbols.png", "assets/layers/t9.60/04_type.png", "audio/cues.json", "audio/mix.flac", "audio/stems/drums.flac", "audio/stems/music.flac", "audio/stems/sfx.flac", "display/cover.webp", "engine/audio.mjs", "engine/audio/dsp.js", "engine/audio/instruments.js", "engine/audio/sfx.js", "engine/browser.mjs", "engine/export.mjs", "engine/finish.mjs", "engine/lib/draw.js", "engine/lib/util.js", "engine/page.html", "engine/render.mjs", "engine/runtime.js", "engine/server.mjs", "film/contact_sheet.jpg", "film/isotype-pictogram.mp4", "film/spectrogram.png", "film/stills/01_0.90s.jpg", "film/stills/02_2.60s.jpg", "film/stills/03_4.60s.jpg", "film/stills/04_6.80s.jpg", "film/stills/05_8.20s.jpg", "film/stills/06_9.60s.jpg", "overview/encoded-contact-sheet.jpg", "package.json", "qa.json", "spec.json", "starter-prompt.txt", "styles/isotype-pictogram/scene.js", "styles/isotype-pictogram/score.js", "styles/isotype-pictogram/timeline.js", "BUNDLE-GUIDE.md" ], "externalPrerequisites": { "runtime": [ "Node.js", "Chromium or Chrome", "FFmpeg and ffprobe" ], "packageDependencies": { "@fontsource/anton": "^5.1.0", "@fontsource/archivo-black": "^5.1.0", "@fontsource/bangers": "^5.1.0", "@fontsource/bebas-neue": "^5.1.0", "@fontsource/caveat": "^5.1.0", "@fontsource/dm-sans": "^5.1.0", "@fontsource/dm-serif-display": "^5.1.0", "@fontsource/fraunces": "^5.1.0", "@fontsource/ibm-plex-mono": "^5.1.0", "@fontsource/instrument-serif": "^5.1.0", "@fontsource/inter": "^5.1.0", "@fontsource/jetbrains-mono": "^5.1.0", "@fontsource/jost": "^5.3.0", "@fontsource/nunito": "^5.1.0", "@fontsource/permanent-marker": "^5.1.0", "@fontsource/playfair-display": "^5.1.0", "@fontsource/press-start-2p": "^5.1.0", "@fontsource/space-grotesk": "^5.1.0", "@fontsource/space-mono": "^5.1.0", "@fontsource/syne": "^5.1.0", "@fontsource/vt323": "^5.1.0", "three": "0.170.0", "playwright": "1.56.1" }, "lockfileIncluded": false, "coldStart": false }, "license": { "summary": "User-directed publication of supplied authored source; preserve listed third-party notices; no new license granted here.", "includedNoticePaths": [], "newLicenseGranted": false } } }, "cadenceNote": "Encoded fps describes the file. Scene evaluation and held actor poses depend on this source recipe.", "starterPrompt": "Create a {10}-second {1080×1920} Isotype-style unit chart about {population and outcome}. Show {20} identical flat pictograms (one symbol = one {unit}; never scale a symbol to show quantity) in a strict grid with a ground band per row. Each beat ripples through the grid in reading order: successes change state (pop, grow), failures card-flip to grey. A giant live counter in a geometric sans counts the successes (\"18 of 20 …\") in the step colour, with a numbered caps step label. Keep a key visible (\"symbol = 1 {unit}\"). End by sorting the symbols by outcome and replacing the key with a tally. Colour = category only; flat silhouettes, no outlines, no perspective. Sound: one pitched note per symbol change (rising for good news, falling for going down, pitchless thunks for failures) over a dry pulse. State whether the numbers are real or illustrative.\n\nSelected example: Seed to Seedling\nFamily: isotype-pictogram\nVariant: claude-cloud\nTypography: Jost 600 caps, Jost 700, Jost 500, Jost 500 34 / 400 30, Jost 600 28 / Jost 400 26\nProduction: canvas-2d\nExact reference master SHA-256: 8eadf1955f33eabab186762043ef8b8ac25d74abdfacfa30c0cd65634b093992\n\nRead the selected STYLE.md, SKILL.md and reproduction instructions before adapting. Keep the declared renderer and source closure; do not assume another family variant has interchangeable parameters. Preserve exact font or custom glyph sources, color roles, spatial continuity and readable text. Record encoded frame rate, scene evaluation and held poses separately. Review the changed render visually and listen to the encoded audio before claiming those checks passed. Existing approval applies only to its recorded artifact.\n\nSuccess check: the adapted story is clear; key type remains readable in motion; the source rebuilds with its declared inputs; all media and review records identify the exact output. State any untested reproduction, listening or rights limits.", "downloadNote": "Downloads match this selected example. The full bundle includes its source, original video, cover and starter prompt. Source packages include artwork, audio inputs and dependency declarations. Requires Node.js, Chromium or Chrome, FFmpeg and ffprobe. Follow the included run guide for package installation and reproduction limits.", "model": "Opus 5.5", "reasoningEffort": "Extra" } ], "relatedMethodIds": [] }, { "id": "kinetic-type-swiss", "slug": "kinetic-type-swiss", "title": "Kinetic Type Swiss", "premise": "A strong grid, black lettering and one red accent let typography become the subject of the film.", "summary": "A strong grid, black lettering and one red accent let typography become the subject of the film.", "category": "Typography / editorial", "defaultExampleId": "claude-cloud", "facets": { "material": [ "2d", "typography", "swiss", "grid", "snap", "eighth-note-grid", "three-colour", "type-as-image", "poster" ], "producer": [ "Claude Cloud" ], "format": [ "Portrait" ], "motion": [], "useCase": [] }, "examples": [ { "id": "claude-cloud", "title": "Seed to Seedling", "producer": "Claude Cloud", "producerEvidence": "The displayed model and reasoning label identify this production lane. Exact runtime model ID and per-film cost are not established by the source packet.", "relationship": "Original family example", "format": "Portrait", "productionMethod": "canvas-2d", "master": { "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/kinetic-type-swiss--claude-cloud.mp4", "sha256": "0922fc5cf32f844d432ddbd944b51c696350d1c3e5feb1ff62452e5f2abd8ae1", "bytes": 757212, "mimeType": "video/mp4", "width": 1080, "height": 1920, "duration": 9.0, "encodedFps": 60 }, "poster": { "url": "/video-library/media/kinetic-type-swiss--claude-cloud/cover.webp", "sha256": "933ddbbcf8b924b0e918b6f68bf7d37f7933fc9f6bf105ae764d44b3ffb502a5", "sourceMasterSha256": "0922fc5cf32f844d432ddbd944b51c696350d1c3e5feb1ff62452e5f2abd8ae1", "timeSeconds": 7.65, "rationale": "Late story beat selected to show the developed subject and visual system; extracted from this exact master." }, "previewVideo": { "url": "/video-library/media/kinetic-type-swiss--claude-cloud/preview.mp4", "sha256": "0569e6c65394ccff496acfd9c3bc7f4180d01b5c23a9e691a6cb1b066d76339a", "sourceMasterSha256": "0922fc5cf32f844d432ddbd944b51c696350d1c3e5feb1ff62452e5f2abd8ae1", "width": 540, "height": 960, "label": "Playback preview · 540 px wide · full master in Download finished video" }, "gallery": [ { "id": "overview", "role": "encoded-contact-sheet", "label": "Scenes from the finished render · not a planning storyboard", "url": "/video-library/media/kinetic-type-swiss--claude-cloud/overview.webp", "sourceMasterSha256": "0922fc5cf32f844d432ddbd944b51c696350d1c3e5feb1ff62452e5f2abd8ae1" }, { "id": "scene-1", "role": "encoded-frame", "label": "Finished-film frame · 1.8 seconds", "url": "/video-library/media/kinetic-type-swiss--claude-cloud/scene-1.webp", "sourceMasterSha256": "0922fc5cf32f844d432ddbd944b51c696350d1c3e5feb1ff62452e5f2abd8ae1", "timeSeconds": 1.8 }, { "id": "scene-2", "role": "encoded-frame", "label": "Finished-film frame · 4.5 seconds", "url": "/video-library/media/kinetic-type-swiss--claude-cloud/scene-2.webp", "sourceMasterSha256": "0922fc5cf32f844d432ddbd944b51c696350d1c3e5feb1ff62452e5f2abd8ae1", "timeSeconds": 4.5 }, { "id": "scene-3", "role": "encoded-frame", "label": "Finished-film frame · 7.2 seconds", "url": "/video-library/media/kinetic-type-swiss--claude-cloud/scene-3.webp", "sourceMasterSha256": "0922fc5cf32f844d432ddbd944b51c696350d1c3e5feb1ff62452e5f2abd8ae1", "timeSeconds": 7.2 } ], "typography": [ "Archivo Black 400", "Inter 600", "Inter 600 / 800" ], "palette": { "paper": "#F1EFEA", "ink": "#121212", "red": "#E3241B", "grid": "#D7D2C8", "mid": "#6B6862" }, "usageGuidance": "Change the subject, copy and timing for your audience. Retain the selected example’s visual rules and recheck the entire reading interval after changes.", "styleRules": "---\nid: kinetic-type-swiss\nname: Kinetic Type , Swiss (Seed to Seedling: the type is the plant)\nfamily: Typography / editorial\naliases: [kinetic typography, Swiss style, International Typographic Style, typographic poster, grid motion]\ntags: [2d, typography, swiss, grid, snap, eighth-note-grid, three-colour, type-as-image, poster]\nkind: visual-style\nroute: canvas-2d (type, rules and one red dot on a fixed page; every action quantised to an eighth-note grid)\nreadiness: { research: authored, rights: original-work, referenceImages: own-render, code: built, render: rendered-and-measured }\n---\n\n# Kinetic Type , Swiss (Seed to Seedling: the type is the plant)\n\nBlack type, warm white paper and one red. S·E·E·D rises letter by letter from behind a rule (the soil line), and a red dot lands after it: the seed.\n- W·A·T·E·R fall from the top into the dot, which grows with each letter (\"01 Water wakes the seed.\").\n- SEED exits left, the dot slides to the plant axis, R·O·O·T stack downward below the rule, and the T's stem grows into a right-angled root (\"02 A root reaches down.\").\n- S·H·O·O·T stack upward and two red leaves sprout from the top (\"03 A shoot finds the light.\").\n- A grid draws in, SEEDLING runs up the left edge, and three callouts with leader rules restate the beats.\n\n**The one rule:** *every image is made of type or typographic furniture* (rules, grids, index numbers, a period). If you reach for an illustration, you have left the style.\n\n## Creative direction\n- **Audience:** design-literate viewers, brands with a strong voice, conference and talk openers, manifestos.\n- **Purpose:** say a few words with maximum authority and make the language itself the picture.\n- **Feeling:** confident, intelligent, exact and poster-like.\n- **Central visual idea:** *the type is the plant:* the baseline is the soil, the period is the seed, a T's stem becomes the root, the stacked words are the growth.\n- **How the parts work together:**\n - *Composition:* a 6-column grid in 72 px margins; an image column at x 600; information blocks top left; callouts in the right column.\n - *Colour:* three colours, and the red is reserved for the seed, the leaves, the index numbers and one underline.\n - *Type:* one heavy grotesk for display at 300/200/170/140/130 px; Inter for information at 46/34/28 px.\n - *Motion:* mechanical snaps on an eighth-note grid, perfect holds, hard layout cuts on downbeats.\n - *Sound:* the typesetting is audible: one pitched blip and click per letter snap.\n\n## Fit\n- **Best for:** manifestos, brand statements, talk openers, concept explainers where words carry meaning, short social cut-downs, briefs with 1-4 strong words.\n- **Avoid when:** the subject needs imagery or warmth, there are many words to explain, or the audience reads a script without strong display faces. Vertical stacks and rotated words are hard for dyslexic readers, so restate them in plain sentences.\n- **Cost:** very low. Canvas 2D; 540 frames in about 40 s.\n\n## Visual fingerprint\n| Element | Rule |\n|---|---|\n| Palette | paper `#F1EFEA`, ink `#121212`, signal red `#E3241B` (seed, leaves, index numbers, title underline only), grid `#D7D2C8` (end card, settles to 60 %), mid `#6B6862` (colophon only). |\n| Grid | 6 columns inside 72 px margins; the main rule (6 px) sits at baseline y 1040; the plant axis is x 600. |\n| Rules | 6 px main rule, 10 px structural root branches (right angles), 3 px leaders, 2 px grid. Butt caps, mitre joins. |\n| Masks | Letters rise out of (or drop below) the rule: the rule is a clip edge, so the soil line hides what is \"underground\". |\n| The dot | Radius 30 px + 4 px per WATER letter absorbed; it moves from after \"SEED\" to the axis at the first layout cut. |\n| Stacks | Letters 140 px on a 122 px pitch, centred on x 600: ROOT downward from the rule, SHOOT upward. **The upward stack adds letters on top in reverse order** (T first … S last), so it reads top-down correctly. |\n| Depth | None but scale contrast (300 px vs 28 px, about 10:1) and masking. No texture, light or shadow. |\n\n### Typography (exact)\n| Role | Family / weight | Size | Notes |\n|---|---|---|---|\n| Hero word | Archivo Black 400 | 300 px | \"SEED\", from x 72 on the rule |\n| Stacked letters | Archivo Black 400 | 140 px, pitch 122 | ROOT ↓, SHOOT ↑ |\n| Falling letters | Archivo Black 400 | 130 px | W·A·T·E·R |\n| Index numerals | Archivo Black 400 | 170 px, red | 01 / 02 / 03, rolling like a counter |\n| Index statements | Inter 600 | 46 px, lead 56 | Two lines from x 330, wiped left to right |\n| Edge word | Archivo Black 400 | 200 px | SEEDLING, rotated −90°, reading bottom to top up the left edge |\n| Callouts | Inter 800 (red number) / 600 | 34 px, lead 42 | From x 766 with 48 px leader rules |\n| Title / colophon | Inter 800 40 px; Inter 600 28 px (mid grey, right-aligned) | , | \"From seed to seedling\" + a 120 × 8 red underline; \"Illustration , time-compressed\" |\n\n## Temporal fingerprint\n120 BPM, eighth-note grid = 0.25 s = 15 frames. Every action starts on the grid; between actions the frame is perfectly still (55 held frames are intentional).\n\n| Element | Rule |\n|---|---|\n| Easing | Exponential-out snap `(1 − 2^(−10k)) / (1 − 2^(−10))`, 0.12-0.3 s, **no overshoot**; exits cubic-in 0.2 s with a 35 ms stagger. |\n| SEED | Letters at 0.25 / 0.5 / 0.75 / 1.0 s; the dot and the rule at 1.25 s. |\n| WATER | Letters land at 1.5-2.5 s (one per eighth), falling 0.25 s (k²) and shrinking into the dot over the last 22 %. |\n| Layout cut 1 (3.0 s) | SEED exits left; the dot slides to the axis (0.25 s); ROOT stacks at 3.25-4.0 s; the T's stem grows 4.0-4.6 s; rootlets at 4.25 / 4.5 s. |\n| Layout cut 2 (4.75 s) | SHOOT stacks at 5.0-6.0 s; leaves at 6.25 / 6.5 s. |\n| Index blocks | Roll in (0.18 s) with each layout; statements wipe in, staggered 0.06 s per line. |\n| End (7.0 s) | The grid draws down (0.35 s) and sits back to 60 %; SEEDLING letters every 0.125 s; callouts at 8.0 / 8.125 / 8.25 s; colophon and title at 8.5 s; hold to 9.0 s. |\n\n## How the composition develops\nA word on a line → the line becomes ground → the page splits into above and below the rule → the poster gathers everything into a grid. Continuity is carried by the rule and the red dot, which never leave the page.\n\n## Individual assets\n| Asset | File | Source |\n|---|---|---|\n| Paper | `assets/layers/static/01_paper.png` | `draw()` |\n| Layers | per time `02_end-card`, `03_index`, `04_words`, `05_dot` at 1.3, 2.6, 4.6, 6.8 and 8.7 s | `drawLayer()` |\n| SEED + dot, root/shoot stacks, index block, end card | `assets/components/seed-word-and-dot.png`, `root-shoot-stacks.png`, `index-block.png`, `end-card.png` | `drawSeedWord()`, `drawRoot()`, `drawShoot()`, `drawIndex()`, `drawEnd()` |\n| Palette | `assets/components/palette.png` | `C` |\n\n## Sound\n**Score:** minimal and metronomic, A minor pentatonic at 120 BPM. Quarter-note kicks and eighth hats from the first index; a sub-bass and a quiet pad change on each layout cut.\n\n| Event | Sound |\n|---|---|\n| Each letter snap | a pitched sine blip + a 4 kHz click on the grid: descending for ROOT, ascending for SHOOT and SEEDLING |\n| WATER letters | downward whistles + bubble plips into the dot |\n| Stem | a descending resonant sweep |\n| Leaves | two bright pops |\n| Poster | a low impact; clicks for the callouts |\n\n**Stems:** `music`, `drums`, `foley`; `cues.json` holds every snap. Measured: −14.6 LUFS, −1.3 dBTP.\n\n## Reusable prompt\n> Create a {9}-second {1080×1920} Swiss kinetic-typography video about {subject}. Black {#121212} type on warm white with ONE signal colour {#E3241B}. Build every image from type and typographic furniture (one horizontal rule, grid hairlines, a period, index numbers); turn letterforms into the subject (a letter's stem becomes a structure). Display face {Archivo Black}; information face {Inter}. Six-column grid, 72 px margins, asymmetric layout, big red index numbers with flush-left statements that roll and wipe. All motion snaps on a {120 BPM} eighth-note grid with exponential-out eases (no overshoot) and perfect holds; layouts change with hard cuts on downbeats while the rule and a red dot persist. Finish on a poster: vertical edge word, callouts with leader rules, colophon. Score: a pitched blip + click per letter snap, a minimal kick/hat pulse, sub-bass on cuts.\n\n## Adaptation guidance\n| Change | Safe? | Notes |\n|---|---|---|\n| Words / subject | ✅ | Find the type trick first (which letter does which job), then code. Read every stack top-down before rendering. |\n| Display face | ✅ | Any heavy grotesk; re-measure stems before attaching geometry (Archivo Black's T stem is 30 px at 140 px). |\n| Signal colour | ✅ | One accent only; check it against the paper (red here is 4.0:1, fine for display sizes only). |\n| Other languages | ⚠️ | The letter tricks rarely survive translation; plan a fallback layout. |\n| Overshoot / camera moves / pictures | ❌ | They break the style. |\n| 16:9 | ✅ | Stacks become horizontal lines growing left to right. |\n| **Essential** | , | Type-made imagery, three colours, grid alignment, snaps without overshoot on a musical grid, hard layout cuts, one persistent mark. |\n\n## Accessibility\n- **Contrast (computed from the palette):** ink on paper 16.3:1; red on paper 4.0:1 (used only at 34-170 px display sizes); colophon grey 4.8:1.\n- **Motion:** no flashes, but snaps every 0.25 s are fast; each statement stays ≥ 1.5 s.\n- **Reading:** vertical stacks and the rotated edge word are restated as plain horizontal sentences in the index blocks and callouts.\n\n## Provenance\n- **Source:** from the library's style catalogue (style 2). No Animate seed was used.\n- **Originality:** original work (2026-10-07) in the general International Typographic Style tradition; no specific poster is reproduced.\n- **Fonts:** Archivo Black, Inter (SIL OFL 1.1).", "review": { "technical": { "state": "Supplied checks passed", "scope": "Source handoff records complete decode, stream dimensions and audio measurements. Browser playback is checked separately.", "artifactSha256": "0922fc5cf32f844d432ddbd944b51c696350d1c3e5feb1ff62452e5f2abd8ae1" }, "creative": { "state": "Not independently accepted", "scope": "not independently established", "artifactSha256": "0922fc5cf32f844d432ddbd944b51c696350d1c3e5feb1ff62452e5f2abd8ae1" }, "listening": { "state": "Not verified", "scope": "No perceptual listening pass is established by this library import.", "artifactSha256": "0922fc5cf32f844d432ddbd944b51c696350d1c3e5feb1ff62452e5f2abd8ae1" }, "reproduction": { "state": "Not tested", "scope": "Source is supplied. Cross-machine cold-start reproduction has not been established.", "artifactSha256": "0922fc5cf32f844d432ddbd944b51c696350d1c3e5feb1ff62452e5f2abd8ae1" } }, "detailUrl": "https://library.jkylehobson.chatgpt.site/video-library/#family=kinetic-type-swiss&example=claude-cloud", "processUrl": "/video-library/process.html?family=kinetic-type-swiss&example=claude-cloud", "downloads": { "prompt": { "available": true, "url": "/video-library/prompts/kinetic-type-swiss--claude-cloud.txt", "sha256": "9549fccb591f6cfdb962e8931676b2b29feccf2b0258811df5f7776e7b4055d6", "bytes": 1912, "label": "Reusable, example-specific instructions" }, "video": { "name": "kinetic-type-swiss--claude-cloud.mp4", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/kinetic-type-swiss--claude-cloud.mp4", "bytes": 757212, "sha256": "0922fc5cf32f844d432ddbd944b51c696350d1c3e5feb1ff62452e5f2abd8ae1", "available": true, "label": "0.7 MB" }, "source": { "name": "kinetic-type-swiss--claude-cloud--source.zip", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/kinetic-type-swiss--claude-cloud--source.zip", "bytes": 7484486, "sha256": "7ac43d021277527d99ecefb1c0e0f6d3943e6165c5cd95c60b0a028e5c395c3f", "available": true, "label": "7.1 MB", "contents": [ "editable source", "variant guidance", "source assets", "audio inputs", "dependency declarations", "file manifest" ], "includedFiles": 64, "includedFilePaths": [ "CASE_STUDY.md", "RUN.md", "SKILL.md", "STYLE.md", "assets/components/end-card.png", "assets/components/index-block.png", "assets/components/palette.png", "assets/components/root-shoot-stacks.png", "assets/components/seed-word-and-dot.png", "assets/layers/static/01_paper.png", "assets/layers/t1.30/02_end-card.png", "assets/layers/t1.30/03_index.png", "assets/layers/t1.30/04_words.png", "assets/layers/t1.30/05_dot.png", "assets/layers/t2.60/02_end-card.png", "assets/layers/t2.60/03_index.png", "assets/layers/t2.60/04_words.png", "assets/layers/t2.60/05_dot.png", "assets/layers/t4.60/02_end-card.png", "assets/layers/t4.60/03_index.png", "assets/layers/t4.60/04_words.png", "assets/layers/t4.60/05_dot.png", "assets/layers/t6.80/02_end-card.png", "assets/layers/t6.80/03_index.png", "assets/layers/t6.80/04_words.png", "assets/layers/t6.80/05_dot.png", "assets/layers/t8.70/02_end-card.png", "assets/layers/t8.70/03_index.png", "assets/layers/t8.70/04_words.png", "assets/layers/t8.70/05_dot.png", "audio/cues.json", "audio/mix.flac", "audio/stems/drums.flac", "audio/stems/music.flac", "audio/stems/sfx.flac", "engine/audio.mjs", "engine/audio/dsp.js", "engine/audio/instruments.js", "engine/audio/sfx.js", "engine/browser.mjs", "engine/export.mjs", "engine/finish.mjs", "engine/lib/draw.js", "engine/lib/util.js", "engine/page.html", "engine/render.mjs", "engine/runtime.js", "engine/server.mjs", "film/contact_sheet.jpg", "film/spectrogram.png", "film/stills/01_1.30s.jpg", "film/stills/02_2.60s.jpg", "film/stills/03_4.60s.jpg", "film/stills/04_6.00s.jpg", "film/stills/05_6.80s.jpg", "film/stills/06_8.70s.jpg", "overview/encoded-contact-sheet.jpg", "package.json", "qa.json", "spec.json", "styles/kinetic-type-swiss/scene.js", "styles/kinetic-type-swiss/score.js", "styles/kinetic-type-swiss/timeline.js", "BUNDLE-GUIDE.md" ], "externalPrerequisites": { "runtime": [ "Node.js", "Chromium or Chrome", "FFmpeg and ffprobe" ], "packageDependencies": { "@fontsource/anton": "^5.1.0", "@fontsource/archivo-black": "^5.1.0", "@fontsource/bangers": "^5.1.0", "@fontsource/bebas-neue": "^5.1.0", "@fontsource/caveat": "^5.1.0", "@fontsource/comic-neue": "^5.3.0", "@fontsource/courier-prime": "^5.3.0", "@fontsource/dm-sans": "^5.1.0", "@fontsource/dm-serif-display": "^5.1.0", "@fontsource/fraunces": "^5.1.0", "@fontsource/ibm-plex-mono": "^5.1.0", "@fontsource/instrument-serif": "^5.1.0", "@fontsource/inter": "^5.1.0", "@fontsource/jetbrains-mono": "^5.1.0", "@fontsource/jost": "^5.3.0", "@fontsource/kaushan-script": "^5.3.0", "@fontsource/nunito": "^5.1.0", "@fontsource/permanent-marker": "^5.1.0", "@fontsource/playfair-display": "^5.1.0", "@fontsource/press-start-2p": "^5.1.0", "@fontsource/space-grotesk": "^5.1.0", "@fontsource/space-mono": "^5.1.0", "@fontsource/stix-two-text": "^5.3.0", "@fontsource/syne": "^5.1.0", "@fontsource/vt323": "^5.1.0", "three": "0.170.0", "playwright": "1.56.1" }, "lockfileIncluded": false, "coldStart": false }, "license": { "summary": "User-directed publication of supplied authored source; preserve listed third-party notices; no new license granted here.", "includedNoticePaths": [], "newLicenseGranted": false } }, "bundle": { "name": "kinetic-type-swiss--claude-cloud--full.zip", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/kinetic-type-swiss--claude-cloud--full.zip", "bytes": 8253041, "sha256": "073b404a0be8df534b6c8e354d2afa3fae0d7858979963d7c240215839e7f39f", "available": true, "label": "7.9 MB", "contents": [ "selected master", "editable source", "variant guidance", "source assets", "audio inputs", "dependency declarations", "file manifest", "designed cover", "starter prompt" ], "includedFiles": 67, "includedFilePaths": [ "CASE_STUDY.md", "RUN.md", "SKILL.md", "STYLE.md", "assets/components/end-card.png", "assets/components/index-block.png", "assets/components/palette.png", "assets/components/root-shoot-stacks.png", "assets/components/seed-word-and-dot.png", "assets/layers/static/01_paper.png", "assets/layers/t1.30/02_end-card.png", "assets/layers/t1.30/03_index.png", "assets/layers/t1.30/04_words.png", "assets/layers/t1.30/05_dot.png", "assets/layers/t2.60/02_end-card.png", "assets/layers/t2.60/03_index.png", "assets/layers/t2.60/04_words.png", "assets/layers/t2.60/05_dot.png", "assets/layers/t4.60/02_end-card.png", "assets/layers/t4.60/03_index.png", "assets/layers/t4.60/04_words.png", "assets/layers/t4.60/05_dot.png", "assets/layers/t6.80/02_end-card.png", "assets/layers/t6.80/03_index.png", "assets/layers/t6.80/04_words.png", "assets/layers/t6.80/05_dot.png", "assets/layers/t8.70/02_end-card.png", "assets/layers/t8.70/03_index.png", "assets/layers/t8.70/04_words.png", "assets/layers/t8.70/05_dot.png", "audio/cues.json", "audio/mix.flac", "audio/stems/drums.flac", "audio/stems/music.flac", "audio/stems/sfx.flac", "display/cover.webp", "engine/audio.mjs", "engine/audio/dsp.js", "engine/audio/instruments.js", "engine/audio/sfx.js", "engine/browser.mjs", "engine/export.mjs", "engine/finish.mjs", "engine/lib/draw.js", "engine/lib/util.js", "engine/page.html", "engine/render.mjs", "engine/runtime.js", "engine/server.mjs", "film/contact_sheet.jpg", "film/kinetic-type-swiss.mp4", "film/spectrogram.png", "film/stills/01_1.30s.jpg", "film/stills/02_2.60s.jpg", "film/stills/03_4.60s.jpg", "film/stills/04_6.00s.jpg", "film/stills/05_6.80s.jpg", "film/stills/06_8.70s.jpg", "overview/encoded-contact-sheet.jpg", "package.json", "qa.json", "spec.json", "starter-prompt.txt", "styles/kinetic-type-swiss/scene.js", "styles/kinetic-type-swiss/score.js", "styles/kinetic-type-swiss/timeline.js", "BUNDLE-GUIDE.md" ], "externalPrerequisites": { "runtime": [ "Node.js", "Chromium or Chrome", "FFmpeg and ffprobe" ], "packageDependencies": { "@fontsource/anton": "^5.1.0", "@fontsource/archivo-black": "^5.1.0", "@fontsource/bangers": "^5.1.0", "@fontsource/bebas-neue": "^5.1.0", "@fontsource/caveat": "^5.1.0", "@fontsource/comic-neue": "^5.3.0", "@fontsource/courier-prime": "^5.3.0", "@fontsource/dm-sans": "^5.1.0", "@fontsource/dm-serif-display": "^5.1.0", "@fontsource/fraunces": "^5.1.0", "@fontsource/ibm-plex-mono": "^5.1.0", "@fontsource/instrument-serif": "^5.1.0", "@fontsource/inter": "^5.1.0", "@fontsource/jetbrains-mono": "^5.1.0", "@fontsource/jost": "^5.3.0", "@fontsource/kaushan-script": "^5.3.0", "@fontsource/nunito": "^5.1.0", "@fontsource/permanent-marker": "^5.1.0", "@fontsource/playfair-display": "^5.1.0", "@fontsource/press-start-2p": "^5.1.0", "@fontsource/space-grotesk": "^5.1.0", "@fontsource/space-mono": "^5.1.0", "@fontsource/stix-two-text": "^5.3.0", "@fontsource/syne": "^5.1.0", "@fontsource/vt323": "^5.1.0", "three": "0.170.0", "playwright": "1.56.1" }, "lockfileIncluded": false, "coldStart": false }, "license": { "summary": "User-directed publication of supplied authored source; preserve listed third-party notices; no new license granted here.", "includedNoticePaths": [], "newLicenseGranted": false } } }, "cadenceNote": "Encoded fps describes the file. Scene evaluation and held actor poses depend on this source recipe.", "starterPrompt": "Create a {9}-second {1080×1920} Swiss kinetic-typography video about {subject}. Black {#121212} type on warm white with ONE signal colour {#E3241B}. Build every image from type and typographic furniture (one horizontal rule, grid hairlines, a period, index numbers); turn letterforms into the subject (a letter's stem becomes a structure). Display face {Archivo Black}; information face {Inter}. Six-column grid, 72 px margins, asymmetric layout, big red index numbers with flush-left statements that roll and wipe. All motion snaps on a {120 BPM} eighth-note grid with exponential-out eases (no overshoot) and perfect holds; layouts change with hard cuts on downbeats while the rule and a red dot persist. Finish on a poster: vertical edge word, callouts with leader rules, colophon. Score: a pitched blip + click per letter snap, a minimal kick/hat pulse, sub-bass on cuts.\n\nSelected example: Seed to Seedling\nFamily: kinetic-type-swiss\nVariant: claude-cloud\nTypography: Archivo Black 400, Inter 600, Inter 600 / 800\nProduction: canvas-2d\nExact reference master SHA-256: 0922fc5cf32f844d432ddbd944b51c696350d1c3e5feb1ff62452e5f2abd8ae1\n\nRead the selected STYLE.md, SKILL.md and reproduction instructions before adapting. Keep the declared renderer and source closure; do not assume another family variant has interchangeable parameters. Preserve exact font or custom glyph sources, color roles, spatial continuity and readable text. Record encoded frame rate, scene evaluation and held poses separately. Review the changed render visually and listen to the encoded audio before claiming those checks passed. Existing approval applies only to its recorded artifact.\n\nSuccess check: the adapted story is clear; key type remains readable in motion; the source rebuilds with its declared inputs; all media and review records identify the exact output. State any untested reproduction, listening or rights limits.", "downloadNote": "Downloads match this selected example. The full bundle includes its source, original video, cover and starter prompt. Source packages include artwork, audio inputs and dependency declarations. Requires Node.js, Chromium or Chrome, FFmpeg and ffprobe. Follow the included run guide for package installation and reproduction limits.", "model": "Opus 5.5", "reasoningEffort": "Extra" } ], "relatedMethodIds": [] }, { "id": "liquid-morph", "slug": "liquid-morph", "title": "Liquid Morph", "premise": "Glossy drops stretch, merge and separate into a subject, using fluid shapes and a concentrated palette.", "summary": "Glossy drops stretch, merge and separate into a subject, using fluid shapes and a concentrated palette.", "category": "Motion graphics / 3d-look 2d", "defaultExampleId": "claude-cloud", "facets": { "material": [ "2d", "metaballs", "gooey", "glossy", "specular", "squash-stretch", "playful", "purple", "merging" ], "producer": [ "Claude Cloud" ], "format": [ "Portrait" ], "motion": [], "useCase": [] }, "examples": [ { "id": "claude-cloud", "title": "Seed to Seedling", "producer": "Claude Cloud", "producerEvidence": "The displayed model and reasoning label identify this production lane. Exact runtime model ID and per-film cost are not established by the source packet.", "relationship": "Original family example", "format": "Portrait", "productionMethod": "canvas-2d", "master": { "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/liquid-morph--claude-cloud.mp4", "sha256": "ff30f6910221477fd3df0d8438890ff2e8afd4d4fc6178ec8c65cf8a552ab678", "bytes": 2559362, "mimeType": "video/mp4", "width": 1080, "height": 1920, "duration": 10.6, "encodedFps": 60 }, "poster": { "url": "/video-library/media/liquid-morph--claude-cloud/cover.webp", "sha256": "bdd28baec03efbcc137b22849841d751657c6f42c649556c60ef93eb5377bb39", "sourceMasterSha256": "ff30f6910221477fd3df0d8438890ff2e8afd4d4fc6178ec8c65cf8a552ab678", "timeSeconds": 10.176, "rationale": "Late story beat selected to show the developed subject and visual system; extracted from this exact master." }, "previewVideo": { "url": "/video-library/media/liquid-morph--claude-cloud/preview.mp4", "sha256": "7647b681c3d7dc2b234fdf3537f2853edd33b8214722529da1f15da0a5f23883", "sourceMasterSha256": "ff30f6910221477fd3df0d8438890ff2e8afd4d4fc6178ec8c65cf8a552ab678", "width": 540, "height": 960, "label": "Playback preview · 540 px wide · full master in Download finished video" }, "gallery": [ { "id": "overview", "role": "encoded-contact-sheet", "label": "Scenes from the finished render · not a planning storyboard", "url": "/video-library/media/liquid-morph--claude-cloud/overview.webp", "sourceMasterSha256": "ff30f6910221477fd3df0d8438890ff2e8afd4d4fc6178ec8c65cf8a552ab678" }, { "id": "scene-1", "role": "encoded-frame", "label": "Finished-film frame · 2.12 seconds", "url": "/video-library/media/liquid-morph--claude-cloud/scene-1.webp", "sourceMasterSha256": "ff30f6910221477fd3df0d8438890ff2e8afd4d4fc6178ec8c65cf8a552ab678", "timeSeconds": 2.12 }, { "id": "scene-2", "role": "encoded-frame", "label": "Finished-film frame · 5.3 seconds", "url": "/video-library/media/liquid-morph--claude-cloud/scene-2.webp", "sourceMasterSha256": "ff30f6910221477fd3df0d8438890ff2e8afd4d4fc6178ec8c65cf8a552ab678", "timeSeconds": 5.3 }, { "id": "scene-3", "role": "encoded-frame", "label": "Finished-film frame · 8.48 seconds", "url": "/video-library/media/liquid-morph--claude-cloud/scene-3.webp", "sourceMasterSha256": "ff30f6910221477fd3df0d8438890ff2e8afd4d4fc6178ec8c65cf8a552ab678", "timeSeconds": 8.48 } ], "typography": [ "Nunito 800", "DM Sans 600", "DM Sans 400" ], "palette": null, "usageGuidance": "Change the subject, copy and timing for your audience. Retain the selected example’s visual rules and recheck the entire reading interval after changes.", "styleRules": "---\nid: liquid-morph\nname: Liquid Morph (Seed to Seedling: gooey, glossy, merging)\nfamily: motion graphics / 3D-look 2D\naliases: [liquid motion, gooey, metaballs, blob animation, fluid morph, jelly, glossy liquid]\ntags: [2d, metaballs, gooey, glossy, specular, squash-stretch, playful, purple, merging]\nkind: visual-style\nroute: canvas-2d (CPU canvas; per-material fields packed in RGB channels at half res → blur → one pixel pass: threshold + height-map lighting)\nreadiness: { research: catalog-candidate, rights: original-work, referenceImages: own-render, code: built, render: rendered-and-measured }\n---\n\n# Liquid Morph (Seed to Seedling: gooey, glossy, merging)\n\nEverything is a glossy liquid on a plum night.\n- **The seed:** an amber drop falls, stretching, plops onto a violet liquid ground (the surface bulges and a ring ripples outward), wobbles, and settles as a glossy bean.\n- **01 Water:** aqua drops fall and are absorbed; each one bulges into the seed and swells it.\n- **02 Root:** a honey-coloured root drips down through the ground and branches into rootlets that merge where they meet.\n- **03 Light:** a lime stem rises as a string of merging blobs, two leaves inflate with a springy overshoot, and a yellow sun blob wobbles in while satellite droplets join and part from it.\n- **Ending:** the title's letters drip in one by one, landing with a squash, all rendered as the same glossy liquid.\n\n**The one rule:** *everything is a field, nothing is an outline.* Shapes are blobs whose fields add up, so anything of the same material that comes close merges with a liquid neck. Light comes from the field itself, so every blob has the same toy-like gloss.\n\n## Creative direction\n- **Audience:** consumer apps, food and drink, kids and family, playful brands, social content.\n- **Purpose:** make transitions feel delightful and physical. Things don't cut, they flow into each other.\n- **Feeling:** joyful, squishy, satisfying, a little candy-like.\n- **Central visual idea:** *growth as merging.* Water joins the seed, the root drips, leaves inflate and the sun gathers droplets. Every stage is liquid joining liquid.\n- **How the parts work together:**\n - *Composition:* a liquid ground across the lower third, with the plant centred, the sun at upper right and the title at the top.\n - *Colour:* saturated candy materials on deep plum.\n - *Type:* rounded heavy letters (Nunito 800) that are themselves liquid; quiet captions in DM Sans.\n - *Motion:* stretch, squash, wobble, merge.\n - *Sound:* bouncy bass glides with wet bloops.\n\n## Fit\n- **Best for:** app onboarding, product reveals (drinks, cosmetics, snacks), playful explainers, logo stings, social loops, children's content.\n- **Avoid when:** the subject is serious, technical or editorial, needs fine detail, or has thin structures (anything under about 8 px vanishes into the field).\n- **Cost:** the pixel pass runs at half resolution (≈ 0.5 M px), so a few minutes for 636 frames with 3 workers.\n\n## Visual fingerprint\n| Element | Rule |\n|---|---|\n| Materials (bottom → top) | Soil `#4a2a6e → #1e0f33`; root `#ffd38a → #e08a2e`; seed `#ffb35c → #ff5f3d`; water `#8ff3ff → #1f9fd8`; green `#b8ff6a → #25b86b`; sun `#fff07a → #ffae3b`; title `#fffaf0 → #ffc999`. Each is a vertical gradient over its own y range. |\n| Background | Plum gradient `#2a1146 → #120a24` with a soft violet glow behind the centre. |\n| Fields | Shapes (circles, ellipses, round-cap capsules, glyphs) drawn additively into RGB channels of three half-res canvases: soil/root/seed, water/green/sun and title. Blur 7 px (title 3 px), then coverage = smoothstep(0.42, 0.58, field). |\n| Lighting | Normal = normalize(−∂F/∂x·6, −∂F/∂y·6, 1); light from upper left (−0.5, −0.7, 0.6); shade 0.5 + 0.62·diffuse; Blinn-Phong specular (exponent 30) × 0.85 white. Large blobs read flat in the middle with lit, glossy rims. |\n| Sizes | Thin parts need radius ≥ 8 px to survive the blur: root 26 → 11, rootlets 16 → 8, stem 21 → 16; leaves are 5 blobs of 18-46 px along a 270-px arc; seed is three ellipses (68-72 px). |\n| Liquid ground | Surface y = 1215 + two sine swells; on the seed's landing a damped bulge plus a ring travelling 420 px/s; 7 ballistic splash droplets. |\n\n### Typography (exact)\n| Role | Family / weight | Size | Placement | Behaviour |\n|---|---|---|---|---|\n| Title (liquid) | Nunito 800 | 108 px | Centred, baselines 205 / 335: FROM SEED / TO SEEDLING | Drawn into the title field (blur 3 px) so it renders glossy. Letters fall 0.35 s (k²) with stretch and a drip trail, 0.07 s apart, then squash-wobble 0.22·e^(−7u)·cos 22u |\n| Captions | DM Sans 600 | 40 px | Number at (80, 214) in white 55 %; word at (140, 214) in white 94 % | Fade + 14 px rise, 0.35 s; fade 0.3 s |\n| Note | DM Sans 400 | 26 px, tracking 4 | White 60 %, centred at y 1862 | Fades in at 9.8 s |\n\n## Temporal fingerprint\n| Element | Rule |\n|---|---|\n| Fall | y ∝ k² with stretch (sy 1 → 1.4, sx 1 → 0.8) and a capsule trail. |\n| Landing | Squash 0.32·e^(−6u)·cos 20u plus bounce 12·e^(−5u)·sin 14u. |\n| Absorb | 0.4 s: the drop shrinks into the seed while a bulge rises sin(πa); +9 % seed size per drop. |\n| Growth | Chains of blobs every 12 px up to an easeOutCubic growth front, with a bobbing front drip. Leaves inflate with easeOutBack(2.2). |\n| Beats (100 BPM) | Seed 0.25-0.85 s · drops 1.4 / 2.0 / 2.6 (+0.5 fall, +0.4 absorb) · root 3.4-5.5, rootlets 4.0-5.6 · stem 5.8-6.8, leaves 6.7 / 6.82, sun 6.9-8.0 · letters 8.2 + 0.07 n · note 9.8 · end 10.6. |\n\n## How the composition develops\nEmpty plum sky over a calm liquid ground. One drop lands and the ground ripples. Aqua drops feed it. Then the image grows down (the root drips) and up (stem, leaves, sun), and the title drips in last across the top. Every new element arrives as liquid and joins something.\n\n## Individual assets\n| Asset | File | Source |\n|---|---|---|\n| Background gradient | `assets/layers/static/01_background.png`, `assets/textures/background-gradient-halfres.png` | setup |\n| Gooey-merge demo (apart → necking → merged) | `assets/components/gooey-merge-demo.png` | `drawComponent()` |\n| Seed / seedling / title on transparency | `assets/components/seed-blob.png`, `seedling-liquid.png`, `liquid-title.png` | `render()` with selected materials |\n| Layers | per time `02_soil`, `03_plant`, `04_title`, `05_captions` at 0.95, 3.0, 5.0, 7.4 and 10.3 s | `drawLayer()` |\n| Paths | `assets/paths/root.json/.svg`, `stem.json/.svg` | `ROOT`, `STEM` |\n\n**Porting:** the same look in After Effects is a Gaussian blur then a levels/threshold (the \"gooey\" trick) plus a bevel/height-map light; in GLSL it is the field-gradient normal in one fragment pass.\n\n## Sound\n**Score:** a bouncy 100 BPM in G major. G · Em · C · D, with a gliding saw bass (portamento scoops), marimba-like plucks, a soft kick and a snap.\n\n**Wet foley:**\n| Event | Sound |\n|---|---|\n| Seed falling | descending bloop |\n| Seed landing | plop + seven splash bubbles |\n| Each water drop | a drip as it lands, then a three-pop glug as it is absorbed |\n| Root | drips falling in pitch per rootlet (D4 B3 G3 E3) |\n| Stem | an octave glide up |\n| Leaves | rising bubble runs |\n| Sun | a wobbly pad swell with bubbly satellites |\n| Title letters | a pitched bloop each on a rising G-major scale |\n| Ending | G-major chord |\n\n**Stems:** `music`, `drums` and `sfx`, with cues in `audio/cues.json`. The mix targets −16 LUFS.\n\n## Reusable prompt\n> Create a {10}-second {1080×1920} liquid-morph animation of {story}. Every shape is glossy liquid built from metaball fields (blobs per material, blurred and thresholded) and lit from its own field gradient (diffuse + sharp specular rim), so same-material shapes merge with liquid necks. Saturated candy materials on deep plum; a wobbly liquid ground. Drops stretch as they fall, squash and wobble on landing, splash with a ring ripple; growth is chains of merging blobs; things inflate with springy overshoot. The title's letters drip in as the same liquid. Sound: bouncy gliding bass + wet foley (bloops, drips, glugs, bubbles), pitched to the action.\n\n## Adaptation guidance\n| Change | Safe? | Notes |\n|---|---|---|\n| Subject | ✅ | Anything made of rounded masses: drinks, logos, characters, icons. Keep every part ≥ 8 px radius. |\n| Palette | ✅ | Candy colours on a deep ground, or pastel liquids on cream (lower the specular). |\n| More materials | ✅ | Add a canvas: 3 materials per canvas, one per RGB channel. |\n| Fine lines / small text in liquid | ❌ | They dissolve; put small text in plain type. |\n| 16:9 | ✅ | Ground across the bottom, story left to right. |\n| **Essential** | , | Fields not outlines, gooey merging, height-map gloss, squash/stretch physics, everything arriving as liquid. |\n\n## Accessibility\n- **Contrast:** the cream title on plum is very high contrast. Captions at 94 % white on plum are well above 4.5:1.\n- **Motion:** no flashes; motion is bouncy but local.\n- **Reading:** the title is liquid but rendered from a real font at 108 px, so it stays legible.\n\n## Provenance\n- **Source:** from the library's style catalogue. No Animate seed was used.\n- **Originality:** all code, materials, motion and audio are original (2026-10-08). The \"gooey\" blur-threshold technique is a common motion-graphics method; the height-map lighting is a standard graphics technique.\n- **Fonts:** Nunito and DM Sans (SIL OFL).", "review": { "technical": { "state": "Supplied checks passed", "scope": "Source handoff records complete decode, stream dimensions and audio measurements. Browser playback is checked separately.", "artifactSha256": "ff30f6910221477fd3df0d8438890ff2e8afd4d4fc6178ec8c65cf8a552ab678" }, "creative": { "state": "Not independently accepted", "scope": "not independently established", "artifactSha256": "ff30f6910221477fd3df0d8438890ff2e8afd4d4fc6178ec8c65cf8a552ab678" }, "listening": { "state": "Not verified", "scope": "No perceptual listening pass is established by this library import.", "artifactSha256": "ff30f6910221477fd3df0d8438890ff2e8afd4d4fc6178ec8c65cf8a552ab678" }, "reproduction": { "state": "Not tested", "scope": "Source is supplied. Cross-machine cold-start reproduction has not been established.", "artifactSha256": "ff30f6910221477fd3df0d8438890ff2e8afd4d4fc6178ec8c65cf8a552ab678" } }, "detailUrl": "https://library.jkylehobson.chatgpt.site/video-library/#family=liquid-morph&example=claude-cloud", "processUrl": "/video-library/process.html?family=liquid-morph&example=claude-cloud", "downloads": { "prompt": { "available": true, "url": "/video-library/prompts/liquid-morph--claude-cloud.txt", "sha256": "11da8f09f4098cf5b17c902b3edd54ae57c2dab574d12d39bccae783e2cea67c", "bytes": 1674, "label": "Reusable, example-specific instructions" }, "video": { "name": "liquid-morph--claude-cloud.mp4", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/liquid-morph--claude-cloud.mp4", "bytes": 2559362, "sha256": "ff30f6910221477fd3df0d8438890ff2e8afd4d4fc6178ec8c65cf8a552ab678", "available": true, "label": "2.4 MB" }, "source": { "name": "liquid-morph--claude-cloud--source.zip", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/liquid-morph--claude-cloud--source.zip", "bytes": 11010199, "sha256": "8d2031274018cd8e3fed9dd540e47548ffd56f27d4429ab3c48376f3f850d260", "available": true, "label": "10.5 MB", "contents": [ "editable source", "variant guidance", "source assets", "audio inputs", "dependency declarations", "file manifest" ], "includedFiles": 68, "includedFilePaths": [ "CASE_STUDY.md", "RUN.md", "SKILL.md", "STYLE.md", "assets/components/gooey-merge-demo.png", "assets/components/liquid-title.png", "assets/components/seed-blob.png", "assets/components/seedling-liquid.png", "assets/layers/static/01_background.png", "assets/layers/t0.95/02_soil.png", "assets/layers/t0.95/03_plant.png", "assets/layers/t0.95/04_title.png", "assets/layers/t0.95/05_captions.png", "assets/layers/t10.30/02_soil.png", "assets/layers/t10.30/03_plant.png", "assets/layers/t10.30/04_title.png", "assets/layers/t10.30/05_captions.png", "assets/layers/t3.00/02_soil.png", "assets/layers/t3.00/03_plant.png", "assets/layers/t3.00/04_title.png", "assets/layers/t3.00/05_captions.png", "assets/layers/t5.00/02_soil.png", "assets/layers/t5.00/03_plant.png", "assets/layers/t5.00/04_title.png", "assets/layers/t5.00/05_captions.png", "assets/layers/t7.40/02_soil.png", "assets/layers/t7.40/03_plant.png", "assets/layers/t7.40/04_title.png", "assets/layers/t7.40/05_captions.png", "assets/paths/root.json", "assets/paths/root.svg", "assets/paths/stem.json", "assets/paths/stem.svg", "assets/textures/background-gradient-halfres.png", "audio/cues.json", "audio/mix.flac", "audio/stems/drums.flac", "audio/stems/music.flac", "audio/stems/sfx.flac", "engine/audio.mjs", "engine/audio/dsp.js", "engine/audio/instruments.js", "engine/audio/sfx.js", "engine/browser.mjs", "engine/export.mjs", "engine/finish.mjs", "engine/lib/draw.js", "engine/lib/util.js", "engine/page.html", "engine/render.mjs", "engine/runtime.js", "engine/server.mjs", "film/contact_sheet.jpg", "film/spectrogram.png", "film/stills/01_0.95s.jpg", "film/stills/02_2.10s.jpg", "film/stills/03_3.00s.jpg", "film/stills/04_5.00s.jpg", "film/stills/05_7.40s.jpg", "film/stills/06_10.30s.jpg", "overview/encoded-contact-sheet.jpg", "package.json", "qa.json", "spec.json", "styles/liquid-morph/scene.js", "styles/liquid-morph/score.js", "styles/liquid-morph/timeline.js", "BUNDLE-GUIDE.md" ], "externalPrerequisites": { "runtime": [ "Node.js", "Chromium or Chrome", "FFmpeg and ffprobe" ], "packageDependencies": { "@fontsource/anton": "^5.1.0", "@fontsource/archivo-black": "^5.1.0", "@fontsource/bangers": "^5.1.0", "@fontsource/bebas-neue": "^5.1.0", "@fontsource/caveat": "^5.1.0", "@fontsource/comic-neue": "^5.3.0", "@fontsource/courier-prime": "^5.3.0", "@fontsource/dm-sans": "^5.1.0", "@fontsource/dm-serif-display": "^5.1.0", "@fontsource/fraunces": "^5.1.0", "@fontsource/ibm-plex-mono": "^5.1.0", "@fontsource/instrument-serif": "^5.1.0", "@fontsource/inter": "^5.1.0", "@fontsource/jetbrains-mono": "^5.1.0", "@fontsource/jost": "^5.3.0", "@fontsource/kaushan-script": "^5.3.0", "@fontsource/nunito": "^5.1.0", "@fontsource/permanent-marker": "^5.1.0", "@fontsource/playfair-display": "^5.1.0", "@fontsource/press-start-2p": "^5.1.0", "@fontsource/space-grotesk": "^5.1.0", "@fontsource/space-mono": "^5.1.0", "@fontsource/stix-two-text": "^5.3.0", "@fontsource/syne": "^5.1.0", "@fontsource/vt323": "^5.1.0", "three": "0.170.0", "playwright": "1.56.1" }, "lockfileIncluded": false, "coldStart": false }, "license": { "summary": "User-directed publication of supplied authored source; preserve listed third-party notices; no new license granted here.", "includedNoticePaths": [], "newLicenseGranted": false } }, "bundle": { "name": "liquid-morph--claude-cloud--full.zip", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/liquid-morph--claude-cloud--full.zip", "bytes": 13590786, "sha256": "9a091a9445ed413b830ea730dcc60d3d399c683a0460a3265d2c8d26146b48ba", "available": true, "label": "13.0 MB", "contents": [ "selected master", "editable source", "variant guidance", "source assets", "audio inputs", "dependency declarations", "file manifest", "designed cover", "starter prompt" ], "includedFiles": 71, "includedFilePaths": [ "CASE_STUDY.md", "RUN.md", "SKILL.md", "STYLE.md", "assets/components/gooey-merge-demo.png", "assets/components/liquid-title.png", "assets/components/seed-blob.png", "assets/components/seedling-liquid.png", "assets/layers/static/01_background.png", "assets/layers/t0.95/02_soil.png", "assets/layers/t0.95/03_plant.png", "assets/layers/t0.95/04_title.png", "assets/layers/t0.95/05_captions.png", "assets/layers/t10.30/02_soil.png", "assets/layers/t10.30/03_plant.png", "assets/layers/t10.30/04_title.png", "assets/layers/t10.30/05_captions.png", "assets/layers/t3.00/02_soil.png", "assets/layers/t3.00/03_plant.png", "assets/layers/t3.00/04_title.png", "assets/layers/t3.00/05_captions.png", "assets/layers/t5.00/02_soil.png", "assets/layers/t5.00/03_plant.png", "assets/layers/t5.00/04_title.png", "assets/layers/t5.00/05_captions.png", "assets/layers/t7.40/02_soil.png", "assets/layers/t7.40/03_plant.png", "assets/layers/t7.40/04_title.png", "assets/layers/t7.40/05_captions.png", "assets/paths/root.json", "assets/paths/root.svg", "assets/paths/stem.json", "assets/paths/stem.svg", "assets/textures/background-gradient-halfres.png", "audio/cues.json", "audio/mix.flac", "audio/stems/drums.flac", "audio/stems/music.flac", "audio/stems/sfx.flac", "display/cover.webp", "engine/audio.mjs", "engine/audio/dsp.js", "engine/audio/instruments.js", "engine/audio/sfx.js", "engine/browser.mjs", "engine/export.mjs", "engine/finish.mjs", "engine/lib/draw.js", "engine/lib/util.js", "engine/page.html", "engine/render.mjs", "engine/runtime.js", "engine/server.mjs", "film/contact_sheet.jpg", "film/liquid-morph.mp4", "film/spectrogram.png", "film/stills/01_0.95s.jpg", "film/stills/02_2.10s.jpg", "film/stills/03_3.00s.jpg", "film/stills/04_5.00s.jpg", "film/stills/05_7.40s.jpg", "film/stills/06_10.30s.jpg", "overview/encoded-contact-sheet.jpg", "package.json", "qa.json", "spec.json", "starter-prompt.txt", "styles/liquid-morph/scene.js", "styles/liquid-morph/score.js", "styles/liquid-morph/timeline.js", "BUNDLE-GUIDE.md" ], "externalPrerequisites": { "runtime": [ "Node.js", "Chromium or Chrome", "FFmpeg and ffprobe" ], "packageDependencies": { "@fontsource/anton": "^5.1.0", "@fontsource/archivo-black": "^5.1.0", "@fontsource/bangers": "^5.1.0", "@fontsource/bebas-neue": "^5.1.0", "@fontsource/caveat": "^5.1.0", "@fontsource/comic-neue": "^5.3.0", "@fontsource/courier-prime": "^5.3.0", "@fontsource/dm-sans": "^5.1.0", "@fontsource/dm-serif-display": "^5.1.0", "@fontsource/fraunces": "^5.1.0", "@fontsource/ibm-plex-mono": "^5.1.0", "@fontsource/instrument-serif": "^5.1.0", "@fontsource/inter": "^5.1.0", "@fontsource/jetbrains-mono": "^5.1.0", "@fontsource/jost": "^5.3.0", "@fontsource/kaushan-script": "^5.3.0", "@fontsource/nunito": "^5.1.0", "@fontsource/permanent-marker": "^5.1.0", "@fontsource/playfair-display": "^5.1.0", "@fontsource/press-start-2p": "^5.1.0", "@fontsource/space-grotesk": "^5.1.0", "@fontsource/space-mono": "^5.1.0", "@fontsource/stix-two-text": "^5.3.0", "@fontsource/syne": "^5.1.0", "@fontsource/vt323": "^5.1.0", "three": "0.170.0", "playwright": "1.56.1" }, "lockfileIncluded": false, "coldStart": false }, "license": { "summary": "User-directed publication of supplied authored source; preserve listed third-party notices; no new license granted here.", "includedNoticePaths": [], "newLicenseGranted": false } } }, "cadenceNote": "Encoded fps describes the file. Scene evaluation and held actor poses depend on this source recipe.", "starterPrompt": "Create a {10}-second {1080×1920} liquid-morph animation of {story}. Every shape is glossy liquid built from metaball fields (blobs per material, blurred and thresholded) and lit from its own field gradient (diffuse + sharp specular rim), so same-material shapes merge with liquid necks. Saturated candy materials on deep plum; a wobbly liquid ground. Drops stretch as they fall, squash and wobble on landing, splash with a ring ripple; growth is chains of merging blobs; things inflate with springy overshoot. The title's letters drip in as the same liquid. Sound: bouncy gliding bass + wet foley (bloops, drips, glugs, bubbles), pitched to the action.\n\nSelected example: Seed to Seedling\nFamily: liquid-morph\nVariant: claude-cloud\nTypography: Nunito 800, DM Sans 600, DM Sans 400\nProduction: canvas-2d\nExact reference master SHA-256: ff30f6910221477fd3df0d8438890ff2e8afd4d4fc6178ec8c65cf8a552ab678\n\nRead the selected STYLE.md, SKILL.md and reproduction instructions before adapting. Keep the declared renderer and source closure; do not assume another family variant has interchangeable parameters. Preserve exact font or custom glyph sources, color roles, spatial continuity and readable text. Record encoded frame rate, scene evaluation and held poses separately. Review the changed render visually and listen to the encoded audio before claiming those checks passed. Existing approval applies only to its recorded artifact.\n\nSuccess check: the adapted story is clear; key type remains readable in motion; the source rebuilds with its declared inputs; all media and review records identify the exact output. State any untested reproduction, listening or rights limits.", "downloadNote": "Downloads match this selected example. The full bundle includes its source, original video, cover and starter prompt. Source packages include artwork, audio inputs and dependency declarations. Requires Node.js, Chromium or Chrome, FFmpeg and ffprobe. Follow the included run guide for package installation and reproduction limits.", "model": "Opus 5.5", "reasoningEffort": "Extra" } ], "relatedMethodIds": [] }, { "id": "low-poly-3d", "slug": "low-poly-3d", "title": "Low Poly 3D", "premise": "Faceted forms, soft light and a slowly changing viewpoint reveal a miniature world in three dimensions.", "summary": "Faceted forms, soft light and a slowly changing viewpoint reveal a miniature world in three dimensions.", "category": "3d illustration", "defaultExampleId": "claude-cloud", "facets": { "material": [ "3d", "three.js", "flat-shading", "facets", "pastel", "cutaway", "orbit-camera", "gradient-sky", "game-like" ], "producer": [ "Claude Cloud" ], "format": [ "Portrait" ], "motion": [], "useCase": [] }, "examples": [ { "id": "claude-cloud", "title": "Seed to Seedling", "producer": "Claude Cloud", "producerEvidence": "The displayed model and reasoning label identify this production lane. Exact runtime model ID and per-film cost are not established by the source packet.", "relationship": "Original family example", "format": "Portrait", "productionMethod": "three.js", "master": { "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/low-poly-3d--claude-cloud.mp4", "sha256": "efa261452472dddcf11dbc7b6cb52856c4c037e6f4456d8526297c600a490025", "bytes": 5751982, "mimeType": "video/mp4", "width": 1080, "height": 1920, "duration": 10.6, "encodedFps": 60 }, "poster": { "url": "/video-library/media/low-poly-3d--claude-cloud/cover.webp", "sha256": "005cf7aa59f54dfef4c85abcdbf5a6e93833076ff35d4742d8f8fb33802a7c80", "sourceMasterSha256": "efa261452472dddcf11dbc7b6cb52856c4c037e6f4456d8526297c600a490025", "timeSeconds": 10.07, "rationale": "Late story beat selected to show the developed subject and visual system; extracted from this exact master." }, "previewVideo": { "url": "/video-library/media/low-poly-3d--claude-cloud/preview.mp4", "sha256": "84f9bdbbe1a67fd22217a5f049ff7e4962e008c85e008a58b799826178a98d0c", "sourceMasterSha256": "efa261452472dddcf11dbc7b6cb52856c4c037e6f4456d8526297c600a490025", "width": 540, "height": 960, "label": "Playback preview · 540 px wide · full master in Download finished video" }, "gallery": [ { "id": "overview", "role": "encoded-contact-sheet", "label": "Scenes from the finished render · not a planning storyboard", "url": "/video-library/media/low-poly-3d--claude-cloud/overview.webp", "sourceMasterSha256": "efa261452472dddcf11dbc7b6cb52856c4c037e6f4456d8526297c600a490025" }, { "id": "scene-1", "role": "encoded-frame", "label": "Finished-film frame · 2.12 seconds", "url": "/video-library/media/low-poly-3d--claude-cloud/scene-1.webp", "sourceMasterSha256": "efa261452472dddcf11dbc7b6cb52856c4c037e6f4456d8526297c600a490025", "timeSeconds": 2.12 }, { "id": "scene-2", "role": "encoded-frame", "label": "Finished-film frame · 5.3 seconds", "url": "/video-library/media/low-poly-3d--claude-cloud/scene-2.webp", "sourceMasterSha256": "efa261452472dddcf11dbc7b6cb52856c4c037e6f4456d8526297c600a490025", "timeSeconds": 5.3 }, { "id": "scene-3", "role": "encoded-frame", "label": "Finished-film frame · 8.48 seconds", "url": "/video-library/media/low-poly-3d--claude-cloud/scene-3.webp", "sourceMasterSha256": "efa261452472dddcf11dbc7b6cb52856c4c037e6f4456d8526297c600a490025", "timeSeconds": 8.48 } ], "typography": [ "Space Grotesk 400", "Space Grotesk 700", "Droid Sans Bold typeface (Apache-2.0)" ], "palette": { "skyDawn": [ "#2f4a8a", "#8a7fc0", "#f6b49a" ], "skyDay": [ "#3a74c7", "#7fb6e8", "#cdeaf7" ], "grass": "#8fd16a", "grassDark": "#6cbf58", "soil": "#9b6a43", "subsoil": "#7a5236", "rock": "#6b6f8a", "section": 1.14, "seed": "#e8c48a", "cotyledon": "#cfe08a", "root": "#f3e3c3", "stem": "#9be06a", "leaf": "#7fd65a", "trunk": "#8a5a3a", "pine": "#4f9e5a", "tuft": "#5fae4c", "cloud": "#f7f9ff", "rain": "#6fc0ff", "sun": "#ffd166", "halo": "#ffe7a3", "title": "#fff6e8", "ink": "#24365e", "text": "#ffffff", "capIcon": [ "#6fc0ff", "#f3e3c3", "#ffd166" ] }, "usageGuidance": "Change the subject, copy and timing for your audience. Retain the selected example’s visual rules and recheck the entire reading interval after changes.", "styleRules": "---\nid: low-poly-3d\nname: Low-Poly 3D (Seed to Seedling: a floating-island cutaway)\nfamily: 3D illustration\naliases: [low poly, faceted 3d, flat-shaded 3d, polygon art, floating island, diorama cutaway]\ntags: [3d, three.js, flat-shading, facets, pastel, cutaway, orbit-camera, gradient-sky, game-like]\nkind: visual-style\nroute: three.js (WebGL, flat-shaded MeshStandardMaterial with per-facet vertex colours) + Canvas 2D overlay\nreadiness: { research: catalog-candidate, rights: original-work, referenceImages: own-render, code: built, render: rendered-and-measured }\n---\n\n# Low-Poly 3D (Seed to Seedling: a floating-island cutaway)\n\nA faceted floating island hangs in a dawn sky. A 120° wedge is cut out of it, showing the strata inside like a cake. The camera orbits slowly.\n- **Setting up:** a faceted seed falls out of the sky onto the cutaway corner, bounces once and burrows in.\n- **01 Water:** a cloud of white icospheres drifts over and rains octahedral drops; the seed swells.\n- **02 Root:** the camera pushes into the cutaway. The seed splits, a root runs down the cut corner, and four rootlets spread across the two section faces.\n- **03 Light:** the camera pulls back as the shoot climbs, carrying the split seed halves up (as a bean does), and two folded leaves snap open. A low-poly sun rises behind the island and the sky turns from dawn to day.\n- **Ending:** the title **SEEDLING**, built from faceted 3D letters, assembles from scattered pieces above the island under a small kicker, FROM SEED TO.\n\n**The one rule:** *every surface is a visible facet.* There is no smoothing, no texture and no gradient on objects, only flat triangles in a pastel palette, lit by one warm key and a sky fill. Detail comes from geometry and colour variation per facet, never from surface maps.\n\n## Creative direction\n- **Audience:** apps, games and edtech, startup explainers, environmental and science stories for general audiences.\n- **Purpose:** make a process feel approachable and explorable: a small world you can walk around, with a cutaway that explains the inside.\n- **Feeling:** friendly, calm, optimistic, a little playful, like a mobile game's world map.\n- **Central visual idea:** *a world on a slice.* The island is a planet-sized diorama, and the wedge cut is the explanatory device: outside, weather and sunlight; inside, roots and strata.\n- **How the parts work together:**\n - *Composition:* one central island at 55-70 % of the frame width, with floating rocks for depth and the sky as negative space for captions.\n - *Colour:* pastel greens, browns and a purple-grey rock, under a dawn → day gradient.\n - *Type:* a clean geometric grotesk in 2D for captions, plus faceted 3D letters for the title.\n - *Motion:* a smooth orbit with springy, physical arrivals.\n - *Sound:* soft marimba and pad, with every physical event sonified.\n\n## Fit\n- **Best for:** onboarding and app explainers, game and world teasers, sustainability and agriculture stories, \"inside the earth / inside the product\" cutaways, kids and edtech.\n- **Avoid when:** the brand is premium or editorial, the subject needs realism or precision, or text-heavy information must live inside the 3D scene.\n- **Cost:** 636 frames at 1080×1920 in software WebGL (SwiftShader) with soft shadows, a few minutes with 3 workers; setup builds all geometry in about 2 s.\n\n## Visual fingerprint\n| Element | Rule |\n|---|---|\n| Facets | `MeshStandardMaterial({ flatShading: true, roughness 0.9, metalness 0 })` with per-triangle vertex colours: ±3.5-6 % brightness variation per facet, plus 35 % dark patches on the grass. |\n| Jitter | Position-hashed: every vertex moves by a hash of its own coordinates, so coincident vertices move together and facets never crack. Rock 0.5 units; grass top y ± 0.16; small props 3-8 % of their size. |\n| Island | Polygon of the centre plus 13 rim points from −30° to 210° (radius jitter 0.94-1.06, shared by all layers), extruded and stacked: grass 6.5-7.5 (radius × 1.04 lip), soil 3-6.5, subsoil 0-3, rock 0 → −10 tapered to a point in 4 jittered steps. The missing 120° wedge faces +z. |\n| Section | Faces lying on the two cut planes are painted × 1.14 lighter, so the cutaway reads as a section. Small stones half-embed in the section faces. |\n| Palette | Grass `#8fd16a`/`#6cbf58`, soil `#9b6a43`, subsoil `#7a5236`, rock `#6b6f8a`, seed `#e8c48a`, root `#f3e3c3`, stem `#9be06a`, leaf `#7fd65a`, pine `#4f9e5a`, cloud `#f7f9ff`, rain `#6fc0ff`, sun `#ffd166`, title `#fff6e8`. |\n| Sky | Screen-space gradient (stops 0 / 0.55 / 1). Dawn `#2f4a8a → #8a7fc0 → #f6b49a` mixes to day `#3a74c7 → #7fb6e8 → #cdeaf7` over 6.2-8.0 s. |\n| Lighting | Hemisphere `#dce8ff`/`#7a6a5a` (1.0 → 1.25); key directional at (18, 36, 26), cool → warm `#dfe6ff → #fff0d2`, intensity 1.7 → 2.5, PCF soft shadows (2048, ortho ±17); cool rim from behind (0.6); Neutral tone mapping. |\n| Props | Pines of three 6-sided cones; tufts as 3-sided cones; rocks as jittered dodecahedra; cloud of 5 icospheres (detail 1); rain as octahedra stretched ×2.4; sun as an icosahedron + 28 % halo + 10 four-sided cone rays, always facing the camera. |\n\n### Typography (exact)\n| Role | Family / weight | Size | Details | Enter / exit |\n|---|---|---|---|---|\n| Beat label | Space Grotesk 400 | 30 px, tracking 6 | White 88 %, at (116, 202), after a 22 px triangle in the beat colour (rain blue, root cream, sun yellow) | Slides 30 px + fades in, easeOutCubic 0.35 s; fades out 0.25 s |\n| Beat headline | Space Grotesk 700 | 64 px, tracking −1 | White at (80, 280); shadow 0 2 12 `rgba(20,30,60,0.35)` | With the label |\n| 3D title | Droid Sans Bold typeface (Apache-2.0) | size 2.3, depth 0.7 | `curveSegments: 1` (straight segments = facets), bevel 0.14/0.09 with one segment; `#fff6e8`, emissive 0.42; 18.4 units above the island, turned to face the camera | Each letter flies in from a scattered start (±8 units, ±2.5 rad, scale 0.2) with easeOutCubic over 0.7 s, 0.06 s apart |\n| Kicker | Space Grotesk 400 | 34 px, tracking 10 | \"FROM SEED TO\", projected 3.3 units above the 3D title | Fades in 0.4 s |\n| Note | Space Grotesk 400 | 28 px, tracking 3 | `#24365e` at 85 %, centred at y 1850 (dark on the pale sky bottom) | Fades in 0.4 s |\n\n## Temporal fingerprint\n| Element | Rule |\n|---|---|\n| Camera | Orbit model: position (sin az·d, h, cos az·d) looking at (0, ty, 0). Keys are smootherstep-eased (`CAM`): az 130° → 118° → 35° (reveal the cut) → 8° / 0° pushed in (d 20) → −28° pulled back → −40° wide (d 63). |\n| Physics | The seed falls under gravity (0.6 s), one damped bounce (\\|sin 30a\\|·0.5·e^(−12a)), burrows in 0.4 s and swells + 25 %. Rain: 36 drops 0.042 s apart, each falling 0.42 s and squashing in 0.12 s. Leaves unfold 1.35 → 0.38 rad with easeOutBack(1.8). |\n| Growth | Tubes revealed with `setDrawRange` (root 40 × 5 sides, tapered 0.22 → 0.07; rootlets 16 × 4; shoot 30 × 5). The split seed halves ride the shoot tip and open apart (epigeal germination). |\n| Life | The island bobs ± 0.18 (period 4.2 s); floating rocks bob ± 0.35 and tumble slowly; sun rays turn at 0.25 rad/s. |\n| Beats (96 BPM) | Seed 0.3-1.4 s · 01 1.25 (cloud 0.9, rain 1.6-3.2) · 02 3.75 (crack 3.9, root 3.9-5.6, rootlets 4.5-5.8) · 03 6.25 (shoot 6.3-7.4, leaves 7.35/7.5, sun 6.4-7.6, sky 6.2-8.0) · letters 8.4 + 0.06 n · kicker 9.05 · note 9.4 · end 10.6. |\n\n## How the composition develops\nEstablish the world from the solid side: a pretty island with trees, and a seed falling. Orbit to reveal the cut while it rains. Dive into the section for the root; the frame is mostly strata. Pull back as the plant breaks the surface and the sun rises behind it, so the leaves silhouette against the sun. End wide: island, seedling, sun and the assembled title.\n\n## Individual assets\nAll geometry, colour and textures are generated in `scene.js`; there are no external models or images.\n\n| Asset | File | Source |\n|---|---|---|\n| Island cutaway (transparent render) | `assets/components/island-cutaway.png` | `slab()`, `pine()`, `rock()`, `islandShape()` |\n| Seedling at the end pose | `assets/components/seedling.png` | `taperTube()`, `leafGeo()`, cotyledons |\n| Cloud / sun / letter S | `assets/components/cloud.png`, `low-poly-sun.png`, `letter-S.png` | setup |\n| Sky gradients | `assets/textures/sky-dawn.png`, `sky-day.png` | `skyCanvas()` |\n| Layers | `assets/layers/t*/01_sky, 02_island, 03_story, 04_title-3d, 05_overlay.png` at 2.6, 4.9, 7.6 and 10.4 s | `drawLayer()` |\n| Root path | `assets/paths/rootSection.json/.svg` (world x, y scaled ×40) | `ROOT_PTS` |\n\n**To regenerate in another 3D tool:** build the island from the polygon in `spec.json` (extrude, stack, taper the rock), apply flat shading and the per-facet colour rule. Any DCC (Blender: Decimate + flat shading + \"random per face\" colour) gets the same look.\n\n## Sound\n**Score:** 96 BPM in F major. F · Dm · B♭ · C, one chord per bar. Marimba-like kalimba arpeggios on the F-major pentatonic over a warm pad. A round bass and a soft kick + shaker join when the cloud arrives.\n\n**Sonified events:**\n| Event | Sound |\n|---|---|\n| Seed falling | descending whistle |\n| Seed landing | plop + bounce pop |\n| Burrowing | rustle |\n| Rain | a hiss bed plus one drip per drop (36) |\n| Swelling | two soft bells |\n| Seed split | click + pop |\n| Root growth | low creak |\n| Rootlets | plucks C4 → A3 → F3 → D3: lower means deeper |\n| Big camera moves | whoosh |\n| Shoot | a square-wave glide rising one octave with the tip |\n| Leaves | pops + kalimba |\n| Sunrise | pad swell + F-A-C bells |\n| Title letters | 8 kalimba notes rising on the pentatonic, one per letter |\n| Ending | F-major chord |\n\n**Stems:** `music`, `drums` and `sfx`, with cues in `audio/cues.json`. The mix targets −16 LUFS.\n\n## Reusable prompt\n> Create a {10}-second {1080×1920} low-poly 3D animation of {subject} as a small floating world with a 120° cutaway wedge showing its inside. Everything is flat-shaded triangles with slight per-facet colour variation, pastel palette, no textures; position-hashed vertex jitter for rocky facets; section faces painted a little lighter. A slow orbit camera reveals the cut, dives in for the internal process, then pulls back wide. Sky: a dawn → day gradient. Weather and props are primitives (icosphere clouds, octahedron rain, cone trees, icosahedron sun). Physical motion with gentle bounces; growth revealed along tubes. Captions in a geometric grotesk; a faceted 3D title assembles from scattered letters. Sound: soft marimba + pad, every physical event sonified (pitch follows depth/height).\n\n## Adaptation guidance\n| Change | Safe? | Notes |\n|---|---|---|\n| Subject inside the cut | ✅ | Pipes, roots, cables, an engine: anything with an interior. Keep the cut at 90-120°, facing the camera's main view. |\n| Palette | ✅ | Keep pastel values and one warm accent; dark mode = night sky + emissive windows/crystals. |\n| World shape | ✅ | Hex tile, round island, cube planet: any extruded polygon with a tapered underside. |\n| Facet density | ⚠️ | 12-20 rim points; more and it reads as smooth 3D, fewer and it reads as a placeholder. |\n| Textures / smooth shading / realistic materials | ❌ | They break the style. |\n| 16:9 | ✅ | Place the island off-centre; captions in the empty side of the sky. |\n| **Essential** | , | Visible facets everywhere, per-facet colour variation, crack-free jitter, a cutaway that explains, an orbiting camera, sonified physics. |\n\n## Accessibility\n- **Contrast:** white captions on the dawn sky top (`#2f4a8a`) are 8.5:1, and 4.7:1 on the day sky top. The note uses dark ink on the pale sky bottom (9.5:1).\n- **Motion:** there are no flashes. The orbit is slow and eased, though the dive into the cut is the fastest move (0.8 s) and may be reduced for motion-sensitive audiences.\n- **Labels:** the 3D title is decorative; the kicker and note carry the text.\n\n## Provenance\n- **Source:** from the library's style catalogue (low-poly 3D). No Animate seed was used.\n- **Originality:** all geometry, colour logic, camera and audio are original (2026-10-08).\n- **Fonts:** Space Grotesk (SIL OFL) and the Droid Sans Bold three.js typeface (Apache-2.0).\n- **Libraries:** three.js (MIT).", "review": { "technical": { "state": "Supplied checks passed", "scope": "Source handoff records complete decode, stream dimensions and audio measurements. Browser playback is checked separately.", "artifactSha256": "efa261452472dddcf11dbc7b6cb52856c4c037e6f4456d8526297c600a490025" }, "creative": { "state": "Not independently accepted", "scope": "not independently established", "artifactSha256": "efa261452472dddcf11dbc7b6cb52856c4c037e6f4456d8526297c600a490025" }, "listening": { "state": "Not verified", "scope": "No perceptual listening pass is established by this library import.", "artifactSha256": "efa261452472dddcf11dbc7b6cb52856c4c037e6f4456d8526297c600a490025" }, "reproduction": { "state": "Not tested", "scope": "Source is supplied. Cross-machine cold-start reproduction has not been established.", "artifactSha256": "efa261452472dddcf11dbc7b6cb52856c4c037e6f4456d8526297c600a490025" } }, "detailUrl": "https://library.jkylehobson.chatgpt.site/video-library/#family=low-poly-3d&example=claude-cloud", "processUrl": "/video-library/process.html?family=low-poly-3d&example=claude-cloud", "downloads": { "prompt": { "available": true, "url": "/video-library/prompts/low-poly-3d--claude-cloud.txt", "sha256": "3a07eeb598e4a5fbde7569a05d8e59e7c7e6c2f57315693e8164c9cf0325a6ff", "bytes": 1854, "label": "Reusable, example-specific instructions" }, "video": { "name": "low-poly-3d--claude-cloud.mp4", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/low-poly-3d--claude-cloud.mp4", "bytes": 5751982, "sha256": "efa261452472dddcf11dbc7b6cb52856c4c037e6f4456d8526297c600a490025", "available": true, "label": "5.5 MB" }, "source": { "name": "low-poly-3d--claude-cloud--source.zip", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/low-poly-3d--claude-cloud--source.zip", "bytes": 9861005, "sha256": "a0a05469da244e363d290711ba198ae336dc62ddda8c03d1df4ee3d2f9d33443", "available": true, "label": "9.4 MB", "contents": [ "editable source", "variant guidance", "source assets", "audio inputs", "dependency declarations", "file manifest" ], "includedFiles": 67, "includedFilePaths": [ "CASE_STUDY.md", "RUN.md", "SKILL.md", "STYLE.md", "assets/components/cloud.png", "assets/components/island-cutaway.png", "assets/components/letter-S.png", "assets/components/low-poly-sun.png", "assets/components/seedling.png", "assets/layers/t10.40/01_sky.png", "assets/layers/t10.40/02_island.png", "assets/layers/t10.40/03_story.png", "assets/layers/t10.40/04_title-3d.png", "assets/layers/t10.40/05_overlay.png", "assets/layers/t2.60/01_sky.png", "assets/layers/t2.60/02_island.png", "assets/layers/t2.60/03_story.png", "assets/layers/t2.60/04_title-3d.png", "assets/layers/t2.60/05_overlay.png", "assets/layers/t4.90/01_sky.png", "assets/layers/t4.90/02_island.png", "assets/layers/t4.90/03_story.png", "assets/layers/t4.90/04_title-3d.png", "assets/layers/t4.90/05_overlay.png", "assets/layers/t7.60/01_sky.png", "assets/layers/t7.60/02_island.png", "assets/layers/t7.60/03_story.png", "assets/layers/t7.60/04_title-3d.png", "assets/layers/t7.60/05_overlay.png", "assets/paths/rootSection.json", "assets/paths/rootSection.svg", "assets/textures/sky-dawn.png", "assets/textures/sky-day.png", "audio/cues.json", "audio/mix.flac", "audio/stems/drums.flac", "audio/stems/music.flac", "audio/stems/sfx.flac", "engine/audio.mjs", "engine/audio/dsp.js", "engine/audio/instruments.js", "engine/audio/sfx.js", "engine/browser.mjs", "engine/export.mjs", "engine/finish.mjs", "engine/lib/draw.js", "engine/lib/util.js", "engine/page.html", "engine/render.mjs", "engine/runtime.js", "engine/server.mjs", "film/contact_sheet.jpg", "film/spectrogram.png", "film/stills/01_0.80s.jpg", "film/stills/02_2.60s.jpg", "film/stills/03_4.90s.jpg", "film/stills/04_7.20s.jpg", "film/stills/05_8.60s.jpg", "film/stills/06_10.40s.jpg", "overview/encoded-contact-sheet.jpg", "package.json", "qa.json", "spec.json", "styles/low-poly-3d/scene.js", "styles/low-poly-3d/score.js", "styles/low-poly-3d/timeline.js", "BUNDLE-GUIDE.md" ], "externalPrerequisites": { "runtime": [ "Node.js", "Chromium or Chrome", "FFmpeg and ffprobe" ], "packageDependencies": { "@fontsource/anton": "^5.1.0", "@fontsource/archivo-black": "^5.1.0", "@fontsource/bangers": "^5.1.0", "@fontsource/bebas-neue": "^5.1.0", "@fontsource/caveat": "^5.1.0", "@fontsource/comic-neue": "^5.3.0", "@fontsource/courier-prime": "^5.3.0", "@fontsource/dm-sans": "^5.1.0", "@fontsource/dm-serif-display": "^5.1.0", "@fontsource/fraunces": "^5.1.0", "@fontsource/ibm-plex-mono": "^5.1.0", "@fontsource/instrument-serif": "^5.1.0", "@fontsource/inter": "^5.1.0", "@fontsource/jetbrains-mono": "^5.1.0", "@fontsource/jost": "^5.3.0", "@fontsource/kaushan-script": "^5.3.0", "@fontsource/nunito": "^5.1.0", "@fontsource/permanent-marker": "^5.1.0", "@fontsource/playfair-display": "^5.1.0", "@fontsource/press-start-2p": "^5.1.0", "@fontsource/space-grotesk": "^5.1.0", "@fontsource/space-mono": "^5.1.0", "@fontsource/stix-two-text": "^5.3.0", "@fontsource/syne": "^5.1.0", "@fontsource/vt323": "^5.1.0", "three": "0.170.0", "playwright": "1.56.1" }, "lockfileIncluded": false, "coldStart": false }, "license": { "summary": "User-directed publication of supplied authored source; preserve listed third-party notices; no new license granted here.", "includedNoticePaths": [], "newLicenseGranted": false } }, "bundle": { "name": "low-poly-3d--claude-cloud--full.zip", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/low-poly-3d--claude-cloud--full.zip", "bytes": 15637237, "sha256": "db3435b60c281c3865dcade666c8ff18cc9b6a04853ab89bf6724f05b4ab5e7b", "available": true, "label": "14.9 MB", "contents": [ "selected master", "editable source", "variant guidance", "source assets", "audio inputs", "dependency declarations", "file manifest", "designed cover", "starter prompt" ], "includedFiles": 70, "includedFilePaths": [ "CASE_STUDY.md", "RUN.md", "SKILL.md", "STYLE.md", "assets/components/cloud.png", "assets/components/island-cutaway.png", "assets/components/letter-S.png", "assets/components/low-poly-sun.png", "assets/components/seedling.png", "assets/layers/t10.40/01_sky.png", "assets/layers/t10.40/02_island.png", "assets/layers/t10.40/03_story.png", "assets/layers/t10.40/04_title-3d.png", "assets/layers/t10.40/05_overlay.png", "assets/layers/t2.60/01_sky.png", "assets/layers/t2.60/02_island.png", "assets/layers/t2.60/03_story.png", "assets/layers/t2.60/04_title-3d.png", "assets/layers/t2.60/05_overlay.png", "assets/layers/t4.90/01_sky.png", "assets/layers/t4.90/02_island.png", "assets/layers/t4.90/03_story.png", "assets/layers/t4.90/04_title-3d.png", "assets/layers/t4.90/05_overlay.png", "assets/layers/t7.60/01_sky.png", "assets/layers/t7.60/02_island.png", "assets/layers/t7.60/03_story.png", "assets/layers/t7.60/04_title-3d.png", "assets/layers/t7.60/05_overlay.png", "assets/paths/rootSection.json", "assets/paths/rootSection.svg", "assets/textures/sky-dawn.png", "assets/textures/sky-day.png", "audio/cues.json", "audio/mix.flac", "audio/stems/drums.flac", "audio/stems/music.flac", "audio/stems/sfx.flac", "display/cover.webp", "engine/audio.mjs", "engine/audio/dsp.js", "engine/audio/instruments.js", "engine/audio/sfx.js", "engine/browser.mjs", "engine/export.mjs", "engine/finish.mjs", "engine/lib/draw.js", "engine/lib/util.js", "engine/page.html", "engine/render.mjs", "engine/runtime.js", "engine/server.mjs", "film/contact_sheet.jpg", "film/low-poly-3d.mp4", "film/spectrogram.png", "film/stills/01_0.80s.jpg", "film/stills/02_2.60s.jpg", "film/stills/03_4.90s.jpg", "film/stills/04_7.20s.jpg", "film/stills/05_8.60s.jpg", "film/stills/06_10.40s.jpg", "overview/encoded-contact-sheet.jpg", "package.json", "qa.json", "spec.json", "starter-prompt.txt", "styles/low-poly-3d/scene.js", "styles/low-poly-3d/score.js", "styles/low-poly-3d/timeline.js", "BUNDLE-GUIDE.md" ], "externalPrerequisites": { "runtime": [ "Node.js", "Chromium or Chrome", "FFmpeg and ffprobe" ], "packageDependencies": { "@fontsource/anton": "^5.1.0", "@fontsource/archivo-black": "^5.1.0", "@fontsource/bangers": "^5.1.0", "@fontsource/bebas-neue": "^5.1.0", "@fontsource/caveat": "^5.1.0", "@fontsource/comic-neue": "^5.3.0", "@fontsource/courier-prime": "^5.3.0", "@fontsource/dm-sans": "^5.1.0", "@fontsource/dm-serif-display": "^5.1.0", "@fontsource/fraunces": "^5.1.0", "@fontsource/ibm-plex-mono": "^5.1.0", "@fontsource/instrument-serif": "^5.1.0", "@fontsource/inter": "^5.1.0", "@fontsource/jetbrains-mono": "^5.1.0", "@fontsource/jost": "^5.3.0", "@fontsource/kaushan-script": "^5.3.0", "@fontsource/nunito": "^5.1.0", "@fontsource/permanent-marker": "^5.1.0", "@fontsource/playfair-display": "^5.1.0", "@fontsource/press-start-2p": "^5.1.0", "@fontsource/space-grotesk": "^5.1.0", "@fontsource/space-mono": "^5.1.0", "@fontsource/stix-two-text": "^5.3.0", "@fontsource/syne": "^5.1.0", "@fontsource/vt323": "^5.1.0", "three": "0.170.0", "playwright": "1.56.1" }, "lockfileIncluded": false, "coldStart": false }, "license": { "summary": "User-directed publication of supplied authored source; preserve listed third-party notices; no new license granted here.", "includedNoticePaths": [], "newLicenseGranted": false } } }, "cadenceNote": "Encoded fps describes the file. Scene evaluation and held actor poses depend on this source recipe.", "starterPrompt": "Create a {10}-second {1080×1920} low-poly 3D animation of {subject} as a small floating world with a 120° cutaway wedge showing its inside. Everything is flat-shaded triangles with slight per-facet colour variation, pastel palette, no textures; position-hashed vertex jitter for rocky facets; section faces painted a little lighter. A slow orbit camera reveals the cut, dives in for the internal process, then pulls back wide. Sky: a dawn → day gradient. Weather and props are primitives (icosphere clouds, octahedron rain, cone trees, icosahedron sun). Physical motion with gentle bounces; growth revealed along tubes. Captions in a geometric grotesk; a faceted 3D title assembles from scattered letters. Sound: soft marimba + pad, every physical event sonified (pitch follows depth/height).\n\nSelected example: Seed to Seedling\nFamily: low-poly-3d\nVariant: claude-cloud\nTypography: Space Grotesk 400, Space Grotesk 700, Droid Sans Bold typeface (Apache-2.0)\nProduction: three.js\nExact reference master SHA-256: efa261452472dddcf11dbc7b6cb52856c4c037e6f4456d8526297c600a490025\n\nRead the selected STYLE.md, SKILL.md and reproduction instructions before adapting. Keep the declared renderer and source closure; do not assume another family variant has interchangeable parameters. Preserve exact font or custom glyph sources, color roles, spatial continuity and readable text. Record encoded frame rate, scene evaluation and held poses separately. Review the changed render visually and listen to the encoded audio before claiming those checks passed. Existing approval applies only to its recorded artifact.\n\nSuccess check: the adapted story is clear; key type remains readable in motion; the source rebuilds with its declared inputs; all media and review records identify the exact output. State any untested reproduction, listening or rights limits.", "downloadNote": "Downloads match this selected example. The full bundle includes its source, original video, cover and starter prompt. Source packages include artwork, audio inputs and dependency declarations. Requires Node.js, Chromium or Chrome, FFmpeg and ffprobe. Follow the included run guide for package installation and reproduction limits.", "model": "Opus 5.5", "reasoningEffort": "Extra" } ], "relatedMethodIds": [] }, { "id": "math", "slug": "math", "title": "Math", "premise": "Equations, plots and color-coded variables unfold on a dark stage, keeping each movement tied to the explanation.", "summary": "Equations, plots and color-coded variables unfold on a dark stage, keeping each movement tied to the explanation.", "category": "Information design", "defaultExampleId": "claude-cloud", "facets": { "material": [ "2d", "math", "formula", "graph", "colour-coding", "dark-stage", "smooth", "sonification" ], "producer": [ "Claude Cloud" ], "format": [ "Portrait" ], "motion": [], "useCase": [] }, "examples": [ { "id": "claude-cloud", "title": "Seed to Seedling", "producer": "Claude Cloud", "producerEvidence": "The displayed model and reasoning label identify this production lane. Exact runtime model ID and per-film cost are not established by the source packet.", "relationship": "Original family example", "format": "Portrait", "productionMethod": "canvas-2d", "master": { "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/math--claude-cloud.mp4", "sha256": "8b06a07f37bebbd2c82d764a2d196d7b04fc3dd1bb96042738f94b72706da593", "bytes": 1573053, "mimeType": "video/mp4", "width": 1080, "height": 1920, "duration": 10.6, "encodedFps": 60 }, "poster": { "url": "/video-library/media/math--claude-cloud/cover.webp", "sha256": "536fdfc1563870565099f51e6b408d4bc0d56b3383ef24aad6956ead9872d5ac", "sourceMasterSha256": "8b06a07f37bebbd2c82d764a2d196d7b04fc3dd1bb96042738f94b72706da593", "timeSeconds": 9.01, "rationale": "Late story beat selected to show the developed subject and visual system; extracted from this exact master." }, "previewVideo": { "url": "/video-library/media/math--claude-cloud/preview.mp4", "sha256": "68ce268ec0b3f544ad9b9f64de762d7a3d28ea7f90c6bd861bafb2c8241faedc", "sourceMasterSha256": "8b06a07f37bebbd2c82d764a2d196d7b04fc3dd1bb96042738f94b72706da593", "width": 540, "height": 960, "label": "Playback preview · 540 px wide · full master in Download finished video" }, "gallery": [ { "id": "overview", "role": "encoded-contact-sheet", "label": "Scenes from the finished render · not a planning storyboard", "url": "/video-library/media/math--claude-cloud/overview.webp", "sourceMasterSha256": "8b06a07f37bebbd2c82d764a2d196d7b04fc3dd1bb96042738f94b72706da593" }, { "id": "scene-1", "role": "encoded-frame", "label": "Finished-film frame · 2.12 seconds", "url": "/video-library/media/math--claude-cloud/scene-1.webp", "sourceMasterSha256": "8b06a07f37bebbd2c82d764a2d196d7b04fc3dd1bb96042738f94b72706da593", "timeSeconds": 2.12 }, { "id": "scene-2", "role": "encoded-frame", "label": "Finished-film frame · 5.3 seconds", "url": "/video-library/media/math--claude-cloud/scene-2.webp", "sourceMasterSha256": "8b06a07f37bebbd2c82d764a2d196d7b04fc3dd1bb96042738f94b72706da593", "timeSeconds": 5.3 }, { "id": "scene-3", "role": "encoded-frame", "label": "Finished-film frame · 8.48 seconds", "url": "/video-library/media/math--claude-cloud/scene-3.webp", "sourceMasterSha256": "8b06a07f37bebbd2c82d764a2d196d7b04fc3dd1bb96042738f94b72706da593", "timeSeconds": 8.48 } ], "typography": [ "STIX Two Text (italic variables, upright digits/operators)", "STIX Two Text italic", "STIX Two Text" ], "palette": { "bg": "#0E0E10", "white": "#FFFFFF", "grey": "#BBBBBB", "greyC": "#888888", "greyD": "#444444", "blueD": "#29ABCA", "red": "#FC6255", "green": "#83C167", "yellow": "#F7D96F", "blue": "#58C4DD", "teal": "#5CD0B3", "yellowP": "#FFFF00", "pi": "#2E86AB", "piD": "#1C5A75" }, "usageGuidance": "Change the subject, copy and timing for your audience. Retain the selected example’s visual rules and recheck the entire reading interval after changes.", "styleRules": "---\nid: math\nname: Math (the logistic curve, manim-style)\nfamily: information design\naliases: [manim, 3b1b-style, math explainer, equation animation, function plot]\ntags: [2d, math, formula, graph, colour-coding, dark-stage, smooth, sonification]\nkind: visual-style\nroute: canvas-2d (CPU canvas; a tiny TeX-like layout engine + vector plot)\nreadiness: { research: seed-extended, rights: original-work, referenceImages: own-render, code: built, render: rendered-and-measured }\n---\n\n# Math (the logistic curve, manim-style)\n\nA manim-style explainer of a **true** statement about a model: seedling height is often described by logistic growth, `h(t) = K / (1 + e^(−r(t − t₀)))`.\n- **Setting up:** on a near-black stage the formula is *Written* on (glyph outlines sweep, then fills fade, lagged left → right), with each quantity in its own colour. The illustrative parameters appear, then the axes and a faint number plane sweep in.\n- **① Water wakes the seed (lag):** a yellow curve draws with a tracking dot and a live decimal readout (\"h = 3.8 mm\").\n- **② A root reaches down (fast growth):** the differential equation `dh/dt = r·h·(1 − h/K)` is Written; the dot reaches t₀, a Flash marks the inflection, and a red tangent shows the steepest slope, `dh/dt = rK/4`.\n- **③ A shoot finds the light (levelling off):** the curve approaches the dashed asymptote K.\n- **Ending:** the title is Written under the finished figure. A small blue bean mascot watches the dot the whole time.\n\n**The one rule:** *the math must be true, and colour means quantity.* Every quantity keeps one colour in the formula, on the figure, in the readouts and in the labels.\n\n## Creative direction\n- **Audience:** students, teachers, science communicators, curious adults, STEM social channels.\n- **Purpose:** turn a growth story into an idea with a picture: why growth starts slowly, speeds up and levels off.\n- **Feeling:** clear, calm, rigorous, quietly wonderful.\n- **Central visual idea:** *the S-curve is the story.* The three narrative beats are the three regimes of one function, linked by the formula and its derivative.\n- **How the parts work together:**\n - *Composition:* formulas on top, the plot in the middle, captions below, the mascot in the corner.\n - *Colour:* manim constants (h yellow, t blue, K green, r red, t₀ teal) on near-black.\n - *Type:* one serif with a real italic for everything (variables italic, digits and operators upright).\n - *Motion:* smooth, on ones, with sigmoid easing.\n - *Sound:* a calm bed plus a tone that **follows h(t)**, so you hear the curve.\n\n## Fit\n- **Best for:** any formula with a picture: rates, growth, decay, probability, geometry, physics.\n- **Avoid when:** the claim isn't mathematically true or can't be shown honestly; emotional or brand storytelling.\n- **Honesty:** the parameters are illustrative, and the footer says \"a model, not a measurement\".\n- **Cost:** trivial. 636 frames in about 15 s.\n\n## Visual fingerprint\n| Element | Rule |\n|---|---|\n| Stage | `#0E0E10`, flat; no texture, grain or boil. |\n| Colours | h `#F7D96F` · t `#58C4DD` · K `#83C167` · r `#FC6255` · t₀ `#5CD0B3`; operators white; axes `#BBBBBB`; labels `#888888`; number plane `#29ABCA` at 20 %; Flash `#FFFF00`; mascot `#2E86AB` / `#1C5A75` (never a quantity colour). |\n| Figure | x = 140 + 60·t (days 0-14), y = 1400 − 10·h (mm 0-70); axes 3.5 px with arrowheads; ticks every day; labels 0/7/14 and 30/60; plane lines every day and every 10 mm. |\n| Curve and dot | Yellow 6 px curve sampled every 0.04 day; dot r 12; DecimalNumber readout \"h = 29.7 mm\" with fixed-advance digits, kept upper-left of the dot. |\n| Marks | Flash (12 rays, 0.45 s) at (t₀, K/2); a red tangent of slope rK/4 drawn from the centre outward; a dashed green asymptote at K labelled *K*. |\n| Mascot | Blue bean 112 × 80 at (150, 1790); pupils point at the tracking dot; a gentle bob; blinks. |\n\n### Typography (exact)\n| Role | Family | Size | Rules | Enter |\n|---|---|---|---|---|\n| Main formula | STIX Two Text (italic variables, upright digits/functions/operators) | 84 | centred, baseline 340; operator spacing = 0.28 em, + − 0.22 em; scripts 0.6 em (sup raised 0.45 em, sub lowered 0.2 em); fraction bar 0.05 em on the math axis (−0.27 em), parts at 0.9 | Write 0.9 s (outline sweep, then fill; glyph lag 0.55/(n−1)) |\n| ODE | same | 62 | centred, baseline 500 | Write 0.8 s at the root beat |\n| Parameters | same | 34 | centred, baseline 610; symbols coloured, values grey | FadeIn 0.6 s |\n| Axis / tick labels | same | 36 / 32 | grey; axis names coloured as quantities | FadeIn |\n| Annotations | same | 38-44 | \"fastest growth at t₀: dh/dt = rK/4\" at (640, 1190-1270) | FadeIn 0.5 s after the tangent |\n| Captions | STIX Two Text italic | 52 | centred at y 1610 on a black 75 % BackgroundRectangle | FadeIn with a 16 px shift up (0.4 s); FadeOut 0.3 s |\n| Title | STIX Two Text | 72 | centred, y 1620 | Write 0.8 s |\n| Kicker / note | STIX Two Text | 30 | grey, tracking 6 (kicker) | FadeIn |\n\nRule: nothing under 28 px; true minus signs (−).\n\n## Temporal fingerprint\n| Element | Rule |\n|---|---|\n| Easing | manim `smooth` (a sigmoid with inflection 10, normalised) for everything except the tone. |\n| Run times | Write 0.8-0.9 s; ShowCreation 0.6-0.7 s; FadeIn 0.4-0.6 s; Flash 0.45 s. |\n| Tracked time | Each beat moves the dot smoothly: days 0 → 4 (2.1-3.6 s), 4 → 7 (4.0-5.3 s), 7 → 14 (6.3-7.8 s). |\n| Holds | Each caption stays ≥ 1.5 s; the final figure holds 1.7 s. |\n\n## How the composition develops\n| Time | Beat | On screen |\n|---|---|---|\n| 0-2.0 s | Set-up | Kicker; formula Written; parameters; axes and plane sweep in. |\n| 2.0-3.75 s | ① lag | \"Water wakes the seed\"; the curve crawls; the readout rises slowly. |\n| 3.75-6.2 s | ② fast | \"A root reaches down\"; ODE Written; the dot reaches t₀; Flash; steepest tangent + annotation. |\n| 6.2-8.1 s | ③ levelling | \"A shoot finds the light\"; the curve approaches the dashed K. |\n| 8.1-10.6 s | Title | The ODE fades; \"From seed to seedling\" is Written; note; hold. |\n\n## Sound fingerprint\nA calm bed at 100 BPM in F major (F · Dm · B♭ · C): soft e-piano arpeggios, a pad, and kalimba figures on each Write.\n- **Sonification:** a soft FM tone whose frequency follows the tracked height, `220·2^(2h/K)` Hz (A3 → A5). It swells while the curve is drawing and rests between beats.\n- **Cues:** ticks as the axis marks appear, filtered breaths for ShowCreation sweeps, and a bell on the Flash.\n\nMix −15.9 LUFS, −4.3 dBTP.\n\n## Reusable prompt\n> Create a {10.5}-second {1080×1920} manim-style math explainer of {a true statement / model}. Near-black flat stage; one serif with a real italic for all math (variables italic, digits and operators upright, TeX spacing, fractions on the math axis, 0.6 scripts). Give every quantity one colour and keep it in the formula, figure, readouts and labels. Write formulas on (outline sweep, then fill, lagged), ShowCreation axes and curves with sigmoid easing, track a dot with a live decimal readout, Flash the key point, draw the tangent/asymptote that proves the claim. Captions sit on black 75 % rectangles. A small mascot watches the dot. Score: calm bed + a tone whose pitch follows the plotted value. Label illustrative parameters honestly.\n\n## Adaptation guidance\n| Change | Safe? | Notes |\n|---|---|---|\n| Function / model | ✅ | Replace `MODEL`, `h`, the formulas and the marks; keep every on-screen claim true. |\n| Colours | ✅ | Use one colour per quantity, consistently; never give the mascot a quantity colour. |\n| Font | ✅ | Any serif with a true italic (STIX Two, Latin Modern, Cambria). |\n| 16:9 | ✅ classic | Formula top-left, plot right. |\n| **Essential** | , | Truth, colour = quantity, Write/ShowCreation grammar, smooth easing, a tracking readout, no texture. |\n\n## Accessibility\nWhite and pastels on near-black (≥ 8:1). Colours are paired with symbols and labels (never colour alone). Captions on solid boxes. No flashing beyond the 0.45 s yellow Flash rays. The tone is gentle.\n\n## Provenance\nBuilt from the Animate seed `math` (cth9191/animate @ 7e5eb56feb2dd573f890e1b7b34748af43d58263, MIT): the manim-inspired look (colour constants, Write/ShowCreation/Flash grammar, smooth easing, TeX conventions, tracking readouts). The seed's pi-shaped hero was replaced with an original bean mascot. The math (logistic growth, its ODE, inflection and maximum slope rK/4) is standard and correct; the parameters are illustrative. Font: STIX Two Text (SIL OFL). All code and audio are original (2026-10-07).", "review": { "technical": { "state": "Supplied checks passed", "scope": "Source handoff records complete decode, stream dimensions and audio measurements. Browser playback is checked separately.", "artifactSha256": "8b06a07f37bebbd2c82d764a2d196d7b04fc3dd1bb96042738f94b72706da593" }, "creative": { "state": "Not independently accepted", "scope": "not independently established", "artifactSha256": "8b06a07f37bebbd2c82d764a2d196d7b04fc3dd1bb96042738f94b72706da593" }, "listening": { "state": "Not verified", "scope": "No perceptual listening pass is established by this library import.", "artifactSha256": "8b06a07f37bebbd2c82d764a2d196d7b04fc3dd1bb96042738f94b72706da593" }, "reproduction": { "state": "Not tested", "scope": "Source is supplied. Cross-machine cold-start reproduction has not been established.", "artifactSha256": "8b06a07f37bebbd2c82d764a2d196d7b04fc3dd1bb96042738f94b72706da593" } }, "detailUrl": "https://library.jkylehobson.chatgpt.site/video-library/#family=math&example=claude-cloud", "processUrl": "/video-library/process.html?family=math&example=claude-cloud", "downloads": { "prompt": { "available": true, "url": "/video-library/prompts/math--claude-cloud.txt", "sha256": "c7e055a05a848ff3e7e420016aeeee9e10f61a5173ee83e79f3d9026944a0186", "bytes": 1813, "label": "Reusable, example-specific instructions" }, "video": { "name": "math--claude-cloud.mp4", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/math--claude-cloud.mp4", "bytes": 1573053, "sha256": "8b06a07f37bebbd2c82d764a2d196d7b04fc3dd1bb96042738f94b72706da593", "available": true, "label": "1.5 MB" }, "source": { "name": "math--claude-cloud--source.zip", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/math--claude-cloud--source.zip", "bytes": 6159085, "sha256": "2ab6b03c4af3d773dd9af4284bec362dfcd2cfa64302d1bd58d9de20abb095d2", "available": true, "label": "5.9 MB", "contents": [ "editable source", "variant guidance", "source assets", "audio inputs", "dependency declarations", "file manifest" ], "includedFiles": 54, "includedFilePaths": [ "CASE_STUDY.md", "RUN.md", "SKILL.md", "STYLE.md", "THIRD-PARTY-NOTICES/animate-MIT.txt", "assets/components/colour-key.png", "assets/components/formula-logistic.png", "assets/components/formula-ode.png", "assets/components/mascot.png", "assets/layers/t10.30/01_math.png", "assets/layers/t10.30/02_figure.png", "assets/layers/t10.30/03_captions.png", "assets/layers/t10.30/04_mascot.png", "assets/layers/t3.60/01_math.png", "assets/layers/t3.60/02_figure.png", "assets/layers/t3.60/03_captions.png", "assets/layers/t3.60/04_mascot.png", "assets/layers/t5.20/01_math.png", "assets/layers/t5.20/02_figure.png", "assets/layers/t5.20/03_captions.png", "assets/layers/t5.20/04_mascot.png", "audio/cues.json", "audio/mix.flac", "audio/stems/music.flac", "audio/stems/sfx.flac", "engine/audio.mjs", "engine/audio/dsp.js", "engine/audio/instruments.js", "engine/audio/sfx.js", "engine/browser.mjs", "engine/export.mjs", "engine/finish.mjs", "engine/lib/draw.js", "engine/lib/util.js", "engine/page.html", "engine/render.mjs", "engine/runtime.js", "engine/server.mjs", "film/contact_sheet.jpg", "film/spectrogram.png", "film/stills/01_1.10s.jpg", "film/stills/02_2.00s.jpg", "film/stills/03_3.60s.jpg", "film/stills/04_5.20s.jpg", "film/stills/05_7.40s.jpg", "film/stills/06_10.30s.jpg", "overview/encoded-contact-sheet.jpg", "package.json", "qa.json", "spec.json", "styles/math/scene.js", "styles/math/score.js", "styles/math/timeline.js", "BUNDLE-GUIDE.md" ], "externalPrerequisites": { "runtime": [ "Node.js", "Chromium or Chrome", "FFmpeg and ffprobe" ], "packageDependencies": { "@fontsource/anton": "^5.1.0", "@fontsource/archivo-black": "^5.1.0", "@fontsource/bangers": "^5.1.0", "@fontsource/bebas-neue": "^5.1.0", "@fontsource/caveat": "^5.1.0", "@fontsource/comic-neue": "^5.3.0", "@fontsource/dm-sans": "^5.1.0", "@fontsource/dm-serif-display": "^5.1.0", "@fontsource/fraunces": "^5.1.0", "@fontsource/ibm-plex-mono": "^5.1.0", "@fontsource/instrument-serif": "^5.1.0", "@fontsource/inter": "^5.1.0", "@fontsource/jetbrains-mono": "^5.1.0", "@fontsource/jost": "^5.3.0", "@fontsource/kaushan-script": "^5.3.0", "@fontsource/nunito": "^5.1.0", "@fontsource/permanent-marker": "^5.1.0", "@fontsource/playfair-display": "^5.1.0", "@fontsource/press-start-2p": "^5.1.0", "@fontsource/space-grotesk": "^5.1.0", "@fontsource/space-mono": "^5.1.0", "@fontsource/stix-two-text": "^5.3.0", "@fontsource/syne": "^5.1.0", "@fontsource/vt323": "^5.1.0", "three": "0.170.0", "playwright": "1.56.1" }, "lockfileIncluded": false, "coldStart": false }, "license": { "summary": "User-directed publication of supplied authored source; preserve listed third-party notices; no new license granted here.", "includedNoticePaths": [ "THIRD-PARTY-NOTICES/animate-MIT.txt" ], "newLicenseGranted": false } }, "bundle": { "name": "math--claude-cloud--full.zip", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/math--claude-cloud--full.zip", "bytes": 7756832, "sha256": "88eb61ad2dfed1fac648a5c6d06ed122877bf813af00c68ff76642083babd389", "available": true, "label": "7.4 MB", "contents": [ "selected master", "editable source", "variant guidance", "source assets", "audio inputs", "dependency declarations", "file manifest", "designed cover", "starter prompt" ], "includedFiles": 57, "includedFilePaths": [ "CASE_STUDY.md", "RUN.md", "SKILL.md", "STYLE.md", "THIRD-PARTY-NOTICES/animate-MIT.txt", "assets/components/colour-key.png", "assets/components/formula-logistic.png", "assets/components/formula-ode.png", "assets/components/mascot.png", "assets/layers/t10.30/01_math.png", "assets/layers/t10.30/02_figure.png", "assets/layers/t10.30/03_captions.png", "assets/layers/t10.30/04_mascot.png", "assets/layers/t3.60/01_math.png", "assets/layers/t3.60/02_figure.png", "assets/layers/t3.60/03_captions.png", "assets/layers/t3.60/04_mascot.png", "assets/layers/t5.20/01_math.png", "assets/layers/t5.20/02_figure.png", "assets/layers/t5.20/03_captions.png", "assets/layers/t5.20/04_mascot.png", "audio/cues.json", "audio/mix.flac", "audio/stems/music.flac", "audio/stems/sfx.flac", "display/cover.webp", "engine/audio.mjs", "engine/audio/dsp.js", "engine/audio/instruments.js", "engine/audio/sfx.js", "engine/browser.mjs", "engine/export.mjs", "engine/finish.mjs", "engine/lib/draw.js", "engine/lib/util.js", "engine/page.html", "engine/render.mjs", "engine/runtime.js", "engine/server.mjs", "film/contact_sheet.jpg", "film/math.mp4", "film/spectrogram.png", "film/stills/01_1.10s.jpg", "film/stills/02_2.00s.jpg", "film/stills/03_3.60s.jpg", "film/stills/04_5.20s.jpg", "film/stills/05_7.40s.jpg", "film/stills/06_10.30s.jpg", "overview/encoded-contact-sheet.jpg", "package.json", "qa.json", "spec.json", "starter-prompt.txt", "styles/math/scene.js", "styles/math/score.js", "styles/math/timeline.js", "BUNDLE-GUIDE.md" ], "externalPrerequisites": { "runtime": [ "Node.js", "Chromium or Chrome", "FFmpeg and ffprobe" ], "packageDependencies": { "@fontsource/anton": "^5.1.0", "@fontsource/archivo-black": "^5.1.0", "@fontsource/bangers": "^5.1.0", "@fontsource/bebas-neue": "^5.1.0", "@fontsource/caveat": "^5.1.0", "@fontsource/comic-neue": "^5.3.0", "@fontsource/dm-sans": "^5.1.0", "@fontsource/dm-serif-display": "^5.1.0", "@fontsource/fraunces": "^5.1.0", "@fontsource/ibm-plex-mono": "^5.1.0", "@fontsource/instrument-serif": "^5.1.0", "@fontsource/inter": "^5.1.0", "@fontsource/jetbrains-mono": "^5.1.0", "@fontsource/jost": "^5.3.0", "@fontsource/kaushan-script": "^5.3.0", "@fontsource/nunito": "^5.1.0", "@fontsource/permanent-marker": "^5.1.0", "@fontsource/playfair-display": "^5.1.0", "@fontsource/press-start-2p": "^5.1.0", "@fontsource/space-grotesk": "^5.1.0", "@fontsource/space-mono": "^5.1.0", "@fontsource/stix-two-text": "^5.3.0", "@fontsource/syne": "^5.1.0", "@fontsource/vt323": "^5.1.0", "three": "0.170.0", "playwright": "1.56.1" }, "lockfileIncluded": false, "coldStart": false }, "license": { "summary": "User-directed publication of supplied authored source; preserve listed third-party notices; no new license granted here.", "includedNoticePaths": [ "THIRD-PARTY-NOTICES/animate-MIT.txt" ], "newLicenseGranted": false } } }, "cadenceNote": "Encoded fps describes the file. Scene evaluation and held actor poses depend on this source recipe.", "starterPrompt": "Create a {10.5}-second {1080×1920} manim-style math explainer of {a true statement / model}. Near-black flat stage; one serif with a real italic for all math (variables italic, digits and operators upright, TeX spacing, fractions on the math axis, 0.6 scripts). Give every quantity one colour and keep it in the formula, figure, readouts and labels. Write formulas on (outline sweep, then fill, lagged), ShowCreation axes and curves with sigmoid easing, track a dot with a live decimal readout, Flash the key point, draw the tangent/asymptote that proves the claim. Captions sit on black 75 % rectangles. A small mascot watches the dot. Score: calm bed + a tone whose pitch follows the plotted value. Label illustrative parameters honestly.\n\nSelected example: Seed to Seedling\nFamily: math\nVariant: claude-cloud\nTypography: STIX Two Text (italic variables, upright digits/operators), STIX Two Text italic, STIX Two Text\nProduction: canvas-2d\nExact reference master SHA-256: 8b06a07f37bebbd2c82d764a2d196d7b04fc3dd1bb96042738f94b72706da593\n\nRead the selected STYLE.md, SKILL.md and reproduction instructions before adapting. Keep the declared renderer and source closure; do not assume another family variant has interchangeable parameters. Preserve exact font or custom glyph sources, color roles, spatial continuity and readable text. Record encoded frame rate, scene evaluation and held poses separately. Review the changed render visually and listen to the encoded audio before claiming those checks passed. Existing approval applies only to its recorded artifact.\n\nSuccess check: the adapted story is clear; key type remains readable in motion; the source rebuilds with its declared inputs; all media and review records identify the exact output. State any untested reproduction, listening or rights limits.", "downloadNote": "Downloads match this selected example. The full bundle includes its source, original video, cover and starter prompt. Source packages include artwork, audio inputs and dependency declarations. Requires Node.js, Chromium or Chrome, FFmpeg and ffprobe. Follow the included run guide for package installation and reproduction limits.", "model": "Opus 5.5", "reasoningEffort": "Extra" } ], "relatedMethodIds": [ "math" ] }, { "id": "neon-synthwave", "slug": "neon-synthwave", "title": "Neon Synthwave", "premise": "Glowing grids, chrome-like lettering and neon trails build a retro digital world driven by music.", "summary": "Glowing grids, chrome-like lettering and neon trails build a retro digital world driven by music.", "category": "Retro digital", "defaultExampleId": "claude-cloud", "facets": { "material": [ "2d", "neon", "bloom", "perspective-grid", "chrome-type", "vhs", "retro", "music-driven" ], "producer": [ "Claude Cloud" ], "format": [ "Portrait" ], "motion": [], "useCase": [] }, "examples": [ { "id": "claude-cloud", "title": "Seed to Seedling", "producer": "Claude Cloud", "producerEvidence": "The displayed model and reasoning label identify this production lane. Exact runtime model ID and per-film cost are not established by the source packet.", "relationship": "Original family example", "format": "Portrait", "productionMethod": "canvas-2d", "master": { "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/neon-synthwave--claude-cloud.mp4", "sha256": "d5e5b20ca08705fddabcb6b782ea6b71b21aa866e776bb80b1dd8439ad02fead", "bytes": 9213008, "mimeType": "video/mp4", "width": 1080, "height": 1920, "duration": 10.2, "encodedFps": 60 }, "poster": { "url": "/video-library/media/neon-synthwave--claude-cloud/cover.webp", "sha256": "be5f4f430d1dbd01f1dd3dea137abd213b4718f8891c85f986e482d86eb26c62", "sourceMasterSha256": "d5e5b20ca08705fddabcb6b782ea6b71b21aa866e776bb80b1dd8439ad02fead", "timeSeconds": 8.67, "rationale": "Late story beat selected to show the developed subject and visual system; extracted from this exact master." }, "previewVideo": { "url": "/video-library/media/neon-synthwave--claude-cloud/preview.mp4", "sha256": "5bcd9e3058f2a7f4fd61ba5c30b86ca98c13fc22e08365ea5035485786cd7d97", "sourceMasterSha256": "d5e5b20ca08705fddabcb6b782ea6b71b21aa866e776bb80b1dd8439ad02fead", "width": 540, "height": 960, "label": "Playback preview · 540 px wide · full master in Download finished video" }, "gallery": [ { "id": "overview", "role": "encoded-contact-sheet", "label": "Scenes from the finished render · not a planning storyboard", "url": "/video-library/media/neon-synthwave--claude-cloud/overview.webp", "sourceMasterSha256": "d5e5b20ca08705fddabcb6b782ea6b71b21aa866e776bb80b1dd8439ad02fead" }, { "id": "scene-1", "role": "encoded-frame", "label": "Finished-film frame · 2.04 seconds", "url": "/video-library/media/neon-synthwave--claude-cloud/scene-1.webp", "sourceMasterSha256": "d5e5b20ca08705fddabcb6b782ea6b71b21aa866e776bb80b1dd8439ad02fead", "timeSeconds": 2.04 }, { "id": "scene-2", "role": "encoded-frame", "label": "Finished-film frame · 5.1 seconds", "url": "/video-library/media/neon-synthwave--claude-cloud/scene-2.webp", "sourceMasterSha256": "d5e5b20ca08705fddabcb6b782ea6b71b21aa866e776bb80b1dd8439ad02fead", "timeSeconds": 5.1 }, { "id": "scene-3", "role": "encoded-frame", "label": "Finished-film frame · 8.16 seconds", "url": "/video-library/media/neon-synthwave--claude-cloud/scene-3.webp", "sourceMasterSha256": "d5e5b20ca08705fddabcb6b782ea6b71b21aa866e776bb80b1dd8439ad02fead", "timeSeconds": 8.16 } ], "typography": [ "Bebas Neue 400", "Archivo Black 400", "Kaushan Script 400", "Space Mono 400" ], "palette": { "sky0": "#0b0221", "sky1": "#2a0845", "sky2": "#6a1b6e", "horizon": "#ff6a88", "grid": "#ff2bd6", "cyan": "#29f0ff", "mount": "#12052a", "sunTop": "#ffe259", "sunBot": "#ff2e88", "seed": "#ffb347", "stem": "#39ff14", "trail": "#ff2bd6", "white": "#ffffff" }, "usageGuidance": "Change the subject, copy and timing for your audience. Retain the selected example’s visual rules and recheck the entire reading interval after changes.", "styleRules": "---\nid: neon-synthwave\nname: Neon Synthwave (roots as light-cycle trails)\nfamily: retro digital\naliases: [synthwave, outrun, retrowave, vaporwave-adjacent, 80s neon, VHS]\ntags: [2d, neon, bloom, perspective-grid, chrome-type, vhs, retro, music-driven]\nkind: visual-style\nroute: canvas-2d (CPU canvas; half-res glow buffer bloom + per-pixel VHS pass)\nreadiness: { research: authored, rights: original-work, referenceImages: own-render, code: built, render: rendered-and-measured }\n---\n\n# Neon Synthwave (roots as light-cycle trails)\n\nAn 80s-retro night drive at the edge of a neon grid.\n- **Setting:** a striped sun rises behind wireframe mountains while the magenta grid powers on and scrolls to a stop. A glowing seed rests on the floor.\n- **① Water:** cyan neon rain falls; each drop sends a ripple ring across the floor and makes the seed pulse.\n- **② Root:** the root grows as three light-cycle trails, glowing ribbons that run along the grid lines toward the camera and turn at intersections.\n- **③ Shoot:** the camera tilts up as a neon stem climbs into the sun, and two leaves open as dark silhouettes edged in green.\n- **Ending:** a chrome \"FROM SEED\" slams in with a neon script \"to Seedling\" written underneath.\n- **Finish:** bloom, chromatic aberration, scanlines, grain and VHS tracking glitches on every cut.\n\n**The one rule:** *everything that matters is light.* The story elements are neon strokes (a colour tube with a white-hot core) that bloom; the world around them is dark and graphic.\n\n## Creative direction\n- **Audience:** music, gaming, nightlife and tech-culture audiences; social content with a retro hook.\n- **Purpose:** turn a gentle process into a high-energy, music-driven reveal.\n- **Feeling:** nostalgic, euphoric, cinematic, a little ironic.\n- **Central visual idea:** *roots as light-cycle trails.* Growth borrows the grammar of 80s computer worlds: the root obeys the grid like a light cycle, and the shoot is a laser climbing to the sun.\n- **How the parts work together:**\n - *Composition:* the classic synthwave horizon split (sky + sun above, grid below); the tilt-up hands the frame from ground to sky for the shoot beat.\n - *Colour:* magenta grid, cyan water and labels, orange seed, acid-green stem, a yellow → pink sun.\n - *Type:* a neon-sign condensed sans for beats; a chrome-gradient heavy sans plus a brush script for the logo.\n - *Motion:* the grid power-on, ripples, trails at constant speed, the tilt, a logo slam.\n - *Sound:* full synthwave production with SFX on every light event.\n\n## Fit\n- **Best for:** music releases, game/tech promos, event trailers, playful science, \"level up\" stories.\n- **Avoid when:** a calm, natural or scientific tone is required; brands averse to retro irony; long text.\n- **Cost:** medium. Per-frame bloom (two blurs of a half-res buffer) plus a per-pixel VHS pass, about 0.2 s/frame on 3 workers.\n\n## Visual fingerprint\n| Element | Rule |\n|---|---|\n| Projection | Floor point (X, Z) → `(540 + 900·X/Z, horizon + 900·(2 − Y)/Z)`. The seed sits at (0, 6). The horizon tilts 980 → 1380 over 5.6-6.6 s. |\n| Grid | Verticals X = −24…24 converge to the vanishing point; horizontals at Z = 0.8 + n scroll in during power-on (decelerating), then rest. Line widths 2.5 px (horizontals 5/Z + 0.8). Colour `#ff2bd6`; the floor glows magenta near the horizon. |\n| Sun | r 260, centre at horizon − 300, gradient `#ffe259 → #ff2e88`, seven cut stripes (y = cy + 30 + 34i + 1.2i², height 4 + 3.2i), pink halo. Rises from below over 0.2-1.2 s; the glow strengthens as the stem climbs. |\n| Mountains | Dark `#12052a` ridge with a cyan neon edge, in front of the sun's lower half. |\n| Neon stroke | Colour stroke w plus a white core 0.38w; drawn again on the half-res glow buffer. |\n| Bloom | Glow buffer → blur 10 px at 95 % + blur 28 px at 60 %, added with `lighter`. |\n| Trails | Light-cycle ribbons 0.22 units tall (magenta gradient fill + neon top edge + a white head while running), 4.2 floor units/s along grid-aligned paths (`TRAILS`). |\n| Seed / stem / leaves | Orange neon bean (74 × 50, a warm fill that pulses with each drop, swelling 4 % per drop). The stem has a 22 px dark core under a 10 px green neon tube. Leaves are dark silhouettes with green neon edges, so they read against the sun. |\n| VHS pass | Chromatic shift R −3 / B +3 px, scanlines every 3rd row at 22 %, 1600 grain pixels per frame, and four displaced bands (±40 px) decaying over 0.25 s at each cut (0, 1.2, 3.2, 5.6, 7.6 s). |\n| Palette | Sky `#0b0221 → #2a0845 → #6a1b6e → #ff6a88` · grid `#ff2bd6` · cyan `#29f0ff` · mountain `#12052a` · sun `#ffe259 / #ff2e88` · seed `#ffb347` · stem `#39ff14`. |\n\n### Typography (exact)\n| Role | Family / weight | Size | Treatment | Enter → settle |\n|---|---|---|---|---|\n| Beat signs | Bebas Neue 400 | 84 px, tracking 8 | white fill + cyan 6 px neon stroke + bloom; centred at y 300 | neon flicker-on (deterministic random on/off over 0.32 s); fade out 0.15 s before the next beat |\n| Logo \"FROM SEED\" | Archivo Black 400 | 150 px, tracking 4 | sheared −0.18 (italic lean); five-stop chrome gradient (sky `#bfe9ff` → white → horizon line `#3a1260` at 50 % → orange `#ff8a3d` → cream `#ffe7a8`); 10 px dark outer stroke + 2.5 px white inner stroke; faint blue sheen bloom; centred at y 330 | slam: scale 1.6 → 1 with easeOutBack(1.6) over 0.35 s, plus an impact flash and glitch |\n| Script \"to Seedling\" | Kaushan Script 400 | 140 px | rotated −0.12 rad; pink `#ff2bd6` 10 px neon stroke + `#ffd6f5` fill + bloom; centred at (580, 500) | written on by a left → right reveal over 0.5 s at 7.95 s |\n| Note | Space Mono 400 | 26 px, tracking 4 | cyan at 85 %; centred at y 1860 | fade 0.4 s |\n\n## Temporal fingerprint\n| Element | Rule |\n|---|---|\n| Grid | 100 BPM (0.6 s beats); cuts at 1.2, 3.2, 5.6 and 7.6 s, each marked by a VHS glitch. |\n| Power-on | Grid lines extend from the horizon (easeOutCubic 1.1 s) and scroll in with a quadratic slowdown; the sun rises; the seed pops (easeOutBack 2.5). |\n| Water | Drops at 1.6 / 2.2 / 2.8 s: ripple ellipses (projected circles) grow 0.3 → 2.7 units over 1.1 s; the seed pulses 0.5 s. |\n| Trails | Start at 3.4 / 3.75 / 4.2 s and run at constant speed (light cycles don't ease). |\n| Tilt | easeInOutCubic over 1 s, starting with the shoot beat. |\n| Logo | Slam at 7.6 s; script at 7.95 s; note at 8.6 s; hold to 10.2 s. |\n\n## How the composition develops\n| Time | Beat | Frame |\n|---|---|---|\n| 0-1.2 s | Power-on | Horizon at y 980: sky and sun above, grid below; the seed lands at (540, 1280). |\n| 1.2-3.2 s | ① Water wakes the seed | Neon rain; three ripples; the seed brightens. |\n| 3.2-5.6 s | ② A root reaches down | Three trails race toward the camera, turning on the grid. |\n| 5.6-7.6 s | ③ A shoot finds the light | The camera tilts up (horizon → 1380); the stem climbs into the sun; silhouette leaves open. |\n| 7.6-10.2 s | Logo | Chrome + script lockup above the sun; note; hold. |\n\n## Sound fingerprint\nSynthwave at 100 BPM in A minor (Am · F · C · G per bar):\n- **Synths:** a pulsing octave saw bass on 8ths (from step 1), a detuned saw pad, a 16th saw arpeggio (from step 2), and a glide saw lead for the shoot.\n- **Drums:** kick on 1 & 3, a gated \"big\" snare (clap + noise burst + reverb) on 2 & 4, 16th hats.\n- **SFX:**\n - a power-on sweep, and glitch bursts on every cut\n - a rain hiss with bell blips per drop\n - a pitch-drop saw \"zap\" at each trail start\n - a rising whoosh for the stem and sparkle bells for the leaves\n - a reverse noise swell into a kick-and-noise impact for the logo, then a glide for the script\n\nThe music bus has a dotted-8th ping-pong delay. Mix −15.0 LUFS, −1.3 dBTP.\n\n## Reusable prompt\n> Create a {10}-second {1080×1920} synthwave video about {subject}. Dark gradient sky with stars, a striped yellow-to-pink sun rising behind neon-edged wireframe mountains, and a magenta perspective grid that powers on and scrolls to a stop. Show the story as light: neon strokes (colour tube + white core) on a half-res glow buffer blurred twice and added back as bloom. {Growth/progress} = light-cycle trails running along the grid lines; {achievement} = a neon line climbing into the sun as the camera tilts up; silhouette shapes with neon edges against the sun. Beat labels are flickering neon signs (condensed sans); the end logo is chrome heavy italic sans + neon brush script. Finish with chromatic aberration, scanlines, grain and VHS tracking glitches on every cut. Score: synthwave (saw bass 8ths, pad, arps, gated snare) with an SFX for every light event.\n\n## Adaptation guidance\n| Change | Safe? | Notes |\n|---|---|---|\n| Subject | ✅ | Anything that can be drawn as light on a grid (data, vehicles, signals, plants). |\n| Palette | ✅ | Keep the dark sky + one hot sun + one grid colour + one or two story neons. |\n| Logo | ✅ | Any heavy sans with chrome + any brush script; keep the shear and the slam. |\n| Trails | ✅ | Paths must follow grid lines (that's the joke and the beauty). |\n| 16:9 | ✅ classic | Wider horizon; the sun can sit lower. |\n| VHS intensity | ⚠️ | Glitches only on cuts; constant glitching hurts legibility. |\n| **Essential** | , | Dark world + neon light with bloom, the horizon split, the striped sun, grid logic, chrome/script typography, a music-driven edit. |\n\n## Accessibility\nGlitches are short (0.25 s) and limited to five cuts; there is no full-frame strobing. Beat signs are white-core neon on a dark sky (very high contrast). Chromatic shift is small (3 px). Consider a no-VHS variant for photosensitive audiences (`vhs()` off).\n\n## Provenance\nOriginal style authored for this library (2026-10-07); no Animate seed. Synthwave visual conventions are a public genre vocabulary; nothing was copied. Fonts: Archivo Black, Kaushan Script, Bebas Neue and Space Mono (SIL OFL) via Fontsource. All graphics and audio are procedural.", "review": { "technical": { "state": "Supplied checks passed", "scope": "Source handoff records complete decode, stream dimensions and audio measurements. Browser playback is checked separately.", "artifactSha256": "d5e5b20ca08705fddabcb6b782ea6b71b21aa866e776bb80b1dd8439ad02fead" }, "creative": { "state": "Not independently accepted", "scope": "not independently established", "artifactSha256": "d5e5b20ca08705fddabcb6b782ea6b71b21aa866e776bb80b1dd8439ad02fead" }, "listening": { "state": "Not verified", "scope": "No perceptual listening pass is established by this library import.", "artifactSha256": "d5e5b20ca08705fddabcb6b782ea6b71b21aa866e776bb80b1dd8439ad02fead" }, "reproduction": { "state": "Not tested", "scope": "Source is supplied. Cross-machine cold-start reproduction has not been established.", "artifactSha256": "d5e5b20ca08705fddabcb6b782ea6b71b21aa866e776bb80b1dd8439ad02fead" } }, "detailUrl": "https://library.jkylehobson.chatgpt.site/video-library/#family=neon-synthwave&example=claude-cloud", "processUrl": "/video-library/process.html?family=neon-synthwave&example=claude-cloud", "downloads": { "prompt": { "available": true, "url": "/video-library/prompts/neon-synthwave--claude-cloud.txt", "sha256": "90b5bf1d0ec83fd166c7af937614ca6f2b93992526cb0af2c6e348395c667b9b", "bytes": 1921, "label": "Reusable, example-specific instructions" }, "video": { "name": "neon-synthwave--claude-cloud.mp4", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/neon-synthwave--claude-cloud.mp4", "bytes": 9213008, "sha256": "d5e5b20ca08705fddabcb6b782ea6b71b21aa866e776bb80b1dd8439ad02fead", "available": true, "label": "8.8 MB" }, "source": { "name": "neon-synthwave--claude-cloud--source.zip", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/neon-synthwave--claude-cloud--source.zip", "bytes": 13515321, "sha256": "7025da5d049a22b41d8d01968862ac498d2d1c93fee83a7a94d80ddf980df2c1", "available": true, "label": "12.9 MB", "contents": [ "editable source", "variant guidance", "source assets", "audio inputs", "dependency declarations", "file manifest" ], "includedFiles": 59, "includedFilePaths": [ "CASE_STUDY.md", "RUN.md", "SKILL.md", "STYLE.md", "assets/components/logo-lockup.png", "assets/components/neon-seedling.png", "assets/components/striped-sun.png", "assets/layers/t2.60/01_backdrop.png", "assets/layers/t2.60/02_grid.png", "assets/layers/t2.60/03_story.png", "assets/layers/t2.60/04_type.png", "assets/layers/t4.60/01_backdrop.png", "assets/layers/t4.60/02_grid.png", "assets/layers/t4.60/03_story.png", "assets/layers/t4.60/04_type.png", "assets/layers/t9.90/01_backdrop.png", "assets/layers/t9.90/02_grid.png", "assets/layers/t9.90/03_story.png", "assets/layers/t9.90/04_type.png", "assets/paths/trail0.json", "assets/paths/trail0.svg", "assets/paths/trail1.json", "assets/paths/trail1.svg", "assets/paths/trail2.json", "assets/paths/trail2.svg", "audio/cues.json", "audio/mix.flac", "audio/stems/drums.flac", "audio/stems/music.flac", "audio/stems/sfx.flac", "engine/audio.mjs", "engine/audio/dsp.js", "engine/audio/instruments.js", "engine/audio/sfx.js", "engine/browser.mjs", "engine/export.mjs", "engine/finish.mjs", "engine/lib/draw.js", "engine/lib/util.js", "engine/page.html", "engine/render.mjs", "engine/runtime.js", "engine/server.mjs", "film/contact_sheet.jpg", "film/spectrogram.png", "film/stills/01_1.00s.jpg", "film/stills/02_2.60s.jpg", "film/stills/03_4.60s.jpg", "film/stills/04_6.80s.jpg", "film/stills/05_8.40s.jpg", "film/stills/06_9.90s.jpg", "overview/encoded-contact-sheet.jpg", "package.json", "qa.json", "spec.json", "styles/neon-synthwave/scene.js", "styles/neon-synthwave/score.js", "styles/neon-synthwave/timeline.js", "BUNDLE-GUIDE.md" ], "externalPrerequisites": { "runtime": [ "Node.js", "Chromium or Chrome", "FFmpeg and ffprobe" ], "packageDependencies": { "@fontsource/anton": "^5.1.0", "@fontsource/archivo-black": "^5.1.0", "@fontsource/bangers": "^5.1.0", "@fontsource/bebas-neue": "^5.1.0", "@fontsource/caveat": "^5.1.0", "@fontsource/dm-sans": "^5.1.0", "@fontsource/dm-serif-display": "^5.1.0", "@fontsource/fraunces": "^5.1.0", "@fontsource/ibm-plex-mono": "^5.1.0", "@fontsource/instrument-serif": "^5.1.0", "@fontsource/inter": "^5.1.0", "@fontsource/jetbrains-mono": "^5.1.0", "@fontsource/jost": "^5.3.0", "@fontsource/kaushan-script": "^5.3.0", "@fontsource/nunito": "^5.1.0", "@fontsource/permanent-marker": "^5.1.0", "@fontsource/playfair-display": "^5.1.0", "@fontsource/press-start-2p": "^5.1.0", "@fontsource/space-grotesk": "^5.1.0", "@fontsource/space-mono": "^5.1.0", "@fontsource/syne": "^5.1.0", "@fontsource/vt323": "^5.1.0", "three": "0.170.0", "playwright": "1.56.1" }, "lockfileIncluded": false, "coldStart": false }, "license": { "summary": "User-directed publication of supplied authored source; preserve listed third-party notices; no new license granted here.", "includedNoticePaths": [], "newLicenseGranted": false } }, "bundle": { "name": "neon-synthwave--claude-cloud--full.zip", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/neon-synthwave--claude-cloud--full.zip", "bytes": 22778551, "sha256": "c0ca7c634f1c54c4515e2e6041d60f8acaa9854aad8ee7f94b8a694575055717", "available": true, "label": "21.7 MB", "contents": [ "selected master", "editable source", "variant guidance", "source assets", "audio inputs", "dependency declarations", "file manifest", "designed cover", "starter prompt" ], "includedFiles": 62, "includedFilePaths": [ "CASE_STUDY.md", "RUN.md", "SKILL.md", "STYLE.md", "assets/components/logo-lockup.png", "assets/components/neon-seedling.png", "assets/components/striped-sun.png", "assets/layers/t2.60/01_backdrop.png", "assets/layers/t2.60/02_grid.png", "assets/layers/t2.60/03_story.png", "assets/layers/t2.60/04_type.png", "assets/layers/t4.60/01_backdrop.png", "assets/layers/t4.60/02_grid.png", "assets/layers/t4.60/03_story.png", "assets/layers/t4.60/04_type.png", "assets/layers/t9.90/01_backdrop.png", "assets/layers/t9.90/02_grid.png", "assets/layers/t9.90/03_story.png", "assets/layers/t9.90/04_type.png", "assets/paths/trail0.json", "assets/paths/trail0.svg", "assets/paths/trail1.json", "assets/paths/trail1.svg", "assets/paths/trail2.json", "assets/paths/trail2.svg", "audio/cues.json", "audio/mix.flac", "audio/stems/drums.flac", "audio/stems/music.flac", "audio/stems/sfx.flac", "display/cover.webp", "engine/audio.mjs", "engine/audio/dsp.js", "engine/audio/instruments.js", "engine/audio/sfx.js", "engine/browser.mjs", "engine/export.mjs", "engine/finish.mjs", "engine/lib/draw.js", "engine/lib/util.js", "engine/page.html", "engine/render.mjs", "engine/runtime.js", "engine/server.mjs", "film/contact_sheet.jpg", "film/neon-synthwave.mp4", "film/spectrogram.png", "film/stills/01_1.00s.jpg", "film/stills/02_2.60s.jpg", "film/stills/03_4.60s.jpg", "film/stills/04_6.80s.jpg", "film/stills/05_8.40s.jpg", "film/stills/06_9.90s.jpg", "overview/encoded-contact-sheet.jpg", "package.json", "qa.json", "spec.json", "starter-prompt.txt", "styles/neon-synthwave/scene.js", "styles/neon-synthwave/score.js", "styles/neon-synthwave/timeline.js", "BUNDLE-GUIDE.md" ], "externalPrerequisites": { "runtime": [ "Node.js", "Chromium or Chrome", "FFmpeg and ffprobe" ], "packageDependencies": { "@fontsource/anton": "^5.1.0", "@fontsource/archivo-black": "^5.1.0", "@fontsource/bangers": "^5.1.0", "@fontsource/bebas-neue": "^5.1.0", "@fontsource/caveat": "^5.1.0", "@fontsource/dm-sans": "^5.1.0", "@fontsource/dm-serif-display": "^5.1.0", "@fontsource/fraunces": "^5.1.0", "@fontsource/ibm-plex-mono": "^5.1.0", "@fontsource/instrument-serif": "^5.1.0", "@fontsource/inter": "^5.1.0", "@fontsource/jetbrains-mono": "^5.1.0", "@fontsource/jost": "^5.3.0", "@fontsource/kaushan-script": "^5.3.0", "@fontsource/nunito": "^5.1.0", "@fontsource/permanent-marker": "^5.1.0", "@fontsource/playfair-display": "^5.1.0", "@fontsource/press-start-2p": "^5.1.0", "@fontsource/space-grotesk": "^5.1.0", "@fontsource/space-mono": "^5.1.0", "@fontsource/syne": "^5.1.0", "@fontsource/vt323": "^5.1.0", "three": "0.170.0", "playwright": "1.56.1" }, "lockfileIncluded": false, "coldStart": false }, "license": { "summary": "User-directed publication of supplied authored source; preserve listed third-party notices; no new license granted here.", "includedNoticePaths": [], "newLicenseGranted": false } } }, "cadenceNote": "Encoded fps describes the file. Scene evaluation and held actor poses depend on this source recipe.", "starterPrompt": "Create a {10}-second {1080×1920} synthwave video about {subject}. Dark gradient sky with stars, a striped yellow-to-pink sun rising behind neon-edged wireframe mountains, and a magenta perspective grid that powers on and scrolls to a stop. Show the story as light: neon strokes (colour tube + white core) on a half-res glow buffer blurred twice and added back as bloom. {Growth/progress} = light-cycle trails running along the grid lines; {achievement} = a neon line climbing into the sun as the camera tilts up; silhouette shapes with neon edges against the sun. Beat labels are flickering neon signs (condensed sans); the end logo is chrome heavy italic sans + neon brush script. Finish with chromatic aberration, scanlines, grain and VHS tracking glitches on every cut. Score: synthwave (saw bass 8ths, pad, arps, gated snare) with an SFX for every light event.\n\nSelected example: Seed to Seedling\nFamily: neon-synthwave\nVariant: claude-cloud\nTypography: Bebas Neue 400, Archivo Black 400, Kaushan Script 400, Space Mono 400\nProduction: canvas-2d\nExact reference master SHA-256: d5e5b20ca08705fddabcb6b782ea6b71b21aa866e776bb80b1dd8439ad02fead\n\nRead the selected STYLE.md, SKILL.md and reproduction instructions before adapting. Keep the declared renderer and source closure; do not assume another family variant has interchangeable parameters. Preserve exact font or custom glyph sources, color roles, spatial continuity and readable text. Record encoded frame rate, scene evaluation and held poses separately. Review the changed render visually and listen to the encoded audio before claiming those checks passed. Existing approval applies only to its recorded artifact.\n\nSuccess check: the adapted story is clear; key type remains readable in motion; the source rebuilds with its declared inputs; all media and review records identify the exact output. State any untested reproduction, listening or rights limits.", "downloadNote": "Downloads match this selected example. The full bundle includes its source, original video, cover and starter prompt. Source packages include artwork, audio inputs and dependency declarations. Requires Node.js, Chromium or Chrome, FFmpeg and ffprobe. Follow the included run guide for package installation and reproduction limits.", "model": "Opus 5.5", "reasoningEffort": "Extra" } ], "relatedMethodIds": [] }, { "id": "origami-fold", "slug": "origami-fold", "title": "Origami Fold", "premise": "A paper subject folds into existence with numbered steps, guide marks and readable changes in depth.", "summary": "A paper subject folds into existence with numbered steps, guide marks and readable changes in depth.", "category": "Paper craft / instructional", "defaultExampleId": "claude-cloud", "facets": { "material": [ "3d", "three.js", "paper", "two-sided", "folds", "pleats", "diagram-overlay", "steps", "tactile", "calm" ], "producer": [ "Claude Cloud" ], "format": [ "Portrait" ], "motion": [], "useCase": [] }, "examples": [ { "id": "claude-cloud", "title": "Seed to Seedling", "producer": "Claude Cloud", "producerEvidence": "The displayed model and reasoning label identify this production lane. Exact runtime model ID and per-film cost are not established by the source packet.", "relationship": "Original family example", "format": "Portrait", "productionMethod": "three.js", "master": { "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/origami-fold--claude-cloud.mp4", "sha256": "4db37abe6cd9e7d33242bc0c2631bfc1536e6438838ada98a15a42b04c800b50", "bytes": 11212517, "mimeType": "video/mp4", "width": 1080, "height": 1920, "duration": 11.2, "encodedFps": 60 }, "poster": { "url": "/video-library/media/origami-fold--claude-cloud/cover.webp", "sha256": "2516d2feb9e1ed646bdf9477a895472cb4f0aeb2596d3384460797ae88884441", "sourceMasterSha256": "4db37abe6cd9e7d33242bc0c2631bfc1536e6438838ada98a15a42b04c800b50", "timeSeconds": 9.52, "rationale": "Late story beat selected to show the developed subject and visual system; extracted from this exact master." }, "previewVideo": { "url": "/video-library/media/origami-fold--claude-cloud/preview.mp4", "sha256": "75f357783b3f6f0f645369cd79d44f710c50f4a96ac0026f877310e69a57bde3", "sourceMasterSha256": "4db37abe6cd9e7d33242bc0c2631bfc1536e6438838ada98a15a42b04c800b50", "width": 540, "height": 960, "label": "Playback preview · 540 px wide · full master in Download finished video" }, "gallery": [ { "id": "overview", "role": "encoded-contact-sheet", "label": "Scenes from the finished render · not a planning storyboard", "url": "/video-library/media/origami-fold--claude-cloud/overview.webp", "sourceMasterSha256": "4db37abe6cd9e7d33242bc0c2631bfc1536e6438838ada98a15a42b04c800b50" }, { "id": "scene-1", "role": "encoded-frame", "label": "Finished-film frame · 2.24 seconds", "url": "/video-library/media/origami-fold--claude-cloud/scene-1.webp", "sourceMasterSha256": "4db37abe6cd9e7d33242bc0c2631bfc1536e6438838ada98a15a42b04c800b50", "timeSeconds": 2.24 }, { "id": "scene-2", "role": "encoded-frame", "label": "Finished-film frame · 5.6 seconds", "url": "/video-library/media/origami-fold--claude-cloud/scene-2.webp", "sourceMasterSha256": "4db37abe6cd9e7d33242bc0c2631bfc1536e6438838ada98a15a42b04c800b50", "timeSeconds": 5.6 }, { "id": "scene-3", "role": "encoded-frame", "label": "Finished-film frame · 8.96 seconds", "url": "/video-library/media/origami-fold--claude-cloud/scene-3.webp", "sourceMasterSha256": "4db37abe6cd9e7d33242bc0c2631bfc1536e6438838ada98a15a42b04c800b50", "timeSeconds": 8.96 } ], "typography": [ "DM Sans 800", "DM Sans 600", "Fraunces 600", "DM Sans 400" ], "palette": { "table": "#e9e2d4", "white": "#fbfaf6", "kraft": "#c8955a", "water": "#4f9fe0", "waterBack": "#cfe6fa", "root": "#efe2c4", "rootBack": "#f8f1e2", "green": "#5fb34f", "greenBack": "#e4f2da", "soil": "#7a5236", "soilBack": "#a87a52", "stem": "#57a948", "sun": "#f2b632", "sunBack": "#fbe7b0", "sunCore": "#ee9a2a", "banner": "#fbf3e2", "ink": "#2b2622", "accent": "#e0592a", "edge": "#8a7b66" }, "usageGuidance": "Change the subject, copy and timing for your audience. Retain the selected example’s visual rules and recheck the entire reading interval after changes.", "styleRules": "---\nid: origami-fold\nname: Origami Fold (Seed to Seedling: a paper plant, folded step by step)\nfamily: paper craft / instructional\naliases: [origami, paper folding, folded paper, pleat animation, instruction diagram, paper craft 3d]\ntags: [3d, three.js, paper, two-sided, folds, pleats, diagram-overlay, steps, tactile, calm]\nkind: visual-style\nroute: three.js (two-sided paper meshes + a fold engine) + Canvas 2D diagram overlay\nreadiness: { research: catalog-candidate, rights: original-work, referenceImages: own-render, code: built, render: rendered-and-measured }\n---\n\n# Origami Fold (Seed to Seedling: a paper plant, folded step by step)\n\nA paper plant is folded into existence on a warm paper table, seen from above at a tilt, like a good origami instruction sheet come to life. Before each fold, the diagram draws itself on top: a numbered step, a dashed valley-fold line and a red curved arrow showing which flap moves. Then the paper obeys.\n- **1 Fold the seed:** a square sheet, white side up, folds in half into a kraft triangle; both corners fold up to the apex, making a kraft diamond seed.\n- **2 Add water:** blue V-folded drops fall, flatten and slide into the seed, which swells and lets its flaps open slightly.\n- **3 Pull the root down:** a cream accordion pleat unfolds out of the seed onto a torn sheet of dark soil paper, and two smaller pleats branch off it as rootlets.\n- **4 Open the leaves:** a green pleat rises from the top corner. Two leaves pop out folded, pale side up, then open along their midribs to green, while an eight-petal sun rosette opens petal by petal.\n- **Ending:** a six-panel banner unfolds left to right, revealing the printed title *From seed / to seedling*.\n\n**The one rule:** *only real folds.* Every change of shape is a rigid flap rotating about a straight crease, or a pleat opening. Paper never bends, stretches or morphs, and it is always two-sided: colour on one side, white or pale on the other.\n\n## Creative direction\n- **Audience:** education and how-to content, craft and family brands, museums, design-literate audiences, onboarding sequences.\n- **Purpose:** explain a process as a sequence of simple, nameable steps. The instruction-sheet grammar makes each step feel doable.\n- **Feeling:** calm, careful, tactile, quietly delightful.\n- **Central visual idea:** *growth as folding.* Each stage of germination is something you could fold: the seed is a folded square, the root a pull-out pleat, the leaves a valley fold opening.\n- **How the parts work together:**\n - *Composition:* a vertical flat-lay. Sky and table at the top, the soil sheet as a horizon band, the title banner at the bottom.\n - *Colour:* kraft, cream, green, blue and yellow papers on a warm table, with one red accent for arrows.\n - *Type:* the instruction voice is a neat grotesk (DM Sans) with step badges; the title is a warm serif (Fraunces) printed on paper.\n - *Motion:* eased folds, each led by its diagram.\n - *Sound:* plucked harp and felt piano, with crisp paper foley.\n\n## Fit\n- **Best for:** step-by-step explainers (setup guides, recipes, processes), learning content, packaging and unboxing stories, sustainability and paper-based brands, calm social loops.\n- **Avoid when:** you need speed, many simultaneous elements, organic or curved forms, or data precision.\n- **Cost:** 672 frames in software WebGL with soft shadows, a few minutes with 3 workers.\n\n## Visual fingerprint\n| Element | Rule |\n|---|---|\n| Paper | Two meshes per piece sharing one geometry: `FrontSide` = top colour, `BackSide` = bottom colour. MeshStandardMaterial with roughness 0.88, `flatShading` and a fibre texture map (`textures/paper-fiber.png`); edges drawn as 30 % lines in `#8a7b66`. |\n| Palette | Table `#e9e2d4`; seed sheet white `#fbfaf6`/kraft `#c8955a`; water `#4f9fe0`/`#cfe6fa`; root `#efe2c4`/`#f8f1e2`; soil paper `#7a5236`; leaves `#5fb34f`/`#e4f2da`; stem `#57a948`; sun `#f2b632`/`#fbe7b0`, core `#ee9a2a`; banner `#fbf3e2`; ink `#2b2622`; accent `#e0592a`. |\n| Fold engine | A piece's matrix is the product of its folds in order. Each fold rotates about a world-space crease axis, defined in the configuration left by earlier folds, then lifts the moved layers (0.02-0.05) so stacks never z-fight. The sign is solved so every fold is a valley fold (the flap lifts up). Layering comes out right automatically: the bottom layer of a flipped stack lands on top. |\n| The seed | Square of half-diagonal 3.25 as a diamond. Fold 1 is along the horizontal diagonal (bottom half over the top). Folds 2a/2b run from the base midpoint to the edge midpoints, bringing both corners to the apex. The result is a kraft diamond 3.25 across. |\n| Pleats | Panel *i* pitches by (−1)^i·φ. φ eases from about 85° (compressed: a standing zigzag) to 8-12° (nearly flat) with easeOutCubic; each pleat scales in over 0.2-0.25 s. Root: 7 panels × 0.72, width 1.0 → 0.4. Rootlets: 5 × 0.45 from joints 3 and 5 at ±55°. Stem: 6 × 0.75. Banner: 6 × 1.75 in the x-y plane. |\n| Leaves / sun | Leaves are two triangles on a 3-unit midrib, closed at π − 0.08 (pale side up), opening to a 0.35 rad valley and fanning to ±42°. The sun is an octagon core plus 8 triangle petals hinged on their base edges, opening 0.08 s apart, then turning slowly. |\n| Soil | A torn sheet of dark paper (a deckled top edge, ±0.11 jitter every 0.35 units) under the seed line; the root lies on it. |\n| Light | Key directional from upper left-back (−9, 22, −6), warm `#fff6ea` at 2.2, PCF soft shadows (2048); white/beige hemisphere fill; Neutral tone mapping. Shadows fall down-right on screen. |\n\n### Diagram language (2D overlay)\n| Mark | Rule |\n|---|---|\n| Step badge | Circle r 32, 3.5 px ink stroke, paper fill, number in DM Sans 800 34 px at (104, 206) |\n| Valley fold | Dashed ink line, 3.5 px, dash 16 / gap 11, drawn on along the crease (projected from 3D) |\n| Mountain fold | Dash-dot 22/8/4/8 (in the legend component; every fold here is a valley fold) |\n| Fold arrow | Accent `#e0592a`, 5 px quadratic curve through a point lifted above the crease (and offset sideways so it reads as an arc), 22 px head; drawn on progressively |\n| Timing | Creases draw on about 0.3 s before the fold starts and fade as it completes; the pull arrow leads the root by 0.15 s. |\n\n### Typography (exact)\n| Role | Family / weight | Size | Placement | Enter / exit |\n|---|---|---|---|---|\n| Step instruction | DM Sans 600 | 48 px | Ink, at (156, 223), beside the badge | Fade + 20 px rise, easeOutCubic 0.3 s; fade 0.25 s |\n| Step number | DM Sans 800 | 34 px | Centred in the badge | With the instruction |\n| Title (printed) | Fraunces 600 | 250 px on a 3072 × 760 banner texture | Two lines at 44 % and 82 % of the height, centred, with a red dot after line 2; on screen about 85-95 px tall | Revealed as the banner's panels flatten |\n| Note | DM Sans 400 | 28 px, tracking 3 | Ink 70 %, centred at y 1892 | Fades in 0.4 s |\n\n## Temporal fingerprint\n| Element | Rule |\n|---|---|\n| Folds | easeInOutCubic over 0.4-0.5 s; fold 2b starts 0.2 s after 2a (overlapping). |\n| Camera | Position (tx, d·cos tilt, tz + d·sin tilt) looking at (tx, 0, tz), FOV 34; smootherstep keys (`CAM`). Start wide on the sheet (d 21), push in on the folded seed (d 16), follow the root (d 23), then the stem/leaves/sun (d 25), and pull back for the banner (d 38). |\n| Drops | Fall from y 7 in 0.35 s (gravity), flatten in 0.15 s, slide into the seed and shrink over 0.55 s; the seed swells 10 % and its flaps relax 0.5 rad. |\n| Beats (90 BPM) | Step 1 0.2 s (crease 0.25, fold 0.55-1.05, corners 1.25-1.85) · step 2 2.1 (drops 2.3 / 2.65 / 3.0) · step 3 3.75 (root 3.9-5.6, rootlets 4.6 / 4.9) · step 4 6.0 (stem 6.1-7.0, leaves 6.85 → open 7.15-7.65, sun 7.2-8.0) · banner 8.8-9.9 · note 10.1 · end 11.2. |\n\n## How the composition develops\nLike turning the pages of a diagram. A blank sheet, close and centred, becomes a seed. The camera follows the paper downward as the root pleat pulls out onto the soil sheet, then upward as the stem and leaves rise toward the opening sun. The final pull-back shows the whole plant as one vertical flat-lay, sun and leaves above, root below the soil line, with the title banner unfolding across the bottom.\n\n## Individual assets\nAll paper, textures and geometry are generated in `scene.js`.\n\n| Asset | File | Source |\n|---|---|---|\n| Paper fibre texture | `assets/textures/paper-fiber.png` | `fiberTex()` |\n| Banner print (title artwork, flat) | `assets/textures/banner-title.png` | `bannerCanvas()` |\n| Folded seed / root pleat / leaf pair / sun rosette (transparent renders) | `assets/components/seed-folded.png`, `root-pleat.png`, `leaf-pair.png`, `sun-rosette.png` | fold engine, `accordion()`, `leaf()`, `rosette()` |\n| Diagram key (legend of the overlay language) | `assets/components/diagram-key.png` | `drawComponent('diagram-key')` |\n| Layers | `assets/layers/static/01_table.png` (final framing); per time `02_paper`, `03_diagram`, `04_labels` at 1.6, 5.2, 7.6 and 11.0 s | `drawLayer()` |\n\n**Recreating in a DCC or physically:** every piece is a polygon in flat-sheet coordinates (`spec.json → foldEngine`), and every fold is a crease axis plus an angle curve. You can rebuild it in Blender with hinge empties, or fold it for real and film it with the same steps.\n\n## Sound\n**Score:** 90 BPM in D major. D · Bm · G · A, one chord per bar. A harp-like plucked 8th pattern on the D-major pentatonic (Karplus-Strong), a felt-piano chord per bar and a light pad. There are no drums: the paper foley is the rhythm.\n\n**Foley:**\n| Event | Sound |\n|---|---|\n| Fold | swish (band noise rising 0.9 → 3.2 kHz), then a crease snap (click + rustle) as it lands |\n| Drops | paper tap + droplet |\n| Pleats | one dry tick per panel as it opens, bunched early like the easeOutCubic motion (root 7, rootlets 5 + 5, stem 6, banner 6) |\n| Leaves | two swishes + bells |\n| Sun | 8 plucks rising on the pentatonic, one per petal |\n| Steps | a small chime each |\n| Ending | D-major chord |\n\n**Stems:** `music` and `foley`, with cues in `audio/cues.json`. The mix targets −16 LUFS.\n\n## Reusable prompt\n> Create a {11}-second {1080×1920} origami animation explaining {process} in {4} numbered steps. Two-sided paper (colour one side, white the other) on a warm paper table, filmed from above at a ~28° tilt with soft directional shadows. Every change is a real fold: rigid flaps rotating about straight creases (valley folds) or accordion pleats opening; leaves open along midribs; a rosette opens petal by petal. Before each fold, an origami-diagram overlay draws on: a step badge + short instruction (geometric grotesk), a dashed valley-fold line on the crease, and a red curved arrow showing the moving flap. End with a pleated banner unfolding to reveal the title printed in a warm serif. Sound: plucked harp + felt piano, no drums; paper foley (swish + crease snap per fold, one tick per pleat panel).\n\n## Adaptation guidance\n| Change | Safe? | Notes |\n|---|---|---|\n| Steps / subject | ✅ | Design each step as a fold you could actually make; 3-5 steps; one instruction line each. |\n| Paper colours | ✅ | Keep one colour per element and white backs; an accent only for arrows. |\n| New pieces | ✅ | Define polygons in sheet coordinates, list their folds in order, and let `solveSigns()` pick valley directions. |\n| Mountain folds | ✅ | Flip a fold's sign and draw the dash-dot line. |\n| Morphing, bending, squash & stretch | ❌ | They break the paper physics. |\n| Dark table | ⚠️ | Works with a black table and white diagram lines; re-check arrow contrast. |\n| 16:9 | ✅ | Lay the flat-lay out horizontally (steps left to right) with the banner at the right. |\n| **Essential** | , | Two-sided rigid paper, real folds and pleats, diagram-first timing, numbered steps, paper foley. |\n\n## Accessibility\n- **Contrast:** ink `#2b2622` on the table `#e9e2d4` is about 11.6:1 for the instructions. The accent arrows are 2.9:1 on the table: below the 3:1 graphics guideline, so they are drawn thick (5 px) with arrowheads, always paired with the dashed ink crease, and never carry meaning alone.\n- **Motion:** slow and predictable, with no flashes.\n- **Reading:** each step's instruction stays on screen for 1.7-2.3 s.\n\n## Provenance\n- **Source:** from the library's style catalogue. No Animate seed was used.\n- **Originality:** the fold engine, pieces, timing and audio are original (2026-10-08).\n- **Diagram conventions:** the dashed valley fold, dash-dot mountain fold and curved fold arrows follow the widely shared Yoshizawa-Randlett notation (named here as a convention, not copied artwork). Origami is a Japanese paper art.\n- **Fonts:** DM Sans and Fraunces (SIL OFL).\n- **Libraries:** three.js (MIT).", "review": { "technical": { "state": "Supplied checks passed", "scope": "Source handoff records complete decode, stream dimensions and audio measurements. Browser playback is checked separately.", "artifactSha256": "4db37abe6cd9e7d33242bc0c2631bfc1536e6438838ada98a15a42b04c800b50" }, "creative": { "state": "Not independently accepted", "scope": "not independently established", "artifactSha256": "4db37abe6cd9e7d33242bc0c2631bfc1536e6438838ada98a15a42b04c800b50" }, "listening": { "state": "Not verified", "scope": "No perceptual listening pass is established by this library import.", "artifactSha256": "4db37abe6cd9e7d33242bc0c2631bfc1536e6438838ada98a15a42b04c800b50" }, "reproduction": { "state": "Not tested", "scope": "Source is supplied. Cross-machine cold-start reproduction has not been established.", "artifactSha256": "4db37abe6cd9e7d33242bc0c2631bfc1536e6438838ada98a15a42b04c800b50" } }, "detailUrl": "https://library.jkylehobson.chatgpt.site/video-library/#family=origami-fold&example=claude-cloud", "processUrl": "/video-library/process.html?family=origami-fold&example=claude-cloud", "downloads": { "prompt": { "available": true, "url": "/video-library/prompts/origami-fold--claude-cloud.txt", "sha256": "28569ef90403d46bd1067e09eaaf9b120f13e1afac45332c78b223b62085728c", "bytes": 1838, "label": "Reusable, example-specific instructions" }, "video": { "name": "origami-fold--claude-cloud.mp4", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/origami-fold--claude-cloud.mp4", "bytes": 11212517, "sha256": "4db37abe6cd9e7d33242bc0c2631bfc1536e6438838ada98a15a42b04c800b50", "available": true, "label": "10.7 MB" }, "source": { "name": "origami-fold--claude-cloud--source.zip", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/origami-fold--claude-cloud--source.zip", "bytes": 18729220, "sha256": "333bdefb0bdf08023e5462ab9f30cd708de3b159f35271e56953d9976502fe8b", "available": true, "label": "17.9 MB", "contents": [ "editable source", "variant guidance", "source assets", "audio inputs", "dependency declarations", "file manifest" ], "includedFiles": 57, "includedFilePaths": [ "CASE_STUDY.md", "RUN.md", "SKILL.md", "STYLE.md", "assets/components/diagram-key.png", "assets/components/leaf-pair.png", "assets/components/root-pleat.png", "assets/components/seed-folded.png", "assets/components/sun-rosette.png", "assets/layers/static/01_table.png", "assets/layers/t1.60/02_paper.png", "assets/layers/t1.60/03_diagram.png", "assets/layers/t1.60/04_labels.png", "assets/layers/t11.00/02_paper.png", "assets/layers/t11.00/03_diagram.png", "assets/layers/t11.00/04_labels.png", "assets/layers/t5.20/02_paper.png", "assets/layers/t5.20/03_diagram.png", "assets/layers/t5.20/04_labels.png", "assets/layers/t7.60/02_paper.png", "assets/layers/t7.60/03_diagram.png", "assets/layers/t7.60/04_labels.png", "assets/textures/banner-title.png", "assets/textures/paper-fiber.png", "audio/cues.json", "audio/mix.flac", "audio/stems/foley.flac", "audio/stems/music.flac", "engine/audio.mjs", "engine/audio/dsp.js", "engine/audio/instruments.js", "engine/audio/sfx.js", "engine/browser.mjs", "engine/export.mjs", "engine/finish.mjs", "engine/lib/draw.js", "engine/lib/util.js", "engine/page.html", "engine/render.mjs", "engine/runtime.js", "engine/server.mjs", "film/contact_sheet.jpg", "film/spectrogram.png", "film/stills/01_0.50s.jpg", "film/stills/02_1.60s.jpg", "film/stills/03_3.00s.jpg", "film/stills/04_5.20s.jpg", "film/stills/05_7.60s.jpg", "film/stills/06_11.00s.jpg", "overview/encoded-contact-sheet.jpg", "package.json", "qa.json", "spec.json", "styles/origami-fold/scene.js", "styles/origami-fold/score.js", "styles/origami-fold/timeline.js", "BUNDLE-GUIDE.md" ], "externalPrerequisites": { "runtime": [ "Node.js", "Chromium or Chrome", "FFmpeg and ffprobe" ], "packageDependencies": { "@fontsource/anton": "^5.1.0", "@fontsource/archivo-black": "^5.1.0", "@fontsource/bangers": "^5.1.0", "@fontsource/bebas-neue": "^5.1.0", "@fontsource/caveat": "^5.1.0", "@fontsource/comic-neue": "^5.3.0", "@fontsource/courier-prime": "^5.3.0", "@fontsource/dm-sans": "^5.1.0", "@fontsource/dm-serif-display": "^5.1.0", "@fontsource/fraunces": "^5.1.0", "@fontsource/ibm-plex-mono": "^5.1.0", "@fontsource/instrument-serif": "^5.1.0", "@fontsource/inter": "^5.1.0", "@fontsource/jetbrains-mono": "^5.1.0", "@fontsource/jost": "^5.3.0", "@fontsource/kaushan-script": "^5.3.0", "@fontsource/nunito": "^5.1.0", "@fontsource/permanent-marker": "^5.1.0", "@fontsource/playfair-display": "^5.1.0", "@fontsource/press-start-2p": "^5.1.0", "@fontsource/space-grotesk": "^5.1.0", "@fontsource/space-mono": "^5.1.0", "@fontsource/stix-two-text": "^5.3.0", "@fontsource/syne": "^5.1.0", "@fontsource/vt323": "^5.1.0", "three": "0.170.0", "playwright": "1.56.1" }, "lockfileIncluded": false, "coldStart": false }, "license": { "summary": "User-directed publication of supplied authored source; preserve listed third-party notices; no new license granted here.", "includedNoticePaths": [], "newLicenseGranted": false } }, "bundle": { "name": "origami-fold--claude-cloud--full.zip", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/origami-fold--claude-cloud--full.zip", "bytes": 29966813, "sha256": "35cb7838172cd85558a026ac64f50d24860f62a830e114f6bf3b1716c7ed601c", "available": true, "label": "28.6 MB", "contents": [ "selected master", "editable source", "variant guidance", "source assets", "audio inputs", "dependency declarations", "file manifest", "designed cover", "starter prompt" ], "includedFiles": 60, "includedFilePaths": [ "CASE_STUDY.md", "RUN.md", "SKILL.md", "STYLE.md", "assets/components/diagram-key.png", "assets/components/leaf-pair.png", "assets/components/root-pleat.png", "assets/components/seed-folded.png", "assets/components/sun-rosette.png", "assets/layers/static/01_table.png", "assets/layers/t1.60/02_paper.png", "assets/layers/t1.60/03_diagram.png", "assets/layers/t1.60/04_labels.png", "assets/layers/t11.00/02_paper.png", "assets/layers/t11.00/03_diagram.png", "assets/layers/t11.00/04_labels.png", "assets/layers/t5.20/02_paper.png", "assets/layers/t5.20/03_diagram.png", "assets/layers/t5.20/04_labels.png", "assets/layers/t7.60/02_paper.png", "assets/layers/t7.60/03_diagram.png", "assets/layers/t7.60/04_labels.png", "assets/textures/banner-title.png", "assets/textures/paper-fiber.png", "audio/cues.json", "audio/mix.flac", "audio/stems/foley.flac", "audio/stems/music.flac", "display/cover.webp", "engine/audio.mjs", "engine/audio/dsp.js", "engine/audio/instruments.js", "engine/audio/sfx.js", "engine/browser.mjs", "engine/export.mjs", "engine/finish.mjs", "engine/lib/draw.js", "engine/lib/util.js", "engine/page.html", "engine/render.mjs", "engine/runtime.js", "engine/server.mjs", "film/contact_sheet.jpg", "film/origami-fold.mp4", "film/spectrogram.png", "film/stills/01_0.50s.jpg", "film/stills/02_1.60s.jpg", "film/stills/03_3.00s.jpg", "film/stills/04_5.20s.jpg", "film/stills/05_7.60s.jpg", "film/stills/06_11.00s.jpg", "overview/encoded-contact-sheet.jpg", "package.json", "qa.json", "spec.json", "starter-prompt.txt", "styles/origami-fold/scene.js", "styles/origami-fold/score.js", "styles/origami-fold/timeline.js", "BUNDLE-GUIDE.md" ], "externalPrerequisites": { "runtime": [ "Node.js", "Chromium or Chrome", "FFmpeg and ffprobe" ], "packageDependencies": { "@fontsource/anton": "^5.1.0", "@fontsource/archivo-black": "^5.1.0", "@fontsource/bangers": "^5.1.0", "@fontsource/bebas-neue": "^5.1.0", "@fontsource/caveat": "^5.1.0", "@fontsource/comic-neue": "^5.3.0", "@fontsource/courier-prime": "^5.3.0", "@fontsource/dm-sans": "^5.1.0", "@fontsource/dm-serif-display": "^5.1.0", "@fontsource/fraunces": "^5.1.0", "@fontsource/ibm-plex-mono": "^5.1.0", "@fontsource/instrument-serif": "^5.1.0", "@fontsource/inter": "^5.1.0", "@fontsource/jetbrains-mono": "^5.1.0", "@fontsource/jost": "^5.3.0", "@fontsource/kaushan-script": "^5.3.0", "@fontsource/nunito": "^5.1.0", "@fontsource/permanent-marker": "^5.1.0", "@fontsource/playfair-display": "^5.1.0", "@fontsource/press-start-2p": "^5.1.0", "@fontsource/space-grotesk": "^5.1.0", "@fontsource/space-mono": "^5.1.0", "@fontsource/stix-two-text": "^5.3.0", "@fontsource/syne": "^5.1.0", "@fontsource/vt323": "^5.1.0", "three": "0.170.0", "playwright": "1.56.1" }, "lockfileIncluded": false, "coldStart": false }, "license": { "summary": "User-directed publication of supplied authored source; preserve listed third-party notices; no new license granted here.", "includedNoticePaths": [], "newLicenseGranted": false } } }, "cadenceNote": "Encoded fps describes the file. Scene evaluation and held actor poses depend on this source recipe.", "starterPrompt": "Create a {11}-second {1080×1920} origami animation explaining {process} in {4} numbered steps. Two-sided paper (colour one side, white the other) on a warm paper table, filmed from above at a ~28° tilt with soft directional shadows. Every change is a real fold: rigid flaps rotating about straight creases (valley folds) or accordion pleats opening; leaves open along midribs; a rosette opens petal by petal. Before each fold, an origami-diagram overlay draws on: a step badge + short instruction (geometric grotesk), a dashed valley-fold line on the crease, and a red curved arrow showing the moving flap. End with a pleated banner unfolding to reveal the title printed in a warm serif. Sound: plucked harp + felt piano, no drums; paper foley (swish + crease snap per fold, one tick per pleat panel).\n\nSelected example: Seed to Seedling\nFamily: origami-fold\nVariant: claude-cloud\nTypography: DM Sans 800, DM Sans 600, Fraunces 600, DM Sans 400\nProduction: three.js\nExact reference master SHA-256: 4db37abe6cd9e7d33242bc0c2631bfc1536e6438838ada98a15a42b04c800b50\n\nRead the selected STYLE.md, SKILL.md and reproduction instructions before adapting. Keep the declared renderer and source closure; do not assume another family variant has interchangeable parameters. Preserve exact font or custom glyph sources, color roles, spatial continuity and readable text. Record encoded frame rate, scene evaluation and held poses separately. Review the changed render visually and listen to the encoded audio before claiming those checks passed. Existing approval applies only to its recorded artifact.\n\nSuccess check: the adapted story is clear; key type remains readable in motion; the source rebuilds with its declared inputs; all media and review records identify the exact output. State any untested reproduction, listening or rights limits.", "downloadNote": "Downloads match this selected example. The full bundle includes its source, original video, cover and starter prompt. Source packages include artwork, audio inputs and dependency declarations. Requires Node.js, Chromium or Chrome, FFmpeg and ffprobe. Follow the included run guide for package installation and reproduction limits.", "model": "Opus 5.5", "reasoningEffort": "Extra" } ], "relatedMethodIds": [] }, { "id": "product-ui-demo", "slug": "product-ui-demo", "title": "Product UI Demo", "premise": "A fictional product interface becomes the stage, with focused camera moves, spring motion and changing headlines.", "summary": "A fictional product interface becomes the stage, with focused camera moves, spring motion and changing headlines.", "category": "Digital product", "defaultExampleId": "claude-cloud", "facets": { "material": [ "2d", "ui", "device", "springs", "kinetic-headline", "clean", "product", "marketing" ], "producer": [ "Claude Cloud" ], "format": [ "Portrait" ], "motion": [], "useCase": [] }, "examples": [ { "id": "claude-cloud", "title": "Seed to Seedling", "producer": "Claude Cloud", "producerEvidence": "The displayed model and reasoning label identify this production lane. Exact runtime model ID and per-film cost are not established by the source packet.", "relationship": "Original family example", "format": "Portrait", "productionMethod": "canvas-2d", "master": { "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/product-ui-demo--claude-cloud.mp4", "sha256": "f3a548f9c338a423f59f756562d3141c1823f29ed75ae4ebe12ccd702d2e6d2a", "bytes": 3637529, "mimeType": "video/mp4", "width": 1080, "height": 1920, "duration": 10.0, "encodedFps": 60 }, "poster": { "url": "/video-library/media/product-ui-demo--claude-cloud/cover.webp", "sha256": "4feacec30eee2302f0d100486f50101be3140b7abba37a393a375e0677469345", "sourceMasterSha256": "f3a548f9c338a423f59f756562d3141c1823f29ed75ae4ebe12ccd702d2e6d2a", "timeSeconds": 8.5, "rationale": "Late story beat selected to show the developed subject and visual system; extracted from this exact master." }, "previewVideo": { "url": "/video-library/media/product-ui-demo--claude-cloud/preview.mp4", "sha256": "da72351c839e9bb91db97f28e09476169addc6640f545006336daa1f024d8f7a", "sourceMasterSha256": "f3a548f9c338a423f59f756562d3141c1823f29ed75ae4ebe12ccd702d2e6d2a", "width": 540, "height": 960, "label": "Playback preview · 540 px wide · full master in Download finished video" }, "gallery": [ { "id": "overview", "role": "encoded-contact-sheet", "label": "Scenes from the finished render · not a planning storyboard", "url": "/video-library/media/product-ui-demo--claude-cloud/overview.webp", "sourceMasterSha256": "f3a548f9c338a423f59f756562d3141c1823f29ed75ae4ebe12ccd702d2e6d2a" }, { "id": "scene-1", "role": "encoded-frame", "label": "Finished-film frame · 2 seconds", "url": "/video-library/media/product-ui-demo--claude-cloud/scene-1.webp", "sourceMasterSha256": "f3a548f9c338a423f59f756562d3141c1823f29ed75ae4ebe12ccd702d2e6d2a", "timeSeconds": 2.0 }, { "id": "scene-2", "role": "encoded-frame", "label": "Finished-film frame · 5 seconds", "url": "/video-library/media/product-ui-demo--claude-cloud/scene-2.webp", "sourceMasterSha256": "f3a548f9c338a423f59f756562d3141c1823f29ed75ae4ebe12ccd702d2e6d2a", "timeSeconds": 5.0 }, { "id": "scene-3", "role": "encoded-frame", "label": "Finished-film frame · 8 seconds", "url": "/video-library/media/product-ui-demo--claude-cloud/scene-3.webp", "sourceMasterSha256": "f3a548f9c338a423f59f756562d3141c1823f29ed75ae4ebe12ccd702d2e6d2a", "timeSeconds": 8.0 } ], "typography": [ "Inter 800", "Inter 400", "Inter 600", "Inter 600 caps", "Inter 800 42 / Inter 400 26" ], "palette": { "bg0": "#f3f0e9", "bg1": "#e7eee6", "ink": "#14181a", "body": "#5b6560", "grey": "#9aa39e", "line": "#e3e6e1", "card": "#ffffff", "screen": "#f6f7f5", "green": "#1f8a5b", "mint": "#d8f0e3", "blue": "#2f7de1", "blueLt": "#dbeafe", "amber": "#f2a93b", "soil0": "#a8774f", "soil1": "#8a5a3c", "soil2": "#6e4630", "seed": "#c9a46a", "seedDk": "#8a6a3a", "bezel": "#111315" }, "usageGuidance": "Change the subject, copy and timing for your audience. Retain the selected example’s visual rules and recheck the entire reading interval after changes.", "styleRules": "---\nid: product-ui-demo\nname: Product UI Demo (a fictional plant-care app)\nfamily: digital product\naliases: [app promo, UI walkthrough, product demo, feature video, App Store preview, SaaS explainer]\ntags: [2d, ui, device, springs, kinetic-headline, clean, product, marketing]\nkind: visual-style\nroute: canvas-2d (CPU-backed canvas; vector UI drawn in screen-local coordinates)\nreadiness: { research: authored, rights: original-work, referenceImages: own-render, code: built, render: rendered-and-measured }\n---\n\n# Product UI Demo (a fictional plant-care app)\n\nThe story is told through a fictional app, \"Seedling Log\", on a floating phone.\n- **Framing:** a bold marketing headline sits above the device and changes per beat with word-by-word spring rises. The camera zooms into whichever card matters.\n- **① Water:** a push notification drops in (\"Your seed is drinking\"), the moisture ring fills, and the seed illustration swells.\n- **② Root:** a finger taps the *Roots* tab, the screens slide with a spring, a root draws down a depth ruler as \"Root depth\" counts to 4.2 cm, and the growth log checks itself off.\n- **③ Shoot:** a tap on *Light* brings in a shoot that rises under a turning sun while a gauge sweeps to \"Sprouted\". A milestone bottom sheet slides up (\"Seedling stage\") and \"Share progress\" is pressed.\n- **Ending:** the device pulls back under the final headline \"From seed / to seedling.\" and the app lockup.\n\n**The one rule:** *every motion is a believable interface behaviour.* Springs, taps, ripples, notifications, tab slides and sheets behave like a real OS; the camera only reframes what the UI is already doing.\n\n## Creative direction\n- **Audience:** app users, product marketers, App Store/Play previews, SaaS landing pages, investor demos.\n- **Purpose:** show a product's value through a story, so that each feature *does something* to the subject.\n- **Feeling:** clean, confident, friendly, effortless.\n- **Central visual idea:** *the app is the window onto the process.* Each UI module (notification, ring, log, gauge, milestone sheet) maps to one story beat, so the feature list reads as a narrative.\n- **How the parts work together:**\n - *Composition:* headline zone on top, device below, the device fading under a veil so text never collides with UI.\n - *Colour:* a warm neutral background, a white UI, brand green for success, and one functional accent per metric (blue water, amber light, soil browns).\n - *Type:* Inter throughout: 800 for headlines and big numbers, 600 for UI labels, 400 for body text.\n - *Motion:* springs with about 12 % overshoot for UI, easeInOutCubic for the camera, word-by-word headline rises.\n - *Sound:* modern pop plus quiet, dry UI confirmations.\n\n## Fit\n- **Best for:** mobile and SaaS feature promos, onboarding trailers, \"how it works\" for digital tools, release notes.\n- **Avoid when:** there is no real interface to show (don't invent UI for non-products), or for emotional/brand-film briefs.\n- **Ethics:** the app here is fictional and labelled so on screen (\"A fictional app, for illustration\"). Don't mimic a real company's UI or brand.\n- **Cost:** low. 600 frames in about 12 s.\n\n## Visual fingerprint\n| Element | Rule |\n|---|---|\n| Device | Outer 620 × 1280, radius 96, bezel 16 `#111315` with a 3 px `#3a3e42` edge highlight; screen 588 × 1248, radius 82; dynamic-island pill 160 × 46; shadow rgba(20,30,25,0.28) blur 80, y +40. |\n| Camera | Places a phone-local focus point (fx, fy) at frame point (cx, cy) at scale s (keys in `timeline.js → CAM`): 0.86 overview → 1.22-1.30 zooms on the active card → 0.95 for taps on the tab bar → 0.74 for the final lockup. easeInOutCubic between keys. |\n| Veil | Background-coloured gradient over y 0-660 (opaque to 68 %), so the device slides *under* the headline zone. |\n| UI grid | 24 px outer margins; cards 540 wide, radius 36, white with a 2 px `#e3e6e1` border and a soft shadow (blur 18, y +6, 6 %); inner art panels radius 24; tab bar 116 px. |\n| Illustration | Flat vector: soil gradients `#a8774f → #8a5a3c → #6e4630`, seed `#c9a46a` with outline `#8a6a3a`, root `#f4ead8`, shoot/leaves `#1f8a5b`/`#3fae6a`, sun `#f2a93b`. |\n| Background | Linear `#f3f0e9 → #e7eee6` with two soft radial blooms (mint top-right, peach bottom-left). |\n| Palette | Ink `#14181a` · body `#5b6560` · grey `#9aa39e` · line `#e3e6e1` · screen `#f6f7f5` · green `#1f8a5b` · mint `#d8f0e3` · blue `#2f7de1` / `#dbeafe` · amber `#f2a93b`. |\n\n### Typography (exact)\n| Role | Family / weight | Size | Spacing / alignment | Enter → settle |\n|---|---|---|---|---|\n| Headline | Inter 800 | 78 px, line height 86 | tracking −2 px; left at x 72; first baseline 246; final line green | each word rises 90 px inside its line mask, 50 ms stagger, spring 0.55 s; exit: up 30 px + fade 0.22 s before the next headline |\n| Subhead | Inter 400 | 30 px | left x 74, 12 px under the headline | fade 0.3 s, 0.2 s after the headline starts |\n| UI screen title (\"Bean #1\") | Inter 800 | 44 | x 36, baseline 160 | , |\n| Card titles | Inter 600 | 28 | x 52 | , |\n| UI body / list | Inter 400 / 600 | 23-26 | left; values right-aligned at x 536 | list items turn from grey to ink when checked |\n| Overlines (\"NEXT MILESTONE\", \"ROOT DEPTH\") | Inter 600 caps | 18-20 | tracking 1.5 | , |\n| Big numbers (34 %, 4.2 cm, Sprouted) | Inter 800 | 34-48 | centred or right | count live with the animation |\n| Tab labels | Inter 600 | 20 | centred | colour switches green when active |\n| Lockup | Inter 800 42 + Inter 400 26 | , | icon 92 px at (72, 452), text at x 186 | spring rise 20 px + fade at 8.3 s |\n| Note | Inter 600 | 24 | centred at y 1874 | fade 0.4 s at 8.7 s |\n\n## Temporal fingerprint\n| Element | Rule |\n|---|---|\n| Grid | 120 BPM; beats at 1.2 s, 3.3 s and 5.65 s; pull-back 7.75-8.5 s. |\n| Spring | `1 − e^(−6x)·cos(9x)` with x = (t − t0)/duration (≈12 % overshoot, settled by x ≈ 1). |\n| Interactions | Tap = press circle 0.15 s, then a ripple ring r 34 → 94 over 0.45 s. Screen change = horizontal slide (spring 0.5 s) with a mint capsule sliding under the active tab. Notification drops −150 → 16 px (spring 0.55 s) and leaves with ease-in 0.3 s. Checks scale in (spring 0.35 s). Sheet rises to y 560 (spring 0.6 s) over a 28 % scrim. Button press scales 0.96 over 0.25 s. |\n| Camera | Zoom-in after each tap settles; zoom-out *before* each tap so the tab bar is visible: never tap off-screen. |\n| Holds | Each zoomed card holds ≥ 1 s after its animation completes; the lockup holds 1.7 s. |\n\n## How the composition develops\n| Time | Beat | Camera | Action |\n|---|---|---|---|\n| 0-1.2 s | Intro | the device rises to overview 0.86 | \"Meet your seed.\" The Today screen shows a dormant seed and 34 % moisture. |\n| 1.2-2.85 s | ① Water | zoom 1.3 on the seed card | Notification drops; the ring fills 34 → 72 %; water dots move in; the seed swells 24 %; the progress bar advances. |\n| 2.85-5.25 s | ② Root | out to 0.95 → tap Roots → zoom 1.25 | Screens slide; the root draws down a cm ruler; ROOT DEPTH counts to 4.2 cm; three log items check off. |\n| 5.25-7.75 s | ③ Shoot | out → tap Light → zoom 1.22 → 1.12 on the sheet | The shoot rises; leaves spring open; the gauge sweeps to \"Sprouted\"; the milestone sheet slides up; \"Share progress\" is pressed. |\n| 7.75-10 s | Lockup | pull back to 0.74 | \"From seed / to seedling.\"; app icon + \"Seedling Log\"; note. |\n\n## Sound fingerprint\nModern pop at 120 BPM in E major (E · C♯m · A · B → E):\n- **Bed:** FM e-piano chord stabs on offbeats, a round bass on beats, kick/clap/hats from step 1, and a two-note bell hook on every headline.\n- **UI sounds** (short, high, dry, quiet):\n - notification: two-tone chime (E6 → B6)\n - taps: a 3.2 kHz click plus a soft thump; tab changes swish\n - checks: a tick plus a kalimba note (G♯5, B5, E6, rising)\n - fills: rising filtered sweeps under the ring and the gauge\n - milestone: a sheet swoosh, then an E-major bell arpeggio\n - ending: the logo sting is a bell chord over a pad\n\nMusic ducks under the notification and the sheet. Mix −14.9 LUFS, −2.0 dBTP.\n\n## Reusable prompt\n> Create a {10}-second {1080×1920} product UI demo for {product} that tells {story} through its features. A bold Inter 800 headline (word-by-word spring rises inside line masks) sits above a floating phone; a background-coloured veil lets the device slide under the headline zone. Draw the UI as clean vectors (white cards, 24 px margins, radius 36, one accent per metric). For each beat, the camera zooms into the module that matters and the UI behaves like a real OS: a notification drops, a ring fills, a finger taps a tab (press + ripple), screens slide with a spring, a log checks itself off, a bottom sheet rises, a button is pressed. End with a pull-back under the final headline and an app lockup. Score: clean modern pop plus quiet, dry UI confirmation sounds synced to each interaction. Label fictional products as fictional.\n\n## Adaptation guidance\n| Change | Safe? | Notes |\n|---|---|---|\n| Product / story | ✅ | Map each beat to one real UI module. Keep ≤ 4 modules in 10 s. |\n| Brand colour / font | ✅ | Swap the green and Inter; keep one accent per metric and the 800/600/400 weight hierarchy. |\n| Copy | ✅ | Headline ≤ 2 lines of ≤ 14 characters at 78 px; subhead ≤ 48 characters. |\n| Device | ✅ | Desktop/browser: use a window frame and a cursor (with click ripple) instead of a finger. |\n| 16:9 | ✅ | Headline left, device right; camera keys re-tuned. |\n| Camera keys | ⚠️ | Every tap target must be on screen when tapped; re-check after moving any UI. |\n| **Essential** | , | Believable UI physics (springs, taps, sheets), the headline zone + veil, card-level zooms, sound confirming every interaction, honest labelling. |\n\n## Accessibility\n- Headline ink on warm white is about 16:1; UI body text is about 6:1.\n- Numbers are large and change only while the camera is holding.\n- There is no flashing; motion follows OS conventions.\n- Every headline restates the beat, so the UI detail is optional reading.\n\n## Provenance\nOriginal style and fictional product authored for this library (2026-10-07); no Animate seed. \"Seedling Log\" is fictional, and no real app's UI was copied. Font: Inter (SIL OFL) via Fontsource. All UI, illustration and audio are procedural.", "review": { "technical": { "state": "Supplied checks passed", "scope": "Source handoff records complete decode, stream dimensions and audio measurements. Browser playback is checked separately.", "artifactSha256": "f3a548f9c338a423f59f756562d3141c1823f29ed75ae4ebe12ccd702d2e6d2a" }, "creative": { "state": "Not independently accepted", "scope": "not independently established", "artifactSha256": "f3a548f9c338a423f59f756562d3141c1823f29ed75ae4ebe12ccd702d2e6d2a" }, "listening": { "state": "Not verified", "scope": "No perceptual listening pass is established by this library import.", "artifactSha256": "f3a548f9c338a423f59f756562d3141c1823f29ed75ae4ebe12ccd702d2e6d2a" }, "reproduction": { "state": "Not tested", "scope": "Source is supplied. Cross-machine cold-start reproduction has not been established.", "artifactSha256": "f3a548f9c338a423f59f756562d3141c1823f29ed75ae4ebe12ccd702d2e6d2a" } }, "detailUrl": "https://library.jkylehobson.chatgpt.site/video-library/#family=product-ui-demo&example=claude-cloud", "processUrl": "/video-library/process.html?family=product-ui-demo&example=claude-cloud", "downloads": { "prompt": { "available": true, "url": "/video-library/prompts/product-ui-demo--claude-cloud.txt", "sha256": "be900789763f948bb439e9852ed3238b3690ccb804a86f8b1f7c931a3218f7f1", "bytes": 1898, "label": "Reusable, example-specific instructions" }, "video": { "name": "product-ui-demo--claude-cloud.mp4", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/product-ui-demo--claude-cloud.mp4", "bytes": 3637529, "sha256": "f3a548f9c338a423f59f756562d3141c1823f29ed75ae4ebe12ccd702d2e6d2a", "available": true, "label": "3.5 MB" }, "source": { "name": "product-ui-demo--claude-cloud--source.zip", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/product-ui-demo--claude-cloud--source.zip", "bytes": 8690042, "sha256": "6d85844dab033486bafe6e238d09d2ebaced124eaff1b0eb6aa08dcd82aae79c", "available": true, "label": "8.3 MB", "contents": [ "editable source", "variant guidance", "source assets", "audio inputs", "dependency declarations", "file manifest" ], "includedFiles": 54, "includedFilePaths": [ "CASE_STUDY.md", "RUN.md", "SKILL.md", "STYLE.md", "assets/components/app-icon.png", "assets/components/device-frame.png", "assets/components/notification.png", "assets/components/screen-light.png", "assets/components/screen-milestone.png", "assets/components/screen-roots.png", "assets/components/screen-today.png", "assets/layers/t2.20/01_device.png", "assets/layers/t2.20/02_type.png", "assets/layers/t4.80/01_device.png", "assets/layers/t4.80/02_type.png", "assets/layers/t7.20/01_device.png", "assets/layers/t7.20/02_type.png", "assets/layers/t9.60/01_device.png", "assets/layers/t9.60/02_type.png", "audio/cues.json", "audio/mix.flac", "audio/stems/drums.flac", "audio/stems/music.flac", "audio/stems/sfx.flac", "engine/audio.mjs", "engine/audio/dsp.js", "engine/audio/instruments.js", "engine/audio/sfx.js", "engine/browser.mjs", "engine/export.mjs", "engine/finish.mjs", "engine/lib/draw.js", "engine/lib/util.js", "engine/page.html", "engine/render.mjs", "engine/runtime.js", "engine/server.mjs", "film/contact_sheet.jpg", "film/spectrogram.png", "film/stills/01_0.90s.jpg", "film/stills/02_2.20s.jpg", "film/stills/03_3.50s.jpg", "film/stills/04_4.80s.jpg", "film/stills/05_6.30s.jpg", "film/stills/06_7.20s.jpg", "film/stills/07_9.60s.jpg", "overview/encoded-contact-sheet.jpg", "package.json", "qa.json", "spec.json", "styles/product-ui-demo/scene.js", "styles/product-ui-demo/score.js", "styles/product-ui-demo/timeline.js", "BUNDLE-GUIDE.md" ], "externalPrerequisites": { "runtime": [ "Node.js", "Chromium or Chrome", "FFmpeg and ffprobe" ], "packageDependencies": { "@fontsource/anton": "^5.1.0", "@fontsource/archivo-black": "^5.1.0", "@fontsource/bangers": "^5.1.0", "@fontsource/bebas-neue": "^5.1.0", "@fontsource/caveat": "^5.1.0", "@fontsource/dm-sans": "^5.1.0", "@fontsource/dm-serif-display": "^5.1.0", "@fontsource/fraunces": "^5.1.0", "@fontsource/ibm-plex-mono": "^5.1.0", "@fontsource/instrument-serif": "^5.1.0", "@fontsource/inter": "^5.1.0", "@fontsource/jetbrains-mono": "^5.1.0", "@fontsource/jost": "^5.3.0", "@fontsource/nunito": "^5.1.0", "@fontsource/permanent-marker": "^5.1.0", "@fontsource/playfair-display": "^5.1.0", "@fontsource/press-start-2p": "^5.1.0", "@fontsource/space-grotesk": "^5.1.0", "@fontsource/space-mono": "^5.1.0", "@fontsource/syne": "^5.1.0", "@fontsource/vt323": "^5.1.0", "three": "0.170.0", "playwright": "1.56.1" }, "lockfileIncluded": false, "coldStart": false }, "license": { "summary": "User-directed publication of supplied authored source; preserve listed third-party notices; no new license granted here.", "includedNoticePaths": [], "newLicenseGranted": false } }, "bundle": { "name": "product-ui-demo--claude-cloud--full.zip", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/product-ui-demo--claude-cloud--full.zip", "bytes": 12345865, "sha256": "c0861a45c55f5dd624a7ac40e0eda819b33a778ef9d334d441527d4cc131a133", "available": true, "label": "11.8 MB", "contents": [ "selected master", "editable source", "variant guidance", "source assets", "audio inputs", "dependency declarations", "file manifest", "designed cover", "starter prompt" ], "includedFiles": 57, "includedFilePaths": [ "CASE_STUDY.md", "RUN.md", "SKILL.md", "STYLE.md", "assets/components/app-icon.png", "assets/components/device-frame.png", "assets/components/notification.png", "assets/components/screen-light.png", "assets/components/screen-milestone.png", "assets/components/screen-roots.png", "assets/components/screen-today.png", "assets/layers/t2.20/01_device.png", "assets/layers/t2.20/02_type.png", "assets/layers/t4.80/01_device.png", "assets/layers/t4.80/02_type.png", "assets/layers/t7.20/01_device.png", "assets/layers/t7.20/02_type.png", "assets/layers/t9.60/01_device.png", "assets/layers/t9.60/02_type.png", "audio/cues.json", "audio/mix.flac", "audio/stems/drums.flac", "audio/stems/music.flac", "audio/stems/sfx.flac", "display/cover.webp", "engine/audio.mjs", "engine/audio/dsp.js", "engine/audio/instruments.js", "engine/audio/sfx.js", "engine/browser.mjs", "engine/export.mjs", "engine/finish.mjs", "engine/lib/draw.js", "engine/lib/util.js", "engine/page.html", "engine/render.mjs", "engine/runtime.js", "engine/server.mjs", "film/contact_sheet.jpg", "film/product-ui-demo.mp4", "film/spectrogram.png", "film/stills/01_0.90s.jpg", "film/stills/02_2.20s.jpg", "film/stills/03_3.50s.jpg", "film/stills/04_4.80s.jpg", "film/stills/05_6.30s.jpg", "film/stills/06_7.20s.jpg", "film/stills/07_9.60s.jpg", "overview/encoded-contact-sheet.jpg", "package.json", "qa.json", "spec.json", "starter-prompt.txt", "styles/product-ui-demo/scene.js", "styles/product-ui-demo/score.js", "styles/product-ui-demo/timeline.js", "BUNDLE-GUIDE.md" ], "externalPrerequisites": { "runtime": [ "Node.js", "Chromium or Chrome", "FFmpeg and ffprobe" ], "packageDependencies": { "@fontsource/anton": "^5.1.0", "@fontsource/archivo-black": "^5.1.0", "@fontsource/bangers": "^5.1.0", "@fontsource/bebas-neue": "^5.1.0", "@fontsource/caveat": "^5.1.0", "@fontsource/dm-sans": "^5.1.0", "@fontsource/dm-serif-display": "^5.1.0", "@fontsource/fraunces": "^5.1.0", "@fontsource/ibm-plex-mono": "^5.1.0", "@fontsource/instrument-serif": "^5.1.0", "@fontsource/inter": "^5.1.0", "@fontsource/jetbrains-mono": "^5.1.0", "@fontsource/jost": "^5.3.0", "@fontsource/nunito": "^5.1.0", "@fontsource/permanent-marker": "^5.1.0", "@fontsource/playfair-display": "^5.1.0", "@fontsource/press-start-2p": "^5.1.0", "@fontsource/space-grotesk": "^5.1.0", "@fontsource/space-mono": "^5.1.0", "@fontsource/syne": "^5.1.0", "@fontsource/vt323": "^5.1.0", "three": "0.170.0", "playwright": "1.56.1" }, "lockfileIncluded": false, "coldStart": false }, "license": { "summary": "User-directed publication of supplied authored source; preserve listed third-party notices; no new license granted here.", "includedNoticePaths": [], "newLicenseGranted": false } } }, "cadenceNote": "Encoded fps describes the file. Scene evaluation and held actor poses depend on this source recipe.", "starterPrompt": "Create a {10}-second {1080×1920} product UI demo for {product} that tells {story} through its features. A bold Inter 800 headline (word-by-word spring rises inside line masks) sits above a floating phone; a background-coloured veil lets the device slide under the headline zone. Draw the UI as clean vectors (white cards, 24 px margins, radius 36, one accent per metric). For each beat, the camera zooms into the module that matters and the UI behaves like a real OS: a notification drops, a ring fills, a finger taps a tab (press + ripple), screens slide with a spring, a log checks itself off, a bottom sheet rises, a button is pressed. End with a pull-back under the final headline and an app lockup. Score: clean modern pop plus quiet, dry UI confirmation sounds synced to each interaction. Label fictional products as fictional.\n\nSelected example: Seed to Seedling\nFamily: product-ui-demo\nVariant: claude-cloud\nTypography: Inter 800, Inter 400, Inter 600, Inter 600 caps, Inter 800 42 / Inter 400 26\nProduction: canvas-2d\nExact reference master SHA-256: f3a548f9c338a423f59f756562d3141c1823f29ed75ae4ebe12ccd702d2e6d2a\n\nRead the selected STYLE.md, SKILL.md and reproduction instructions before adapting. Keep the declared renderer and source closure; do not assume another family variant has interchangeable parameters. Preserve exact font or custom glyph sources, color roles, spatial continuity and readable text. Record encoded frame rate, scene evaluation and held poses separately. Review the changed render visually and listen to the encoded audio before claiming those checks passed. Existing approval applies only to its recorded artifact.\n\nSuccess check: the adapted story is clear; key type remains readable in motion; the source rebuilds with its declared inputs; all media and review records identify the exact output. State any untested reproduction, listening or rights limits.", "downloadNote": "Downloads match this selected example. The full bundle includes its source, original video, cover and starter prompt. Source packages include artwork, audio inputs and dependency declarations. Requires Node.js, Chromium or Chrome, FFmpeg and ffprobe. Follow the included run guide for package installation and reproduction limits.", "model": "Opus 5.5", "reasoningEffort": "Extra" } ], "relatedMethodIds": [] }, { "id": "riso", "slug": "riso", "title": "Riso", "premise": "Three-ink color, halftone screens and slight misregistration bring the feel of a printed zine into motion.", "summary": "Three-ink color, halftone screens and slight misregistration bring the feel of a printed zine into motion.", "category": "Print", "defaultExampleId": "claude-cloud", "facets": { "material": [ "print", "halftone", "zine", "editorial", "playful", "overprint", "seed-style" ], "producer": [ "Claude Cloud" ], "format": [ "Portrait" ], "motion": [], "useCase": [] }, "examples": [ { "id": "claude-cloud", "title": "Seed to Seedling", "producer": "Claude Cloud", "producerEvidence": "The displayed model and reasoning label identify this production lane. Exact runtime model ID and per-film cost are not established by the source packet.", "relationship": "Original family example", "format": "Portrait", "productionMethod": "canvas-2d", "master": { "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/riso--claude-cloud.mp4", "sha256": "2315cee88d494f613d92f9a8a5610f94d5db32147b979562f68b6190b567927d", "bytes": 18000664, "mimeType": "video/mp4", "width": 1080, "height": 1920, "duration": 9.0, "encodedFps": 60 }, "poster": { "url": "/video-library/media/riso--claude-cloud/cover.webp", "sha256": "e9c1688519cfdfaff2410ccf3c0033630cd74508fc451882a169c10e0bb866be", "sourceMasterSha256": "2315cee88d494f613d92f9a8a5610f94d5db32147b979562f68b6190b567927d", "timeSeconds": 7.65, "rationale": "Late story beat selected to show the developed subject and visual system; extracted from this exact master." }, "previewVideo": { "url": "/video-library/media/riso--claude-cloud/preview.mp4", "sha256": "3b364c8d8b280bd784c25292134f663d21e64bc210125399bf078c8498228dd6", "sourceMasterSha256": "2315cee88d494f613d92f9a8a5610f94d5db32147b979562f68b6190b567927d", "width": 540, "height": 960, "label": "Playback preview · 540 px wide · full master in Download finished video" }, "gallery": [ { "id": "overview", "role": "encoded-contact-sheet", "label": "Scenes from the finished render · not a planning storyboard", "url": "/video-library/media/riso--claude-cloud/overview.webp", "sourceMasterSha256": "2315cee88d494f613d92f9a8a5610f94d5db32147b979562f68b6190b567927d" }, { "id": "scene-1", "role": "encoded-frame", "label": "Finished-film frame · 1.8 seconds", "url": "/video-library/media/riso--claude-cloud/scene-1.webp", "sourceMasterSha256": "2315cee88d494f613d92f9a8a5610f94d5db32147b979562f68b6190b567927d", "timeSeconds": 1.8 }, { "id": "scene-2", "role": "encoded-frame", "label": "Finished-film frame · 4.5 seconds", "url": "/video-library/media/riso--claude-cloud/scene-2.webp", "sourceMasterSha256": "2315cee88d494f613d92f9a8a5610f94d5db32147b979562f68b6190b567927d", "timeSeconds": 4.5 }, { "id": "scene-3", "role": "encoded-frame", "label": "Finished-film frame · 7.2 seconds", "url": "/video-library/media/riso--claude-cloud/scene-3.webp", "sourceMasterSha256": "2315cee88d494f613d92f9a8a5610f94d5db32147b979562f68b6190b567927d", "timeSeconds": 7.2 } ], "typography": [ "Anton", "Space Mono" ], "palette": null, "usageGuidance": "Change the subject, copy and timing for your audience. Retain the selected example’s visual rules and recheck the entire reading interval after changes.", "styleRules": "---\nid: riso\nname: Riso\nfamily: print\naliases: [risograph, riso zine, spot-ink print, halftone overprint]\ntags: [print, halftone, zine, editorial, playful, overprint, seed-style]\nkind: visual-style\nroute: canvas-2d (per-pixel print pass)\nseed: { source: \"cth9191/animate styles/riso\", revision: 7e5eb56feb2dd573f890e1b7b34748af43d58263, license: MIT, idPreserved: true }\nreadiness: { research: authored, rights: \"MIT seed rules + original implementation\", referenceImages: own-render, code: built, render: rendered-and-measured }\n---\n\n# Riso\n\nA three-ink risograph print on cream paper. The inks are teal, fluorescent pink and yellow. Halftone screens sit at their own angles, colours mix by overprinting instead of blending, plates sit a few pixels off register, and ink drops out in tiny specks. It feels flat, bright, a little worn and handmade, like a zine you'd pick up at a book fair. Animated on twos.\n\n**The one rule (from the Animate seed):** *nothing is painted, everything is printed.* A frame is a sheet run through three spot-ink plates. A plate only says *how much ink goes where* (a grey tone 0-1), the screen turns tone into dots, and the inks multiply. There is no black ink and no white ink.\n\n## Creative direction\n- **Audience:** design-literate general audiences, culture/editorial readers, education with personality, indie brands.\n- **Purpose:** explain something simply while signalling *made by hand, with taste*: warmth and wit over polish.\n- **Feeling:** sunny, tactile, cheeky, imperfect in a lovable way.\n- **Central visual idea:** *a germination zine.* Every beat is a printed page: a giant screened numeral behind the scene, a tag slip, a caption card, and a hero mascot (the ink-blue seed with paper eyes).\n- **How the parts work together:**\n - *Type* is printed: the heavy condensed Anton prints as solid ink and misregisters with everything else.\n - *Colour* comes only from three inks and their overprints (coral, green, ink-blue, olive-black), so the palette is coherent by construction.\n - *Composition* uses the zine page (tag top-left, card bottom, numeral behind the subject).\n - *Motion* on twos with a three-variant boil gives the shimmer of real printed frames.\n - *Cuts* are iris openings with a rough teal rim, like a vignette run through the press.\n - *Sound* is the print room: a \"ka-chunk\" + paper slide on each cut.\n\n## Fit\n- **Best for:** editorial explainers, culture, music, food, kids/education with taste, playful brand stories, social cut-downs.\n- **Avoid when:** you need photographic truth, precise data, corporate gravitas, or fine small text (halftone eats detail under about 30 px).\n- **Cost:** medium. The per-pixel print pass is ≈ 0.3 s per frame at 1080×1920 (540 frames ≈ 2 min 45 s with 3 workers). High-entropy output: encode at CRF 18 (18 MB for 9 s).\n\n## Visual fingerprint\n| Element | Rule |\n|---|---|\n| Composition | Zine page: beat tag top-left, caption card at the bottom (x 60-1020, from y 1530), giant numeral behind the subject (x 230), subject on a slight right-of-centre axis (x 560). Content inside the safe area x 60-1020, y 250-1500; fields bleed to the edges. |\n| Shape language | Soft rounded blobs (bean seed), lens leaves, ribbons with a dry-brush second pass, rough hand circles. |\n| Line | Ribbons wobble smoothly (low-frequency, re-seeded per boil variant). Fills **knock out**; lines **overprint** unless knocked (paper-white root = a knocked line). |\n| Texture / material | The paper: flat `#F2ECE3`-ish with faint fibres (≤ ~1 level). Halftone dots, misregistration fringes and dropouts *are* the texture. No grain filter, no vignette. |\n| Lighting / depth | None, except a glow made as a plate gradient (yellow rises without an edge for the sun). |\n| Typography | See the table below; exact values are in `spec.json → typography`. |\n\n### Typography (exact)\n| Role | Family / weight | Size | Ink · treatment | Enter → settle |\n|---|---|---|---|---|\n| Title \"SEED TO / SEEDLING\" | Anton 400 | 230 px, baselines 400 / 630, x 60 | \"SEED TO\" pink solid; \"SEEDLING\" ink-blue (teal+pink overprint) | drops 40 px over 0.2 s (6 poses) → held |\n| Zine line \"a germination zine · no. 1\" | Space Mono 400 | 34 px, baseline 712 | teal | with the title |\n| Beat tag \"01 WATER\" | Space Mono 700 | 48 px | teal on a yellow slip over a 50 % pink block, both slightly skewed | pops up 30 px in 0.12 s |\n| Caption \"WATER WAKES / THE SEED.\" | Anton 400 | 92 px, line pitch 96 | three-ink dark on a paper (knockout) card with a rough teal rim | card rises 60 px in 0.2 s; text types on per line (0.25 s each) |\n| Giant numeral 1/2/3 | Anton 400 | 900 px | pink 55 % screen (overprinted; on soil it reads orange-coral) | appears with the iris cut; sits behind the plant |\n| End title \"SEEDLING\" | Anton 400 | 250 px | pink pass + teal pass offset (+12, +12), both overprinted → ink-blue core with pink/teal fringes | drops in with the final iris |\n| Note \"illustration · time-compressed\" | Space Mono 400 | 34 px | teal | 0.5 s after the end title |\n\n### Inks and overprints\n| Role | Tones | Printed colour |\n|---|---|---|\n| Paper | none | (241.5, 235.5, 226.5) + fibres |\n| Teal (key plate, registered) | teal 1 | (54, 137, 171) |\n| Fluorescent pink | pink 1 | (220, 68, 160) |\n| Yellow | yellow 1 | (238, 222, 30) |\n| Sky field | yellow .28 | pale butter dots |\n| Soil field / deep | pink .42 + yellow .75 / + teal .18 | coral / dusty brown |\n| Seed hero | teal 1 + pink 1 | ink-blue (violet) |\n| Shoot / leaves | teal 1 + yellow 1 | green |\n| Darks (rims, captions) | all three | olive-black, never (0,0,0) |\nOverprint model: `paper × Π(1 − coverage × (1 − ink/paper))` per channel. Screens: pitch 10.8 px; angles teal 15°, pink 75°, yellow 45°; 20 tone levels; round dots up to 50 %, paper holes above; tone ≥ 0.97 prints solid. Misregistration: pink (+4, −3), yellow (−3, +4) with ±0.3 px jitter per boil variant.\n\n**Invariants:** three spot inks + paper; screened tones; knockout fills, overprinted lines; misregistration and dropouts; on twos. **Adaptable tokens:** the three ink colours (any spot set: e.g. blue/red/yellow, green/orange/purple), the screen pitch (7 / 10.8 / 17.5 px by scale), faces (any heavy display + a mono).\n\n## Temporal fingerprint\n| Element | Rule |\n|---|---|\n| Pose cadence | **Twos**: t is quantised to 2 frames (30 poses/s). The boil variant `B = floor(frame/2) % 3` cycles misregistration jitter, dropouts and line wobble, so the print shimmers without crawling. |\n| Easing | Pops with `easeOutBack` (overshoot about 10 %, read through the stepped cadence). Growth is smoothstep. |\n| Entrances / exits | Tags pop; cards rise and type on; elements don't exit, the page changes. |\n| Camera | **One framing per beat, no camera moves inside a beat**, so the screen never swims under the picture. Framings are scale/centre pairs (`spec.json → camera.frames`). |\n| Transitions | **Iris cut** on the 8th grid: a circle centred on the subject (the seed in the new framing) grows over 4 poses (r 180 → 520 → 1100 → 2200 px) with a rough teal rim. Old framing outside, new framing inside. |\n| Continuity object | The ink-blue seed mascot (always the iris centre). |\n| Text holds | Captions ≥ 1.6 s after typing completes; title ≥ 1.2 s. |\n| Idle motion | Only the boil (dots, fringes and lines shimmer between three variants). |\n\n## How the composition develops\n| Beat | Framing (scale / centre) | Page furniture | Story action |\n|---|---|---|---|\n| Title 0-1.5 s | 1.0 / (540, 1080) | Big printed title, zine line | The seed pops onto the soil line |\n| 1 · water 1.5-3.5 | 1.55 / (560, 1150) | Tag 01, caption, giant \"1\" | Teal drops knock through the sky, rings sink, the seed swells ×1.24 |\n| 2 · root 3.5-5.5 | 1.2 / (560, 1470) | Tag 02, caption, giant \"2\" in orange | The coat cracks; a paper-white root ribbon grows with rootlets |\n| 3 · shoot 5.5-7.5 | 1.08 / (580, 900) | Tag 03, caption, giant \"3\" | The green shoot hooks up, the yellow sun glow rises, leaves pop |\n| End 7.5-9 | 0.92 / (560, 1110) | \"SEEDLING\" double-pass title, note | Whole seedling on the page |\n\n## Sound fingerprint\nLo-fi zine pop in F major at 120 BPM: a toy piano (FM bell, ratio 2.0) comping on quarter notes, a plucked bass on bar roots, a kalimba melody answering story beats, and dusty kick/clap/shaker from the first cut, under a quiet print-room noise bed. **Print room SFX:** every iris cut is a thunk + click + paper rustle (\"ka-chunk\"); the title and end title are press thunks (two passes for the double-printed end title). Plus water plips (C6/D6/F6/A6), a crack, a root scratch, a shoot swish, a sun ding and leaf pops. Music/drums are low-passed (7 kHz / 6 kHz) for a dusty, printed feel.\n\n## Reusable prompt\n> Create a {9}-second {1080×1920} risograph-style video about {subject}. Nothing is painted, everything is printed: draw each frame as three grey plates for {teal / fluorescent pink / yellow}, screen them at 15° / 75° / 45° (10.8 px pitch, round dots, paper holes above 50 %), overprint them multiplicatively on cream paper, misregister pink (+4, −3) and yellow (−3, +4), and drop ≈ 0.3 % specks. Fills knock out, lines overprint; darks are three-ink overprints, highlights are paper knockouts. Animate on twos with a 3-variant boil. Structure it as zine pages: a tag slip top-left, a caption card at the bottom typed on in a heavy condensed face (Anton), a giant screened numeral behind the subject, and a mascot hero. One framing per beat; cut with a rough teal iris centred on the hero. Score: toy piano + plucked bass + dusty drums; a \"ka-chunk\" print sound on every cut. Avoid: black or white ink, gradients that aren't screened, camera moves inside a beat, small text, a grain filter.\n\n## Adaptation guidance\n| Change | Safe? | Notes |\n|---|---|---|\n| Copy | ✅ | Captions ≤ 2 lines of ≤ 14 characters at 92 px; tags ≤ 10 characters. |\n| Subject / mascot | ✅ | Keep one simple hero shape in a two-ink overprint with paper eyes and highlight. |\n| Ink set | ✅ token | Any three spot inks; recompute the `MIX` table and check that darks are still dark. Keep one plate as the registered key. |\n| Fonts | ✅ | Any heavy condensed display face; type must print solid (tone 1). |\n| Duration / beats | ✅ | Add pages; keep cuts on the 8th grid and the iris centred on the hero. |\n| 16:9 | ⚠️ re-layout | Tag top-left, card bottom-left third, numeral left, subject right; the safe area changes. |\n| Smooth motion (ones) | ❌ breaks the style | The print shimmer depends on twos + boil variants. |\n| **Essential** | , | Printed plates + overprint model; knockout vs overprint logic; misregistration; on twos; zine furniture; iris cuts. |\n\n## Accessibility\nThe darkest caption ink (olive-black on paper) is about 9:1; teal on paper about 3.8:1, so keep teal text ≥ 34 px and bold for tags. The boil shimmer is subtle (no flashing). Captions are restated in plain text and held ≥ 1.6 s.\n\n## Provenance\nStyle rules from the Animate `riso` seed (cth9191/animate, MIT, rev 7e5eb56). The ID and the measured parameters (inks, angles, misregistration, iris radii pattern) are preserved. This implementation, the subject and all assets are original. Fonts: Anton and Space Mono (SIL OFL 1.1).", "review": { "technical": { "state": "Supplied checks passed", "scope": "Source handoff records complete decode, stream dimensions and audio measurements. Browser playback is checked separately.", "artifactSha256": "2315cee88d494f613d92f9a8a5610f94d5db32147b979562f68b6190b567927d" }, "creative": { "state": "Not independently accepted", "scope": "not independently established", "artifactSha256": "2315cee88d494f613d92f9a8a5610f94d5db32147b979562f68b6190b567927d" }, "listening": { "state": "Not verified", "scope": "No perceptual listening pass is established by this library import.", "artifactSha256": "2315cee88d494f613d92f9a8a5610f94d5db32147b979562f68b6190b567927d" }, "reproduction": { "state": "Not tested", "scope": "Source is supplied. Cross-machine cold-start reproduction has not been established.", "artifactSha256": "2315cee88d494f613d92f9a8a5610f94d5db32147b979562f68b6190b567927d" } }, "detailUrl": "https://library.jkylehobson.chatgpt.site/video-library/#family=riso&example=claude-cloud", "processUrl": "/video-library/process.html?family=riso&example=claude-cloud", "downloads": { "prompt": { "available": true, "url": "/video-library/prompts/riso--claude-cloud.txt", "sha256": "486207eb6920d6aa2ff7276672612fd5cc40da205224a31f69748bfb2871ae4b", "bytes": 1992, "label": "Reusable, example-specific instructions" }, "video": { "name": "riso--claude-cloud.mp4", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/riso--claude-cloud.mp4", "bytes": 18000664, "sha256": "2315cee88d494f613d92f9a8a5610f94d5db32147b979562f68b6190b567927d", "available": true, "label": "17.2 MB" }, "source": { "name": "riso--claude-cloud--source.zip", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/riso--claude-cloud--source.zip", "bytes": 21308552, "sha256": "3fe29bc36c05194ea129fa7b1baf3df8ab5644a0c926ab9a137511b97819c693", "available": true, "label": "20.3 MB", "contents": [ "editable source", "variant guidance", "source assets", "audio inputs", "dependency declarations", "file manifest" ], "includedFiles": 60, "includedFilePaths": [ "CASE_STUDY.md", "RUN.md", "SKILL.md", "STYLE.md", "THIRD-PARTY-NOTICES/animate-MIT.txt", "assets/components/caption-card.png", "assets/components/iris-ring.png", "assets/components/seed-mascot.png", "assets/components/tag-slip.png", "assets/layers/t2.80/01_plate-teal.png", "assets/layers/t2.80/02_plate-pink.png", "assets/layers/t2.80/03_plate-yellow.png", "assets/layers/t6.80/01_plate-teal.png", "assets/layers/t6.80/02_plate-pink.png", "assets/layers/t6.80/03_plate-yellow.png", "assets/layers/t8.70/01_plate-teal.png", "assets/layers/t8.70/02_plate-pink.png", "assets/layers/t8.70/03_plate-yellow.png", "assets/paths/root.json", "assets/paths/root.svg", "assets/paths/rootletA.json", "assets/paths/rootletA.svg", "assets/paths/rootletB.json", "assets/paths/rootletB.svg", "assets/textures/paper.png", "audio/cues.json", "audio/mix.flac", "audio/stems/drums.flac", "audio/stems/music.flac", "audio/stems/sfx.flac", "engine/audio.mjs", "engine/audio/dsp.js", "engine/audio/instruments.js", "engine/audio/sfx.js", "engine/browser.mjs", "engine/export.mjs", "engine/finish.mjs", "engine/lib/draw.js", "engine/lib/util.js", "engine/page.html", "engine/render.mjs", "engine/runtime.js", "engine/server.mjs", "film/FILM_DELIVERED_SEPARATELY.txt", "film/contact_sheet.jpg", "film/spectrogram.png", "film/stills/01_1.00s.jpg", "film/stills/02_2.80s.jpg", "film/stills/03_4.60s.jpg", "film/stills/04_6.80s.jpg", "film/stills/05_7.60s.jpg", "film/stills/06_8.70s.jpg", "overview/encoded-contact-sheet.jpg", "package.json", "qa.json", "spec.json", "styles/riso/scene.js", "styles/riso/score.js", "styles/riso/timeline.js", "BUNDLE-GUIDE.md" ], "externalPrerequisites": { "runtime": [ "Node.js", "Chromium or Chrome", "FFmpeg and ffprobe" ], "packageDependencies": { "three": "0.170.0", "@fontsource/fraunces": "^5.1.0", "@fontsource/dm-sans": "^5.1.0", "@fontsource/inter": "^5.1.0", "@fontsource/space-grotesk": "^5.1.0", "@fontsource/ibm-plex-mono": "^5.1.0", "@fontsource/jetbrains-mono": "^5.1.0", "@fontsource/playfair-display": "^5.1.0", "@fontsource/bebas-neue": "^5.1.0", "@fontsource/archivo-black": "^5.1.0", "@fontsource/caveat": "^5.1.0", "@fontsource/press-start-2p": "^5.1.0", "@fontsource/instrument-serif": "^5.1.0", "@fontsource/syne": "^5.1.0", "@fontsource/permanent-marker": "^5.1.0", "@fontsource/vt323": "^5.1.0", "@fontsource/dm-serif-display": "^5.1.0", "@fontsource/anton": "^5.1.0", "@fontsource/nunito": "^5.1.0", "@fontsource/bangers": "^5.1.0", "@fontsource/space-mono": "^5.1.0", "playwright": "1.56.1" }, "lockfileIncluded": false, "coldStart": false }, "license": { "summary": "User-directed publication of supplied authored source; preserve listed third-party notices; no new license granted here.", "includedNoticePaths": [ "THIRD-PARTY-NOTICES/animate-MIT.txt" ], "newLicenseGranted": false } }, "bundle": { "name": "riso--claude-cloud--full.zip", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/riso--claude-cloud--full.zip", "bytes": 39589670, "sha256": "e1e1e30af62d3e86e5597f3daffc286808158807d62ad542b9e977a36f72c30c", "available": true, "label": "37.8 MB", "contents": [ "selected master", "editable source", "variant guidance", "source assets", "audio inputs", "dependency declarations", "file manifest", "designed cover", "starter prompt" ], "includedFiles": 63, "includedFilePaths": [ "CASE_STUDY.md", "RUN.md", "SKILL.md", "STYLE.md", "THIRD-PARTY-NOTICES/animate-MIT.txt", "assets/components/caption-card.png", "assets/components/iris-ring.png", "assets/components/seed-mascot.png", "assets/components/tag-slip.png", "assets/layers/t2.80/01_plate-teal.png", "assets/layers/t2.80/02_plate-pink.png", "assets/layers/t2.80/03_plate-yellow.png", "assets/layers/t6.80/01_plate-teal.png", "assets/layers/t6.80/02_plate-pink.png", "assets/layers/t6.80/03_plate-yellow.png", "assets/layers/t8.70/01_plate-teal.png", "assets/layers/t8.70/02_plate-pink.png", "assets/layers/t8.70/03_plate-yellow.png", "assets/paths/root.json", "assets/paths/root.svg", "assets/paths/rootletA.json", "assets/paths/rootletA.svg", "assets/paths/rootletB.json", "assets/paths/rootletB.svg", "assets/textures/paper.png", "audio/cues.json", "audio/mix.flac", "audio/stems/drums.flac", "audio/stems/music.flac", "audio/stems/sfx.flac", "display/cover.webp", "engine/audio.mjs", "engine/audio/dsp.js", "engine/audio/instruments.js", "engine/audio/sfx.js", "engine/browser.mjs", "engine/export.mjs", "engine/finish.mjs", "engine/lib/draw.js", "engine/lib/util.js", "engine/page.html", "engine/render.mjs", "engine/runtime.js", "engine/server.mjs", "film/FILM_DELIVERED_SEPARATELY.txt", "film/contact_sheet.jpg", "film/riso.mp4", "film/spectrogram.png", "film/stills/01_1.00s.jpg", "film/stills/02_2.80s.jpg", "film/stills/03_4.60s.jpg", "film/stills/04_6.80s.jpg", "film/stills/05_7.60s.jpg", "film/stills/06_8.70s.jpg", "overview/encoded-contact-sheet.jpg", "package.json", "qa.json", "spec.json", "starter-prompt.txt", "styles/riso/scene.js", "styles/riso/score.js", "styles/riso/timeline.js", "BUNDLE-GUIDE.md" ], "externalPrerequisites": { "runtime": [ "Node.js", "Chromium or Chrome", "FFmpeg and ffprobe" ], "packageDependencies": { "three": "0.170.0", "@fontsource/fraunces": "^5.1.0", "@fontsource/dm-sans": "^5.1.0", "@fontsource/inter": "^5.1.0", "@fontsource/space-grotesk": "^5.1.0", "@fontsource/ibm-plex-mono": "^5.1.0", "@fontsource/jetbrains-mono": "^5.1.0", "@fontsource/playfair-display": "^5.1.0", "@fontsource/bebas-neue": "^5.1.0", "@fontsource/archivo-black": "^5.1.0", "@fontsource/caveat": "^5.1.0", "@fontsource/press-start-2p": "^5.1.0", "@fontsource/instrument-serif": "^5.1.0", "@fontsource/syne": "^5.1.0", "@fontsource/permanent-marker": "^5.1.0", "@fontsource/vt323": "^5.1.0", "@fontsource/dm-serif-display": "^5.1.0", "@fontsource/anton": "^5.1.0", "@fontsource/nunito": "^5.1.0", "@fontsource/bangers": "^5.1.0", "@fontsource/space-mono": "^5.1.0", "playwright": "1.56.1" }, "lockfileIncluded": false, "coldStart": false }, "license": { "summary": "User-directed publication of supplied authored source; preserve listed third-party notices; no new license granted here.", "includedNoticePaths": [ "THIRD-PARTY-NOTICES/animate-MIT.txt" ], "newLicenseGranted": false } } }, "cadenceNote": "Encoded fps describes the file. Scene evaluation and held actor poses depend on this source recipe.", "starterPrompt": "Create a {9}-second {1080×1920} risograph-style video about {subject}. Nothing is painted, everything is printed: draw each frame as three grey plates for {teal / fluorescent pink / yellow}, screen them at 15° / 75° / 45° (10.8 px pitch, round dots, paper holes above 50 %), overprint them multiplicatively on cream paper, misregister pink (+4, −3) and yellow (−3, +4), and drop ≈ 0.3 % specks. Fills knock out, lines overprint; darks are three-ink overprints, highlights are paper knockouts. Animate on twos with a 3-variant boil. Structure it as zine pages: a tag slip top-left, a caption card at the bottom typed on in a heavy condensed face (Anton), a giant screened numeral behind the subject, and a mascot hero. One framing per beat; cut with a rough teal iris centred on the hero. Score: toy piano + plucked bass + dusty drums; a \"ka-chunk\" print sound on every cut. Avoid: black or white ink, gradients that aren't screened, camera moves inside a beat, small text, a grain filter.\n\nSelected example: Seed to Seedling\nFamily: riso\nVariant: claude-cloud\nTypography: Anton, Space Mono\nProduction: canvas-2d\nExact reference master SHA-256: 2315cee88d494f613d92f9a8a5610f94d5db32147b979562f68b6190b567927d\n\nRead the selected STYLE.md, SKILL.md and reproduction instructions before adapting. Keep the declared renderer and source closure; do not assume another family variant has interchangeable parameters. Preserve exact font or custom glyph sources, color roles, spatial continuity and readable text. Record encoded frame rate, scene evaluation and held poses separately. Review the changed render visually and listen to the encoded audio before claiming those checks passed. Existing approval applies only to its recorded artifact.\n\nSuccess check: the adapted story is clear; key type remains readable in motion; the source rebuilds with its declared inputs; all media and review records identify the exact output. State any untested reproduction, listening or rights limits.", "downloadNote": "Downloads match this selected example. The full bundle includes its source, original video, cover and starter prompt. Source packages include artwork, audio inputs and dependency declarations. Requires Node.js, Chromium or Chrome, FFmpeg and ffprobe. Follow the included run guide for package installation and reproduction limits.", "model": "Opus 5.5", "reasoningEffort": "Extra" } ], "relatedMethodIds": [ "riso" ] }, { "id": "silhouette-shadow-play", "slug": "silhouette-shadow-play", "title": "Silhouette Shadow Play", "premise": "Cutout forms, warm backlight and changing shadow depth create the feeling of a small puppet theatre.", "summary": "Cutout forms, warm backlight and changing shadow depth create the feeling of a small puppet theatre.", "category": "Craft / theatrical", "defaultExampleId": "claude-cloud", "facets": { "material": [ "2d", "silhouette", "backlight", "paper-screen", "cutwork", "depth-of-field", "rods-and-strings", "warm-light", "storybook" ], "producer": [ "Claude Cloud", "Local Claude" ], "format": [ "Portrait" ], "motion": [], "useCase": [] }, "examples": [ { "id": "claude-cloud", "title": "Seed to Seedling", "producer": "Claude Cloud", "producerEvidence": "The displayed model and reasoning label identify this production lane. Exact runtime model ID and per-film cost are not established by the source packet.", "relationship": "Original family example", "format": "Portrait", "productionMethod": "canvas-2d", "master": { "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/silhouette-shadow-play--claude-cloud.mp4", "sha256": "948796b4c88e5326398f8d02752aa948009b3e45e3a78559d7d58981779ca656", "bytes": 6351984, "mimeType": "video/mp4", "width": 1080, "height": 1920, "duration": 11.0, "encodedFps": 60 }, "poster": { "url": "/video-library/media/silhouette-shadow-play--claude-cloud/cover.webp", "sha256": "e5ee8858fc3bcaa3f8da29c6b879dc758fa6cadc37fcd654abb8e0c8e3259f5d", "sourceMasterSha256": "948796b4c88e5326398f8d02752aa948009b3e45e3a78559d7d58981779ca656", "timeSeconds": 9.35, "rationale": "Late story beat selected to show the developed subject and visual system; extracted from this exact master." }, "previewVideo": { "url": "/video-library/media/silhouette-shadow-play--claude-cloud/preview.mp4", "sha256": "2cf7001a59d8076d8f620cc97f0aa8ffac2455b260df0be5fcb7f1956df0ee22", "sourceMasterSha256": "948796b4c88e5326398f8d02752aa948009b3e45e3a78559d7d58981779ca656", "width": 540, "height": 960, "label": "Playback preview · 540 px wide · full master in Download finished video" }, "gallery": [ { "id": "overview", "role": "encoded-contact-sheet", "label": "Scenes from the finished render · not a planning storyboard", "url": "/video-library/media/silhouette-shadow-play--claude-cloud/overview.webp", "sourceMasterSha256": "948796b4c88e5326398f8d02752aa948009b3e45e3a78559d7d58981779ca656" }, { "id": "scene-1", "role": "encoded-frame", "label": "Finished-film frame · 2.2 seconds", "url": "/video-library/media/silhouette-shadow-play--claude-cloud/scene-1.webp", "sourceMasterSha256": "948796b4c88e5326398f8d02752aa948009b3e45e3a78559d7d58981779ca656", "timeSeconds": 2.2 }, { "id": "scene-2", "role": "encoded-frame", "label": "Finished-film frame · 5.5 seconds", "url": "/video-library/media/silhouette-shadow-play--claude-cloud/scene-2.webp", "sourceMasterSha256": "948796b4c88e5326398f8d02752aa948009b3e45e3a78559d7d58981779ca656", "timeSeconds": 5.5 }, { "id": "scene-3", "role": "encoded-frame", "label": "Finished-film frame · 8.8 seconds", "url": "/video-library/media/silhouette-shadow-play--claude-cloud/scene-3.webp", "sourceMasterSha256": "948796b4c88e5326398f8d02752aa948009b3e45e3a78559d7d58981779ca656", "timeSeconds": 8.8 } ], "typography": [ "Playfair Display 900", "DM Serif Display 400" ], "palette": { "glowIn": "#ffdca3", "glowMid": "#f2a24f", "glowOut": "#5e240a", "ink": "#170b05", "leak": "rgba(255,214,150,0.22)" }, "usageGuidance": "Change the subject, copy and timing for your audience. Retain the selected example’s visual rules and recheck the entire reading interval after changes.", "styleRules": "---\nid: silhouette-shadow-play\nname: Silhouette Shadow Play (Seed to Seedling: a paper-screen puppet show)\nfamily: Craft / theatrical\naliases: [shadow puppets, shadow theatre, silhouette animation, paper screen, cut-out silhouette, lantern show, cutwork]\ntags: [2d, silhouette, backlight, paper-screen, cutwork, depth-of-field, rods-and-strings, warm-light, storybook]\nkind: visual-style\nroute: canvas-2d (CPU canvas; baked silhouette puppets with cutwork, projected through a lamp depth model onto a glowing paper screen)\nreadiness: { research: catalog-candidate, rights: original-work, referenceImages: own-render, code: built, render: rendered-and-measured }\n---\n\n# Silhouette Shadow Play (Seed to Seedling: a paper-screen puppet show)\n\nA paper screen warms up as a lamp comes on behind it. A seed puppet glides in from beside the lamp: huge, soft and faint at first, then smaller, sharper and darker as it reaches the screen, where it lands with a little bounce.\n- A hanging card swings in (\"WATER\"). A cloud on a rod brings rain; the seed swells in three steps and cracks.\n- \"ROOT\": the root grows down as glowing slits cut into the black earth, branch by branch.\n- \"LIGHT\": a stem and two cut-lace leaves rise; a sun descends on its rod and the whole screen brightens.\n- The sun leaves, and a title card glides from the lamp to the screen on two strings: **FROM SEED / TO SEEDLING**, its letters cut out so the light shines through them.\n\n**The one rule:** *distance is the camera.* There are no cuts, zooms or pans. Every change of size, focus and emphasis comes from moving a puppet between the lamp and the screen. Light only reaches the viewer through holes in the ink.\n\n## Creative direction\n- **Audience:** children's and family brands, cultural institutions, picture-book and theatre promotion, charities telling one human story, slow brand films.\n- **Purpose:** tell a simple story with warmth and ceremony. The handmade stage makes even an abstract process feel like a told tale.\n- **Feeling:** intimate, warm and hushed: a story told by lamplight.\n- **Central visual idea:** *light through cutwork.* Ink is mass, holes are information. Every readable detail (seed perforations, leaf veins, letters, the root) is a hole the light passes through.\n- **How the parts work together:**\n - *Composition:* one fixed stage: the screen above, a black earth band below, puppets entering on rods and strings.\n - *Colour:* only two values: the lamp's glow (amber gradient) and ink. The sun's arrival is the one change of light.\n - *Type:* serif letters cut out of cards, never printed on the screen.\n - *Motion:* rod glides with a puppeteer's tremor, pendulum swings and depth moves.\n - *Sound:* plucked strings, a frame drum and stage foley.\n\n## Fit\n- **Best for:** origin stories, fables, mission films, seasonal campaigns, museum and theatre trailers, any story told in a few big silhouettes.\n- **Avoid when:** the subject needs colour, product detail or data; the message is fast or technical; there are many characters at once (silhouettes merge).\n- **Cultural care:** shadow theatre is a living art in many places, including Indonesia and Malaysia (wayang kulit), China (piying), Türkiye (Karagöz), India (tholpavakoothu) and Greece (Karagiozis). This style borrows only the general mechanics (lamp, screen, rods, cutwork). It copies no tradition's characters, ornament or music. If a brief asks for a specific tradition, work with practitioners from it rather than imitating it.\n- **Cost:** cheap. Canvas 2D, about 1 minute for stills and a few minutes for the film.\n\n## Visual fingerprint\n| Element | Rule |\n|---|---|\n| Screen | Radial glow centred on the lamp's projection point (540, 700): `#ffdca3` → `#f2a24f` (45 %) → `#5e240a`; warm paper fibre multiplied over it; vignette `rgba(20,8,2,0.7)` at the edges and a 28 px ink frame. |\n| Lamp | Brightness ramps in over 0-0.7 s (smoothstep, by darkening the screen, so there is no flash); then a ±2.5 % noise flicker. |\n| Ink | `#170b05` for every puppet, rod and the earth. |\n| Depth model | Distance `d` from the screen (0 = touching, 1 = beside the lamp). Scale `m = 1 + 1.2·d` about the lamp point; blur `0.6 + 22·d` px; opacity `0.96 − 0.5·d`. Size, softness and density always change together. |\n| Puppets | Baked silhouettes with cutwork made by `destination-out`: the seed (230 px bean, perforated inner contour of 9 px dots every 17 px, a hilum slit, a vertical jagged split when cracked); the cloud (dots + 3 swirl slits); drops; the sun (12 cut rays, a 24-dot ring, alternating outer rays); leaves with a cut midrib and veins. |\n| Rods + strings | Rods 5-6 px and strings 2 px, drawn through the same depth model, so a rod near the lamp is thick and soft. The cards hang on 2 strings and swing as pendulums. |\n| Earth | An ink band from y ≈ 1265 (two sine swells) with 70 grass blades (none within 140 px of the seed). The root is cut **into** it as slits (7 → 3 px; rootlets 4 → 2 px) with a blurred warm leak `rgba(255,214,150,0.22)` added on top. The note is cut in the same way, with its own leak (`rgba(255,200,140,0.42)` sharp + `0.25` blurred) so it stays legible in the dark band. |\n| Curves | The stem, root and leak are stroked as quadratic curves through segment midpoints (`curve()`), never as polylines. Kinked polylines read as lightning. |\n| Sun light | While the sun arrives, a radial `#fff2c8` glow at 22 % is added around it (6.8-7.9 s). |\n\n### Typography (exact)\n| Role | Family / weight | Size | Tracking | Notes |\n|---|---|---|---|---|\n| Title (cut out of the card) | Playfair Display 900 | 108 px | 4 px | Two lines, baselines 200 / 320 on a 1000 × 430 card; a cut inner frame and two leaf flourishes |\n| Beat cards (cut out) | DM Serif Display 400 | 64 px | 6 px | WATER / ROOT / LIGHT on a 320 × 110 scalloped card |\n| Note (cut into the earth) | DM Serif Display 400 | 28 px | 3 px | \"illustration · time-compressed\" at (540, 1852) |\n\nLetters are never printed; they are holes, so they always carry the lamp colour behind them.\n\n## Temporal fingerprint\n| Element | Rule |\n|---|---|\n| Pace | 80 BPM (beat 0.75 s, 3 s bars), storybook calm. |\n| Seed | Enters 0.5-1.55 s from (260, 520) at d 0.95 to (540, 1240) at d 0 with a lead tilt; landing bounce `8·e^(−5u)·|sin 9u|`; swells 8 % at 2.55 / 2.95 / 3.35 s with a damped wobble; cracks at 3.85 s. |\n| Cards | WATER 1.6-3.6 s, ROOT 3.7-5.75, LIGHT 5.85-8.0: drop in over 0.4 s, swing `0.22·e^(−3u)·sin 7u`, lift out over 0.35 s. |\n| Rain | The cloud glides in 1.7-2.4 s and out 3.45-4.1 at d 0.22; 8 drops from 2.15 s, one every 0.1375 s, each falling 0.5 s (`dropStart()` in `timeline.js`). |\n| Root | Main root 3.95-5.6 s (easeOutCubic); rootlets at 4.4 / 4.7 / 5.0 / 5.25, 0.7 s each. |\n| Light | Stem 5.95-6.95 s; leaves open 6.85-7.4 s (from 1.45 to 0.42 rad); the sun descends 6.5-7.6 s, turns at 0.15 rad/s, and leaves 8.0-8.55 s. |\n| Title | Glides 8.15-9.3 s from d 0.85 to d 0.03; the note is cut in at 9.7 s; hold until 11.0 s. |\n| Puppeteer hand | Smooth-noise tremor ±1.5 px and ±0.01 rad on every rod-held puppet, so nothing is ever perfectly still. |\n\n## How the composition develops\nThe story moves from **dim and far** to **bright and near**. The seed arrives out of focus from the lamp and becomes crisp on the screen. Underground, light breaks into the black earth through the root. Above ground, the sun's arrival lifts the whole screen. Finally the title travels the same lamp-to-screen path the seed did, so the ending rhymes with the opening.\n\n## Individual assets\n| Asset | File | Source |\n|---|---|---|\n| Seed puppet (plain; cracked in the source) | `assets/components/seed-puppet.png` | `bakeSeed()` |\n| Cloud, sun and title-card puppets | `assets/components/cloud-puppet.png`, `sun-puppet.png`, `title-card.png` | `bakeCloud()`, `bakeSun()`, `bakeTitle()` |\n| Beat card | `assets/components/beat-card-water.png` | `bakeCard()` |\n| Depth demo (one puppet at d 0 / 0.4 / 0.9) | `assets/components/depth-demo.png` | `drawComponent('depth-demo')` |\n| Paper fibre, earth silhouette | `assets/textures/` | `bakePaper()`, `bakeGround()` |\n| Layers | `static/01_screen` (the lit screen, exported once at 10.8 s with the sun light); per time `02_puppets`, `03_earth` at 1.2, 2.8, 4.9, 7.6 and 10.8 s | `drawLayer()` |\n| Root and stem paths | `assets/paths/` | `ROOT`, `ROOTLETS`, `STEM` in `timeline.js` |\n\nPuppet PNGs are alpha masks: opaque = ink, transparent = light. To use them for real, laser-cut or hand-cut them from black card; at A4 size, keeping holes about 4 mm or larger and bridges about 3 mm or wider makes them practical to cut (a guideline, not a tested spec).\n\n**To make it live:** a sheet of baking paper in a frame, one warm LED behind it, puppets on bamboo skewers. Film locked-off at 60 fps; move puppets toward the lamp for the \"far\" shots.\n\n## Sound\n**Score:** a storybook theatre cue at 80 BPM in G major: G · Em · C(maj7♯11) → D · G. Plucked strings (an 8th-note arpeggio), a bowed drone on G2 and D3, a soft pad, and a felt frame drum on a slow heartbeat (beat 1, plus a soft and-of-3). It deliberately avoids any specific puppet tradition's ensemble.\n\n**Stage foley:**\n| Event | Sound |\n|---|---|\n| Lamp on | warm noise swell |\n| A puppet travels on its rod | rod whoosh (band noise, panned with the puppet) |\n| A puppet reaches the screen | wooden clack + tap (and a smaller one on the seed's bounce) |\n| Beat cards | paper flutter + one bell (B5 · G5 · D6), a flutter as they leave |\n| Rain | a rain stick (110 seed-grain ticks that thin out), one plip per drop landing (shared `dropStart()`) |\n| Swell steps | three low plucks, B2 · C3 · D3 |\n| Crack | a dry double snap + rustle |\n| Root | an earth rumble, then one falling pluck per rootlet (E3 · D3 · B2 · A2) |\n| Stem | an 8-note rising run, eased like the stem |\n| Leaves, sun | two flutters + bells; a bell bloom G5 → F♯6 as the light arrives |\n| Title lands | a string glide, then a strummed G chord + frame drum + bells |\n\n**Stems:** `music`, `drums` and `foley`. `cues.json` holds every event time, including the drop landings. The mix targets −16 LUFS.\n\n## Reusable prompt\n> Create an {11}-second {1080×1920} shadow-play video of {story}. A warm paper screen lit from behind by one lamp (amber radial glow, paper fibre, vignette, ink frame); black cut-out puppets with lace cutwork on visible rods and strings; distance from the screen controls size, blur and opacity together (near the lamp = big, soft, faint; at the screen = crisp). Story beats on hanging serif cards that swing like pendulums. The ground is a black silhouette band; growth below it appears as glowing slits cut into the earth. The title is a card with cut-out letters that glides from the lamp to the screen. No cuts or camera moves. Sound: plucked strings, drone, frame drum, wooden clacks, paper flutters, a rain stick.\n\n## Adaptation guidance\n| Change | Safe? | Notes |\n|---|---|---|\n| Story / puppets | ✅ | Bake new silhouettes with `cut()`; keep holes ≥ 6 px at screen size and keep outlines legible in profile. |\n| Palette | ✅ | Any warm or cool lamp; keep exactly two values (glow + ink). A cool blue lamp reads as moonlight or night. |\n| Depth moves | ✅ | Use `shadow(P, x, y, d)` for every move toward or away from the lamp; never scale or blur separately. |\n| Coloured puppets | ⚠️ | Translucent colour gels in the cutwork can work; keep them small, or the silhouette logic breaks. |\n| Text on the screen | ❌ | Print nothing on the screen; cut letters into a card or the earth. |\n| Faces and features | ⚠️ | Check every cutwork pattern for accidental faces (two marks above a line read as eyes and a mouth). |\n| 16:9 | ✅ | Widen the stage, keep the lamp centred and the earth band at about 66 % height. |\n| **Essential** | , | One lamp and one screen, ink + glow only, the depth model, cutwork for detail, rods and strings in view, no camera moves. |\n\n## Accessibility\n- **Contrast (measured on the rendered film):** title letters vs card 9.6:1 (line 1) and 12.7:1 (line 2); beat-card letters vs card 5.2:1; the cut-in note 6.3:1 after the light-leak fix (it was 2.9:1; see `CASE_STUDY.md`).\n- **Motion:** the lamp ramps from dark over 0.7 s (no flash); the sun brightens the screen by ≤ 22 % over 1.1 s; no strobing.\n- **Reading:** each beat card holds ≥ 2 s; the title holds 1.7 s after landing.\n\n## Provenance\n- **Source:** from the library's style catalogue. No Animate seed was used.\n- **Originality:** all puppets, cutwork, code and audio are original (2026-10-08). The style takes the general mechanics of shadow theatre and copies no specific tradition's designs.\n- **Fonts:** Playfair Display, DM Serif Display (SIL OFL).", "review": { "technical": { "state": "Supplied checks passed", "scope": "Source handoff records complete decode, stream dimensions and audio measurements. Browser playback is checked separately.", "artifactSha256": "948796b4c88e5326398f8d02752aa948009b3e45e3a78559d7d58981779ca656" }, "creative": { "state": "Not independently accepted", "scope": "not independently established", "artifactSha256": "948796b4c88e5326398f8d02752aa948009b3e45e3a78559d7d58981779ca656" }, "listening": { "state": "Not verified", "scope": "No perceptual listening pass is established by this library import.", "artifactSha256": "948796b4c88e5326398f8d02752aa948009b3e45e3a78559d7d58981779ca656" }, "reproduction": { "state": "Not tested", "scope": "Source is supplied. Cross-machine cold-start reproduction has not been established.", "artifactSha256": "948796b4c88e5326398f8d02752aa948009b3e45e3a78559d7d58981779ca656" } }, "detailUrl": "https://library.jkylehobson.chatgpt.site/video-library/#family=silhouette-shadow-play&example=claude-cloud", "processUrl": "/video-library/process.html?family=silhouette-shadow-play&example=claude-cloud", "downloads": { "prompt": { "available": true, "url": "/video-library/prompts/silhouette-shadow-play--claude-cloud.txt", "sha256": "edb1d75c1004c73be78f599fe92399bc9c2eac91b4e46ac93e8dd9efbc447dce", "bytes": 1755, "label": "Reusable, example-specific instructions" }, "video": { "name": "silhouette-shadow-play--claude-cloud.mp4", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/silhouette-shadow-play--claude-cloud.mp4", "bytes": 6351984, "sha256": "948796b4c88e5326398f8d02752aa948009b3e45e3a78559d7d58981779ca656", "available": true, "label": "6.1 MB" }, "source": { "name": "silhouette-shadow-play--claude-cloud--source.zip", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/silhouette-shadow-play--claude-cloud--source.zip", "bytes": 16225448, "sha256": "01aaeb25333859f45c9b57d8203a35e73998896fc805448a38087d28daa85918", "available": true, "label": "15.5 MB", "contents": [ "editable source", "variant guidance", "source assets", "audio inputs", "dependency declarations", "file manifest" ], "includedFiles": 62, "includedFilePaths": [ "CASE_STUDY.md", "RUN.md", "SKILL.md", "STYLE.md", "assets/components/beat-card-water.png", "assets/components/cloud-puppet.png", "assets/components/depth-demo.png", "assets/components/seed-puppet.png", "assets/components/sun-puppet.png", "assets/components/title-card.png", "assets/layers/static/01_screen.png", "assets/layers/t1.20/02_puppets.png", "assets/layers/t1.20/03_earth.png", "assets/layers/t10.80/02_puppets.png", "assets/layers/t10.80/03_earth.png", "assets/layers/t2.80/02_puppets.png", "assets/layers/t2.80/03_earth.png", "assets/layers/t4.90/02_puppets.png", "assets/layers/t4.90/03_earth.png", "assets/layers/t7.60/02_puppets.png", "assets/layers/t7.60/03_earth.png", "assets/paths/root.json", "assets/paths/root.svg", "assets/paths/stem.json", "assets/paths/stem.svg", "assets/textures/earth-silhouette.png", "assets/textures/paper-fibre.png", "audio/cues.json", "audio/mix.flac", "audio/stems/drums.flac", "audio/stems/foley.flac", "audio/stems/music.flac", "engine/audio.mjs", "engine/audio/dsp.js", "engine/audio/instruments.js", "engine/audio/sfx.js", "engine/browser.mjs", "engine/export.mjs", "engine/finish.mjs", "engine/lib/draw.js", "engine/lib/util.js", "engine/library-index.mjs", "engine/page.html", "engine/render.mjs", "engine/runtime.js", "engine/server.mjs", "film/contact_sheet.jpg", "film/spectrogram.png", "film/stills/01_1.20s.jpg", "film/stills/02_2.80s.jpg", "film/stills/03_4.90s.jpg", "film/stills/04_7.60s.jpg", "film/stills/05_9.60s.jpg", "film/stills/06_10.80s.jpg", "overview/encoded-contact-sheet.jpg", "package.json", "qa.json", "spec.json", "styles/silhouette-shadow-play/scene.js", "styles/silhouette-shadow-play/score.js", "styles/silhouette-shadow-play/timeline.js", "BUNDLE-GUIDE.md" ], "externalPrerequisites": { "runtime": [ "Node.js", "Chromium or Chrome", "FFmpeg and ffprobe" ], "packageDependencies": { "@fontsource/anton": "^5.1.0", "@fontsource/archivo-black": "^5.1.0", "@fontsource/bangers": "^5.1.0", "@fontsource/bebas-neue": "^5.1.0", "@fontsource/caveat": "^5.1.0", "@fontsource/comic-neue": "^5.3.0", "@fontsource/courier-prime": "^5.3.0", "@fontsource/dm-sans": "^5.1.0", "@fontsource/dm-serif-display": "^5.1.0", "@fontsource/fraunces": "^5.1.0", "@fontsource/ibm-plex-mono": "^5.1.0", "@fontsource/instrument-serif": "^5.1.0", "@fontsource/inter": "^5.1.0", "@fontsource/jetbrains-mono": "^5.1.0", "@fontsource/jost": "^5.3.0", "@fontsource/kaushan-script": "^5.3.0", "@fontsource/nunito": "^5.1.0", "@fontsource/permanent-marker": "^5.1.0", "@fontsource/playfair-display": "^5.1.0", "@fontsource/press-start-2p": "^5.1.0", "@fontsource/space-grotesk": "^5.1.0", "@fontsource/space-mono": "^5.1.0", "@fontsource/stix-two-text": "^5.3.0", "@fontsource/syne": "^5.1.0", "@fontsource/vt323": "^5.1.0", "three": "0.170.0", "playwright": "1.56.1" }, "lockfileIncluded": false, "coldStart": false }, "license": { "summary": "User-directed publication of supplied authored source; preserve listed third-party notices; no new license granted here.", "includedNoticePaths": [], "newLicenseGranted": false } }, "bundle": { "name": "silhouette-shadow-play--claude-cloud--full.zip", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/silhouette-shadow-play--claude-cloud--full.zip", "bytes": 22612599, "sha256": "3ee7886182ae8e03219329e0cf17a3611015aa010d4bcc24ccfedf1baaf31d62", "available": true, "label": "21.6 MB", "contents": [ "selected master", "editable source", "variant guidance", "source assets", "audio inputs", "dependency declarations", "file manifest", "designed cover", "starter prompt" ], "includedFiles": 65, "includedFilePaths": [ "CASE_STUDY.md", "RUN.md", "SKILL.md", "STYLE.md", "assets/components/beat-card-water.png", "assets/components/cloud-puppet.png", "assets/components/depth-demo.png", "assets/components/seed-puppet.png", "assets/components/sun-puppet.png", "assets/components/title-card.png", "assets/layers/static/01_screen.png", "assets/layers/t1.20/02_puppets.png", "assets/layers/t1.20/03_earth.png", "assets/layers/t10.80/02_puppets.png", "assets/layers/t10.80/03_earth.png", "assets/layers/t2.80/02_puppets.png", "assets/layers/t2.80/03_earth.png", "assets/layers/t4.90/02_puppets.png", "assets/layers/t4.90/03_earth.png", "assets/layers/t7.60/02_puppets.png", "assets/layers/t7.60/03_earth.png", "assets/paths/root.json", "assets/paths/root.svg", "assets/paths/stem.json", "assets/paths/stem.svg", "assets/textures/earth-silhouette.png", "assets/textures/paper-fibre.png", "audio/cues.json", "audio/mix.flac", "audio/stems/drums.flac", "audio/stems/foley.flac", "audio/stems/music.flac", "display/cover.webp", "engine/audio.mjs", "engine/audio/dsp.js", "engine/audio/instruments.js", "engine/audio/sfx.js", "engine/browser.mjs", "engine/export.mjs", "engine/finish.mjs", "engine/lib/draw.js", "engine/lib/util.js", "engine/library-index.mjs", "engine/page.html", "engine/render.mjs", "engine/runtime.js", "engine/server.mjs", "film/contact_sheet.jpg", "film/silhouette-shadow-play.mp4", "film/spectrogram.png", "film/stills/01_1.20s.jpg", "film/stills/02_2.80s.jpg", "film/stills/03_4.90s.jpg", "film/stills/04_7.60s.jpg", "film/stills/05_9.60s.jpg", "film/stills/06_10.80s.jpg", "overview/encoded-contact-sheet.jpg", "package.json", "qa.json", "spec.json", "starter-prompt.txt", "styles/silhouette-shadow-play/scene.js", "styles/silhouette-shadow-play/score.js", "styles/silhouette-shadow-play/timeline.js", "BUNDLE-GUIDE.md" ], "externalPrerequisites": { "runtime": [ "Node.js", "Chromium or Chrome", "FFmpeg and ffprobe" ], "packageDependencies": { "@fontsource/anton": "^5.1.0", "@fontsource/archivo-black": "^5.1.0", "@fontsource/bangers": "^5.1.0", "@fontsource/bebas-neue": "^5.1.0", "@fontsource/caveat": "^5.1.0", "@fontsource/comic-neue": "^5.3.0", "@fontsource/courier-prime": "^5.3.0", "@fontsource/dm-sans": "^5.1.0", "@fontsource/dm-serif-display": "^5.1.0", "@fontsource/fraunces": "^5.1.0", "@fontsource/ibm-plex-mono": "^5.1.0", "@fontsource/instrument-serif": "^5.1.0", "@fontsource/inter": "^5.1.0", "@fontsource/jetbrains-mono": "^5.1.0", "@fontsource/jost": "^5.3.0", "@fontsource/kaushan-script": "^5.3.0", "@fontsource/nunito": "^5.1.0", "@fontsource/permanent-marker": "^5.1.0", "@fontsource/playfair-display": "^5.1.0", "@fontsource/press-start-2p": "^5.1.0", "@fontsource/space-grotesk": "^5.1.0", "@fontsource/space-mono": "^5.1.0", "@fontsource/stix-two-text": "^5.3.0", "@fontsource/syne": "^5.1.0", "@fontsource/vt323": "^5.1.0", "three": "0.170.0", "playwright": "1.56.1" }, "lockfileIncluded": false, "coldStart": false }, "license": { "summary": "User-directed publication of supplied authored source; preserve listed third-party notices; no new license granted here.", "includedNoticePaths": [], "newLicenseGranted": false } } }, "cadenceNote": "Encoded fps describes the file. Scene evaluation and held actor poses depend on this source recipe.", "starterPrompt": "Create an {11}-second {1080×1920} shadow-play video of {story}. A warm paper screen lit from behind by one lamp (amber radial glow, paper fibre, vignette, ink frame); black cut-out puppets with lace cutwork on visible rods and strings; distance from the screen controls size, blur and opacity together (near the lamp = big, soft, faint; at the screen = crisp). Story beats on hanging serif cards that swing like pendulums. The ground is a black silhouette band; growth below it appears as glowing slits cut into the earth. The title is a card with cut-out letters that glides from the lamp to the screen. No cuts or camera moves. Sound: plucked strings, drone, frame drum, wooden clacks, paper flutters, a rain stick.\n\nSelected example: Seed to Seedling\nFamily: silhouette-shadow-play\nVariant: claude-cloud\nTypography: Playfair Display 900, DM Serif Display 400\nProduction: canvas-2d\nExact reference master SHA-256: 948796b4c88e5326398f8d02752aa948009b3e45e3a78559d7d58981779ca656\n\nRead the selected STYLE.md, SKILL.md and reproduction instructions before adapting. Keep the declared renderer and source closure; do not assume another family variant has interchangeable parameters. Preserve exact font or custom glyph sources, color roles, spatial continuity and readable text. Record encoded frame rate, scene evaluation and held poses separately. Review the changed render visually and listen to the encoded audio before claiming those checks passed. Existing approval applies only to its recorded artifact.\n\nSuccess check: the adapted story is clear; key type remains readable in motion; the source rebuilds with its declared inputs; all media and review records identify the exact output. State any untested reproduction, listening or rights limits.", "downloadNote": "Downloads match this selected example. The full bundle includes its source, original video, cover and starter prompt. Source packages include artwork, audio inputs and dependency declarations. Requires Node.js, Chromium or Chrome, FFmpeg and ffprobe. Follow the included run guide for package installation and reproduction limits.", "model": "Opus 5.5", "reasoningEffort": "Extra" }, { "id": "local-drawn-to-the-light", "title": "drawn to the light", "producer": "Local Claude", "producerEvidence": "Contributor attribution follows the supplied source record; no per-film cost is inferred.", "relationship": "related family; distinct construction and subject; parameters are not interchangeable", "format": "Portrait", "productionMethod": "Canvas 2D shadow projection", "master": { "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/silhouette-shadow-play--local-drawn-to-the-light.mp4", "sha256": "02e0b13fe5d9bf5ffd5b2e2df5a83ca8ae4a55a0270ed3a3cbca0868b029974e", "bytes": 15961968, "mimeType": "video/mp4", "width": 1080, "height": 1920, "duration": 12.0, "encodedFps": 60 }, "poster": { "url": "/video-library/media/silhouette-shadow-play--local-drawn-to-the-light/cover.webp", "sha256": "e987837fd7f068fd78e691e59352fb9af6c4a92653a98feca359b7649a483d59", "sourceMasterSha256": "02e0b13fe5d9bf5ffd5b2e2df5a83ca8ae4a55a0270ed3a3cbca0868b029974e", "timeSeconds": 10.2, "rationale": "Late story beat selected to show the developed subject and visual system; extracted from this exact master." }, "previewVideo": { "url": "/video-library/media/silhouette-shadow-play--local-drawn-to-the-light/preview.mp4", "sha256": "50f8e0d2da28a0f9a20b7884daa86fcc68ded3d20b12fc8af43e1ab1fcd5c4e8", "sourceMasterSha256": "02e0b13fe5d9bf5ffd5b2e2df5a83ca8ae4a55a0270ed3a3cbca0868b029974e", "width": 540, "height": 960, "label": "Playback preview · 540 px wide · full master in Download finished video" }, "gallery": [ { "id": "overview", "role": "encoded-contact-sheet", "label": "Scenes from the finished render · not a planning storyboard", "url": "/video-library/media/silhouette-shadow-play--local-drawn-to-the-light/overview.webp", "sourceMasterSha256": "02e0b13fe5d9bf5ffd5b2e2df5a83ca8ae4a55a0270ed3a3cbca0868b029974e" }, { "id": "scene-1", "role": "encoded-frame", "label": "Finished-film frame · 2.4 seconds", "url": "/video-library/media/silhouette-shadow-play--local-drawn-to-the-light/scene-1.webp", "sourceMasterSha256": "02e0b13fe5d9bf5ffd5b2e2df5a83ca8ae4a55a0270ed3a3cbca0868b029974e", "timeSeconds": 2.4 }, { "id": "scene-2", "role": "encoded-frame", "label": "Finished-film frame · 6 seconds", "url": "/video-library/media/silhouette-shadow-play--local-drawn-to-the-light/scene-2.webp", "sourceMasterSha256": "02e0b13fe5d9bf5ffd5b2e2df5a83ca8ae4a55a0270ed3a3cbca0868b029974e", "timeSeconds": 6.0 }, { "id": "scene-3", "role": "encoded-frame", "label": "Finished-film frame · 9.6 seconds", "url": "/video-library/media/silhouette-shadow-play--local-drawn-to-the-light/scene-3.webp", "sourceMasterSha256": "02e0b13fe5d9bf5ffd5b2e2df5a83ca8ae4a55a0270ed3a3cbca0868b029974e", "timeSeconds": 9.6 } ], "typography": [ "Custom faceted cut-paper letters · src/letters.js" ], "palette": null, "usageGuidance": "Change the subject, copy and timing for your audience. Retain the selected example’s visual rules and recheck the entire reading interval after changes.", "styleRules": "# \"drawn to the light\" , silhouette / shadow-play style contract\n\nWave id `silhouette-shadow-play`. Original subject. Status: in production (see `docs/production-log.md`); not accepted by Kyle.\n\n## Identity\n\nA backlit paper screen in a shadow theatre. A cut-paper moth with **stained-glass gel wings** flies between an oil lamp and the screen. **Depth is the camera:** pressed to the screen a cut-out is small and razor-sharp; near the lamp its shadow is enormous, soft and translucent. The title is cut paper pushed up on rods.\n\n## Physics (the style's grammar, `src/timeline.js` + `src/frame.js`)\n\n- Lamp D = 1000 px behind the screen, radius 16 px. A cut-out d px in front of the screen projects about the lamp with magnification **m = D/(D−d)** and penumbra **16·d/(D−d)** px. Each layer is rasterized at its projected size, box-blurred (3 passes) by its penumbra, and multiplied into an RGB transmittance.\n- Opaque card multiplies by 0; gels multiply by their colour (stained glass); lace holes are even-odd cut-outs.\n- The screen is seen from the audience side: lamp hotspot (radius 560 px, falloff power 1.6) × transmittance × washi paper texture + faint house light, then ACES and sRGB.\n\n## Story beats (frames @ 60 fps)\n\n| Frames | Beat | Picture | Sound |\n|---|---|---|---|\n| 0-84 | Something at the lamp | moth at d = 930: a giant soft colour wash with a dark body column, wings pulsing at 6.5 Hz | flame hiss and crackle; huge, low, soft wing whoomps; F/C glass drone |\n| 84-246 | Coming into focus | spiral flight from lamp to screen; the shadow shrinks and sharpens until the lace veins resolve | flaps shrink to crisp paper flutters; rising glass line |\n| 246-384 | Perch | moth on the vine leaf (d = 0), wings breathe twice; camera pushes in 15 % | paper tap; held glass A |\n| 384-432 | Dawn | the lamp is lifted 170 px; distant grasses slide (parallax), antennae twitch | glass-chimney clink, creak, glass tone |\n| 432-552 | Toward the light | takeoff; the moth grows huge and soft as it returns to the lamp | takeoff rush; growing whoomps |\n| 528-600 | Title | words pushed up on rods, settle with a puppeteer's bob | rod slide; two wooden knocks |\n| 552-720 | Bloom | the lamp swells (×1.45, hotspot 860 px); the moth's wings become a gold/teal wash; title held ≥ 2 s | bowed-glass Fmaj7 bloom |\n\n## Typography\n\n- **Custom cut-paper letters, no font** (`src/letters.js`). Monoline skeletons (x-height 100, ascender −162, descender +62), 17-unit strokes, **faceted bowls (9-14 straight cuts)**, butt-jointed facets with octagonal join plates, square caps only at stroke ends, hand-cut vertex jitter ±1.2 units and per-letter tilt ±1.4°. The dot of the i is a 7-sided cut.\n- `drawn` scale 1.42 (x-height ≈142 px) at baseline y 1205; `to the light` scale 0.82 (≈82 px) at y 1352, centred. Black card on rods, pressed to the screen (d = 2).\n\n## Palette (gel transmittance; lamp light (1, .6, .27))\n\namber `1 .5 .08` · ember `.92 .22 .05` · rose `.86 .14 .3` · teal `.04 .56 .5` · gold `1 .76 .16` · card `0 0 0`. Paper ≈ warm cream at the hotspot falling to umber/black at the edges.\n\n## Set\n\nFront reeds and cattails (d = 0), back reeds (d = 150), far grasses (d = 420; big, soft, they slide when the lamp moves), a curling vine with lace-veined leaves from top left (perch at 612, 742). Visible puppet rods are part of the style.\n\n## Motion grammar\n\nLive puppetry, not stop motion: everything is evaluated at native 60 fps. Wings flap 6.5-7.5 Hz in flight, breathe 0.55 Hz at rest, 1.6 Hz in the final hover. The lamp flickers (7, 11, 18 Hz components) and jitters ±1.5 px, so distant shadows quiver while pressed ones stay still.\n\n## Replaceable / breaks\n\n- **Replaceable:** creature (any cut-out with gel cells), copy (add skeletons to `GLYPHS`), gel palette, lamp path, depth curve.\n- **Breaks the style:**\n - uniform blur not tied to depth\n - shadows that don't scale about the lamp\n - grey (lifted) blacks\n - a sine-banded paper texture (found and removed)\n - glossy or 3D shading on the cut-outs\n - a title placed over the darkest part of the wash", "review": { "technical": { "state": "Supplied checks passed", "scope": "Source handoff records complete decode, stream dimensions and audio measurements. Browser playback is checked separately.", "artifactSha256": "02e0b13fe5d9bf5ffd5b2e2df5a83ca8ae4a55a0270ed3a3cbca0868b029974e" }, "creative": { "state": "Not independently accepted", "scope": "see historical variant review; not newly accepted", "artifactSha256": "02e0b13fe5d9bf5ffd5b2e2df5a83ca8ae4a55a0270ed3a3cbca0868b029974e" }, "listening": { "state": "Not verified", "scope": "No perceptual listening pass is established by this library import.", "artifactSha256": "02e0b13fe5d9bf5ffd5b2e2df5a83ca8ae4a55a0270ed3a3cbca0868b029974e" }, "reproduction": { "state": "Not tested", "scope": "Source is supplied. Cross-machine cold-start reproduction has not been established.", "artifactSha256": "02e0b13fe5d9bf5ffd5b2e2df5a83ca8ae4a55a0270ed3a3cbca0868b029974e" } }, "detailUrl": "https://library.jkylehobson.chatgpt.site/video-library/#family=silhouette-shadow-play&example=local-drawn-to-the-light", "processUrl": "/video-library/process.html?family=silhouette-shadow-play&example=local-drawn-to-the-light", "downloads": { "prompt": { "available": true, "url": "/video-library/prompts/silhouette-shadow-play--local-drawn-to-the-light.txt", "sha256": "4ccde3eb6eaaf2516b9977e4ebbd4f6590af6e4e4caa1eb598677d8ad6d81a3d", "bytes": 1298, "label": "Reusable, example-specific instructions" }, "video": { "name": "silhouette-shadow-play--local-drawn-to-the-light.mp4", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/silhouette-shadow-play--local-drawn-to-the-light.mp4", "bytes": 15961968, "sha256": "02e0b13fe5d9bf5ffd5b2e2df5a83ca8ae4a55a0270ed3a3cbca0868b029974e", "available": true, "label": "15.2 MB" }, "source": { "name": "silhouette-shadow-play--local-drawn-to-the-light--source.zip", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/silhouette-shadow-play--local-drawn-to-the-light--source.zip", "bytes": 9328904, "sha256": "5b8de3dea608f1678189c29bbf62bcba8c9b235950aa2e271526c2216f7cf2ae", "available": true, "label": "8.9 MB", "contents": [ "editable source", "variant guidance", "source assets", "audio inputs", "dependency declarations", "file manifest" ], "includedFiles": 21, "includedFilePaths": [ "PORTABILITY/portability.md", "SKILL.md", "STYLE.md", "audio/score.mjs", "audio/stems/effects.wav", "audio/stems/music.wav", "audio/stems/room.wav", "docs/creative-treatment.md", "docs/production-log.md", "outputs/soundtrack.wav", "overview/encoded-contact-sheet.jpg", "package.json", "scripts/render.mjs", "scripts/validate.mjs", "scripts/worker.mjs", "src/frame.js", "src/letters.js", "src/puppets.js", "src/raster.js", "src/timeline.js", "BUNDLE-GUIDE.md" ], "externalPrerequisites": { "runtime": [ "Node.js", "Chromium or Chrome", "FFmpeg and ffprobe" ], "packageDependencies": { "pngjs": "7.0.0" }, "lockfileIncluded": false, "coldStart": false }, "license": { "summary": "User-directed publication of supplied authored source; preserve listed third-party notices; no new license granted here.", "includedNoticePaths": [], "newLicenseGranted": false } }, "bundle": { "name": "silhouette-shadow-play--local-drawn-to-the-light--full.zip", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/silhouette-shadow-play--local-drawn-to-the-light--full.zip", "bytes": 25317764, "sha256": "a73562e4cea00977b65d780c445a75bfbb7d3ac9e9003c295d49da426e8e86e0", "available": true, "label": "24.1 MB", "contents": [ "selected master", "editable source", "variant guidance", "source assets", "audio inputs", "dependency declarations", "file manifest", "designed cover", "starter prompt" ], "includedFiles": 24, "includedFilePaths": [ "PORTABILITY/portability.md", "SKILL.md", "STYLE.md", "audio/score.mjs", "audio/stems/effects.wav", "audio/stems/music.wav", "audio/stems/room.wav", "display/cover.webp", "docs/creative-treatment.md", "docs/production-log.md", "outputs/drawn-to-the-light.mp4", "outputs/soundtrack.wav", "overview/encoded-contact-sheet.jpg", "package.json", "scripts/render.mjs", "scripts/validate.mjs", "scripts/worker.mjs", "src/frame.js", "src/letters.js", "src/puppets.js", "src/raster.js", "src/timeline.js", "starter-prompt.txt", "BUNDLE-GUIDE.md" ], "externalPrerequisites": { "runtime": [ "Node.js", "Chromium or Chrome", "FFmpeg and ffprobe" ], "packageDependencies": { "pngjs": "7.0.0" }, "lockfileIncluded": false, "coldStart": false }, "license": { "summary": "User-directed publication of supplied authored source; preserve listed third-party notices; no new license granted here.", "includedNoticePaths": [], "newLicenseGranted": false } } }, "cadenceNote": "Encoded fps describes the file. Scene evaluation and held actor poses depend on this source recipe.", "starterPrompt": "Create a short Silhouette Shadow Play film about {subject} for {audience}. Use the selected example as a visual reference. Preserve its composition, material, type, motion and audio relationships while adapting the story.\n\nSelected example: drawn to the light\nFamily: silhouette-shadow-play\nVariant: local-drawn-to-the-light\nTypography: Custom faceted cut-paper letters · src/letters.js\nProduction: Canvas 2D shadow projection\nExact reference master SHA-256: 02e0b13fe5d9bf5ffd5b2e2df5a83ca8ae4a55a0270ed3a3cbca0868b029974e\n\nRead the selected STYLE.md, SKILL.md and reproduction instructions before adapting. Keep the declared renderer and source closure; do not assume another family variant has interchangeable parameters. Preserve exact font or custom glyph sources, color roles, spatial continuity and readable text. Record encoded frame rate, scene evaluation and held poses separately. Review the changed render visually and listen to the encoded audio before claiming those checks passed. Existing approval applies only to its recorded artifact.\n\nSuccess check: the adapted story is clear; key type remains readable in motion; the source rebuilds with its declared inputs; all media and review records identify the exact output. State any untested reproduction, listening or rights limits.", "downloadNote": "Downloads match this selected example. The full bundle includes its source, original video, cover and starter prompt. Source packages include artwork, audio inputs and dependency declarations. Requires Node.js, Chromium or Chrome, FFmpeg and ffprobe. Follow the included run guide for package installation and reproduction limits.", "model": null, "reasoningEffort": null } ], "relatedMethodIds": [] }, { "id": "single-line-drawing", "slug": "single-line-drawing", "title": "Single Line Drawing", "premise": "One continuous line carries the eye through the story, with a restrained palette and sound that follows its path.", "summary": "One continuous line carries the eye through the story, with a restrained palette and sound that follows its path.", "category": "Minimal line", "defaultExampleId": "claude-cloud", "facets": { "material": [ "2d", "line", "minimal", "continuous", "camera-follow", "sonification", "elegant", "monochrome" ], "producer": [ "Claude Cloud" ], "format": [ "Portrait" ], "motion": [], "useCase": [] }, "examples": [ { "id": "claude-cloud", "title": "Seed to Seedling", "producer": "Claude Cloud", "producerEvidence": "The displayed model and reasoning label identify this production lane. Exact runtime model ID and per-film cost are not established by the source packet.", "relationship": "Original family example", "format": "Portrait", "productionMethod": "canvas-2d", "master": { "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/single-line-drawing--claude-cloud.mp4", "sha256": "e7e3a9a34cf1c7a811885d5d98991deacec28dcda40a4a573f72fafeaf293fa0", "bytes": 7948674, "mimeType": "video/mp4", "width": 1080, "height": 1920, "duration": 10.5, "encodedFps": 60 }, "poster": { "url": "/video-library/media/single-line-drawing--claude-cloud/cover.webp", "sha256": "24021d9270c466883aaef7fd7dc4dd64467d570159b5d5ac5cd211da19885d42", "sourceMasterSha256": "e7e3a9a34cf1c7a811885d5d98991deacec28dcda40a4a573f72fafeaf293fa0", "timeSeconds": 8.925, "rationale": "Late story beat selected to show the developed subject and visual system; extracted from this exact master." }, "previewVideo": { "url": "/video-library/media/single-line-drawing--claude-cloud/preview.mp4", "sha256": "0202b6e649d5f5489cb552f9b57b8f5430fb8006aa1e97922b40ceb0039f76c7", "sourceMasterSha256": "e7e3a9a34cf1c7a811885d5d98991deacec28dcda40a4a573f72fafeaf293fa0", "width": 540, "height": 960, "label": "Playback preview · 540 px wide · full master in Download finished video" }, "gallery": [ { "id": "overview", "role": "encoded-contact-sheet", "label": "Scenes from the finished render · not a planning storyboard", "url": "/video-library/media/single-line-drawing--claude-cloud/overview.webp", "sourceMasterSha256": "e7e3a9a34cf1c7a811885d5d98991deacec28dcda40a4a573f72fafeaf293fa0" }, { "id": "scene-1", "role": "encoded-frame", "label": "Finished-film frame · 2.1 seconds", "url": "/video-library/media/single-line-drawing--claude-cloud/scene-1.webp", "sourceMasterSha256": "e7e3a9a34cf1c7a811885d5d98991deacec28dcda40a4a573f72fafeaf293fa0", "timeSeconds": 2.1 }, { "id": "scene-2", "role": "encoded-frame", "label": "Finished-film frame · 5.25 seconds", "url": "/video-library/media/single-line-drawing--claude-cloud/scene-2.webp", "sourceMasterSha256": "e7e3a9a34cf1c7a811885d5d98991deacec28dcda40a4a573f72fafeaf293fa0", "timeSeconds": 5.25 }, { "id": "scene-3", "role": "encoded-frame", "label": "Finished-film frame · 8.4 seconds", "url": "/video-library/media/single-line-drawing--claude-cloud/scene-3.webp", "sourceMasterSha256": "e7e3a9a34cf1c7a811885d5d98991deacec28dcda40a4a573f72fafeaf293fa0", "timeSeconds": 8.4 } ], "typography": [ "Fraunces italic 400", "Fraunces 600", "Jost 500 caps" ], "palette": { "paper": "#f8f5ef", "ink": "#1b1b1b", "leaf": "#d3e7c3", "grey": "#77736c" }, "usageGuidance": "Change the subject, copy and timing for your audience. Retain the selected example’s visual rules and recheck the entire reading interval after changes.", "styleRules": "---\nid: single-line-drawing\nname: Single Line (one line, never lifted)\nfamily: minimal line\naliases: [continuous line, one-line drawing, contour drawing, line art, Picasso line, minimal sketch]\ntags: [2d, line, minimal, continuous, camera-follow, sonification, elegant, monochrome]\nkind: visual-style\nroute: canvas-2d (CPU canvas; one precomputed outline polygon revealed by arc length)\nreadiness: { research: authored, rights: original-work, referenceImages: own-render, code: built, render: rendered-and-measured }\n---\n\n# Single Line (one line, never lifted)\n\nThe whole film is drawn by **one continuous ink line**:\n- It starts as the ground with a few grass flicks, climbs into a cloud, and falls as three raindrops.\n- It walks along the ground and loops twice into the seed (it swells).\n- It drills down as the root with two rootlet loops, then doubles back up beside it, through the seed and out of the soil as the stem.\n- It loops two leaves, sweeps up into a round spiral sun, and ends in a flourish that becomes the underline of the title.\n\nThe camera follows the nib (lagged and clamped to the page), then pulls back to reveal the drawing. The only colour in the film is a pale green that washes into the leaves when the light is found. You can *hear* the line: a single voice plays one note every 110 px of ink, pitched by the pen's height.\n\n**The one rule:** *the pen never lifts.* One path, one width model, one direction of travel. Every element (rain, seed, root, plant, sun, underline) is a passage of the same stroke.\n\n## Creative direction\n- **Audience:** design-literate audiences, wellness and mindfulness brands, premium minimal brands, art and education, logo reveals.\n- **Purpose:** show that growth is one continuous process, with each stage flowing out of the previous one.\n- **Feeling:** calm, clever, intimate, elegant.\n- **Central visual idea:** *one line, never lifted.* Continuity is the message; the doubled-back strand (root → stem) shows the plant's single body.\n- **How the parts work together:**\n - *Composition:* a vertical column of events on a mostly empty page; the camera holds the nib near the centre.\n - *Colour:* black ink on warm white, plus one pale green moment.\n - *Type:* quiet Fraunces italic captions that appear where the pen is, and a Fraunces title sitting on the line's own flourish.\n - *Motion:* only the pen moves; speed eases within each passage.\n - *Sound:* a monophonic voice that follows the pen, pen scratch, and a soft chord bed.\n\n## Fit\n- **Best for:** brand/logo reveals, process stories, mindful content, editorial openers, \"everything is connected\" messages.\n- **Avoid when:** many simultaneous elements, data or bold energy are needed; long copy.\n- **Cost:** very low. One outline polygon per frame (630 frames in about 15 s).\n\n## Visual fingerprint\n| Element | Rule |\n|---|---|\n| Path | One Catmull-Rom curve through all control points of all segments (ground, rain, seed, root, return, shoot, sun, flourish), sampled every 1.2 px, about 7.8k px long. Control points are in `timeline.js → SEGMENTS`. |\n| Stroke | Width = 2.6 + 2.4 · clamp(turn angle over ±6 samples × 1.6) + 0.6 · noise, smoothed 3×. Ink pools on tight turns, as when a real pen slows. Precomputed left/right outline; each frame fills samples 0…n as one polygon. |\n| Nib | Dot r 3.6 plus a wet halo r 9 at 12 % while drawing; disappears when the line is finished. |\n| Shapes | Teardrops of 9 points (pointed top, round bottom); cloud scallops; seed = two concentric loops (the swell); rootlets = narrow out-and-back loops; leaves = closed loops from the stem node; sun = a 40-point spiral (radius 26 → 127, 30° steps). |\n| Colour moment | The leaf loops get a `#d3e7c3` multiply wash offset (+4, +3) px (a loose fill), fading in over 7.0-7.8 s. |\n| Paper | Warm white `#f8f5ef` + a speckle tile + a faint vignette (8 %). |\n\n### Typography (exact)\n| Role | Family / weight | Size | Placement (world px) | Enter → settle |\n|---|---|---|---|---|\n| Beat captions | Fraunces italic 400 | 38 | \"water wakes the seed\" left at (60, 1240); \"a root reaches down\" left at (650, 1500); \"a shoot finds the light\" left at (604, 965) | fade + rise 8 px over 0.5 s when the pen reaches that part (1.5 / 3.6 / 6.3 s) |\n| Title | Fraunces 600 | 76 | left at (92, 214), sitting on the flourish underline | fade + rise 10 px over 0.6 s at 8.7 s (the underline is drawn first, 8.2-9.1 s) |\n| Note | Jost 500 caps, tracking 4 | 22 | centred at (540, 1878), grey `#77736c` | fade 0.5 s at 9.2 s |\n\nPlacement rule: each caption sits in the empty space beside its passage *and* inside the camera view at the moment it appears (view = 830 × 1477 px at zoom 1.3), and never on any later passage of the line.\n\n## Temporal fingerprint\n| Segment | Time | Notes |\n|---|---|---|\n| ground | 0.2-0.8 s | The line enters from the left edge. |\n| rain | 0.8-2.15 s | Up into the cloud; three drops; down; along the ground. |\n| seed | 2.15-2.8 s | Two loops (the second is the swell). |\n| *(pause)* | 2.8-3.0 s | The pen rests: a beat. |\n| root | 3.0-5.0 s | Drilling down, two rootlet loops. |\n| return | 5.0-5.75 s | Back up beside the root, through the seed. |\n| shoot | 5.75-7.3 s | Stem, left leaf, right leaf. |\n| sun | 7.3-8.15 s | Long sweep up, then the spiral. |\n| flourish | 8.2-9.1 s | Underline of the title (right → left with a loop). |\n\n- **Speed:** arc length within a segment = 0.85·k + 0.15·smoothstep(k), nearly constant with a soft start and finish.\n- **Camera:** zoom 1.3; centre = average nib position over the last 0.45 s, clamped to the page; pull-back to 1.0 over 8.15-9.15 s (easeInOutCubic).\n\n## How the composition develops\nThe camera rides the nib: left edge → cloud (upper left) → down the rain → along the ground → seed → down the root → back up the stem → leaves → sun (upper right) → the title underline (top left). The pull-back reveals a single coherent drawing: the cloud and rain on the left, the plant in the centre column, the sun on the upper right, and the title on top.\n\n## Sound fingerprint\nSonified drawing in D-major pentatonic:\n- **The line:** a soft monophonic kalimba voice plays a note every 110 px of ink. Pitch = pen height (y 1800 → D3 … y 200 → D6) and pan = pen x, so loops sing small figures, the root descends, the stem climbs and the spiral rises.\n- **Scratch:** pen-on-paper grains whose density follows pen speed.\n- **Bed:** one quiet sustained chord per beat (D · Bm · G · A → D).\n- **Accents:** bells when loops close (seed, leaves, sun) and on the title.\n\nMix −16.4 LUFS (deliberately soft), −4.5 dBTP.\n\n## Reusable prompt\n> Create a {10.5}-second {1080×1920} continuous-line drawing video about {subject}. One ink line never lifts: plan it as segments ({setting} → {stage 1} → {stage 2} → {stage 3} → {flourish under the title}) through control points, joined by one Catmull-Rom curve. Reveal it by arc length with a near-constant pen speed; the width swells on tight turns; a small wet nib leads. The camera follows the nib (lagged, zoom 1.3, clamped to the page) and pulls back at the end. Black ink on warm white with ONE pale colour moment. Quiet italic serif captions appear beside each passage as the pen reaches it; the title sits on the line's final flourish. Score: a single voice playing one note per fixed length of ink, pitched by the pen's height, plus pen scratch and a soft chord bed.\n\n## Adaptation guidance\n| Change | Safe? | Notes |\n|---|---|---|\n| Subject | ✅ | Plan the route so every element is reachable without lifting; doubling back beside an earlier passage is part of the look. |\n| Duration | ✅ | Keep pen speed between about 600 and 1300 px/s; add pauses between beats. |\n| Colour | ✅ | Change the single colour moment; never add more than one or two. |\n| Fonts | ✅ | A literary italic serif for captions; the title must sit on the line. |\n| 16:9 | ✅ | Plan a horizontal route; the camera follow works the same. |\n| **Essential** | , | One continuous line, the width model, the camera following the nib, the final reveal, a single colour moment, sonified drawing. |\n\n## Accessibility\nCaptions are ink on warm white (about 15:1) and appear once, without motion. There is no flashing. The camera follow is smooth and lagged, and the pull-back gives an overview.\n\n## Provenance\nOriginal style authored for this library (2026-10-07); no Animate seed. Fonts: Fraunces and Jost (SIL OFL). The line, the paper and the sound are procedural.", "review": { "technical": { "state": "Supplied checks passed", "scope": "Source handoff records complete decode, stream dimensions and audio measurements. Browser playback is checked separately.", "artifactSha256": "e7e3a9a34cf1c7a811885d5d98991deacec28dcda40a4a573f72fafeaf293fa0" }, "creative": { "state": "Not independently accepted", "scope": "not independently established", "artifactSha256": "e7e3a9a34cf1c7a811885d5d98991deacec28dcda40a4a573f72fafeaf293fa0" }, "listening": { "state": "Not verified", "scope": "No perceptual listening pass is established by this library import.", "artifactSha256": "e7e3a9a34cf1c7a811885d5d98991deacec28dcda40a4a573f72fafeaf293fa0" }, "reproduction": { "state": "Not tested", "scope": "Source is supplied. Cross-machine cold-start reproduction has not been established.", "artifactSha256": "e7e3a9a34cf1c7a811885d5d98991deacec28dcda40a4a573f72fafeaf293fa0" } }, "detailUrl": "https://library.jkylehobson.chatgpt.site/video-library/#family=single-line-drawing&example=claude-cloud", "processUrl": "/video-library/process.html?family=single-line-drawing&example=claude-cloud", "downloads": { "prompt": { "available": true, "url": "/video-library/prompts/single-line-drawing--claude-cloud.txt", "sha256": "9b353520e1a173cae8d98da92a626795478dc96c1ccbed934ba157c648b28734", "bytes": 1824, "label": "Reusable, example-specific instructions" }, "video": { "name": "single-line-drawing--claude-cloud.mp4", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/single-line-drawing--claude-cloud.mp4", "bytes": 7948674, "sha256": "e7e3a9a34cf1c7a811885d5d98991deacec28dcda40a4a573f72fafeaf293fa0", "available": true, "label": "7.6 MB" }, "source": { "name": "single-line-drawing--claude-cloud--source.zip", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/single-line-drawing--claude-cloud--source.zip", "bytes": 9918960, "sha256": "28b320f101eac6222626d44d48c8bf50345c7456a3ca7cb0221a16e41a445609", "available": true, "label": "9.5 MB", "contents": [ "editable source", "variant guidance", "source assets", "audio inputs", "dependency declarations", "file manifest" ], "includedFiles": 71, "includedFilePaths": [ "CASE_STUDY.md", "RUN.md", "SKILL.md", "STYLE.md", "assets/components/line-by-segment.png", "assets/components/the-line.png", "assets/layers/t10.20/01_paper.png", "assets/layers/t10.20/02_tint.png", "assets/layers/t10.20/03_line.png", "assets/layers/t10.20/04_type.png", "assets/layers/t2.60/01_paper.png", "assets/layers/t2.60/02_tint.png", "assets/layers/t2.60/03_line.png", "assets/layers/t2.60/04_type.png", "assets/layers/t4.60/01_paper.png", "assets/layers/t4.60/02_tint.png", "assets/layers/t4.60/03_line.png", "assets/layers/t4.60/04_type.png", "assets/layers/t7.60/01_paper.png", "assets/layers/t7.60/02_tint.png", "assets/layers/t7.60/03_line.png", "assets/layers/t7.60/04_type.png", "assets/paths/flourish.json", "assets/paths/flourish.svg", "assets/paths/ground.json", "assets/paths/ground.svg", "assets/paths/rain.json", "assets/paths/rain.svg", "assets/paths/return.json", "assets/paths/return.svg", "assets/paths/root.json", "assets/paths/root.svg", "assets/paths/seed.json", "assets/paths/seed.svg", "assets/paths/shoot.json", "assets/paths/shoot.svg", "assets/paths/sun.json", "assets/paths/sun.svg", "audio/cues.json", "audio/mix.flac", "audio/stems/music.flac", "audio/stems/sfx.flac", "engine/audio.mjs", "engine/audio/dsp.js", "engine/audio/instruments.js", "engine/audio/sfx.js", "engine/browser.mjs", "engine/export.mjs", "engine/finish.mjs", "engine/lib/draw.js", "engine/lib/util.js", "engine/page.html", "engine/render.mjs", "engine/runtime.js", "engine/server.mjs", "film/contact_sheet.jpg", "film/spectrogram.png", "film/stills/01_1.60s.jpg", "film/stills/02_2.60s.jpg", "film/stills/03_4.60s.jpg", "film/stills/04_6.40s.jpg", "film/stills/05_7.60s.jpg", "film/stills/06_10.20s.jpg", "overview/encoded-contact-sheet.jpg", "package.json", "qa.json", "spec.json", "styles/single-line-drawing/scene.js", "styles/single-line-drawing/score.js", "styles/single-line-drawing/timeline.js", "BUNDLE-GUIDE.md" ], "externalPrerequisites": { "runtime": [ "Node.js", "Chromium or Chrome", "FFmpeg and ffprobe" ], "packageDependencies": { "@fontsource/anton": "^5.1.0", "@fontsource/archivo-black": "^5.1.0", "@fontsource/bangers": "^5.1.0", "@fontsource/bebas-neue": "^5.1.0", "@fontsource/caveat": "^5.1.0", "@fontsource/comic-neue": "^5.3.0", "@fontsource/dm-sans": "^5.1.0", "@fontsource/dm-serif-display": "^5.1.0", "@fontsource/fraunces": "^5.1.0", "@fontsource/ibm-plex-mono": "^5.1.0", "@fontsource/instrument-serif": "^5.1.0", "@fontsource/inter": "^5.1.0", "@fontsource/jetbrains-mono": "^5.1.0", "@fontsource/jost": "^5.3.0", "@fontsource/kaushan-script": "^5.3.0", "@fontsource/nunito": "^5.1.0", "@fontsource/permanent-marker": "^5.1.0", "@fontsource/playfair-display": "^5.1.0", "@fontsource/press-start-2p": "^5.1.0", "@fontsource/space-grotesk": "^5.1.0", "@fontsource/space-mono": "^5.1.0", "@fontsource/syne": "^5.1.0", "@fontsource/vt323": "^5.1.0", "three": "0.170.0", "playwright": "1.56.1" }, "lockfileIncluded": false, "coldStart": false }, "license": { "summary": "User-directed publication of supplied authored source; preserve listed third-party notices; no new license granted here.", "includedNoticePaths": [], "newLicenseGranted": false } }, "bundle": { "name": "single-line-drawing--claude-cloud--full.zip", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/single-line-drawing--claude-cloud--full.zip", "bytes": 17892725, "sha256": "4f16706be28c5946dffdc0f49b2233193f8b5f599f068ee21aed8e831a37851b", "available": true, "label": "17.1 MB", "contents": [ "selected master", "editable source", "variant guidance", "source assets", "audio inputs", "dependency declarations", "file manifest", "designed cover", "starter prompt" ], "includedFiles": 74, "includedFilePaths": [ "CASE_STUDY.md", "RUN.md", "SKILL.md", "STYLE.md", "assets/components/line-by-segment.png", "assets/components/the-line.png", "assets/layers/t10.20/01_paper.png", "assets/layers/t10.20/02_tint.png", "assets/layers/t10.20/03_line.png", "assets/layers/t10.20/04_type.png", "assets/layers/t2.60/01_paper.png", "assets/layers/t2.60/02_tint.png", "assets/layers/t2.60/03_line.png", "assets/layers/t2.60/04_type.png", "assets/layers/t4.60/01_paper.png", "assets/layers/t4.60/02_tint.png", "assets/layers/t4.60/03_line.png", "assets/layers/t4.60/04_type.png", "assets/layers/t7.60/01_paper.png", "assets/layers/t7.60/02_tint.png", "assets/layers/t7.60/03_line.png", "assets/layers/t7.60/04_type.png", "assets/paths/flourish.json", "assets/paths/flourish.svg", "assets/paths/ground.json", "assets/paths/ground.svg", "assets/paths/rain.json", "assets/paths/rain.svg", "assets/paths/return.json", "assets/paths/return.svg", "assets/paths/root.json", "assets/paths/root.svg", "assets/paths/seed.json", "assets/paths/seed.svg", "assets/paths/shoot.json", "assets/paths/shoot.svg", "assets/paths/sun.json", "assets/paths/sun.svg", "audio/cues.json", "audio/mix.flac", "audio/stems/music.flac", "audio/stems/sfx.flac", "display/cover.webp", "engine/audio.mjs", "engine/audio/dsp.js", "engine/audio/instruments.js", "engine/audio/sfx.js", "engine/browser.mjs", "engine/export.mjs", "engine/finish.mjs", "engine/lib/draw.js", "engine/lib/util.js", "engine/page.html", "engine/render.mjs", "engine/runtime.js", "engine/server.mjs", "film/contact_sheet.jpg", "film/single-line-drawing.mp4", "film/spectrogram.png", "film/stills/01_1.60s.jpg", "film/stills/02_2.60s.jpg", "film/stills/03_4.60s.jpg", "film/stills/04_6.40s.jpg", "film/stills/05_7.60s.jpg", "film/stills/06_10.20s.jpg", "overview/encoded-contact-sheet.jpg", "package.json", "qa.json", "spec.json", "starter-prompt.txt", "styles/single-line-drawing/scene.js", "styles/single-line-drawing/score.js", "styles/single-line-drawing/timeline.js", "BUNDLE-GUIDE.md" ], "externalPrerequisites": { "runtime": [ "Node.js", "Chromium or Chrome", "FFmpeg and ffprobe" ], "packageDependencies": { "@fontsource/anton": "^5.1.0", "@fontsource/archivo-black": "^5.1.0", "@fontsource/bangers": "^5.1.0", "@fontsource/bebas-neue": "^5.1.0", "@fontsource/caveat": "^5.1.0", "@fontsource/comic-neue": "^5.3.0", "@fontsource/dm-sans": "^5.1.0", "@fontsource/dm-serif-display": "^5.1.0", "@fontsource/fraunces": "^5.1.0", "@fontsource/ibm-plex-mono": "^5.1.0", "@fontsource/instrument-serif": "^5.1.0", "@fontsource/inter": "^5.1.0", "@fontsource/jetbrains-mono": "^5.1.0", "@fontsource/jost": "^5.3.0", "@fontsource/kaushan-script": "^5.3.0", "@fontsource/nunito": "^5.1.0", "@fontsource/permanent-marker": "^5.1.0", "@fontsource/playfair-display": "^5.1.0", "@fontsource/press-start-2p": "^5.1.0", "@fontsource/space-grotesk": "^5.1.0", "@fontsource/space-mono": "^5.1.0", "@fontsource/syne": "^5.1.0", "@fontsource/vt323": "^5.1.0", "three": "0.170.0", "playwright": "1.56.1" }, "lockfileIncluded": false, "coldStart": false }, "license": { "summary": "User-directed publication of supplied authored source; preserve listed third-party notices; no new license granted here.", "includedNoticePaths": [], "newLicenseGranted": false } } }, "cadenceNote": "Encoded fps describes the file. Scene evaluation and held actor poses depend on this source recipe.", "starterPrompt": "Create a {10.5}-second {1080×1920} continuous-line drawing video about {subject}. One ink line never lifts: plan it as segments ({setting} → {stage 1} → {stage 2} → {stage 3} → {flourish under the title}) through control points, joined by one Catmull-Rom curve. Reveal it by arc length with a near-constant pen speed; the width swells on tight turns; a small wet nib leads. The camera follows the nib (lagged, zoom 1.3, clamped to the page) and pulls back at the end. Black ink on warm white with ONE pale colour moment. Quiet italic serif captions appear beside each passage as the pen reaches it; the title sits on the line's final flourish. Score: a single voice playing one note per fixed length of ink, pitched by the pen's height, plus pen scratch and a soft chord bed.\n\nSelected example: Seed to Seedling\nFamily: single-line-drawing\nVariant: claude-cloud\nTypography: Fraunces italic 400, Fraunces 600, Jost 500 caps\nProduction: canvas-2d\nExact reference master SHA-256: e7e3a9a34cf1c7a811885d5d98991deacec28dcda40a4a573f72fafeaf293fa0\n\nRead the selected STYLE.md, SKILL.md and reproduction instructions before adapting. Keep the declared renderer and source closure; do not assume another family variant has interchangeable parameters. Preserve exact font or custom glyph sources, color roles, spatial continuity and readable text. Record encoded frame rate, scene evaluation and held poses separately. Review the changed render visually and listen to the encoded audio before claiming those checks passed. Existing approval applies only to its recorded artifact.\n\nSuccess check: the adapted story is clear; key type remains readable in motion; the source rebuilds with its declared inputs; all media and review records identify the exact output. State any untested reproduction, listening or rights limits.", "downloadNote": "Downloads match this selected example. The full bundle includes its source, original video, cover and starter prompt. Source packages include artwork, audio inputs and dependency declarations. Requires Node.js, Chromium or Chrome, FFmpeg and ffprobe. Follow the included run guide for package installation and reproduction limits.", "model": "Opus 5.5", "reasoningEffort": "Extra" } ], "relatedMethodIds": [] }, { "id": "sketchbook", "slug": "sketchbook", "title": "Sketchbook", "premise": "Graphite, ink and colored marks bring a notebook page to life, preserving the feeling of drawing by hand.", "summary": "Graphite, ink and colored marks bring a notebook page to life, preserving the feeling of drawing by hand.", "category": "Hand-drawn 2d", "defaultExampleId": "claude-cloud", "facets": { "material": [ "2d", "graphite", "ink", "scribble", "hand-lettering", "page-camera", "pencil-prop", "boil", "warm" ], "producer": [ "Claude Cloud" ], "format": [ "Portrait" ], "motion": [], "useCase": [] }, "examples": [ { "id": "claude-cloud", "title": "Seed to Seedling", "producer": "Claude Cloud", "producerEvidence": "The displayed model and reasoning label identify this production lane. Exact runtime model ID and per-film cost are not established by the source packet.", "relationship": "Original family example", "format": "Portrait", "productionMethod": "canvas-2d", "master": { "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/sketchbook--claude-cloud.mp4", "sha256": "c835bc444646f8d6bc9a3eae878bd3a2e7ad3c2e8f2443d61a92224ea37d5fac", "bytes": 4925105, "mimeType": "video/mp4", "width": 1080, "height": 1920, "duration": 10.4, "encodedFps": 60 }, "poster": { "url": "/video-library/media/sketchbook--claude-cloud/cover.webp", "sha256": "6f2bc101f5c49ade2aa9ab473307d5a755f4ed5df96b4c2e82ed898fad675129", "sourceMasterSha256": "c835bc444646f8d6bc9a3eae878bd3a2e7ad3c2e8f2443d61a92224ea37d5fac", "timeSeconds": 8.84, "rationale": "Late story beat selected to show the developed subject and visual system; extracted from this exact master." }, "previewVideo": { "url": "/video-library/media/sketchbook--claude-cloud/preview.mp4", "sha256": "518a7fb4e66814a78cdc23bb8c999ee563d6fbbb59ae66553699e6b82c7e1baf", "sourceMasterSha256": "c835bc444646f8d6bc9a3eae878bd3a2e7ad3c2e8f2443d61a92224ea37d5fac", "width": 540, "height": 960, "label": "Playback preview · 540 px wide · full master in Download finished video" }, "gallery": [ { "id": "overview", "role": "encoded-contact-sheet", "label": "Scenes from the finished render · not a planning storyboard", "url": "/video-library/media/sketchbook--claude-cloud/overview.webp", "sourceMasterSha256": "c835bc444646f8d6bc9a3eae878bd3a2e7ad3c2e8f2443d61a92224ea37d5fac" }, { "id": "scene-1", "role": "encoded-frame", "label": "Finished-film frame · 2.08 seconds", "url": "/video-library/media/sketchbook--claude-cloud/scene-1.webp", "sourceMasterSha256": "c835bc444646f8d6bc9a3eae878bd3a2e7ad3c2e8f2443d61a92224ea37d5fac", "timeSeconds": 2.08 }, { "id": "scene-2", "role": "encoded-frame", "label": "Finished-film frame · 5.2 seconds", "url": "/video-library/media/sketchbook--claude-cloud/scene-2.webp", "sourceMasterSha256": "c835bc444646f8d6bc9a3eae878bd3a2e7ad3c2e8f2443d61a92224ea37d5fac", "timeSeconds": 5.2 }, { "id": "scene-3", "role": "encoded-frame", "label": "Finished-film frame · 8.32 seconds", "url": "/video-library/media/sketchbook--claude-cloud/scene-3.webp", "sourceMasterSha256": "c835bc444646f8d6bc9a3eae878bd3a2e7ad3c2e8f2443d61a92224ea37d5fac", "timeSeconds": 8.32 } ], "typography": [ "Caveat 700", "Permanent Marker 400" ], "palette": { "paper": "#f2ead8", "ink": "#2a2420", "graphite": "#6f6a63", "graphiteL": "#9a948b", "hero": "#d97757", "heroShade": "#b85c3f", "hi": "#f7d64a", "red": "#e0483a", "green": "#4f9d5d", "pencil": "#f1bf2c", "wood": "#ecc995", "eraser": "#ef9aa6", "ferrule": "#b9b4a8" }, "usageGuidance": "Change the subject, copy and timing for your audience. Retain the selected example’s visual rules and recheck the entire reading interval after changes.", "styleRules": "---\nid: sketchbook\nname: Sketchbook (pencil, ink, scribble)\nfamily: hand-drawn 2D\naliases: [notebook doodle, sketch explainer, graphite, hand-drawn whiteboard, drawn-on page]\ntags: [2d, graphite, ink, scribble, hand-lettering, page-camera, pencil-prop, boil, warm]\nkind: visual-style\nroute: canvas-2d (CPU canvas; cached page + wobbled strokes on twos)\nreadiness: { research: seed-extended, rights: original-work, referenceImages: own-render, code: built, render: rendered-and-measured }\n---\n\n# Sketchbook (pencil, ink, scribble)\n\nA warm sketchbook page is the entire world: spiral binding, dot grid, smudges, an erased ghost line, a coffee ring, and the edges of the pages below.\n- **How things appear:** a yellow pencil prop draws each thing **graphite first** (two loose light passes), then **inks over it** (one confident stroke plus a thin pass that doesn't quite agree), then **colours it with a quick scribble**.\n- **The story on one page:**\n 1. The ground line is drawn.\n 2. The terracotta hero seed is pencilled, inked and scribbled in.\n 3. A cloud rains; drops land; the seed hops awake (\"!\").\n 4. The root is drawn down; the stem is drawn up; leaves are inked and hatched in graphite.\n 5. The sun is drawn and highlighted (the page's one glowing object).\n- **Narration:** hand lettering, glyph by glyph, with **one highlighted word** per caption (\"Water\", \"root\", \"light\").\n- **Ending:** the title in marker gets a red underline and a green check.\n- **Camera:** it leans in and pans across the same page; it never cuts away.\n- **Margin life:** a paper plane loops, an ant walks the ground line, and stars twinkle.\n\n**The one rule:** *graphite carries everything; colour has a job.* Terracotta = the hero, highlighter = one word and the sun, red = the title underline, green = the check. Everything else is ink and graphite.\n\n## Creative direction\n- **Audience:** learners, teachers, creative-tool users, onboarding and product education, YouTube-style explainers.\n- **Purpose:** make thinking visible: ideas are sketched, then decided (inked), then celebrated (coloured).\n- **Feeling:** friendly, curious, honest, handmade.\n- **Central visual idea:** *the page is the world, and the pencil is the narrator's hand.* Every element is drawn on the viewer's behalf, in the same three-pass order.\n- **How the parts work together:**\n - *Composition:* one page, with subjects arranged so the camera can lean between them.\n - *Colour:* the four colours with strict jobs listed above.\n - *Type:* hand lettering that writes itself letter by letter, plus marker for the title.\n - *Motion:* boil on twos, write-ons, a hop for reactions, a smooth camera.\n - *Sound:* a light desk tune, plus pencil, pen, scribble, highlighter and marker sounds.\n\n## Fit\n- **Best for:** explainers, tutorials, onboarding, idea pitches, teacher content, \"how I think about X\".\n- **Avoid when:** premium/luxury, data precision, or high-energy hype is needed.\n- **Cost:** low. 312 poses in about 40 s.\n\n## Visual fingerprint\n| Element | Rule |\n|---|---|\n| Page | Built once from a seeded RNG: paper `#f2ead8` with tooth specks, a dot grid (48 px, `#6f6a63` at 28 %), three smudges, two erased ghost lines, a coffee ring, three page edges, a spiral binding (rings every 62 px), and a vignette. |\n| Ink pen | 4.2 px `#2a2420` with tremor amp 1.6, plus a 35 % thin second pass (amp 2.6) with different tremor. |\n| Graphite pen | Two light passes: 2.2 px `#6f6a63` at 55 % and 1.6 px `#9a948b`, tremor amp 3.2-4.0. It fades to a 15 % residue once inked. |\n| Boil | The tremor's phase shifts along the stroke index every pose (`i·0.3 − pose·0.9`), so the wobble *travels*; the structure never moves. |\n| Scribble fill | A back-and-forth zigzag (gap 8-10 px, −0.9 rad) clipped to the shape, offset (+5, +4) px from the ink, over a 25-40 % wash; it writes on. |\n| Highlighter | Yellow `#f7d64a` multiply swipe with ragged ends, drawn left → right *after* the caption line is down. |\n| Pencil prop | Yellow body 220 × 34, wood cone, graphite tip at the drawing point, ferrule + pink eraser, rotated −0.62 rad, soft shadow. It always sits at the end of whatever is being drawn. |\n| Hero | Terracotta `#d97757` overshooting loop (the line ends past its start), scribble-filled; eyes look at the subject (up at the rain, down at the root, up at the light) and blink; it hops with squash and stretch when it wakes; moods sleep / wow / calm / happy. Scale 1.4. |\n| Margin life | Paper plane (graphite) looping the upper-right margin; an ant walking the ground line; twinkling graphite asterisks in the margins. |\n\n### Typography (exact)\n| Role | Family / weight | Size | Placement (page px) | Enter → settle |\n|---|---|---|---|---|\n| Captions | Caveat 700 (+3.5 % pen-weight stroke) | 66, line height 70 | \"Water wakes / the seed\" at (80, 1250); \"A root / reaches down\" at (660, 1380); \"A shoot finds / the light\" at (90, 830) | glyph by glyph: fade in, rise 8 px, scale 0.7 → 1; jitter ±1 px / ±0.03 rad re-seeded every pose; then the highlight swipe (0.35 s) on one word |\n| Title | Permanent Marker 400 | 84 | \"From seed\" / \"to seedling\" left at (90, 210 / 300) | glyph write-on 0.8 s; red marker underline 0.3 s; green check 0.25 s |\n| Note | Caveat 700, graphite | 40 | (300, 1850) | write-on 0.4 s |\n\nCopy limits: about 14-16 characters per caption line, two lines at most; one highlighted word per caption.\n\n## Temporal fingerprint\n| Element | Rule |\n|---|---|\n| Grid | 112.5 BPM (beat 0.533 s); poses on twos. |\n| Draw order | graphite 0.25-0.5 s → ink 0.25-0.9 s → scribble 0.35-0.4 s, then the next thing; only one thing is drawn at a time (the pencil is on it). |\n| Camera | Keys: (540, 960, 1.0) → lean in (470, 900, 1.28) → down to the root (600, 1180, 1.3) → up to the plant (540, 800, 1.2) → full page (540, 960, 1.0). easeInOutCubic, clamped inside the page. |\n| Reactions | Only reactions pop (\"!\", the hop); everything else is drawn on. |\n\n## How the composition develops\n| Time | Beat | On the page |\n|---|---|---|\n| 0-1.4 s | Set-up | Ground line (graphite → ink), soil marks; the camera leans in. |\n| 1.0-3.2 s | ① Water wakes the seed | The seed is pencilled, inked and scribbled terracotta; cloud; rain; drops; hop + \"!\"; caption with \"Water\" highlighted. |\n| 3.2-5.6 s | ② A root reaches down | The camera pans down; the root is drawn; rootlets; caption with \"root\" highlighted. |\n| 5.6-8.0 s | ③ A shoot finds the light | The camera rises; sun drawn and highlighted; stem; leaves inked and graphite-hatched; caption with \"light\" highlighted. |\n| 8.0-10.4 s | Title | Full page; marker title; red underline; green check; note. |\n\n## Sound fingerprint\nA curious desk tune at 112.5 BPM in G major:\n- **Music:** KS guitar-ish plucks (G · Em · C · D), a kalimba melody, finger snaps, shaker, and a soft kick every bar.\n- **The page is audible:**\n - graphite = a light, high pencil hiss\n - ink = a firmer, lower pen scratch\n - colour scribble = a rhythmic rasp at 8 Hz\n - highlighter = a felt swish\n - marker = a felt line with a tiny squeak\n - check = a tick plus a bell; rain = ticks; waking = a pop\n\nMix −15.4 LUFS, −1.6 dBTP.\n\n## Reusable prompt\n> Create a {10}-second {1080×1920} sketchbook explainer about {subject} drawn on one notebook page (spiral binding, dot grid, smudges, coffee ring, page edges). Every element is drawn by a visible yellow pencil in three passes: loose graphite, then a confident ink line with a second thin pass, then a quick colour scribble offset from the line. Lines boil on twos (the tremor travels along the stroke). Colour has jobs: one hero colour, highlighter for one word per caption and one glowing object, red for the title underline, green for a single check; everything else is graphite and ink. Hand lettering writes on glyph by glyph and narrates each beat. The camera leans and pans across the same page, never cutting away; small graphite margin life (a plane, an ant, stars). Score: a light desk tune plus the sound of each tool.\n\n## Adaptation guidance\n| Change | Safe? | Notes |\n|---|---|---|\n| Subject / hero | ✅ | Keep one hero in the accent colour; draw it in the three passes. |\n| Accent colour | ✅ | Swap terracotta; keep it exclusive to the hero. |\n| Page type | ✅ | Ruled, squared or blank; keep binding/edges so the page reads as an object. |\n| Fonts | ✅ | Any hand font with weight for captions; any marker font for the title. |\n| 16:9 | ✅ | A landscape page or a spread; the camera leans between areas. |\n| **Essential** | , | One page as the world, the pencil prop, graphite → ink → scribble, strict colour jobs, lettering as narrator, boil on twos. |\n\n## Accessibility\n- **Contrast:** captions are dark ink on cream (about 13:1).\n- **Repetition and motion:** each beat is written as text; the highlight marks the key word; there is no flashing, and the camera is smooth.\n\n## Provenance\nBuilt from the Animate seed `sketchbook` (cth9191/animate @ 7e5eb56feb2dd573f890e1b7b34748af43d58263, MIT): the medium rules (two pens, travelling boil, colour off the line, scribble fill, colour jobs, page-as-world, lettering as narrator, the pencil prop). The seed was used as source material only; nothing was installed or executed. All code, art and audio here are original to this library (2026-10-07). Fonts: Caveat and Permanent Marker (SIL OFL; the seed specified system hand fonts, which are not available headless).", "review": { "technical": { "state": "Supplied checks passed", "scope": "Source handoff records complete decode, stream dimensions and audio measurements. Browser playback is checked separately.", "artifactSha256": "c835bc444646f8d6bc9a3eae878bd3a2e7ad3c2e8f2443d61a92224ea37d5fac" }, "creative": { "state": "Not independently accepted", "scope": "not independently established", "artifactSha256": "c835bc444646f8d6bc9a3eae878bd3a2e7ad3c2e8f2443d61a92224ea37d5fac" }, "listening": { "state": "Not verified", "scope": "No perceptual listening pass is established by this library import.", "artifactSha256": "c835bc444646f8d6bc9a3eae878bd3a2e7ad3c2e8f2443d61a92224ea37d5fac" }, "reproduction": { "state": "Not tested", "scope": "Source is supplied. Cross-machine cold-start reproduction has not been established.", "artifactSha256": "c835bc444646f8d6bc9a3eae878bd3a2e7ad3c2e8f2443d61a92224ea37d5fac" } }, "detailUrl": "https://library.jkylehobson.chatgpt.site/video-library/#family=sketchbook&example=claude-cloud", "processUrl": "/video-library/process.html?family=sketchbook&example=claude-cloud", "downloads": { "prompt": { "available": true, "url": "/video-library/prompts/sketchbook--claude-cloud.txt", "sha256": "51301cccc7f8ed65c4b6cf868b34480d4e008b4f5a30c27a8df17f7d40ff33d8", "bytes": 1843, "label": "Reusable, example-specific instructions" }, "video": { "name": "sketchbook--claude-cloud.mp4", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/sketchbook--claude-cloud.mp4", "bytes": 4925105, "sha256": "c835bc444646f8d6bc9a3eae878bd3a2e7ad3c2e8f2443d61a92224ea37d5fac", "available": true, "label": "4.7 MB" }, "source": { "name": "sketchbook--claude-cloud--source.zip", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/sketchbook--claude-cloud--source.zip", "bytes": 11036636, "sha256": "83c1d9a9a095c18f050c7360009cb3c7447389a5ccd5c63f4aab68be8818994e", "available": true, "label": "10.5 MB", "contents": [ "editable source", "variant guidance", "source assets", "audio inputs", "dependency declarations", "file manifest" ], "includedFiles": 59, "includedFilePaths": [ "CASE_STUDY.md", "RUN.md", "SKILL.md", "STYLE.md", "THIRD-PARTY-NOTICES/animate-MIT.txt", "assets/components/blank-page.png", "assets/components/hero-moods.png", "assets/components/pencil-prop.png", "assets/components/pens.png", "assets/layers/t10.00/01_life.png", "assets/layers/t10.00/02_drawing.png", "assets/layers/t10.00/03_lettering.png", "assets/layers/t10.00/04_pencil.png", "assets/layers/t2.80/01_life.png", "assets/layers/t2.80/02_drawing.png", "assets/layers/t2.80/03_lettering.png", "assets/layers/t2.80/04_pencil.png", "assets/layers/t4.60/01_life.png", "assets/layers/t4.60/02_drawing.png", "assets/layers/t4.60/03_lettering.png", "assets/layers/t4.60/04_pencil.png", "assets/layers/t7.80/01_life.png", "assets/layers/t7.80/02_drawing.png", "assets/layers/t7.80/03_lettering.png", "assets/layers/t7.80/04_pencil.png", "audio/cues.json", "audio/mix.flac", "audio/stems/drums.flac", "audio/stems/music.flac", "audio/stems/sfx.flac", "engine/audio.mjs", "engine/audio/dsp.js", "engine/audio/instruments.js", "engine/audio/sfx.js", "engine/browser.mjs", "engine/export.mjs", "engine/finish.mjs", "engine/lib/draw.js", "engine/lib/util.js", "engine/page.html", "engine/render.mjs", "engine/runtime.js", "engine/server.mjs", "film/contact_sheet.jpg", "film/spectrogram.png", "film/stills/01_1.20s.jpg", "film/stills/02_2.80s.jpg", "film/stills/03_4.60s.jpg", "film/stills/04_6.60s.jpg", "film/stills/05_7.80s.jpg", "film/stills/06_10.00s.jpg", "overview/encoded-contact-sheet.jpg", "package.json", "qa.json", "spec.json", "styles/sketchbook/scene.js", "styles/sketchbook/score.js", "styles/sketchbook/timeline.js", "BUNDLE-GUIDE.md" ], "externalPrerequisites": { "runtime": [ "Node.js", "Chromium or Chrome", "FFmpeg and ffprobe" ], "packageDependencies": { "@fontsource/anton": "^5.1.0", "@fontsource/archivo-black": "^5.1.0", "@fontsource/bangers": "^5.1.0", "@fontsource/bebas-neue": "^5.1.0", "@fontsource/caveat": "^5.1.0", "@fontsource/comic-neue": "^5.3.0", "@fontsource/dm-sans": "^5.1.0", "@fontsource/dm-serif-display": "^5.1.0", "@fontsource/fraunces": "^5.1.0", "@fontsource/ibm-plex-mono": "^5.1.0", "@fontsource/instrument-serif": "^5.1.0", "@fontsource/inter": "^5.1.0", "@fontsource/jetbrains-mono": "^5.1.0", "@fontsource/jost": "^5.3.0", "@fontsource/kaushan-script": "^5.3.0", "@fontsource/nunito": "^5.1.0", "@fontsource/permanent-marker": "^5.1.0", "@fontsource/playfair-display": "^5.1.0", "@fontsource/press-start-2p": "^5.1.0", "@fontsource/space-grotesk": "^5.1.0", "@fontsource/space-mono": "^5.1.0", "@fontsource/syne": "^5.1.0", "@fontsource/vt323": "^5.1.0", "three": "0.170.0", "playwright": "1.56.1" }, "lockfileIncluded": false, "coldStart": false }, "license": { "summary": "User-directed publication of supplied authored source; preserve listed third-party notices; no new license granted here.", "includedNoticePaths": [ "THIRD-PARTY-NOTICES/animate-MIT.txt" ], "newLicenseGranted": false } }, "bundle": { "name": "sketchbook--claude-cloud--full.zip", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/sketchbook--claude-cloud--full.zip", "bytes": 16003216, "sha256": "d4119825eb6e3d2232d0b0a5d331d5ea61e995f367c87cb6d7d9ba872d45dc68", "available": true, "label": "15.3 MB", "contents": [ "selected master", "editable source", "variant guidance", "source assets", "audio inputs", "dependency declarations", "file manifest", "designed cover", "starter prompt" ], "includedFiles": 62, "includedFilePaths": [ "CASE_STUDY.md", "RUN.md", "SKILL.md", "STYLE.md", "THIRD-PARTY-NOTICES/animate-MIT.txt", "assets/components/blank-page.png", "assets/components/hero-moods.png", "assets/components/pencil-prop.png", "assets/components/pens.png", "assets/layers/t10.00/01_life.png", "assets/layers/t10.00/02_drawing.png", "assets/layers/t10.00/03_lettering.png", "assets/layers/t10.00/04_pencil.png", "assets/layers/t2.80/01_life.png", "assets/layers/t2.80/02_drawing.png", "assets/layers/t2.80/03_lettering.png", "assets/layers/t2.80/04_pencil.png", "assets/layers/t4.60/01_life.png", "assets/layers/t4.60/02_drawing.png", "assets/layers/t4.60/03_lettering.png", "assets/layers/t4.60/04_pencil.png", "assets/layers/t7.80/01_life.png", "assets/layers/t7.80/02_drawing.png", "assets/layers/t7.80/03_lettering.png", "assets/layers/t7.80/04_pencil.png", "audio/cues.json", "audio/mix.flac", "audio/stems/drums.flac", "audio/stems/music.flac", "audio/stems/sfx.flac", "display/cover.webp", "engine/audio.mjs", "engine/audio/dsp.js", "engine/audio/instruments.js", "engine/audio/sfx.js", "engine/browser.mjs", "engine/export.mjs", "engine/finish.mjs", "engine/lib/draw.js", "engine/lib/util.js", "engine/page.html", "engine/render.mjs", "engine/runtime.js", "engine/server.mjs", "film/contact_sheet.jpg", "film/sketchbook.mp4", "film/spectrogram.png", "film/stills/01_1.20s.jpg", "film/stills/02_2.80s.jpg", "film/stills/03_4.60s.jpg", "film/stills/04_6.60s.jpg", "film/stills/05_7.80s.jpg", "film/stills/06_10.00s.jpg", "overview/encoded-contact-sheet.jpg", "package.json", "qa.json", "spec.json", "starter-prompt.txt", "styles/sketchbook/scene.js", "styles/sketchbook/score.js", "styles/sketchbook/timeline.js", "BUNDLE-GUIDE.md" ], "externalPrerequisites": { "runtime": [ "Node.js", "Chromium or Chrome", "FFmpeg and ffprobe" ], "packageDependencies": { "@fontsource/anton": "^5.1.0", "@fontsource/archivo-black": "^5.1.0", "@fontsource/bangers": "^5.1.0", "@fontsource/bebas-neue": "^5.1.0", "@fontsource/caveat": "^5.1.0", "@fontsource/comic-neue": "^5.3.0", "@fontsource/dm-sans": "^5.1.0", "@fontsource/dm-serif-display": "^5.1.0", "@fontsource/fraunces": "^5.1.0", "@fontsource/ibm-plex-mono": "^5.1.0", "@fontsource/instrument-serif": "^5.1.0", "@fontsource/inter": "^5.1.0", "@fontsource/jetbrains-mono": "^5.1.0", "@fontsource/jost": "^5.3.0", "@fontsource/kaushan-script": "^5.3.0", "@fontsource/nunito": "^5.1.0", "@fontsource/permanent-marker": "^5.1.0", "@fontsource/playfair-display": "^5.1.0", "@fontsource/press-start-2p": "^5.1.0", "@fontsource/space-grotesk": "^5.1.0", "@fontsource/space-mono": "^5.1.0", "@fontsource/syne": "^5.1.0", "@fontsource/vt323": "^5.1.0", "three": "0.170.0", "playwright": "1.56.1" }, "lockfileIncluded": false, "coldStart": false }, "license": { "summary": "User-directed publication of supplied authored source; preserve listed third-party notices; no new license granted here.", "includedNoticePaths": [ "THIRD-PARTY-NOTICES/animate-MIT.txt" ], "newLicenseGranted": false } } }, "cadenceNote": "Encoded fps describes the file. Scene evaluation and held actor poses depend on this source recipe.", "starterPrompt": "Create a {10}-second {1080×1920} sketchbook explainer about {subject} drawn on one notebook page (spiral binding, dot grid, smudges, coffee ring, page edges). Every element is drawn by a visible yellow pencil in three passes: loose graphite, then a confident ink line with a second thin pass, then a quick colour scribble offset from the line. Lines boil on twos (the tremor travels along the stroke). Colour has jobs: one hero colour, highlighter for one word per caption and one glowing object, red for the title underline, green for a single check; everything else is graphite and ink. Hand lettering writes on glyph by glyph and narrates each beat. The camera leans and pans across the same page, never cutting away; small graphite margin life (a plane, an ant, stars). Score: a light desk tune plus the sound of each tool.\n\nSelected example: Seed to Seedling\nFamily: sketchbook\nVariant: claude-cloud\nTypography: Caveat 700, Permanent Marker 400\nProduction: canvas-2d\nExact reference master SHA-256: c835bc444646f8d6bc9a3eae878bd3a2e7ad3c2e8f2443d61a92224ea37d5fac\n\nRead the selected STYLE.md, SKILL.md and reproduction instructions before adapting. Keep the declared renderer and source closure; do not assume another family variant has interchangeable parameters. Preserve exact font or custom glyph sources, color roles, spatial continuity and readable text. Record encoded frame rate, scene evaluation and held poses separately. Review the changed render visually and listen to the encoded audio before claiming those checks passed. Existing approval applies only to its recorded artifact.\n\nSuccess check: the adapted story is clear; key type remains readable in motion; the source rebuilds with its declared inputs; all media and review records identify the exact output. State any untested reproduction, listening or rights limits.", "downloadNote": "Downloads match this selected example. The full bundle includes its source, original video, cover and starter prompt. Source packages include artwork, audio inputs and dependency declarations. Requires Node.js, Chromium or Chrome, FFmpeg and ffprobe. Follow the included run guide for package installation and reproduction limits.", "model": "Opus 5.5", "reasoningEffort": "Extra" } ], "relatedMethodIds": [ "sketchbook" ] }, { "id": "stop-motion-objects", "slug": "stop-motion-objects", "title": "Stop Motion Objects", "premise": "Everyday materials become characters through deliberate pose changes, contact shadows and small tactile details.", "summary": "Everyday materials become characters through deliberate pose changes, contact shadows and small tactile details.", "category": "Craft / tactile", "defaultExampleId": "claude-cloud", "facets": { "material": [ "2d", "stop-motion", "12fps", "on-fives", "replacement-animation", "flat-lay", "props", "contact-shadows", "handmade", "foley" ], "producer": [ "Claude Cloud", "Local Claude" ], "format": [ "Portrait" ], "motion": [], "useCase": [] }, "examples": [ { "id": "claude-cloud", "title": "Seed to Seedling", "producer": "Claude Cloud", "producerEvidence": "The displayed model and reasoning label identify this production lane. Exact runtime model ID and per-film cost are not established by the source packet.", "relationship": "Original family example", "format": "Portrait", "productionMethod": "canvas-2d", "master": { "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/stop-motion-objects--claude-cloud.mp4", "sha256": "59d99210eb30c752889448934d8c5f8cf0b46409cbbb309a574029d4db9bddcf", "bytes": 7914014, "mimeType": "video/mp4", "width": 1080, "height": 1920, "duration": 11.2, "encodedFps": 60 }, "poster": { "url": "/video-library/media/stop-motion-objects--claude-cloud/cover.webp", "sha256": "af387a704d5bcde1c306a17e59fd49f303a4afcaa825f43f64d9762b1c9348cc", "sourceMasterSha256": "59d99210eb30c752889448934d8c5f8cf0b46409cbbb309a574029d4db9bddcf", "timeSeconds": 9.52, "rationale": "Late story beat selected to show the developed subject and visual system; extracted from this exact master." }, "previewVideo": { "url": "/video-library/media/stop-motion-objects--claude-cloud/preview.mp4", "sha256": "39c5a8b519c81f052fe24e6f44ec7598a3d7cc5b6438a341b7edb7f9b94a9910", "sourceMasterSha256": "59d99210eb30c752889448934d8c5f8cf0b46409cbbb309a574029d4db9bddcf", "width": 540, "height": 960, "label": "Playback preview · 540 px wide · full master in Download finished video" }, "gallery": [ { "id": "overview", "role": "encoded-contact-sheet", "label": "Scenes from the finished render · not a planning storyboard", "url": "/video-library/media/stop-motion-objects--claude-cloud/overview.webp", "sourceMasterSha256": "59d99210eb30c752889448934d8c5f8cf0b46409cbbb309a574029d4db9bddcf" }, { "id": "scene-1", "role": "encoded-frame", "label": "Finished-film frame · 2.24 seconds", "url": "/video-library/media/stop-motion-objects--claude-cloud/scene-1.webp", "sourceMasterSha256": "59d99210eb30c752889448934d8c5f8cf0b46409cbbb309a574029d4db9bddcf", "timeSeconds": 2.24 }, { "id": "scene-2", "role": "encoded-frame", "label": "Finished-film frame · 5.6 seconds", "url": "/video-library/media/stop-motion-objects--claude-cloud/scene-2.webp", "sourceMasterSha256": "59d99210eb30c752889448934d8c5f8cf0b46409cbbb309a574029d4db9bddcf", "timeSeconds": 5.6 }, { "id": "scene-3", "role": "encoded-frame", "label": "Finished-film frame · 8.96 seconds", "url": "/video-library/media/stop-motion-objects--claude-cloud/scene-3.webp", "sourceMasterSha256": "59d99210eb30c752889448934d8c5f8cf0b46409cbbb309a574029d4db9bddcf", "timeSeconds": 8.96 } ], "typography": [ "Archivo Black 400", "Permanent Marker 400", "Courier Prime 700" ], "palette": { "wood": [ 205, 156, 104 ], "soil": [ [ 29, 15, 7 ], [ 42, 24, 13 ], [ 59, 36, 20 ], [ 77, 49, 28 ], [ 94, 61, 34 ] ], "bean": [ "#f1dfbc", "#d6b483", "#a9824f" ], "mottle": [ 122, 64, 34 ], "glass": [ "rgba(165,220,255,0.9)", "rgba(52,132,214,0.88)", "rgba(18,64,140,0.95)" ], "cotton": "#f7f5f0", "twine": [ "#a9824f", "#6f5231", "#d4b17b" ], "string": [ "#f1e9d6", "#c4b79c", "#ffffff" ], "felt": [ 78, 154, 68 ], "stitch": "#cfeaae", "fibre": [ "#3fa33a", "#58b84a", "#2c8a2a", "#7fd06a" ], "cap": [ "#ffd978", "#f2b233", "#d98f1c" ], "match": [ "#ead09f", "#c9a66b", "#b8301b" ], "tape": "rgba(236,222,176,0.94)", "marker": "#2b231d", "tile": [ "#f2d9aa", "#dcb57d" ], "tileInk": "#3a2614", "kraft": "#dcc193", "typed": "#24180e" }, "usageGuidance": "Change the subject, copy and timing for your audience. Retain the selected example’s visual rules and recheck the entire reading interval after changes.", "styleRules": "---\nid: stop-motion-objects\nname: Stop-Motion Objects (Seed to Seedling: a tabletop object animation)\nfamily: Craft / tactile\naliases: [object animation, stop motion, stop-mo, tabletop animation, flat-lay animation, found-object animation, kitchen-table animation]\ntags: [2d, stop-motion, 12fps, on-fives, replacement-animation, flat-lay, props, contact-shadows, handmade, foley]\nkind: visual-style\nroute: canvas-2d (CPU canvas; baked prop sprites with contact shadows, all motion quantised to a 12-poses-per-second grid)\nreadiness: { research: catalog-candidate, rights: original-work, referenceImages: own-render, code: built, render: rendered-and-measured }\n---\n\n# Stop-Motion Objects (Seed to Seedling: a tabletop object animation)\n\nSeen from above, a wooden table holds a heap of coffee grounds. A speckled bean slides in and settles. A strip of masking tape slaps down: \"water\".\n- A cotton-wool cloud drops four blue glass beads, one at a time; each is \"absorbed\", and the bean is swapped for a slightly bigger one. Then the bean cracks.\n- \"root\": jute twine is laid down through the grounds a little more each pose, and cotton-string rootlets branch off it.\n- \"light\": a green pipe cleaner pushes up through the crack, two felt leaves unfold, a bottle cap slides in as the sun, and twelve matchsticks are placed around it as rays, one per pose.\n- The tape labels are swept away, and wooden letter tiles drop in one per pose: **FROM SEED / TO SEEDLING**.\n\n**The one rule:** *nothing moves by itself.* Every change happens in discrete poses, as if a hand moved the props between photographs. Only the props being moved jitter, and props keep where they were left.\n\n## Creative direction\n- **Audience:** craft, food and kids' brands; makers; education; campaigns that want warmth and wit on a small budget.\n- **Purpose:** make an explanation feel handmade and playful. Ordinary objects standing in for ideas invite the viewer to decode the metaphor.\n- **Feeling:** curious, cosy, funny and tactile.\n- **Central visual idea:** *the kitchen-table metaphor.* Every story element is played by an everyday object whose material says something (glass beads for water, twine for roots, a bottle cap for the sun).\n- **How the parts work together:**\n - *Composition:* a flat-lay picture plane: the table edge is the sky, the grounds are the earth, gravity points down the frame.\n - *Colour:* the materials' own colours (oak, coffee, bean beige, glass blue, felt green, enamel yellow) under one warm top-left light.\n - *Type:* physical: marker on masking tape, engraved wooden tiles, a typed kraft tag.\n - *Motion:* 12 poses per second, overshoots and settles instead of squash and stretch, and replacement pieces for growth.\n - *Sound:* the real material of every prop, quantised to the same pose grid as the music.\n\n## Fit\n- **Best for:** explainers with a simple process, recipes, product origin stories, social loops, children's content, brand films for makers and small businesses.\n- **Avoid when:** the message needs precision (data, UI), the subject is abstract with no object metaphors, or the brand is high-luxury and wants seamless polish.\n- **Cost:** cheap. Canvas 2D; textures are baked once at setup, and each pose is a handful of sprite draws.\n\n## Visual fingerprint\n| Element | Rule |\n|---|---|\n| Pose grid | 12 poses per second (each pose held 5 frames at 60 fps). All motion uses `tp = floor(t·12)/12`, so frames within a pose are identical. |\n| The animator's hand | A prop being moved is a little off on every pose (±1.4 px, ±0.01 rad, hashed per pose). A resting prop keeps a fixed residual offset (±0.8 px, ±0.006 rad): props are never put back perfectly. Untouched props never boil. |\n| Light | One warm key from the top left. Per-pose exposure flicker ±1.2 % (a practical light is never quite steady). The sun's arrival adds a warm radial lift of up to 16 %. Vignette `rgba(30,18,8,0.5)` at the edges. |\n| Contact shadows | Baked blurred silhouettes per prop, offset (7h, 10h) px, scale 1 + 0.05h, opacity 0.42 − 0.07h, where *h* is the prop's height above the table. A lifted prop throws a bigger, softer, fainter, more offset shadow; this is how a flat-lay shows height. |\n| Rigid props | No squash and stretch. Impact is a one-pose overshoot (`easeOutBack` sampled on the pose grid); growth is **replacement animation** (the bean at 100 / 105 / 110 / 115 / 120 % and a cracked piece); leaves unfold along a stitched fold (14 / 45 / 80 / 100 % width). |\n| Table | Oak planks 270 px wide (grain from warped sine rings plus noise, dark seams). |\n| Earth | Coffee grounds from y ≈ 1200: 2 px grains in 5 browns, clumping noise, crumbs scattered above the edge, a lit rim. |\n| Props | Pinto-style bean with soft streaky speckles and a hilum; glass beads with highlight, rim light, an inner bubble (shows rotation) and a **caustic** spot in the shadow; cotton wool with a grey underside and stray fibres; jute twine (12 px) and cotton string (5 px) with twist marks and frayed tips; a pipe cleaner with 7 seeded fibres per 2.5 px; felt leaves with fuzz on the real cut edge; a crimped enamel bottle cap; matchsticks; masking tape with torn ends; wooden tiles with grain, bevel and engraved letters; a kraft tag. |\n\n### Typography (exact)\n| Role | Family / weight | Size | Material |\n|---|---|---|---|\n| Title tiles | Archivo Black 400 | 56 px on 86 × 86 px tiles, gap 5 | Maple tile, engraved (dark letter with a light edge offset +1.2 px down-right) |\n| Beat labels | Permanent Marker 400 | 40 px | Marker on masking tape (250 × 76) |\n| Note | Courier Prime 700 | 22 px | Typed on a light kraft tag `#DCC193` at (770, 1858) |\n\nRows: \"FROM SEED\" centred at y 200 and \"TO SEEDLING\" at y 296; the space is one empty slot.\n\n## Temporal fingerprint\n90 BPM, so one beat = 8 poses. Events all start on a pose (P(n) = n / 12 s).\n\n| Event | Poses | Seconds |\n|---|---|---|\n| Bean slides in (overshoot on the last pose) | 3-12 | 0.25-1.0 |\n| Tape \"water\" | 12 | 1.0 |\n| Cloud in / out | 12-18 / 38-43 | 1.0-1.5 / 3.17-3.58 |\n| Beads (fall 5 poses with u² spacing, rest 1, shrink over 2) | start 18, 23, 28, 33 | absorbed at 2.08, 2.5, 2.92, 3.33 |\n| Crack (replacement) | 42 | 3.5 |\n| Tape \"root\"; twine laid | 43; 45-63 | 3.58; 3.75-5.25 |\n| Rootlets (6 poses each) | 50, 54, 58, 61 | 4.17-5.58 |\n| Tape \"light\"; pipe cleaner | 65; 66-77 | 5.42; 5.5-6.42 |\n| Leaves unfold (4 poses each) | 77, 79 | 6.42, 6.58 |\n| Cap slides in; 12 matchsticks, one per pose | 72-78; 80-91 | 6.0-6.5; 6.67-7.58 |\n| Labels swept off | 93-97 | 7.75-8.08 |\n| 18 tiles, one per pose, each a 3-pose drop (0 / 60 / 93 / 100 %) | 98-118 | 8.17-9.83 |\n| Settle (the row is straightened) | 120 | 10.0 |\n| Note tag | 122 | 10.17; hold to 11.2 |\n\n## How the composition develops\nBottom-up, then top-down. The story begins at the soil line (bean, beads) and grows both ways (twine down, pipe cleaner up), while the sky gathers its own objects (the cap and matches). Then the labels are cleared and the title is built from the top, tile by tile. The final frame is a finished tableau: everything the animator placed, still slightly imperfect.\n\n## Individual assets\n| Asset | File | Source |\n|---|---|---|\n| Table + coffee-ground earth | `assets/layers/static/01_table.png`, `assets/textures/table-oak-and-coffee-grounds.png` | `bakeTable()` |\n| Bean replacement set (5 sizes + cracked) | `assets/components/bean-replacement-set.png` | `bakeBean()`, `SEED_STEPS` |\n| Glass bead, cotton cloud, felt leaf | `assets/components/glass-bead.png`, `cotton-cloud.png`, `felt-leaf.png` | `bakeBead()`, `bakeCloud()`, `bakeLeaf()` |\n| Bottle-cap sun with matchstick rays | `assets/components/bottle-cap-sun.png` | `bakeCap()`, `bakeMatch()` |\n| Tape label, letter tiles | `assets/components/tape-label.png`, `letter-tiles.png` | `bakeTape()`, `bakeTile()` |\n| Pose strip (one bead over 5 poses) | `assets/components/pose-strip.png` | `drawComponent('pose-strip')` |\n| Felt texture | `assets/textures/felt.png` | `textures()` |\n| Layers | per time `02_objects`, `03_labels`, `04_light` at 1.0, 2.5, 4.6, 7.2 and 11.0 s | `drawLayer()` |\n| Paths | `assets/paths/` | `ROOT`, `ROOTLETS`, `STEM` |\n\n**To shoot it for real:** a top-down copy stand or a phone on a boom arm; one warm lamp at top left; tack putty under every prop; shoot on twos at 24 fps (12 poses/s); move only what changes. The prop list above is the shopping list.\n\n## Sound\n**Score:** a playful 90 BPM in F major: F · Dm · B♭ → C · F. Kalimba in 8ths, an upright-style bass on 1 and the and-of-2, a soft kick, brush snare and shaker from the first tape to the sweep. After that, the tile clacks carry the rhythm.\n\n**Why it locks:** one beat = 8 poses, so the pose grid is a 32nd-note grid. Every prop sound placed on a pose is automatically in time.\n\n| Event | Sound |\n|---|---|\n| Bean sliding | one scrape per pose; a knock on landing |\n| Tape | a rip, then a pat; a whoosh when swept |\n| Cloud | cotton swells; a puff each time a bead leaves |\n| Beads | a glass clink on landing; a gulp, a woody pop and a rising kalimba note (F5 · G5 · A5 · C6) as each is absorbed |\n| Crack | a dry double snap |\n| Twine, string | one fibre scratch per pose laid (lighter and higher for the string) |\n| Pipe cleaner, leaves | a brushy scratch per pose; a felt puff per unfolding pose + A5, C6 |\n| Cap, matches | a metal scrape and clink; one wooden tick + a rising kalimba note per match |\n| Tiles | one wooden clack per tile (shared `tileArrive()`), each a note of an F-major run |\n| Settle | a shuffle, a final clack, and an F chord (kalimba, e-piano, bass) |\n\n**Stems:** `music`, `drums` and `foley`. `cues.json` holds every event, including each bead's landing and absorption and each tile's arrival. The mix targets −16 LUFS.\n\n## Reusable prompt\n> Create an {11}-second {1080×1920} top-down stop-motion object animation of {process}, at 12 poses per second. A flat-lay on a {wooden table}: {material} as the ground; everyday objects play every story role ({list}). Only the prop being moved jitters slightly on each pose; resting props keep a small residual offset; the light flickers ±1 % per pose; every prop has a soft contact shadow that grows and softens when it is lifted. Rigid props: overshoot-and-settle, no squash; growth by replacement pieces. Beat labels in marker on masking tape; the title built from wooden letter tiles dropped in one per pose. Sound: real material foley on the pose grid (90 BPM = 8 poses per beat), a kalimba-led score.\n\n## Adaptation guidance\n| Change | Safe? | Notes |\n|---|---|---|\n| Story and props | ✅ | Pick objects whose material carries meaning; bake each with `sprite()` and place it with `put(…, h)`. |\n| Pose rate | ✅ | 12 poses/s is classic; 8 feels choppier and more handmade; 24 loses the charm. Keep the BPM an exact multiple (posesPerBeat = 12 · 60 / BPM). |\n| Jitter amount | ⚠️ | Keep it small (≈ 1-2 px); a lot reads as camera shake, and boiling untouched props reads as fake. |\n| Squash and stretch | ❌ | Rigid objects don't squash; use overshoot, replacement or a soft material (clay, felt). |\n| Real brand objects | ⚠️ | Avoid identifiable branded packaging unless it is the client's; letter tiles must not copy a board game's tile design (no point values). |\n| 16:9 | ✅ | Wider table; keep the soil line at about 60 % height. |\n| **Essential** | , | The pose grid, touched-only jitter, contact shadows with height, rigid-prop rules, material foley on the grid. |\n\n## Accessibility\n- **Contrast (measured on the rendered film):** engraved tile letters vs maple 7.2:1; marker vs masking tape 10.3:1; the typed tag 6.1:1 (bold Courier on light kraft; the first version measured 3.6:1).\n- **Motion:** 12 poses/s motion is steppy by design, but there are no flashes; the light flicker is ±1.2 %.\n- **Reading:** each label stays on screen ≥ 2.3 s; the complete title holds from 9.83 s to the end (1.4 s).\n\n## Provenance\n- **Source:** from the library's style catalogue. No Animate seed was used.\n- **Originality:** all props, textures, code and audio are original (2026-10-08). Object animation is a broad craft tradition; no specific artist's film is copied.\n- **Fonts:** Archivo Black, Permanent Marker, Courier Prime (SIL OFL / Apache 2.0, via Fontsource).", "review": { "technical": { "state": "Supplied checks passed", "scope": "Source handoff records complete decode, stream dimensions and audio measurements. Browser playback is checked separately.", "artifactSha256": "59d99210eb30c752889448934d8c5f8cf0b46409cbbb309a574029d4db9bddcf" }, "creative": { "state": "Not independently accepted", "scope": "not independently established", "artifactSha256": "59d99210eb30c752889448934d8c5f8cf0b46409cbbb309a574029d4db9bddcf" }, "listening": { "state": "Not verified", "scope": "No perceptual listening pass is established by this library import.", "artifactSha256": "59d99210eb30c752889448934d8c5f8cf0b46409cbbb309a574029d4db9bddcf" }, "reproduction": { "state": "Not tested", "scope": "Source is supplied. Cross-machine cold-start reproduction has not been established.", "artifactSha256": "59d99210eb30c752889448934d8c5f8cf0b46409cbbb309a574029d4db9bddcf" } }, "detailUrl": "https://library.jkylehobson.chatgpt.site/video-library/#family=stop-motion-objects&example=claude-cloud", "processUrl": "/video-library/process.html?family=stop-motion-objects&example=claude-cloud", "downloads": { "prompt": { "available": true, "url": "/video-library/prompts/stop-motion-objects--claude-cloud.txt", "sha256": "f4274b58327232ba06b718bc42a4fa253fcf63b7d192be2629b4cdd036a4d1bb", "bytes": 1757, "label": "Reusable, example-specific instructions" }, "video": { "name": "stop-motion-objects--claude-cloud.mp4", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/stop-motion-objects--claude-cloud.mp4", "bytes": 7914014, "sha256": "59d99210eb30c752889448934d8c5f8cf0b46409cbbb309a574029d4db9bddcf", "available": true, "label": "7.5 MB" }, "source": { "name": "stop-motion-objects--claude-cloud--source.zip", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/stop-motion-objects--claude-cloud--source.zip", "bytes": 24062576, "sha256": "9cd97d71c6ac77108a5eb1c291fe08363e323b906d9467aac52e15bf4b65a99c", "available": true, "label": "22.9 MB", "contents": [ "editable source", "variant guidance", "source assets", "audio inputs", "dependency declarations", "file manifest" ], "includedFiles": 72, "includedFilePaths": [ "CASE_STUDY.md", "RUN.md", "SKILL.md", "STYLE.md", "assets/components/bean-replacement-set.png", "assets/components/bottle-cap-sun.png", "assets/components/cotton-cloud.png", "assets/components/felt-leaf.png", "assets/components/glass-bead.png", "assets/components/letter-tiles.png", "assets/components/pose-strip.png", "assets/components/tape-label.png", "assets/layers/static/01_table.png", "assets/layers/t1.00/02_objects.png", "assets/layers/t1.00/03_labels.png", "assets/layers/t1.00/04_light.png", "assets/layers/t11.00/02_objects.png", "assets/layers/t11.00/03_labels.png", "assets/layers/t11.00/04_light.png", "assets/layers/t2.50/02_objects.png", "assets/layers/t2.50/03_labels.png", "assets/layers/t2.50/04_light.png", "assets/layers/t4.60/02_objects.png", "assets/layers/t4.60/03_labels.png", "assets/layers/t4.60/04_light.png", "assets/layers/t7.20/02_objects.png", "assets/layers/t7.20/03_labels.png", "assets/layers/t7.20/04_light.png", "assets/paths/root.json", "assets/paths/root.svg", "assets/paths/rootlets.json", "assets/paths/rootlets.svg", "assets/paths/stem.json", "assets/paths/stem.svg", "assets/textures/felt.png", "assets/textures/table-oak-and-coffee-grounds.png", "audio/cues.json", "audio/mix.flac", "audio/stems/drums.flac", "audio/stems/foley.flac", "audio/stems/music.flac", "engine/audio.mjs", "engine/audio/dsp.js", "engine/audio/instruments.js", "engine/audio/sfx.js", "engine/browser.mjs", "engine/export.mjs", "engine/finish.mjs", "engine/lib/draw.js", "engine/lib/util.js", "engine/library-index.mjs", "engine/page.html", "engine/render.mjs", "engine/runtime.js", "engine/server.mjs", "film/FILM_DELIVERED_SEPARATELY.txt", "film/contact_sheet.jpg", "film/spectrogram.png", "film/stills/01_1.00s.jpg", "film/stills/02_2.50s.jpg", "film/stills/03_4.60s.jpg", "film/stills/04_7.20s.jpg", "film/stills/05_9.00s.jpg", "film/stills/06_11.00s.jpg", "overview/encoded-contact-sheet.jpg", "package.json", "qa.json", "spec.json", "styles/stop-motion-objects/scene.js", "styles/stop-motion-objects/score.js", "styles/stop-motion-objects/timeline.js", "BUNDLE-GUIDE.md" ], "externalPrerequisites": { "runtime": [ "Node.js", "Chromium or Chrome", "FFmpeg and ffprobe" ], "packageDependencies": { "@fontsource/anton": "^5.1.0", "@fontsource/archivo-black": "^5.1.0", "@fontsource/bangers": "^5.1.0", "@fontsource/bebas-neue": "^5.1.0", "@fontsource/caveat": "^5.1.0", "@fontsource/comic-neue": "^5.3.0", "@fontsource/courier-prime": "^5.3.0", "@fontsource/dm-sans": "^5.1.0", "@fontsource/dm-serif-display": "^5.1.0", "@fontsource/fraunces": "^5.1.0", "@fontsource/ibm-plex-mono": "^5.1.0", "@fontsource/instrument-serif": "^5.1.0", "@fontsource/inter": "^5.1.0", "@fontsource/jetbrains-mono": "^5.1.0", "@fontsource/jost": "^5.3.0", "@fontsource/kaushan-script": "^5.3.0", "@fontsource/nunito": "^5.1.0", "@fontsource/permanent-marker": "^5.1.0", "@fontsource/playfair-display": "^5.1.0", "@fontsource/press-start-2p": "^5.1.0", "@fontsource/space-grotesk": "^5.1.0", "@fontsource/space-mono": "^5.1.0", "@fontsource/stix-two-text": "^5.3.0", "@fontsource/syne": "^5.1.0", "@fontsource/vt323": "^5.1.0", "three": "0.170.0", "playwright": "1.56.1" }, "lockfileIncluded": false, "coldStart": false }, "license": { "summary": "User-directed publication of supplied authored source; preserve listed third-party notices; no new license granted here.", "includedNoticePaths": [], "newLicenseGranted": false } }, "bundle": { "name": "stop-motion-objects--claude-cloud--full.zip", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/stop-motion-objects--claude-cloud--full.zip", "bytes": 32075866, "sha256": "51b03b1954791877758f60bc1d9ba782407f4bf2332788d5adccc572e68ae564", "available": true, "label": "30.6 MB", "contents": [ "selected master", "editable source", "variant guidance", "source assets", "audio inputs", "dependency declarations", "file manifest", "designed cover", "starter prompt" ], "includedFiles": 75, "includedFilePaths": [ "CASE_STUDY.md", "RUN.md", "SKILL.md", "STYLE.md", "assets/components/bean-replacement-set.png", "assets/components/bottle-cap-sun.png", "assets/components/cotton-cloud.png", "assets/components/felt-leaf.png", "assets/components/glass-bead.png", "assets/components/letter-tiles.png", "assets/components/pose-strip.png", "assets/components/tape-label.png", "assets/layers/static/01_table.png", "assets/layers/t1.00/02_objects.png", "assets/layers/t1.00/03_labels.png", "assets/layers/t1.00/04_light.png", "assets/layers/t11.00/02_objects.png", "assets/layers/t11.00/03_labels.png", "assets/layers/t11.00/04_light.png", "assets/layers/t2.50/02_objects.png", "assets/layers/t2.50/03_labels.png", "assets/layers/t2.50/04_light.png", "assets/layers/t4.60/02_objects.png", "assets/layers/t4.60/03_labels.png", "assets/layers/t4.60/04_light.png", "assets/layers/t7.20/02_objects.png", "assets/layers/t7.20/03_labels.png", "assets/layers/t7.20/04_light.png", "assets/paths/root.json", "assets/paths/root.svg", "assets/paths/rootlets.json", "assets/paths/rootlets.svg", "assets/paths/stem.json", "assets/paths/stem.svg", "assets/textures/felt.png", "assets/textures/table-oak-and-coffee-grounds.png", "audio/cues.json", "audio/mix.flac", "audio/stems/drums.flac", "audio/stems/foley.flac", "audio/stems/music.flac", "display/cover.webp", "engine/audio.mjs", "engine/audio/dsp.js", "engine/audio/instruments.js", "engine/audio/sfx.js", "engine/browser.mjs", "engine/export.mjs", "engine/finish.mjs", "engine/lib/draw.js", "engine/lib/util.js", "engine/library-index.mjs", "engine/page.html", "engine/render.mjs", "engine/runtime.js", "engine/server.mjs", "film/FILM_DELIVERED_SEPARATELY.txt", "film/contact_sheet.jpg", "film/spectrogram.png", "film/stills/01_1.00s.jpg", "film/stills/02_2.50s.jpg", "film/stills/03_4.60s.jpg", "film/stills/04_7.20s.jpg", "film/stills/05_9.00s.jpg", "film/stills/06_11.00s.jpg", "film/stop-motion-objects.mp4", "overview/encoded-contact-sheet.jpg", "package.json", "qa.json", "spec.json", "starter-prompt.txt", "styles/stop-motion-objects/scene.js", "styles/stop-motion-objects/score.js", "styles/stop-motion-objects/timeline.js", "BUNDLE-GUIDE.md" ], "externalPrerequisites": { "runtime": [ "Node.js", "Chromium or Chrome", "FFmpeg and ffprobe" ], "packageDependencies": { "@fontsource/anton": "^5.1.0", "@fontsource/archivo-black": "^5.1.0", "@fontsource/bangers": "^5.1.0", "@fontsource/bebas-neue": "^5.1.0", "@fontsource/caveat": "^5.1.0", "@fontsource/comic-neue": "^5.3.0", "@fontsource/courier-prime": "^5.3.0", "@fontsource/dm-sans": "^5.1.0", "@fontsource/dm-serif-display": "^5.1.0", "@fontsource/fraunces": "^5.1.0", "@fontsource/ibm-plex-mono": "^5.1.0", "@fontsource/instrument-serif": "^5.1.0", "@fontsource/inter": "^5.1.0", "@fontsource/jetbrains-mono": "^5.1.0", "@fontsource/jost": "^5.3.0", "@fontsource/kaushan-script": "^5.3.0", "@fontsource/nunito": "^5.1.0", "@fontsource/permanent-marker": "^5.1.0", "@fontsource/playfair-display": "^5.1.0", "@fontsource/press-start-2p": "^5.1.0", "@fontsource/space-grotesk": "^5.1.0", "@fontsource/space-mono": "^5.1.0", "@fontsource/stix-two-text": "^5.3.0", "@fontsource/syne": "^5.1.0", "@fontsource/vt323": "^5.1.0", "three": "0.170.0", "playwright": "1.56.1" }, "lockfileIncluded": false, "coldStart": false }, "license": { "summary": "User-directed publication of supplied authored source; preserve listed third-party notices; no new license granted here.", "includedNoticePaths": [], "newLicenseGranted": false } } }, "cadenceNote": "Encoded fps describes the file. Scene evaluation and held actor poses depend on this source recipe.", "starterPrompt": "Create an {11}-second {1080×1920} top-down stop-motion object animation of {process}, at 12 poses per second. A flat-lay on a {wooden table}: {material} as the ground; everyday objects play every story role ({list}). Only the prop being moved jitters slightly on each pose; resting props keep a small residual offset; the light flickers ±1 % per pose; every prop has a soft contact shadow that grows and softens when it is lifted. Rigid props: overshoot-and-settle, no squash; growth by replacement pieces. Beat labels in marker on masking tape; the title built from wooden letter tiles dropped in one per pose. Sound: real material foley on the pose grid (90 BPM = 8 poses per beat), a kalimba-led score.\n\nSelected example: Seed to Seedling\nFamily: stop-motion-objects\nVariant: claude-cloud\nTypography: Archivo Black 400, Permanent Marker 400, Courier Prime 700\nProduction: canvas-2d\nExact reference master SHA-256: 59d99210eb30c752889448934d8c5f8cf0b46409cbbb309a574029d4db9bddcf\n\nRead the selected STYLE.md, SKILL.md and reproduction instructions before adapting. Keep the declared renderer and source closure; do not assume another family variant has interchangeable parameters. Preserve exact font or custom glyph sources, color roles, spatial continuity and readable text. Record encoded frame rate, scene evaluation and held poses separately. Review the changed render visually and listen to the encoded audio before claiming those checks passed. Existing approval applies only to its recorded artifact.\n\nSuccess check: the adapted story is clear; key type remains readable in motion; the source rebuilds with its declared inputs; all media and review records identify the exact output. State any untested reproduction, listening or rights limits.", "downloadNote": "Downloads match this selected example. The full bundle includes its source, original video, cover and starter prompt. Source packages include artwork, audio inputs and dependency declarations. Requires Node.js, Chromium or Chrome, FFmpeg and ffprobe. Follow the included run guide for package installation and reproduction limits.", "model": "Opus 5.5", "reasoningEffort": "Extra" }, { "id": "local-mended", "title": "mended.", "producer": "Local Claude", "producerEvidence": "Contributor attribution follows the supplied source record; no per-film cost is inferred.", "relationship": "related family; distinct construction and subject; parameters are not interchangeable", "format": "Portrait", "productionMethod": "Authored fabric, thread and needle animation", "master": { "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/stop-motion-objects--local-mended.mp4", "sha256": "a72d9a5ef37c465bf32e0803f51513f55198c8bee3267f7c7fff934205252e10", "bytes": 217797719, "mimeType": "video/mp4", "width": 1080, "height": 1920, "duration": 12.5, "encodedFps": 60 }, "poster": { "url": "/video-library/media/stop-motion-objects--local-mended/cover.webp", "sha256": "95115286566742e96232496c19e79b26479cd856fe841cab3f8f628dc093548d", "sourceMasterSha256": "a72d9a5ef37c465bf32e0803f51513f55198c8bee3267f7c7fff934205252e10", "timeSeconds": 10.625, "rationale": "Late story beat selected to show the developed subject and visual system; extracted from this exact master." }, "previewVideo": { "url": "/video-library/media/stop-motion-objects--local-mended/preview.mp4", "sha256": "78a683af01d9b7c8d62d3f8a9c2b127fe15d793430895ed59cf5fbcd31befe6c", "sourceMasterSha256": "a72d9a5ef37c465bf32e0803f51513f55198c8bee3267f7c7fff934205252e10", "width": 540, "height": 960, "label": "Playback preview · 540 px wide · full master in Download finished video" }, "gallery": [ { "id": "overview", "role": "encoded-contact-sheet", "label": "Scenes from the finished render · not a planning storyboard", "url": "/video-library/media/stop-motion-objects--local-mended/overview.webp", "sourceMasterSha256": "a72d9a5ef37c465bf32e0803f51513f55198c8bee3267f7c7fff934205252e10" }, { "id": "scene-1", "role": "encoded-frame", "label": "Finished-film frame · 2.5 seconds", "url": "/video-library/media/stop-motion-objects--local-mended/scene-1.webp", "sourceMasterSha256": "a72d9a5ef37c465bf32e0803f51513f55198c8bee3267f7c7fff934205252e10", "timeSeconds": 2.5 }, { "id": "scene-2", "role": "encoded-frame", "label": "Finished-film frame · 6.25 seconds", "url": "/video-library/media/stop-motion-objects--local-mended/scene-2.webp", "sourceMasterSha256": "a72d9a5ef37c465bf32e0803f51513f55198c8bee3267f7c7fff934205252e10", "timeSeconds": 6.25 }, { "id": "scene-3", "role": "encoded-frame", "label": "Finished-film frame · 10 seconds", "url": "/video-library/media/stop-motion-objects--local-mended/scene-3.webp", "sourceMasterSha256": "a72d9a5ef37c465bf32e0803f51513f55198c8bee3267f7c7fff934205252e10", "timeSeconds": 10.0 } ], "typography": [ "Custom connected Bézier script · src/lettering.js" ], "palette": null, "usageGuidance": "Change the subject, copy and timing for your audience. Retain the selected example’s visual rules and recheck the entire reading interval after changes.", "styleRules": "# \"mended.\" , stop-motion objects style contract\n\nWave id `stop-motion-objects` (canonical20 physical-object-stop-motion). Original subject. Status: in production; see `docs/production-log.md`. Not accepted by Kyle.\n\n## Identity in one line\n\nOverhead miniature tabletop; real-scale sewing objects animated in 15 Hz stop-motion steps on a native 60 fps master; a needle and red thread repair a torn linen patch, then **stitch the title**; the opening's runaway button becomes the period.\n\n## Story beats (frames @ 60 fps; `B` in `src/timeline.js`)\n\n| Frames | Beat | Picture | Sound |\n|---|---|---|---|\n| 0-56 | Runaway button | red 4-hole button rolls in on its lean from frame-right, Euler-disk wobble, drops flat beside the tear | rolling rumble with per-revolution ticks; accelerating wobble clicks; plastic clack at 56 |\n| 44-64 | Reveal | camera rises to show spool, thimble, pin above the hoop | , |\n| 64-76 | Tug | threaded needle parked in the spool wiggles and pops free | scratchy tug; steel tick |\n| 80-116 | Hops | three hops over the hoop rim onto the linen, trailing red thread from the spool | steel ticks on landings |\n| 128-296 | Repair | 7 cross-stitches, 6 steps each (emerge, pierce+stitch, emerge, pierce+stitch, lie, aim); the tear closes behind each X | fabric \"tk\" per pierce; thread zip + plucked note per pull (pentatonic, rising) |\n| 304-332 | Dive | needle pierces at the tear end and travels hidden under the cloth; camera sweeps to the word area | pierce; surfacing pull note |\n| 340-544 | Writing | backstitch write-on of \"mended\", constant 13.7 mm of thread per step, needle rocks between two pitches | soft stitch ticks every step; one plucked note per letter (A4 B4 D5 E5 F♯5 A5); quiet D pad |\n| 552-584 | Period | the opening button makes two hops into the period position | ticks; clack on landing |\n| 588-604 | Sewn | needle passes through the button holes; two stitches form an X on the button | two plucks (E5, F♯5) |\n| 608-750 | Signed | needle parked upright in the cloth; camera pulls back to the whole set; warmth rises | closing D-major chord (Karplus-Strong) + pad bloom |\n\nThe word is fully legible from ~532 to the end (≈3.6 s), and the settled final composition holds from 668 (1.37 s).\n\n## Typography\n\n- **Custom connected monoline script**, authored as cubic Bézier strokes in `src/lettering.js` (`WORD`). x-height 100 units, ascender 205, slant 0.2 (x' = x − 0.2·y), retraced downstrokes; the d upstroke is the bowl's right side (retraced, never slashing through the bowl). **No font family.**\n- World mapping: 0.23 mm per unit; baseline y = −40 mm, origin x = −70 mm → word ≈141 mm wide, x-height 23 mm. At the final 212 mm view: x-height ≈117 px, thread ≈6 px.\n- Rendering: red cotton **backstitch**; each stitch 2.55 mm chord with a 0.28 mm gap, arched 0.58 mm above the linen and dipping into the cloth at both ends.\n- Period: the hero button (Ø11.6 mm) sewn on with an X.\n- Write-on order = stroke order (stroke-following, not a wipe); stitches appear by stop-motion step.\n\n## Palette (linear albedo in source → approx. display sRGB)\n\n| Role | Linear | Display |\n|---|---|---|\n| Thread / hero button (the only saturated colour) | `.5 .028 .022` / `.5 .045 .03` | ≈ `#BA2A22` |\n| Linen ground | `.73 .645 .5` × weave tone | ≈ `#DDD2BF` |\n| Oak table | `.44 .265 .125` × grain | ≈ `#B48A55` |\n| Birch hoop | `.6 .42 .24` × grain | ≈ `#CBA984` |\n| Brass clasp (metal F0) | `.86 .64 .31` | , |\n| Steel needle / pins (metal) | `.62 .62 .64`, roughness .16 | , |\n| Nickel thimble (metal) | `.7 .68 .64`, roughness .26 | , |\n| Prop buttons | mustard `.58 .36 .055`, navy `.03 .05 .13`, cream `.74 .68 .55`, sage `.22 .31 .2` | , |\n\n## Light, lens, grade (`src/frame.js`)\n\n- **Key:** warm sewing lamp, rectangle 180×140 mm at (−260, 190, 190) mm aimed at the hoop centre, radiance (27, 20.5, 13.5). Elevation ≈30°: long soft shadows to the lower right, light pooling at upper left.\n- **Fill:** cool sky (0.20, 0.25, 0.34) with 24 mm occlusion (occluded fill × 0.18).\n- **Reflections:** white bounce card (1.6) above the set, seen only in reflections, so steel and brass read polished.\n- **Camera:** 560 mm from target, tilted 0.26 rad from vertical, thin lens aperture radius 7 mm (gentle tilt-shift falloff top and bottom), view width 70-214 mm.\n- **Grade:** exposure 0.95 × per-step flicker (±1.4 %), ACES filmic, warmth ramp after 608 (R +7 %, B −6 %), soft vignette.\n\n## Motion grammar\n\n- Native 60 fps master, 750 frames, 12.5 s. **Objects move on 15 Hz steps** (`STEP=4`); the camera (monotone cubic tracks) and grade are 60 Hz. The per-step exposure flicker is part of the stop-motion signature.\n- Rigid objects never squash. Life comes from spacing (eased per step), anticipation (needle aims before each pierce), small rotations (needle rocks; button lean and precession) and contact (stitches dip into the cloth, the button's shadow).\n- The camera always has a job: the opening frame is already in motion; it rises to reveal the thread's source, holds on the repair, sweeps to the word while the needle is hidden, keeps the whole word legible once written, and pulls back for the signed piece.\n\n## Renderer\n\nPlain-Node CPU ray tracer (`src/tracer.js`) , sphere, capsule, capped cylinder with button holes, annular ring, masked disc, yawed box, infinite table plane; BVH; thin lens; area light; adaptive sampling (2-10 spp, ≈4.4 mean); worker threads. Needs no browser, GPU or window server. Deterministic per frame.\n\n## Replaceable parameters\n\n- **Word:** author a new monoline path in `src/lettering.js` (same units/slant), adjust `WORD.x0/y0/k` to fit the hoop, update `LETTERS`. Keep ≥ 2 stitches per letter stroke.\n- **Colours:** thread/button red can change (keep it the single saturated hue); prop button colours are free.\n- **Timing:** `B` beats, `CROSSES`, `STEP` (keep 3-5 frames), camera keys.\n- **Repair:** tear endpoints/opening (`TEAR`), cross geometry (`crossCorners`).\n\n## What breaks the style\n\n- Smooth 60 Hz object motion (loses stop motion) or holds longer than 5 frames (reads broken).\n- Overlay type or a font in place of stitched thread.\n- Cropping the finished word so it reads as another word (e.g. \"ended\").\n- Flat, frontal light; losing contact shadows; glossy plastic linen.\n- More than one saturated colour competing with the thread.", "review": { "technical": { "state": "Supplied checks passed", "scope": "Source handoff records complete decode, stream dimensions and audio measurements. Browser playback is checked separately.", "artifactSha256": "a72d9a5ef37c465bf32e0803f51513f55198c8bee3267f7c7fff934205252e10" }, "creative": { "state": "Not independently accepted", "scope": "see historical variant review; not newly accepted", "artifactSha256": "a72d9a5ef37c465bf32e0803f51513f55198c8bee3267f7c7fff934205252e10" }, "listening": { "state": "Not verified", "scope": "No perceptual listening pass is established by this library import.", "artifactSha256": "a72d9a5ef37c465bf32e0803f51513f55198c8bee3267f7c7fff934205252e10" }, "reproduction": { "state": "Not tested", "scope": "Source is supplied. Cross-machine cold-start reproduction has not been established.", "artifactSha256": "a72d9a5ef37c465bf32e0803f51513f55198c8bee3267f7c7fff934205252e10" } }, "detailUrl": "https://library.jkylehobson.chatgpt.site/video-library/#family=stop-motion-objects&example=local-mended", "processUrl": "/video-library/process.html?family=stop-motion-objects&example=local-mended", "downloads": { "prompt": { "available": true, "url": "/video-library/prompts/stop-motion-objects--local-mended.txt", "sha256": "341418434f6ea495e24cbca696ddd786465553b88f70a54b236cf938bd6f16a9", "bytes": 1287, "label": "Reusable, example-specific instructions" }, "video": { "name": "stop-motion-objects--local-mended.mp4", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/stop-motion-objects--local-mended.mp4", "bytes": 217797719, "sha256": "a72d9a5ef37c465bf32e0803f51513f55198c8bee3267f7c7fff934205252e10", "available": true, "label": "207.7 MB" }, "source": { "name": "stop-motion-objects--local-mended--source.zip", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/stop-motion-objects--local-mended--source.zip", "bytes": 9778434, "sha256": "3cd7c6c3ca59d57d49b48c1fb6e302c68a7eaf9067da2d782ff18d3d3b36d002", "available": true, "label": "9.3 MB", "contents": [ "editable source", "variant guidance", "source assets", "audio inputs", "dependency declarations", "file manifest" ], "includedFiles": 24, "includedFilePaths": [ "PORTABILITY/portability.md", "SKILL.md", "STYLE.md", "assets/manifest.json", "audio/score.mjs", "audio/stems/effects.wav", "audio/stems/music.wav", "audio/stems/room.wav", "docs/creative-treatment.md", "docs/production-log.md", "docs/project-map.md", "outputs/soundtrack.wav", "overview/encoded-contact-sheet.jpg", "package.json", "scripts/render.mjs", "scripts/validate.mjs", "scripts/worker.mjs", "src/frame.js", "src/lettering.js", "src/materials.js", "src/scene.js", "src/timeline.js", "src/tracer.js", "BUNDLE-GUIDE.md" ], "externalPrerequisites": { "runtime": [ "Node.js", "Chromium or Chrome", "FFmpeg and ffprobe" ], "packageDependencies": { "pngjs": "7.0.0" }, "lockfileIncluded": false, "coldStart": false }, "license": { "summary": "User-directed publication of supplied authored source; preserve listed third-party notices; no new license granted here.", "includedNoticePaths": [], "newLicenseGranted": false } }, "bundle": { "name": "stop-motion-objects--local-mended--full.zip", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/stop-motion-objects--local-mended--full.zip", "bytes": 227687171, "sha256": "d370df87582acc152240588d973fd6a2e7ed5afddacfc47f64331f9d2cb8b1e5", "available": true, "label": "217.1 MB", "contents": [ "selected master", "editable source", "variant guidance", "source assets", "audio inputs", "dependency declarations", "file manifest", "designed cover", "starter prompt" ], "includedFiles": 27, "includedFilePaths": [ "PORTABILITY/portability.md", "SKILL.md", "STYLE.md", "assets/manifest.json", "audio/score.mjs", "audio/stems/effects.wav", "audio/stems/music.wav", "audio/stems/room.wav", "display/cover.webp", "docs/creative-treatment.md", "docs/production-log.md", "docs/project-map.md", "outputs/mended.mp4", "outputs/soundtrack.wav", "overview/encoded-contact-sheet.jpg", "package.json", "scripts/render.mjs", "scripts/validate.mjs", "scripts/worker.mjs", "src/frame.js", "src/lettering.js", "src/materials.js", "src/scene.js", "src/timeline.js", "src/tracer.js", "starter-prompt.txt", "BUNDLE-GUIDE.md" ], "externalPrerequisites": { "runtime": [ "Node.js", "Chromium or Chrome", "FFmpeg and ffprobe" ], "packageDependencies": { "pngjs": "7.0.0" }, "lockfileIncluded": false, "coldStart": false }, "license": { "summary": "User-directed publication of supplied authored source; preserve listed third-party notices; no new license granted here.", "includedNoticePaths": [], "newLicenseGranted": false } } }, "cadenceNote": "Encoded fps describes the file. Scene evaluation and held actor poses depend on this source recipe.", "starterPrompt": "Create a short Stop Motion Objects film about {subject} for {audience}. Use the selected example as a visual reference. Preserve its composition, material, type, motion and audio relationships while adapting the story.\n\nSelected example: mended.\nFamily: stop-motion-objects\nVariant: local-mended\nTypography: Custom connected Bézier script · src/lettering.js\nProduction: Authored fabric, thread and needle animation\nExact reference master SHA-256: a72d9a5ef37c465bf32e0803f51513f55198c8bee3267f7c7fff934205252e10\n\nRead the selected STYLE.md, SKILL.md and reproduction instructions before adapting. Keep the declared renderer and source closure; do not assume another family variant has interchangeable parameters. Preserve exact font or custom glyph sources, color roles, spatial continuity and readable text. Record encoded frame rate, scene evaluation and held poses separately. Review the changed render visually and listen to the encoded audio before claiming those checks passed. Existing approval applies only to its recorded artifact.\n\nSuccess check: the adapted story is clear; key type remains readable in motion; the source rebuilds with its declared inputs; all media and review records identify the exact output. State any untested reproduction, listening or rights limits.", "downloadNote": "Downloads match this selected example. The full bundle includes its source, original video, cover and starter prompt. Source packages include artwork, audio inputs and dependency declarations. Requires Node.js, Chromium or Chrome, FFmpeg and ffprobe. Follow the included run guide for package installation and reproduction limits.", "model": null, "reasoningEffort": null } ], "relatedMethodIds": [] }, { "id": "technical-blueprint", "slug": "technical-blueprint", "title": "Technical Blueprint", "premise": "A drawing that builds itself: precise plotter lines, section hatching and engineering annotations on a deep blue field.", "summary": "A drawing that builds itself: precise plotter lines, section hatching and engineering annotations on a deep blue field.", "category": "Technical / schematic", "defaultExampleId": "claude-cloud", "facets": { "material": [ "technical", "schematic", "blueprint", "mechanism", "engineering", "annotation", "process" ], "producer": [ "Claude Cloud" ], "format": [ "Portrait" ], "motion": [], "useCase": [] }, "examples": [ { "id": "claude-cloud", "title": "Seed to Seedling", "producer": "Claude Cloud", "producerEvidence": "The displayed model and reasoning label identify this production lane. Exact runtime model ID and per-film cost are not established by the source packet.", "relationship": "Original family example", "format": "Portrait", "productionMethod": "canvas-2d", "master": { "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/technical-blueprint--claude-cloud.mp4", "sha256": "01288a6587e2a7ed4434f4f9ddc9358bb25acfb51d80e98bfbbc3b5dcf9f981f", "bytes": 8520056, "mimeType": "video/mp4", "width": 1080, "height": 1920, "duration": 9.0, "encodedFps": 60 }, "poster": { "url": "/video-library/media/technical-blueprint--claude-cloud/cover.webp", "sha256": "91f544382e7cfcbb616df1fad8d2369340e05b0ad8f646f23ef52bed31a93d27", "sourceMasterSha256": "01288a6587e2a7ed4434f4f9ddc9358bb25acfb51d80e98bfbbc3b5dcf9f981f", "timeSeconds": 7.65, "rationale": "Late story beat selected to show the developed subject and visual system; extracted from this exact master." }, "previewVideo": { "url": "/video-library/media/technical-blueprint--claude-cloud/preview.mp4", "sha256": "b1ea0422ffb1de373b1b9b1975c79c4a9b60a34ce2c8b7aaf4704a97f9b1a84f", "sourceMasterSha256": "01288a6587e2a7ed4434f4f9ddc9358bb25acfb51d80e98bfbbc3b5dcf9f981f", "width": 540, "height": 960, "label": "Playback preview · 540 px wide · full master in Download finished video" }, "gallery": [ { "id": "overview", "role": "encoded-contact-sheet", "label": "Scenes from the finished render · not a planning storyboard", "url": "/video-library/media/technical-blueprint--claude-cloud/overview.webp", "sourceMasterSha256": "01288a6587e2a7ed4434f4f9ddc9358bb25acfb51d80e98bfbbc3b5dcf9f981f" }, { "id": "scene-1", "role": "encoded-frame", "label": "Finished-film frame · 1.8 seconds", "url": "/video-library/media/technical-blueprint--claude-cloud/scene-1.webp", "sourceMasterSha256": "01288a6587e2a7ed4434f4f9ddc9358bb25acfb51d80e98bfbbc3b5dcf9f981f", "timeSeconds": 1.8 }, { "id": "scene-2", "role": "encoded-frame", "label": "Finished-film frame · 4.5 seconds", "url": "/video-library/media/technical-blueprint--claude-cloud/scene-2.webp", "sourceMasterSha256": "01288a6587e2a7ed4434f4f9ddc9358bb25acfb51d80e98bfbbc3b5dcf9f981f", "timeSeconds": 4.5 }, { "id": "scene-3", "role": "encoded-frame", "label": "Finished-film frame · 7.2 seconds", "url": "/video-library/media/technical-blueprint--claude-cloud/scene-3.webp", "sourceMasterSha256": "01288a6587e2a7ed4434f4f9ddc9358bb25acfb51d80e98bfbbc3b5dcf9f981f", "timeSeconds": 7.2 } ], "typography": [ "Space Grotesk", "IBM Plex Mono", "JetBrains Mono" ], "palette": { "ground": "#0F3D7A", "groundDeep": "#0B2F61", "line": "#EAF2FF", "lineSecondary": "rgba(234,242,255,0.7)", "lineFaint": "rgba(234,242,255,0.35)", "flowAccent": "#7FD6FF", "energyAccent": "#FFD25A", "gridMinor": "rgba(234,242,255,0.05)", "gridMajor": "rgba(234,242,255,0.13)" }, "usageGuidance": "Change the subject, copy and timing for your audience. Retain the selected example’s visual rules and recheck the entire reading interval after changes.", "styleRules": "---\nid: technical-blueprint\nname: Technical Blueprint\nfamily: technical / schematic\naliases: [blueprint, cyanotype schematic, engineering drawing, CAD plot, technical section]\ntags: [technical, schematic, blueprint, mechanism, engineering, annotation, process]\nkind: visual-style\nroute: canvas-2d\nreadiness: { research: authored, rights: original-work, referenceImages: own-render, code: built, render: rendered-and-measured }\n---\n\n# Technical Blueprint\n\nAn engineering drawing that draws itself. White plotter linework sits on a mottled Prussian-blue cyanotype with a fine grid. A CAD crosshair cursor with a live X/Y readout plots every line at near-constant pen speed. The story is told in the **grammar of technical drawing**: a section view with hatching, dimension lines that measure change, a magnified detail circle (\"DETAIL A · 4:1\"), numbered balloons, a parts list and a title block. It feels precise, credible and quietly thrilling, like watching an engineer think.\n\n**The one rule:** *nothing appears that a drafter wouldn't draw.* Every element is a line, hatch, dimension, symbol or annotation, and it arrives by being plotted.\n\n## Creative direction\n- **Audience:** curious adults, technical buyers, students. People who trust evidence and enjoy seeing how things work.\n- **Purpose:** make a process feel *understood and engineered*: named parts, measured change, a clear sequence.\n- **Feeling:** calm precision, credibility, quiet wonder at a mechanism revealing itself.\n- **Central visual idea:** *the drawing draws itself.* A visible tool (the CAD cursor) plots every mark, so the viewer watches an explanation being constructed rather than presented.\n- **How the parts work together:**\n - *Type* is technical labelling (mono, uppercase) that decodes like data, so words feel measured, not written.\n - *Composition* follows a real drawing sheet (border, title block, detail circle, parts list), so the layout carries authority before anything moves.\n - *Colour* is almost absent (white on blue). The two accents carry meaning (cyan = flow/water, yellow = energy/light).\n - *Motion* is the pen's constant speed and the cursor's travel; nothing floats or bounces.\n - *Sound* gives the tool a voice (servo + pen clicks), making the cursor a character.\n\n## How the composition develops\n| Phase | Frame state | Spatial idea |\n|---|---|---|\n| 0-1.7 s | An empty sheet with grid and border; the title block plots; the ground line and seed section plot | Establish the sheet and its datum |\n| 1.8-3.0 s | Flow arrows converge on the seed; a dimension measures its swelling | Change shown as *measurement* |\n| 3.0-4.7 s | The root plots downward; a detail circle opens bottom-left with the magnified radicle | \"Zoom\" by drawing convention, not camera |\n| 4.8-6.9 s | The shoot rises and occludes the ground line (hidden-line rule); cotyledons + angle dimension; light arrows from the top right | Occlusion creates depth; the frame fills upward |\n| 7.2-9.0 s | Balloons 1-4, parts list (light arrows retire to make room), title block updates | The drawing becomes a finished, catalogued sheet |\n\n## Fit\n- **Best for:** how-things-work, mechanisms, product anatomy, engineering and science explainers, process steps with named parts, B2B/industrial credibility.\n- **Avoid when:** warmth or emotion leads; the audience needs colour coding beyond 2 accents; the subject has no parts or structure; the text is long (mono labels must stay short).\n- **Cost:** low. Canvas 2D, about 0.13 s per frame with 3 workers (540 frames ≈ 70 s); a one-off baked mottle texture.\n\n## Visual fingerprint\n| Element | Rule |\n|---|---|\n| Composition | Drawing border inset 40 px. Header top-left. Subject on the centre axis. Detail circle in a free corner (bottom-left). Title block bottom-right. Parts list (BOM) top-right at the end. Ground or datum line with 45° hatch ticks. |\n| Shape language | True geometry: ellipses, splines, offset outlines (double lines for thickness), circles for balloons and details. |\n| Line | Hierarchy by weight: 3.5 px primary outline, 2.5 px secondary, 2 px dimensions/leaders, 1.4 px hatch, dash-dot `[22,8,4,8]` centrelines at 35 % alpha. Round caps. |\n| Texture / material | Cyanotype mottle (70 soft radial blooms, ±10 % value) + a soft vignette + 4 % grain. Lines are crisp, never textured. |\n| Lighting / depth | None. Depth comes from the **hidden-line convention**: the nearer part is filled with background colour to occlude the lines behind it (the stem cuts the ground line). |\n| Typography | See the table below; exact positions are in `spec.json → typography`. |\n\n### Typography (exact)\n| Role | Family / weight | Size | Case · tracking · align | Enter → settle |\n|---|---|---|---|---|\n| Drawing title \"SEED → SEEDLING\" | Space Grotesk 700 | 70 px | upper · 0 · left at x 80, baseline 150 | character scramble 0.6 s (resolved chars trail the noise front by 3) → held |\n| Step line \"01 · WATER WAKES THE SEED\" | IBM Plex Mono 600 | 38 px | upper · 0 · left x 80, baseline 214, cyan | scramble 0.45 s on each step change → held until the next step |\n| Callouts (\"H₂O IN\", \"SWELLS ×1.12\", \"LIGHT\", \"θ OPEN\") | IBM Plex Mono 600 / JetBrains Mono 700 | 30-34 px | upper · centred on their geometry | fade 0.3 s after their geometry is plotted; values update live (×1.00 → ×1.12) |\n| Technical labels (TITLE, DWG NO., GROUND LEVEL) | IBM Plex Mono 400 | 20-26 px | upper · left | appear with their box/line |\n| Parts list rows | IBM Plex Mono 600 | 24 px | upper · left, 40 px row pitch | scrambled in row by row, 0.12 s apart |\n| Balloon numbers | JetBrains Mono 700 | 28 px | centred in a 28 px-radius circle | pop when the leader arrives |\n| Cursor readout | IBM Plex Mono 400 | 22 px | `X 000.0 Y 000.0`, offset (+20, −20) from the cursor | live every frame |\n\n### Palette roles\n| Role | Value | Notes |\n|---|---|---|\n| Ground (cyanotype) | `#0F3D7A`, deep `#0B2F61` | mottled, vignetted |\n| Line | `#EAF2FF` | all geometry and primary text |\n| Secondary line | `rgba(234,242,255,0.7)` / `0.35` | hatch, centrelines, minor labels |\n| Grid | white at 5 % (30 px) and 13 % (150 px) | |\n| Flow accent | `#7FD6FF` cyan | water, the active step line, the coat crack |\n| Energy accent | `#FFD25A` yellow | light and the angle dimension only |\n\n**Invariants:** blue ground + white line; plotted arrival; drafting grammar; two accents maximum. **Adaptable tokens:** ground hue (blueprint blue, sepia \"whiteprint\", graphite-on-vellum), accent hues, the title-block text.\n\n## Temporal fingerprint\n| Element | Rule |\n|---|---|\n| Pose cadence | Ones at 60 fps. |\n| Easing | Plotting is **near-constant speed** (`0.85·linear + 0.15·smoothstep`). Cursor travel between ops is cubic in-out. Arrows ease out. |\n| Entrances / exits | Lines plot from their start point; text scrambles in (0.45-0.6 s); balloons pop after their leader arrives. Elements leave only when they've done their job (the water arrows fade at the next step; the light arrows retire for the parts list). |\n| Anticipation / settle | None. The pen-up/pen-down rhythm is the punctuation. |\n| Camera | Imperceptible push (1.0 → 1.035 over the story), released at the end. Zoom is done by drawing a **detail circle**, not by moving the camera. |\n| Transitions | None. One drawing accumulates; the step line changes. |\n| Continuity object | The CAD cursor with its coordinate readout: it draws everything, glides between operations, then parks. |\n| Text holds | Step lines ≥ 1.8 s; the final assembly ≥ 1.8 s. |\n| Idle motion | Water arrows' dashes flow (`lineDashOffset = −60·t`). |\n\n## Sound fingerprint\n\"Drafting room.\" A plotter-servo voice whenever the cursor draws: a wandering 170 Hz motor tone, 42 Hz stepper pulses and bandpassed pen scratch, plus a pen-down click (1.8 kHz) and a pen-up click (2.4 kHz) on every operation. Header decodes are bursts of tiny data ticks; parts-list rows are typed. Under it sits a calm D-minor bed (Dm9 → B♭maj7 → Gm9 → Dm) with eighth-note plucked arpeggios and a soft clock tick on each beat. Accent dings mark the dimension, the θ angle and the light. 100 BPM.\n\n## Reusable prompt\n> Create a {9}-second {1080×1920} technical-blueprint video explaining {subject}. Render it as an engineering drawing that draws itself: white linework on a mottled Prussian-blue cyanotype with a 30/150 px grid and an inset border. A CAD crosshair cursor with a live X/Y readout plots every line at near-constant pen speed and glides between operations. Tell the story with drafting conventions: a section view with 45° hatching, dimension lines that measure change, a magnified detail circle (\"DETAIL A · 4:1\"), hidden-line occlusion, numbered balloons, a parts list and a title block. Line weights 3.5/2.5/2/1.4 px; dash-dot centrelines. Uppercase IBM Plex Mono labels that decode in with a character scramble; a bold grotesk title. Accents: cyan for flow, yellow for energy only. Sound: plotter servo whirr while drawing, pen-down/up clicks, data ticks for text, a calm minor ambient bed. Avoid: shading or gradients on geometry, more than two accents, camera zooms (use detail circles), long sentences.\n\n## Do / don't\n**Do:** let the pen and cursor be the narrator; label parts with real names plus a plain gloss (\"RADICLE (ROOT)\"); use dimensions to show change (\"SWELLS ×1.12\"); retire annotations when the next step needs the space.\n**Don't:** fade lines in (they must be plotted); colour-fill shapes; let readouts or labels run past the border; clutter the title block.\n\n## Adaptation guidance\n| Change | Safe? | Notes |\n|---|---|---|\n| Copy / labels | ✅ | Keep labels ≤ 28 characters, uppercase; pair technical names with a plain gloss. |\n| Subject | ✅ with redesign of geometry | Needs named parts, a sectionable body, and one measurable change per step. Subjects without structure (feelings, abstractions) don't suit. |\n| Colours | ✅ tokens | Ground + line pair can change (sepia whiteprint, graphite on vellum). Keep ≥ 7:1 line contrast and ≤ 2 accents with fixed meanings. |\n| Fonts | ✅ | Any mono for labels + any grotesk for the title. Character widths change line lengths, so re-check the title block and BOM fit. |\n| Format 16:9 | ⚠️ redesign layout | Title block moves to the bottom-right of a landscape sheet; detail circle to the right third; the cursor path is re-planned. |\n| Duration | ✅ | Add or remove plot ops; keep the plotter speed (pixels/second) constant rather than stretching ops. |\n| **Essential (don't change)** | , | Plotted arrival; the CAD cursor as narrator; drafting conventions (section, dimension, detail, balloons, title block); hidden-line occlusion; white-on-ground linework. |\n\n## Sample beat outline (as rendered)\n| Time | Picture | Sound |\n|---|---|---|\n| 0-1.7 | Border, grid and title block plot; the cursor plots the ground line and the seed section | servo, pen clicks, decode ticks |\n| 1.8-3.0 | \"01 · WATER WAKES THE SEED\": dashed cyan flow arrows; a dimension line measures \"SWELLS ×1.12\" | flow sweeps + bubbles, ding |\n| 3.0-4.7 | \"02 · A ROOT REACHES DOWN\": the coat cracks; the radicle plots with double outline and centreline; DETAIL A 4:1; root hairs | crack click, lens sweep, servo |\n| 4.8-6.9 | \"03 · A SHOOT FINDS THE LIGHT\": the hooked shoot rises and occludes the ground line, straightens; cotyledons; angle dimension \"θ OPEN\"; light arrows | rising sweep, dings |\n| 7.2-9.0 | \"SEEDLING · ASSEMBLY\": balloons 1-4, parts list, title block updates, note | pops, typing, chord |\n\n## Accessibility\nWhite on blue is about 9.5:1; cyan on blue about 6:1; yellow on blue about 7:1. Mono labels ≥ 22 px are small on phones, so keep essential words at ≥ 30 px (the step line is 38 px). No flashes. Scramble text resolves within 0.6 s and is then held.\n\n## Provenance\nOriginal work (2026-10-07) following generic engineering-drawing conventions. Fonts: IBM Plex Mono, JetBrains Mono, Space Grotesk (SIL OFL 1.1).", "review": { "technical": { "state": "Supplied checks passed", "scope": "Source handoff records complete decode, stream dimensions and audio measurements. Browser playback is checked separately.", "artifactSha256": "01288a6587e2a7ed4434f4f9ddc9358bb25acfb51d80e98bfbbc3b5dcf9f981f" }, "creative": { "state": "Not independently accepted", "scope": "not independently established", "artifactSha256": "01288a6587e2a7ed4434f4f9ddc9358bb25acfb51d80e98bfbbc3b5dcf9f981f" }, "listening": { "state": "Not verified", "scope": "No perceptual listening pass is established by this library import.", "artifactSha256": "01288a6587e2a7ed4434f4f9ddc9358bb25acfb51d80e98bfbbc3b5dcf9f981f" }, "reproduction": { "state": "Not tested", "scope": "Source is supplied. Cross-machine cold-start reproduction has not been established.", "artifactSha256": "01288a6587e2a7ed4434f4f9ddc9358bb25acfb51d80e98bfbbc3b5dcf9f981f" } }, "detailUrl": "https://library.jkylehobson.chatgpt.site/video-library/#family=technical-blueprint&example=claude-cloud", "processUrl": "/video-library/process.html?family=technical-blueprint&example=claude-cloud", "downloads": { "prompt": { "available": true, "url": "/video-library/prompts/technical-blueprint--claude-cloud.txt", "sha256": "f144356dd85213b6160892fa3391ba31b976b711613a20bce132864f098167c8", "bytes": 2043, "label": "Reusable, example-specific instructions" }, "video": { "name": "technical-blueprint--claude-cloud.mp4", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/technical-blueprint--claude-cloud.mp4", "bytes": 8520056, "sha256": "01288a6587e2a7ed4434f4f9ddc9358bb25acfb51d80e98bfbbc3b5dcf9f981f", "available": true, "label": "8.1 MB" }, "source": { "name": "technical-blueprint--claude-cloud--source.zip", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/technical-blueprint--claude-cloud--source.zip", "bytes": 13070743, "sha256": "ee740cb1b8f47649e954f5ac36fd715563e05ea686017f3a0d99d1440d3a754a", "available": true, "label": "12.5 MB", "contents": [ "editable source", "variant guidance", "source assets", "audio inputs", "dependency declarations", "file manifest" ], "includedFiles": 68, "includedFilePaths": [ "CASE_STUDY.md", "RUN.md", "SKILL.md", "STYLE.md", "assets/components/balloon.png", "assets/components/cad-cursor.png", "assets/components/detail-A.png", "assets/components/parts-list.png", "assets/components/seed-section.png", "assets/components/shoot-cotyledons.png", "assets/components/title-block.png", "assets/layers/t2.70/01_grid.png", "assets/layers/t2.70/02_drawing.png", "assets/layers/t2.70/03_annotation.png", "assets/layers/t2.70/04_cursor.png", "assets/layers/t4.40/01_grid.png", "assets/layers/t4.40/02_drawing.png", "assets/layers/t4.40/03_annotation.png", "assets/layers/t4.40/04_cursor.png", "assets/layers/t8.70/01_grid.png", "assets/layers/t8.70/02_drawing.png", "assets/layers/t8.70/03_annotation.png", "assets/layers/t8.70/04_cursor.png", "assets/paths/groundLine.json", "assets/paths/groundLine.svg", "assets/paths/root.json", "assets/paths/root.svg", "assets/paths/seedInner.json", "assets/paths/seedInner.svg", "assets/paths/seedOuter.json", "assets/paths/seedOuter.svg", "assets/paths/shootFinal.json", "assets/paths/shootFinal.svg", "assets/textures/cyanotype-plate.png", "assets/textures/grain-tile.png", "audio/cues.json", "audio/mix.flac", "audio/stems/music.flac", "audio/stems/sfx.flac", "engine/audio.mjs", "engine/audio/dsp.js", "engine/audio/instruments.js", "engine/audio/sfx.js", "engine/browser.mjs", "engine/export.mjs", "engine/finish.mjs", "engine/lib/draw.js", "engine/lib/util.js", "engine/page.html", "engine/render.mjs", "engine/runtime.js", "engine/server.mjs", "film/contact_sheet.png", "film/spectrogram.png", "film/stills/01_1.60s.jpg", "film/stills/02_2.70s.jpg", "film/stills/03_4.40s.jpg", "film/stills/04_6.20s.jpg", "film/stills/05_6.90s.jpg", "film/stills/06_8.70s.jpg", "overview/encoded-contact-sheet.jpg", "package.json", "qa.json", "spec.json", "styles/technical-blueprint/scene.js", "styles/technical-blueprint/score.js", "styles/technical-blueprint/timeline.js", "BUNDLE-GUIDE.md" ], "externalPrerequisites": { "runtime": [ "Node.js", "Chromium or Chrome", "FFmpeg and ffprobe" ], "packageDependencies": { "three": "0.170.0", "@fontsource/fraunces": "^5.1.0", "@fontsource/dm-sans": "^5.1.0", "@fontsource/inter": "^5.1.0", "@fontsource/space-grotesk": "^5.1.0", "@fontsource/ibm-plex-mono": "^5.1.0", "@fontsource/jetbrains-mono": "^5.1.0", "@fontsource/playfair-display": "^5.1.0", "@fontsource/bebas-neue": "^5.1.0", "@fontsource/archivo-black": "^5.1.0", "@fontsource/caveat": "^5.1.0", "@fontsource/press-start-2p": "^5.1.0", "@fontsource/instrument-serif": "^5.1.0", "@fontsource/syne": "^5.1.0", "@fontsource/permanent-marker": "^5.1.0", "@fontsource/vt323": "^5.1.0", "@fontsource/dm-serif-display": "^5.1.0", "@fontsource/anton": "^5.1.0", "@fontsource/nunito": "^5.1.0", "@fontsource/bangers": "^5.1.0", "@fontsource/space-mono": "^5.1.0", "playwright": "1.56.1" }, "lockfileIncluded": false, "coldStart": false }, "license": { "summary": "User-directed publication of supplied authored source; preserve listed third-party notices; no new license granted here.", "includedNoticePaths": [], "newLicenseGranted": false } }, "bundle": { "name": "technical-blueprint--claude-cloud--full.zip", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/technical-blueprint--claude-cloud--full.zip", "bytes": 21630267, "sha256": "023a7c8e050b639fb4aa40d58416ede57a33538ceb3fd3d5fa9634792200986b", "available": true, "label": "20.6 MB", "contents": [ "selected master", "editable source", "variant guidance", "source assets", "audio inputs", "dependency declarations", "file manifest", "designed cover", "starter prompt" ], "includedFiles": 71, "includedFilePaths": [ "CASE_STUDY.md", "RUN.md", "SKILL.md", "STYLE.md", "assets/components/balloon.png", "assets/components/cad-cursor.png", "assets/components/detail-A.png", "assets/components/parts-list.png", "assets/components/seed-section.png", "assets/components/shoot-cotyledons.png", "assets/components/title-block.png", "assets/layers/t2.70/01_grid.png", "assets/layers/t2.70/02_drawing.png", "assets/layers/t2.70/03_annotation.png", "assets/layers/t2.70/04_cursor.png", "assets/layers/t4.40/01_grid.png", "assets/layers/t4.40/02_drawing.png", "assets/layers/t4.40/03_annotation.png", "assets/layers/t4.40/04_cursor.png", "assets/layers/t8.70/01_grid.png", "assets/layers/t8.70/02_drawing.png", "assets/layers/t8.70/03_annotation.png", "assets/layers/t8.70/04_cursor.png", "assets/paths/groundLine.json", "assets/paths/groundLine.svg", "assets/paths/root.json", "assets/paths/root.svg", "assets/paths/seedInner.json", "assets/paths/seedInner.svg", "assets/paths/seedOuter.json", "assets/paths/seedOuter.svg", "assets/paths/shootFinal.json", "assets/paths/shootFinal.svg", "assets/textures/cyanotype-plate.png", "assets/textures/grain-tile.png", "audio/cues.json", "audio/mix.flac", "audio/stems/music.flac", "audio/stems/sfx.flac", "display/cover.webp", "engine/audio.mjs", "engine/audio/dsp.js", "engine/audio/instruments.js", "engine/audio/sfx.js", "engine/browser.mjs", "engine/export.mjs", "engine/finish.mjs", "engine/lib/draw.js", "engine/lib/util.js", "engine/page.html", "engine/render.mjs", "engine/runtime.js", "engine/server.mjs", "film/contact_sheet.png", "film/spectrogram.png", "film/stills/01_1.60s.jpg", "film/stills/02_2.70s.jpg", "film/stills/03_4.40s.jpg", "film/stills/04_6.20s.jpg", "film/stills/05_6.90s.jpg", "film/stills/06_8.70s.jpg", "film/technical-blueprint.mp4", "overview/encoded-contact-sheet.jpg", "package.json", "qa.json", "spec.json", "starter-prompt.txt", "styles/technical-blueprint/scene.js", "styles/technical-blueprint/score.js", "styles/technical-blueprint/timeline.js", "BUNDLE-GUIDE.md" ], "externalPrerequisites": { "runtime": [ "Node.js", "Chromium or Chrome", "FFmpeg and ffprobe" ], "packageDependencies": { "three": "0.170.0", "@fontsource/fraunces": "^5.1.0", "@fontsource/dm-sans": "^5.1.0", "@fontsource/inter": "^5.1.0", "@fontsource/space-grotesk": "^5.1.0", "@fontsource/ibm-plex-mono": "^5.1.0", "@fontsource/jetbrains-mono": "^5.1.0", "@fontsource/playfair-display": "^5.1.0", "@fontsource/bebas-neue": "^5.1.0", "@fontsource/archivo-black": "^5.1.0", "@fontsource/caveat": "^5.1.0", "@fontsource/press-start-2p": "^5.1.0", "@fontsource/instrument-serif": "^5.1.0", "@fontsource/syne": "^5.1.0", "@fontsource/permanent-marker": "^5.1.0", "@fontsource/vt323": "^5.1.0", "@fontsource/dm-serif-display": "^5.1.0", "@fontsource/anton": "^5.1.0", "@fontsource/nunito": "^5.1.0", "@fontsource/bangers": "^5.1.0", "@fontsource/space-mono": "^5.1.0", "playwright": "1.56.1" }, "lockfileIncluded": false, "coldStart": false }, "license": { "summary": "User-directed publication of supplied authored source; preserve listed third-party notices; no new license granted here.", "includedNoticePaths": [], "newLicenseGranted": false } } }, "cadenceNote": "Encoded fps describes the file. Scene evaluation and held actor poses depend on this source recipe.", "starterPrompt": "Create a {9}-second {1080×1920} technical-blueprint video explaining {subject}. Render it as an engineering drawing that draws itself: white linework on a mottled Prussian-blue cyanotype with a 30/150 px grid and an inset border. A CAD crosshair cursor with a live X/Y readout plots every line at near-constant pen speed and glides between operations. Tell the story with drafting conventions: a section view with 45° hatching, dimension lines that measure change, a magnified detail circle (\"DETAIL A · 4:1\"), hidden-line occlusion, numbered balloons, a parts list and a title block. Line weights 3.5/2.5/2/1.4 px; dash-dot centrelines. Uppercase IBM Plex Mono labels that decode in with a character scramble; a bold grotesk title. Accents: cyan for flow, yellow for energy only. Sound: plotter servo whirr while drawing, pen-down/up clicks, data ticks for text, a calm minor ambient bed. Avoid: shading or gradients on geometry, more than two accents, camera zooms (use detail circles), long sentences.\n\nSelected example: Seed to Seedling\nFamily: technical-blueprint\nVariant: claude-cloud\nTypography: Space Grotesk, IBM Plex Mono, JetBrains Mono\nProduction: canvas-2d\nExact reference master SHA-256: 01288a6587e2a7ed4434f4f9ddc9358bb25acfb51d80e98bfbbc3b5dcf9f981f\n\nRead the selected STYLE.md, SKILL.md and reproduction instructions before adapting. Keep the declared renderer and source closure; do not assume another family variant has interchangeable parameters. Preserve exact font or custom glyph sources, color roles, spatial continuity and readable text. Record encoded frame rate, scene evaluation and held poses separately. Review the changed render visually and listen to the encoded audio before claiming those checks passed. Existing approval applies only to its recorded artifact.\n\nSuccess check: the adapted story is clear; key type remains readable in motion; the source rebuilds with its declared inputs; all media and review records identify the exact output. State any untested reproduction, listening or rights limits.", "downloadNote": "Downloads match this selected example. The full bundle includes its source, original video, cover and starter prompt. Source packages include artwork, audio inputs and dependency declarations. Requires Node.js, Chromium or Chrome, FFmpeg and ffprobe. Follow the included run guide for package installation and reproduction limits.", "model": "Opus 5.5", "reasoningEffort": "Extra" } ], "relatedMethodIds": [] }, { "id": "terminal-code", "slug": "terminal-code", "title": "Terminal Code", "premise": "Typed commands, progress indicators and an ASCII world turn a process into a readable terminal performance.", "summary": "Typed commands, progress indicators and an ASCII world turn a process into a readable terminal performance.", "category": "Ui / developer", "defaultExampleId": "claude-cloud", "facets": { "material": [ "2d", "terminal", "monospace", "typing", "syntax-highlighting", "ascii-art", "block-banner", "dark-theme", "lo-fi" ], "producer": [ "Claude Cloud", "Local Claude" ], "format": [ "Portrait" ], "motion": [], "useCase": [] }, "examples": [ { "id": "claude-cloud", "title": "Seed to Seedling", "producer": "Claude Cloud", "producerEvidence": "The displayed model and reasoning label identify this production lane. Exact runtime model ID and per-film cost are not established by the source packet.", "relationship": "Original family example", "format": "Portrait", "productionMethod": "canvas-2d", "master": { "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/terminal-code--claude-cloud.mp4", "sha256": "3d6ca5acf796a915e12e502885fd42ba58b80ab5b9eb611cc4ec107a69e2428a", "bytes": 1206386, "mimeType": "video/mp4", "width": 1080, "height": 1920, "duration": 11.4, "encodedFps": 60 }, "poster": { "url": "/video-library/media/terminal-code--claude-cloud/cover.webp", "sha256": "6d8ca7cd1d21644e880c09ad4f5b9572085a1c9fd256d3886ecb1c0e167a98ca", "sourceMasterSha256": "3d6ca5acf796a915e12e502885fd42ba58b80ab5b9eb611cc4ec107a69e2428a", "timeSeconds": 9.69, "rationale": "Late story beat selected to show the developed subject and visual system; extracted from this exact master." }, "previewVideo": { "url": "/video-library/media/terminal-code--claude-cloud/preview.mp4", "sha256": "46e63ac6288c81bdfef1a82024761f46da19e8403fe8c3d51c5809bcacc5e5fe", "sourceMasterSha256": "3d6ca5acf796a915e12e502885fd42ba58b80ab5b9eb611cc4ec107a69e2428a", "width": 540, "height": 960, "label": "Playback preview · 540 px wide · full master in Download finished video" }, "gallery": [ { "id": "overview", "role": "encoded-contact-sheet", "label": "Scenes from the finished render · not a planning storyboard", "url": "/video-library/media/terminal-code--claude-cloud/overview.webp", "sourceMasterSha256": "3d6ca5acf796a915e12e502885fd42ba58b80ab5b9eb611cc4ec107a69e2428a" }, { "id": "scene-1", "role": "encoded-frame", "label": "Finished-film frame · 2.28 seconds", "url": "/video-library/media/terminal-code--claude-cloud/scene-1.webp", "sourceMasterSha256": "3d6ca5acf796a915e12e502885fd42ba58b80ab5b9eb611cc4ec107a69e2428a", "timeSeconds": 2.28 }, { "id": "scene-2", "role": "encoded-frame", "label": "Finished-film frame · 5.7 seconds", "url": "/video-library/media/terminal-code--claude-cloud/scene-2.webp", "sourceMasterSha256": "3d6ca5acf796a915e12e502885fd42ba58b80ab5b9eb611cc4ec107a69e2428a", "timeSeconds": 5.7 }, { "id": "scene-3", "role": "encoded-frame", "label": "Finished-film frame · 9.12 seconds", "url": "/video-library/media/terminal-code--claude-cloud/scene-3.webp", "sourceMasterSha256": "3d6ca5acf796a915e12e502885fd42ba58b80ab5b9eb611cc4ec107a69e2428a", "timeSeconds": 9.12 } ], "typography": [ "JetBrains Mono 400/700", "JetBrains Mono 400" ], "palette": null, "usageGuidance": "Change the subject, copy and timing for your audience. Retain the selected example’s visual rules and recheck the entire reading interval after changes.", "styleRules": "---\nid: terminal-code\nname: Terminal Code (Seed to Seedling: a CLI session)\nfamily: UI / developer\naliases: [terminal, command line, CLI demo, code typing, ascii art, developer explainer, hacker-clean]\ntags: [2d, terminal, monospace, typing, syntax-highlighting, ascii-art, block-banner, dark-theme, lo-fi]\nkind: visual-style\nroute: canvas-2d (CPU canvas; a session script → typed lines, printed outputs, a cell-based ASCII viewport and a 5×7 block banner)\nreadiness: { research: catalog-candidate, rights: original-work, referenceImages: own-render, code: built, render: rendered-and-measured }\n---\n\n# Terminal Code (Seed to Seedling: a CLI session)\n\nA dark terminal window fills the frame. Someone types `seed plant bean`, and below the log an ASCII viewport (`plant.txt`) draws a little bean on a `~~~` soil line.\n- `water --ml 30` fills a progress bar with a spinner while ASCII drops fall and the seed widens; it reports \"swelled · coat split\".\n- `grow root --depth 12` prints a `tree` of the root system while the ASCII root grows down the viewport, branch by branch.\n- `grow shoot --toward sun` reports the stem, two leaves and the light while a stem, leaves and a two-frame ASCII sun appear.\n- `echo \"from seed to seedling\"` clears the screen and prints the title as a block-letter banner, row by row.\n\n**The one rule:** *everything happens because a command ran.* No motion is decorative: each visual change has a line in the log that caused it, and every number shown is a readout of the plant.\n\n## Creative direction\n- **Audience:** developers, technical founders, dev-tool and API brands, engineering education, \"how it works\" explainers.\n- **Purpose:** show a process as an interface: input, then feedback, then result. It also makes non-developers feel the satisfaction of a CLI.\n- **Feeling:** competent, calm and precise, with a little wit (a plant grown with `--toward sun`).\n- **Central visual idea:** *growth as a program.* Germination is a run of commands; the plant is the program's output, rendered in text.\n- **How the parts work together:**\n - *Composition:* one terminal window: the log above, the live ASCII viewport below.\n - *Colour:* a dark theme with a disciplined token palette (paths cyan, prompt green, flags orange, strings green, numbers amber); the viewport uses the same tokens for plant parts.\n - *Type:* one monospace family at three sizes, plus a 5×7 block font for the banner.\n - *Motion:* typing rhythm, printing and scrolling.\n - *Sound:* lo-fi keys and desk foley.\n\n## Fit\n- **Best for:** dev-tool launches, CLI/API demos, technical tutorials, changelog videos, \"built with code\" brand pieces, terminal-themed explainers of any process.\n- **Avoid when:** the audience is put off by code, the story is emotional or physical, or the device is small and text-heavy logs would be unreadable (keep to about 18 lines).\n- **Cost:** very cheap. Text and cell drawing only; renders in under a minute.\n\n## Visual fingerprint\n| Element | Rule |\n|---|---|\n| Theme | Background gradient `#141b28 → #0a0d12`; window `#10141b`, title bar `#161b24`, border `#273042`; text `#d6dde6`, dim `#6b7686`; path `#6fd3e8`, prompt `#8bd17c`, flags `#ff9b6b`, strings `#a6d96a`, numbers `#f2c46d`, ok `#8bd17c`, dir `#79b8ff`; window dots in coral/amber/mint. |\n| Window | (40, 150) to 1000 × 1620 px, radius 22, 64 px title bar (\"~/garden , seed , 80×40\"), soft drop shadow. |\n| Log | x 76, first baseline 258, line height 42, 16 visible rows; when full it scrolls one line per new line (easeOutCubic 0.14 s). |\n| Prompt + syntax | `~/garden ❯ ` then the command name in bold; `--flags`, `\"strings\"` and numbers in their token colours. |\n| Progress | `absorbing ⠋ [■■■■■■□□□□] 62%`: 16 filled cells (drawn as rects, so they never depend on glyph fallback), a braille spinner at 12 fps, then ✓. |\n| Viewport | Rounded frame at (66, 978), 948 × 776; header \"plant.txt · day N · ascii · 46×22\"; 46 × 22 cells at 32 px, line height 33. |\n| ASCII plant | Soil `~` row with hashed `.`/`:` texture below; the seed as a 3-row bean (3 sizes, cracked at the root stage, opaque over the soil line); root and laterals revealed cell by cell (`| / \\`), hairs as `,` and `` ` ``; stem `|`; leaves `.--.` / `(___\\` `/___)`; sun as two alternating frames; water drops `|` with a `'` tail. |\n| Banner | 5×7 block glyphs in 13.8 × 24 px cells (1.5 px gaps), coloured green `#8bd17c` → cyan `#6fd3e8` across the columns, printed one row per 60 ms after a clear. |\n| Cursor | Block cursor, solid while typing, blinking at 1.6 Hz when idle. |\n\n### Typography (exact)\n| Role | Family / weight | Size | Notes |\n|---|---|---|---|\n| Log | JetBrains Mono 400 / 700 (command names, directories) | 28 px | Line height 42; advance is measured 'M' width |\n| Viewport | JetBrains Mono 400 | 32 px | Line height 33; 46 columns centred |\n| Chrome / viewport header | JetBrains Mono 400 | 24 px | Dim; the day number in amber |\n| Banner | 5×7 block font (in `scene.js`) | 13.8 × 24 px cells | Two lines: FROM SEED / TO SEEDLING |\n\n## Temporal fingerprint\n| Element | Rule |\n|---|---|\n| Typing | `typeTimes()`: per-character gaps of 0.6-1.4 units (+0.6 after a space), normalised to each command's duration (about 40 chars/s). The same function drives the key sounds. |\n| Printing | Outputs appear at their script times; the tree prints one line per 0.2 s; the progress bar fills linearly. |\n| Viewport sync | Seed at 0.85 s · drops 1.85-3.0 · swell 2.4 · crack 3.2 · root 4.1-5.2, laterals 4.5 / 4.7 / 4.9, hairs 5.1 · stem 6.45-7.2 · leaves 7.2 / 7.35 · sun 7.5 · day counter 0 → 2 → 5 → 9. |\n| Ending | Clear at 8.62 s · banner 8.7-9.5 · comment 10.0 · idle prompt 10.2 · end 11.4. |\n\n## How the composition develops\nThe log fills top-down while the viewport grows bottom-up (the root down from the soil line, the shoot up), so the two halves of the window fill toward each other. The clear-and-banner is the punchline: all the work collapses into one bold printed line, with the finished ASCII plant still alive below.\n\n## Individual assets\n| Asset | File | Source |\n|---|---|---|\n| Window chrome + background | `assets/layers/static/01_backdrop.png` | `drawChrome()` |\n| ASCII seedling (final viewport, transparent) | `assets/components/ascii-seedling.png` | `view(11.0)` |\n| Block banner | `assets/components/block-banner.png` | `GLYPH`, `bannerRows()` |\n| Theme swatches with token roles | `assets/components/theme-swatches.png` | `THEME` |\n| Layers | per time `02_log`, `03_viewport` at 1.0, 2.6, 4.9, 7.6 and 11.2 s | `drawLayer()` |\n| The session script | `spec.json → log_script` and `styles/terminal-code/timeline.js → LOG` | , |\n\n**To make a real screencast instead:** run the same commands in a terminal using this theme and font, and record with a fixed typing rhythm. The ASCII viewport can be a `watch`-refreshed text file.\n\n## Sound\n**Score:** a lo-fi 90 BPM in D minor. Electric-piano Dm9 · B♭maj7 · Gm9 · A7, a dusty kick and brush snare, offbeat hats and a faint hiss.\n\n**Desk foley:**\n| Event | Sound |\n|---|---|\n| Typing | one key per character, sharing the picture's `typeTimes()` |\n| Spaces | a softer thunk |\n| Return | a thunk + click per command |\n| Each printed line | a soft tick |\n| Progress bar | 17 ticks rising in pitch as it fills |\n| Each ✓ line | a two-note chime (D5-A5) |\n| Banner rows | a 14-note arpeggio, one note per row |\n| Ending | a closing chord |\n\n**Stems:** `music`, `drums` and `foley`. `cues.json` holds the session script and every key time. The mix targets −16 LUFS.\n\n## Reusable prompt\n> Create a {11}-second {1080×1920} terminal-session video that {does the process}. A single dark terminal window: a log above where commands type at a human rhythm (~40 chars/s, uneven gaps) with syntax colours (path, prompt, bold command, orange --flags, green \"strings\", amber numbers), outputs that print (✓ lines, a cell-drawn progress bar with a braille spinner, a `tree` listing), and a live ASCII viewport below that draws the result in sync with each command. Block cursor. End by clearing and printing the title as a 5×7 block-letter banner, row by row. Sound: lo-fi chords + per-key typing foley, Return thunks, print ticks, chimes for ✓.\n\n## Adaptation guidance\n| Change | Safe? | Notes |\n|---|---|---|\n| Commands / story | ✅ | Edit `LOG` (and the matching viewport events in `T`); keep about 4 commands and ≤ 18 lines. |\n| Theme | ✅ | Swap `THEME`; keep one colour per token role and ≥ 4.5:1 for text. Light theme: paper background, darker tokens. |\n| Viewport content | ✅ | Any ASCII scene: a chart, a map, a progress diagram. Author it around a centre column and let `SHIFT` place it. |\n| Real product CLI | ⚠️ | Use real, working commands and outputs, and never invent results for a real tool. |\n| Glyph-dependent bars or box art | ⚠️ | Draw bars as cells; test box-drawing characters in the chosen font. |\n| 16:9 | ✅ | Log on the left, viewport on the right. |\n| **Essential** | , | Cause → effect (every change has a log line), human typing rhythm, token colours, a live ASCII result, a printed banner payoff. |\n\n## Accessibility\n- **Contrast:** text `#d6dde6` on `#10141b` is about 13:1; dim comments `#6b7686` are about 4.0:1 (secondary only); numbers and strings are > 7:1.\n- **Reading:** the log holds ≥ 1.5 s per output; the key information is restated by the viewport visuals.\n- **Motion:** no flashes; the cursor blinks at 1.6 Hz over a tiny area.\n\n## Provenance\n- **Source:** from the library's style catalogue. No Animate seed was used.\n- **Originality:** all code, the theme, the 5×7 font, the ASCII art and the audio are original (2026-10-08). The commands are fictional (`seed`, `water`, `grow`), apart from `echo`.\n- **Fonts:** JetBrains Mono (SIL OFL).", "review": { "technical": { "state": "Supplied checks passed", "scope": "Source handoff records complete decode, stream dimensions and audio measurements. Browser playback is checked separately.", "artifactSha256": "3d6ca5acf796a915e12e502885fd42ba58b80ab5b9eb611cc4ec107a69e2428a" }, "creative": { "state": "Not independently accepted", "scope": "not independently established", "artifactSha256": "3d6ca5acf796a915e12e502885fd42ba58b80ab5b9eb611cc4ec107a69e2428a" }, "listening": { "state": "Not verified", "scope": "No perceptual listening pass is established by this library import.", "artifactSha256": "3d6ca5acf796a915e12e502885fd42ba58b80ab5b9eb611cc4ec107a69e2428a" }, "reproduction": { "state": "Not tested", "scope": "Source is supplied. Cross-machine cold-start reproduction has not been established.", "artifactSha256": "3d6ca5acf796a915e12e502885fd42ba58b80ab5b9eb611cc4ec107a69e2428a" } }, "detailUrl": "https://library.jkylehobson.chatgpt.site/video-library/#family=terminal-code&example=claude-cloud", "processUrl": "/video-library/process.html?family=terminal-code&example=claude-cloud", "downloads": { "prompt": { "available": true, "url": "/video-library/prompts/terminal-code--claude-cloud.txt", "sha256": "729d50f7c8554e5d76a80896851cf027f4f46e99e247d6f616ef732cf3f53033", "bytes": 1680, "label": "Reusable, example-specific instructions" }, "video": { "name": "terminal-code--claude-cloud.mp4", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/terminal-code--claude-cloud.mp4", "bytes": 1206386, "sha256": "3d6ca5acf796a915e12e502885fd42ba58b80ab5b9eb611cc4ec107a69e2428a", "available": true, "label": "1.2 MB" }, "source": { "name": "terminal-code--claude-cloud--source.zip", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/terminal-code--claude-cloud--source.zip", "bytes": 9570782, "sha256": "bcaadd115629ac6bfc6fa176174bd42f1318a792f067a7105ea34c5f4bdcf294", "available": true, "label": "9.1 MB", "contents": [ "editable source", "variant guidance", "source assets", "audio inputs", "dependency declarations", "file manifest" ], "includedFiles": 52, "includedFilePaths": [ "CASE_STUDY.md", "RUN.md", "SKILL.md", "STYLE.md", "assets/components/ascii-seedling.png", "assets/components/block-banner.png", "assets/components/theme-swatches.png", "assets/layers/static/01_backdrop.png", "assets/layers/t1.00/02_log.png", "assets/layers/t1.00/03_viewport.png", "assets/layers/t11.20/02_log.png", "assets/layers/t11.20/03_viewport.png", "assets/layers/t2.60/02_log.png", "assets/layers/t2.60/03_viewport.png", "assets/layers/t4.90/02_log.png", "assets/layers/t4.90/03_viewport.png", "assets/layers/t7.60/02_log.png", "assets/layers/t7.60/03_viewport.png", "audio/cues.json", "audio/mix.flac", "audio/stems/drums.flac", "audio/stems/foley.flac", "audio/stems/music.flac", "engine/audio.mjs", "engine/audio/dsp.js", "engine/audio/instruments.js", "engine/audio/sfx.js", "engine/browser.mjs", "engine/export.mjs", "engine/finish.mjs", "engine/lib/draw.js", "engine/lib/util.js", "engine/page.html", "engine/render.mjs", "engine/runtime.js", "engine/server.mjs", "film/contact_sheet.jpg", "film/spectrogram.png", "film/stills/01_1.00s.jpg", "film/stills/02_2.60s.jpg", "film/stills/03_4.90s.jpg", "film/stills/04_7.60s.jpg", "film/stills/05_9.60s.jpg", "film/stills/06_11.20s.jpg", "overview/encoded-contact-sheet.jpg", "package.json", "qa.json", "spec.json", "styles/terminal-code/scene.js", "styles/terminal-code/score.js", "styles/terminal-code/timeline.js", "BUNDLE-GUIDE.md" ], "externalPrerequisites": { "runtime": [ "Node.js", "Chromium or Chrome", "FFmpeg and ffprobe" ], "packageDependencies": { "@fontsource/anton": "^5.1.0", "@fontsource/archivo-black": "^5.1.0", "@fontsource/bangers": "^5.1.0", "@fontsource/bebas-neue": "^5.1.0", "@fontsource/caveat": "^5.1.0", "@fontsource/comic-neue": "^5.3.0", "@fontsource/courier-prime": "^5.3.0", "@fontsource/dm-sans": "^5.1.0", "@fontsource/dm-serif-display": "^5.1.0", "@fontsource/fraunces": "^5.1.0", "@fontsource/ibm-plex-mono": "^5.1.0", "@fontsource/instrument-serif": "^5.1.0", "@fontsource/inter": "^5.1.0", "@fontsource/jetbrains-mono": "^5.1.0", "@fontsource/jost": "^5.3.0", "@fontsource/kaushan-script": "^5.3.0", "@fontsource/nunito": "^5.1.0", "@fontsource/permanent-marker": "^5.1.0", "@fontsource/playfair-display": "^5.1.0", "@fontsource/press-start-2p": "^5.1.0", "@fontsource/space-grotesk": "^5.1.0", "@fontsource/space-mono": "^5.1.0", "@fontsource/stix-two-text": "^5.3.0", "@fontsource/syne": "^5.1.0", "@fontsource/vt323": "^5.1.0", "three": "0.170.0", "playwright": "1.56.1" }, "lockfileIncluded": false, "coldStart": false }, "license": { "summary": "User-directed publication of supplied authored source; preserve listed third-party notices; no new license granted here.", "includedNoticePaths": [], "newLicenseGranted": false } }, "bundle": { "name": "terminal-code--claude-cloud--full.zip", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/terminal-code--claude-cloud--full.zip", "bytes": 10799040, "sha256": "1a7cab10dab1067b6a2730c7ca3e07308fc7818917bfa0a782e2c64d3f470eef", "available": true, "label": "10.3 MB", "contents": [ "selected master", "editable source", "variant guidance", "source assets", "audio inputs", "dependency declarations", "file manifest", "designed cover", "starter prompt" ], "includedFiles": 55, "includedFilePaths": [ "CASE_STUDY.md", "RUN.md", "SKILL.md", "STYLE.md", "assets/components/ascii-seedling.png", "assets/components/block-banner.png", "assets/components/theme-swatches.png", "assets/layers/static/01_backdrop.png", "assets/layers/t1.00/02_log.png", "assets/layers/t1.00/03_viewport.png", "assets/layers/t11.20/02_log.png", "assets/layers/t11.20/03_viewport.png", "assets/layers/t2.60/02_log.png", "assets/layers/t2.60/03_viewport.png", "assets/layers/t4.90/02_log.png", "assets/layers/t4.90/03_viewport.png", "assets/layers/t7.60/02_log.png", "assets/layers/t7.60/03_viewport.png", "audio/cues.json", "audio/mix.flac", "audio/stems/drums.flac", "audio/stems/foley.flac", "audio/stems/music.flac", "display/cover.webp", "engine/audio.mjs", "engine/audio/dsp.js", "engine/audio/instruments.js", "engine/audio/sfx.js", "engine/browser.mjs", "engine/export.mjs", "engine/finish.mjs", "engine/lib/draw.js", "engine/lib/util.js", "engine/page.html", "engine/render.mjs", "engine/runtime.js", "engine/server.mjs", "film/contact_sheet.jpg", "film/spectrogram.png", "film/stills/01_1.00s.jpg", "film/stills/02_2.60s.jpg", "film/stills/03_4.90s.jpg", "film/stills/04_7.60s.jpg", "film/stills/05_9.60s.jpg", "film/stills/06_11.20s.jpg", "film/terminal-code.mp4", "overview/encoded-contact-sheet.jpg", "package.json", "qa.json", "spec.json", "starter-prompt.txt", "styles/terminal-code/scene.js", "styles/terminal-code/score.js", "styles/terminal-code/timeline.js", "BUNDLE-GUIDE.md" ], "externalPrerequisites": { "runtime": [ "Node.js", "Chromium or Chrome", "FFmpeg and ffprobe" ], "packageDependencies": { "@fontsource/anton": "^5.1.0", "@fontsource/archivo-black": "^5.1.0", "@fontsource/bangers": "^5.1.0", "@fontsource/bebas-neue": "^5.1.0", "@fontsource/caveat": "^5.1.0", "@fontsource/comic-neue": "^5.3.0", "@fontsource/courier-prime": "^5.3.0", "@fontsource/dm-sans": "^5.1.0", "@fontsource/dm-serif-display": "^5.1.0", "@fontsource/fraunces": "^5.1.0", "@fontsource/ibm-plex-mono": "^5.1.0", "@fontsource/instrument-serif": "^5.1.0", "@fontsource/inter": "^5.1.0", "@fontsource/jetbrains-mono": "^5.1.0", "@fontsource/jost": "^5.3.0", "@fontsource/kaushan-script": "^5.3.0", "@fontsource/nunito": "^5.1.0", "@fontsource/permanent-marker": "^5.1.0", "@fontsource/playfair-display": "^5.1.0", "@fontsource/press-start-2p": "^5.1.0", "@fontsource/space-grotesk": "^5.1.0", "@fontsource/space-mono": "^5.1.0", "@fontsource/stix-two-text": "^5.3.0", "@fontsource/syne": "^5.1.0", "@fontsource/vt323": "^5.1.0", "three": "0.170.0", "playwright": "1.56.1" }, "lockfileIncluded": false, "coldStart": false }, "license": { "summary": "User-directed publication of supplied authored source; preserve listed third-party notices; no new license granted here.", "includedNoticePaths": [], "newLicenseGranted": false } } }, "cadenceNote": "Encoded fps describes the file. Scene evaluation and held actor poses depend on this source recipe.", "starterPrompt": "Create a {11}-second {1080×1920} terminal-session video that {does the process}. A single dark terminal window: a log above where commands type at a human rhythm (~40 chars/s, uneven gaps) with syntax colours (path, prompt, bold command, orange --flags, green \"strings\", amber numbers), outputs that print (✓ lines, a cell-drawn progress bar with a braille spinner, a `tree` listing), and a live ASCII viewport below that draws the result in sync with each command. Block cursor. End by clearing and printing the title as a 5×7 block-letter banner, row by row. Sound: lo-fi chords + per-key typing foley, Return thunks, print ticks, chimes for ✓.\n\nSelected example: Seed to Seedling\nFamily: terminal-code\nVariant: claude-cloud\nTypography: JetBrains Mono 400/700, JetBrains Mono 400\nProduction: canvas-2d\nExact reference master SHA-256: 3d6ca5acf796a915e12e502885fd42ba58b80ab5b9eb611cc4ec107a69e2428a\n\nRead the selected STYLE.md, SKILL.md and reproduction instructions before adapting. Keep the declared renderer and source closure; do not assume another family variant has interchangeable parameters. Preserve exact font or custom glyph sources, color roles, spatial continuity and readable text. Record encoded frame rate, scene evaluation and held poses separately. Review the changed render visually and listen to the encoded audio before claiming those checks passed. Existing approval applies only to its recorded artifact.\n\nSuccess check: the adapted story is clear; key type remains readable in motion; the source rebuilds with its declared inputs; all media and review records identify the exact output. State any untested reproduction, listening or rights limits.", "downloadNote": "Downloads match this selected example. The full bundle includes its source, original video, cover and starter prompt. Source packages include artwork, audio inputs and dependency declarations. Requires Node.js, Chromium or Chrome, FFmpeg and ffprobe. Follow the included run guide for package installation and reproduction limits.", "model": "Opus 5.5", "reasoningEffort": "Extra" }, { "id": "local-hello-world", "title": "hello, world", "producer": "Local Claude", "producerEvidence": "Contributor attribution follows the supplied source record; no per-film cost is inferred.", "relationship": "related family; distinct construction and subject; parameters are not interchangeable", "format": "Portrait", "productionMethod": "Canvas 2D terminal performance", "master": { "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/terminal-code--local-hello-world.mp4", "sha256": "4e345d14c538a29421a981c7e462cce0e44aad38d6ebe05f681716e880515a58", "bytes": 9922494, "mimeType": "video/mp4", "width": 1080, "height": 1920, "duration": 13.0, "encodedFps": 60 }, "poster": { "url": "/video-library/media/terminal-code--local-hello-world/cover.webp", "sha256": "68b888f917991b15d819ce3ad9f1abfb1808aab0d2a0ef53353d03469491cceb", "sourceMasterSha256": "4e345d14c538a29421a981c7e462cce0e44aad38d6ebe05f681716e880515a58", "timeSeconds": 11.05, "rationale": "Late story beat selected to show the developed subject and visual system; extracted from this exact master." }, "previewVideo": { "url": "/video-library/media/terminal-code--local-hello-world/preview.mp4", "sha256": "3ae6e9113bb5bc305b4ccd92d7600facdd2b7da0dd3f9b48b7b49685375214da", "sourceMasterSha256": "4e345d14c538a29421a981c7e462cce0e44aad38d6ebe05f681716e880515a58", "width": 540, "height": 960, "label": "Playback preview · 540 px wide · full master in Download finished video" }, "gallery": [ { "id": "overview", "role": "encoded-contact-sheet", "label": "Scenes from the finished render · not a planning storyboard", "url": "/video-library/media/terminal-code--local-hello-world/overview.webp", "sourceMasterSha256": "4e345d14c538a29421a981c7e462cce0e44aad38d6ebe05f681716e880515a58" }, { "id": "scene-1", "role": "encoded-frame", "label": "Finished-film frame · 2.6 seconds", "url": "/video-library/media/terminal-code--local-hello-world/scene-1.webp", "sourceMasterSha256": "4e345d14c538a29421a981c7e462cce0e44aad38d6ebe05f681716e880515a58", "timeSeconds": 2.6 }, { "id": "scene-2", "role": "encoded-frame", "label": "Finished-film frame · 6.5 seconds", "url": "/video-library/media/terminal-code--local-hello-world/scene-2.webp", "sourceMasterSha256": "4e345d14c538a29421a981c7e462cce0e44aad38d6ebe05f681716e880515a58", "timeSeconds": 6.5 }, { "id": "scene-3", "role": "encoded-frame", "label": "Finished-film frame · 10.4 seconds", "url": "/video-library/media/terminal-code--local-hello-world/scene-3.webp", "sourceMasterSha256": "4e345d14c538a29421a981c7e462cce0e44aad38d6ebe05f681716e880515a58", "timeSeconds": 10.4 } ], "typography": [ "Lumen Mono · custom vector glyphs", "3 × 5 caps dot banner" ], "palette": null, "usageGuidance": "Change the subject, copy and timing for your audience. Retain the selected example’s visual rules and recheck the entire reading interval after changes.", "styleRules": "# \"hello, world\" , terminal-code style contract\n\nWave id `terminal-code` (exact wave name; not forced into a canonical family). Original subject. Status: in production; not accepted by Kyle.\n\n## Identity\n\nA dark modern terminal. Someone types `echo \"hello, world\"`; the twelve output characters lift off the line and each **blooms into part of an ASCII world**. At nightfall **the stars spell `hello, world` back** in a dot-matrix banner, and a fresh prompt blinks. Everything visible is a character on, or flying between, the cells of one grid.\n\n## Grid and type\n\n- Grid: 45 × 40 cells, 24 × 48 px per cell at zoom 1 (1080 × 1920).\n- **\"Lumen Mono\": custom monoline vector glyphs drawn for this film (`src/glyphs.js`); no font file or family.**\n - Cell 10 × 20 units: cap 4, x-height 7.5, baseline 15, descender 18. Glyph units scale 2.4 px horizontally and 2.88 px vertically at zoom 1.\n - Stroke 1.5 units with round caps.\n - Glyphs are drawn as exact segment distance fields with max-blend inside a glyph, plus a phosphor bloom (box blur r = 7 px × zoom, ×0.85).\n- Banner: **3 × 5 caps dot font** (`BANNER_DOTS`; W is 5 dots wide), each dot printed as **two `*` cells** so letters keep a natural 144 × 240 px proportion on the 2:1 grid. Letters have a 1-cell gap; `HELLO,` (39 cols) sits at rows 5-9 and `WORLD` at rows 11-15, centred with ≥3-col margins. Caps for the world's answer, against the lowercase command, is deliberate.\n- Syntax colours:\n\n| Role | Colour |\n|---|---|\n| Prompt `~` | cyan `#5fd3c8` |\n| `$` | dim `#7c8596` |\n| Keyword `echo` | violet `#c792ea` |\n| String / output | amber `#f2b45a` |\n| Text | warm white `#e8e2d2` |\n\n## World palette\n\nsea `#4aa3df` / `#2c6c9c` · sun `#ffcc66` with core `#fff1c2` · lighthouse stripes `#e3685a` · beam `#fff0a8` · reeds `#86c98a` · cliff `#c9a27a` · birds `#cbd3e0` · stars `#f8f3e2`. Background: vertical gradient from deep blue-black, through a violet dusk, to night (`background()`).\n\n## Beats (frames @ 60 fps; `B` in `src/world.js`)\n\n| Frames | Beat | Picture | Sound |\n|---|---|---|---|\n| 0-132 | Typing | prompt and cursor already blinking; 19 keystrokes with human rhythm (4-9 frames apart); camera close (×1.72) | per-key mechanical clicks, deeper space bar |\n| 132-138 | Run | Enter; the output prints | Enter clack; two-note print chime |\n| 142-292 | Pull back | camera eases to the full grid | , |\n| 168-430 | Genesis | each output letter glows, lifts and arcs to its place (8 + 26 frames), then its element prints in reading order at 1.6 chars/frame: `o` sun · `w` sea · `l` horizon · `l` lighthouse · `l` cliff · `h` house · `r` reeds · `d` boat · `e` and `,` birds · `o` sun glint | pentatonic blip on lift; printing hiss and note on landing; sea wash begins |\n| 430-560 | Alive and sunset | waves cycle, the beam sweeps, birds flap and leave; the sun sinks below the horizon; dusk turns to night | descending warm pad |\n| 572-672 | The world answers | stars print in reading order as `+` then twinkle as `*`, spelling `hello, world`; background stars | glass bells rising |\n| 684-780 | Prompt | a new prompt `~ $ ▌` blinks at the bottom; hold ≥ 1.6 s | soft click |\n\n## Motion grammar\n\nCharacters are grid-locked when at rest; only the twelve \"genesis\" letters leave the grid (smooth 60 Hz arcs). Elements animate by changing characters in place (waves cycle every 7 frames; birds cycle `v - ^ -` every 5 frames). Native 60 fps; the camera is the only continuous move.\n\n## Replaceable / breaks\n\n- **Replaceable:** command and output text; letter → element mapping; element art (rows of characters); colours; banner text (add `DOTS`).\n- **Breaks the style:**\n - non-monospace type, or anti-grid drifting of resting characters\n - images or vector shapes that are not characters\n - a generic window chrome or bezel wrapper\n - the beam or other elements crossing the star banner", "review": { "technical": { "state": "Supplied checks passed", "scope": "Source handoff records complete decode, stream dimensions and audio measurements. Browser playback is checked separately.", "artifactSha256": "4e345d14c538a29421a981c7e462cce0e44aad38d6ebe05f681716e880515a58" }, "creative": { "state": "Not independently accepted", "scope": "see historical variant review; not newly accepted", "artifactSha256": "4e345d14c538a29421a981c7e462cce0e44aad38d6ebe05f681716e880515a58" }, "listening": { "state": "Not verified", "scope": "No perceptual listening pass is established by this library import.", "artifactSha256": "4e345d14c538a29421a981c7e462cce0e44aad38d6ebe05f681716e880515a58" }, "reproduction": { "state": "Not tested", "scope": "Source is supplied. Cross-machine cold-start reproduction has not been established.", "artifactSha256": "4e345d14c538a29421a981c7e462cce0e44aad38d6ebe05f681716e880515a58" } }, "detailUrl": "https://library.jkylehobson.chatgpt.site/video-library/#family=terminal-code&example=local-hello-world", "processUrl": "/video-library/process.html?family=terminal-code&example=local-hello-world", "downloads": { "prompt": { "available": true, "url": "/video-library/prompts/terminal-code--local-hello-world.txt", "sha256": "3ee9af563aa508f4534f1eca626738d0e11de8f412fc39f8b659d3d4a674071b", "bytes": 1278, "label": "Reusable, example-specific instructions" }, "video": { "name": "terminal-code--local-hello-world.mp4", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/terminal-code--local-hello-world.mp4", "bytes": 9922494, "sha256": "4e345d14c538a29421a981c7e462cce0e44aad38d6ebe05f681716e880515a58", "available": true, "label": "9.5 MB" }, "source": { "name": "terminal-code--local-hello-world--source.zip", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/terminal-code--local-hello-world--source.zip", "bytes": 10075504, "sha256": "ceb1f46c0e91f81020ae05fba233063852540926328c2dcbbbeeac84d3402fed", "available": true, "label": "9.6 MB", "contents": [ "editable source", "variant guidance", "source assets", "audio inputs", "dependency declarations", "file manifest" ], "includedFiles": 18, "includedFilePaths": [ "PORTABILITY/portability.md", "SKILL.md", "STYLE.md", "audio/score.mjs", "audio/stems/ambience.wav", "audio/stems/effects.wav", "audio/stems/music.wav", "docs/production-log.md", "outputs/soundtrack.wav", "overview/encoded-contact-sheet.jpg", "package.json", "scripts/render.mjs", "scripts/validate.mjs", "scripts/worker.mjs", "src/frame.js", "src/glyphs.js", "src/world.js", "BUNDLE-GUIDE.md" ], "externalPrerequisites": { "runtime": [ "Node.js", "Chromium or Chrome", "FFmpeg and ffprobe" ], "packageDependencies": { "pngjs": "7.0.0" }, "lockfileIncluded": false, "coldStart": false }, "license": { "summary": "User-directed publication of supplied authored source; preserve listed third-party notices; no new license granted here.", "includedNoticePaths": [], "newLicenseGranted": false } }, "bundle": { "name": "terminal-code--local-hello-world--full.zip", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/terminal-code--local-hello-world--full.zip", "bytes": 20036610, "sha256": "de7b92142ea6cec61fef00b801e30049f935756c18e7e942066d41669a95fb0b", "available": true, "label": "19.1 MB", "contents": [ "selected master", "editable source", "variant guidance", "source assets", "audio inputs", "dependency declarations", "file manifest", "designed cover", "starter prompt" ], "includedFiles": 21, "includedFilePaths": [ "PORTABILITY/portability.md", "SKILL.md", "STYLE.md", "audio/score.mjs", "audio/stems/ambience.wav", "audio/stems/effects.wav", "audio/stems/music.wav", "display/cover.webp", "docs/production-log.md", "outputs/hello-world.mp4", "outputs/soundtrack.wav", "overview/encoded-contact-sheet.jpg", "package.json", "scripts/render.mjs", "scripts/validate.mjs", "scripts/worker.mjs", "src/frame.js", "src/glyphs.js", "src/world.js", "starter-prompt.txt", "BUNDLE-GUIDE.md" ], "externalPrerequisites": { "runtime": [ "Node.js", "Chromium or Chrome", "FFmpeg and ffprobe" ], "packageDependencies": { "pngjs": "7.0.0" }, "lockfileIncluded": false, "coldStart": false }, "license": { "summary": "User-directed publication of supplied authored source; preserve listed third-party notices; no new license granted here.", "includedNoticePaths": [], "newLicenseGranted": false } } }, "cadenceNote": "Encoded fps describes the file. Scene evaluation and held actor poses depend on this source recipe.", "starterPrompt": "Create a short Terminal Code film about {subject} for {audience}. Use the selected example as a visual reference. Preserve its composition, material, type, motion and audio relationships while adapting the story.\n\nSelected example: hello, world\nFamily: terminal-code\nVariant: local-hello-world\nTypography: Lumen Mono · custom vector glyphs, 3 × 5 caps dot banner\nProduction: Canvas 2D terminal performance\nExact reference master SHA-256: 4e345d14c538a29421a981c7e462cce0e44aad38d6ebe05f681716e880515a58\n\nRead the selected STYLE.md, SKILL.md and reproduction instructions before adapting. Keep the declared renderer and source closure; do not assume another family variant has interchangeable parameters. Preserve exact font or custom glyph sources, color roles, spatial continuity and readable text. Record encoded frame rate, scene evaluation and held poses separately. Review the changed render visually and listen to the encoded audio before claiming those checks passed. Existing approval applies only to its recorded artifact.\n\nSuccess check: the adapted story is clear; key type remains readable in motion; the source rebuilds with its declared inputs; all media and review records identify the exact output. State any untested reproduction, listening or rights limits.", "downloadNote": "Downloads match this selected example. The full bundle includes its source, original video, cover and starter prompt. Source packages include artwork, audio inputs and dependency declarations. Requires Node.js, Chromium or Chrome, FFmpeg and ffprobe. Follow the included run guide for package installation and reproduction limits.", "model": null, "reasoningEffort": null } ], "relatedMethodIds": [] }, { "id": "watercolor-wash", "slug": "watercolor-wash", "title": "Watercolor Wash", "premise": "Transparent pigment, paper texture and pencil lines build a botanical image through successive washes.", "summary": "Transparent pigment, paper texture and pencil lines build a botanical image through successive washes.", "category": "Painterly 2d", "defaultExampleId": "claude-cloud", "facets": { "material": [ "2d", "watercolor", "painterly", "botanical", "pencil", "serif-italic", "calm", "simulation" ], "producer": [ "Claude Cloud" ], "format": [ "Portrait" ], "motion": [], "useCase": [] }, "examples": [ { "id": "claude-cloud", "title": "Seed to Seedling", "producer": "Claude Cloud", "producerEvidence": "The displayed model and reasoning label identify this production lane. Exact runtime model ID and per-film cost are not established by the source packet.", "relationship": "Original family example", "format": "Portrait", "productionMethod": "canvas-2d", "master": { "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/watercolor-wash--claude-cloud.mp4", "sha256": "0c123c6b43d318dd0cbffcfb8a8a52592d1d33e8f40549d0ceac01ad16d32c71", "bytes": 12980494, "mimeType": "video/mp4", "width": 1080, "height": 1920, "duration": 10.5, "encodedFps": 60 }, "poster": { "url": "/video-library/media/watercolor-wash--claude-cloud/cover.webp", "sha256": "0d5eb025a8ab1a76c42a3f441b0ceb01af73454441a26ae333763a0cf6b06807", "sourceMasterSha256": "0c123c6b43d318dd0cbffcfb8a8a52592d1d33e8f40549d0ceac01ad16d32c71", "timeSeconds": 8.925, "rationale": "Late story beat selected to show the developed subject and visual system; extracted from this exact master." }, "previewVideo": { "url": "/video-library/media/watercolor-wash--claude-cloud/preview.mp4", "sha256": "a89ff88607d816bc46f945093699c1d3f5822e4317c1b4013fb3827504ae7014", "sourceMasterSha256": "0c123c6b43d318dd0cbffcfb8a8a52592d1d33e8f40549d0ceac01ad16d32c71", "width": 540, "height": 960, "label": "Playback preview · 540 px wide · full master in Download finished video" }, "gallery": [ { "id": "overview", "role": "encoded-contact-sheet", "label": "Scenes from the finished render · not a planning storyboard", "url": "/video-library/media/watercolor-wash--claude-cloud/overview.webp", "sourceMasterSha256": "0c123c6b43d318dd0cbffcfb8a8a52592d1d33e8f40549d0ceac01ad16d32c71" }, { "id": "scene-1", "role": "encoded-frame", "label": "Finished-film frame · 2.1 seconds", "url": "/video-library/media/watercolor-wash--claude-cloud/scene-1.webp", "sourceMasterSha256": "0c123c6b43d318dd0cbffcfb8a8a52592d1d33e8f40549d0ceac01ad16d32c71", "timeSeconds": 2.1 }, { "id": "scene-2", "role": "encoded-frame", "label": "Finished-film frame · 5.25 seconds", "url": "/video-library/media/watercolor-wash--claude-cloud/scene-2.webp", "sourceMasterSha256": "0c123c6b43d318dd0cbffcfb8a8a52592d1d33e8f40549d0ceac01ad16d32c71", "timeSeconds": 5.25 }, { "id": "scene-3", "role": "encoded-frame", "label": "Finished-film frame · 8.4 seconds", "url": "/video-library/media/watercolor-wash--claude-cloud/scene-3.webp", "sourceMasterSha256": "0c123c6b43d318dd0cbffcfb8a8a52592d1d33e8f40549d0ceac01ad16d32c71", "timeSeconds": 8.4 } ], "typography": [ "Jost 500 caps", "Instrument Serif italic" ], "palette": null, "usageGuidance": "Change the subject, copy and timing for your audience. Retain the selected example’s visual rules and recheck the entire reading interval after changes.", "styleRules": "---\nid: watercolor-wash\nname: Watercolor (the plate paints itself)\nfamily: painterly 2D\naliases: [watercolour, botanical plate, wet-in-wet, aquarelle, natural-history illustration]\ntags: [2d, watercolor, painterly, botanical, pencil, serif-italic, calm, simulation]\nkind: visual-style\nroute: canvas-2d (per-pixel pigment simulation on a Float32 buffer; CPU canvas)\nreadiness: { research: authored, rights: original-work, referenceImages: own-render, code: built, render: rendered-and-measured }\n---\n\n# Watercolor (the plate paints itself)\n\nA natural-history plate of *Phaseolus vulgaris* that paints itself as the seed grows:\n1. A faint pencil underdrawing sketches the whole plan of the plant.\n2. Transparent washes spread wet-in-wet over cold-press paper: a vignetted cerulean sky warming to aureolin at the horizon, then a sienna and umber soil cross-section that dissolves at its ends.\n3. An ochre seed is painted; a drop of water blooms above it into a back-run ring and the seed is glazed larger.\n4. A sepia rigger stroke draws the root, then its rootlets.\n5. A soft aureolin sun glows, a sap-green stroke rises, and two leaf washes flood open.\n\nEach beat paints a numbered figure (i, ii, iii) with a pencil leader, and its caption joins a plate key at the bottom. The title is painted last.\n\n**The one rule:** *paint is transparent and has physics.* Every mark is a glaze that multiplies with what is beneath. It arrives with a wet front that carries extra pigment and settles into the paper's tooth (granulation). Nothing is opaque, and nothing is a vector fill.\n\n## Creative direction\n- **Audience:** gardeners, nature and science education, wellness and slow-living brands, museum shops, children's books for older readers.\n- **Purpose:** make growth feel patient and observed, as if a naturalist recorded it.\n- **Feeling:** calm, tender, crafted, quietly scientific.\n- **Central visual idea:** *the plate paints itself as the seed grows.* Growth and the act of illustration are the same motion; the finished film is a finished botanical plate.\n- **How the parts work together:**\n - *Composition:* the plate layout (kicker, figure, numbered key, title) is planned by the pencil sketch from the first second.\n - *Colour:* a restricted pigment set (cerulean, aureolin, sienna, umber, ochre, ultramarine, sap green, sepia, indigo) mixing subtractively.\n - *Type:* Instrument Serif italic for the key and title (a naturalist's hand), Jost caps for the Latin name; letters are *painted* (they arrive left → right with bleed).\n - *Motion:* nothing moves except paint spreading and pencil lines being drawn, plus a 3 % push over the whole film.\n - *Sound:* soft felt piano with an audible studio (rinse, wet strokes, drips, pencil).\n\n## Fit\n- **Best for:** nature, botany, food origins, wellness, slow storytelling, picture-book adaptations, gentle explainers.\n- **Avoid when:** fast cutting, data precision or bold graphic contrast is needed, or for tech/product briefs.\n- **Cost:** medium. Per-pixel compositing of in-progress elements over a cached base; finished elements are baked into the base as they complete.\n\n## Visual fingerprint\n| Element | Rule |\n|---|---|\n| Paper | Cold-press `rgb(247,241,227)`. Height = 0.55·n(x/13) + 0.3·n(x/5) + 0.15·n(x/2.1); emboss ±12 %. Granulation map = 0.65·n(x/2.2) + 0.35·n(x/5.5), fine-grained. Shipped as `textures/cold-press-paper.png`. |\n| Wash construction | Layered polygons: a base shape deformed 3× by midpoint displacement, then 30-44 layers each deformed again (layer spread 0.06-0.18), drawn at 4.5-5 % alpha. The resulting alpha is the density. |\n| Edge darkening | `max(0, mask − blur(mask, 9 px)) × edge` (0.35 glow … 3.2 bloom ring). |\n| Density modulation | Vignettes and falloffs (`mod`) so washes dissolve: sky fades toward the ground and sides; soil fades at both ends; the bloom is lighter in the centre (back-run); the sun is a centre-weighted glow. |\n| Deposit | `a = D · (smooth((p − A)/band) + wetFront) · (1 + gran·(0.5 − granulation)·0.9)`. The wet front adds `wet` (0.2-0.55) × D just behind the advancing edge until the wash is finished. |\n| Combine | Subtractive glaze per channel: `rgb ← rgb · (1 − a·(1 − pigment))`. |\n| Brush strokes | Dry-brush dabs every 1.5 px along a path (radius tapers w0 → w1 with ±15 % noise; dry breaks where noise < 0.28); arrival = arc length. Root 9 → 2 px (sepia); shoot 10 → 7 px (sap). |\n| Pencil | Graphite `rgba(90,90,96,0.42)`, 1.6 px, slight wobble, multiplied; draws the plan in 1.2 s; leaders and figure numerals (Instrument Serif italic 40) per beat. |\n| Pigments (transmittance) | cerulean .52/.74/.92 · aureolin .99/.86/.42 · sienna .82/.52/.34 · umber .58/.46/.34 · ultramarine .40/.49/.86 · sap .47/.64/.30 · ochre .90/.68/.36 · indigo .27/.30/.40 · sepia .45/.36/.28. |\n\n### Typography (exact)\n| Role | Family / weight | Size | Placement | Enter → settle |\n|---|---|---|---|---|\n| Latin name kicker \"PHASEOLUS VULGARIS · COMMON BEAN\" | Jost 500 caps, tracking 6 | 24 | centred, y 180 | painted (sepia) 0.25-1.0 s |\n| Plate key \"i. Water wakes the seed\" etc. | Instrument Serif italic | 50 | x 150, baselines 1640 / 1712 / 1784 | painted (indigo) left → right over 0.7 s at each beat; accumulates as a key |\n| Figure numerals i / ii / iii | Instrument Serif italic | 40 | beside each figure, right-aligned at the start of a pencil leader | the leader draws 0.4 s, the numeral fades with it |\n| Title \"From seed to seedling\" | Instrument Serif italic | 104 | centred, baseline 300 | painted (indigo) 8.0-8.9 s |\n| Imprint | Jost 500 caps, tracking 3 | 22 | centred, y 1884 | painted (sepia) 9.0-9.5 s |\n\nPainted lettering = canvas text with a 0.6 px bleed blur, density 0.7-0.95 with ±10 % noise, arrival left → right (85 %) + noise (15 %), band 0.06.\n\n## Temporal fingerprint\n| Element | Rule |\n|---|---|\n| Grid | 80 BPM (0.75 s beats); beats at 2.0 s, 3.8 s and 6.0 s; title at 8.0 s. |\n| Spread | Washes ease out (`easeOutCubic`: fast flood, slow settle); strokes and letters ease in-out (`smooth`). Wash durations 0.4-1.3 s; strokes 0.7-1.6 s. |\n| Overlap | Each beat's wash is still wet when the next mark starts (wet-in-wet, e.g. sky + warm horizon together; seed glaze during the bloom). |\n| Camera | A single slow push 1.00 → 1.03 anchored at (540, 1000). No cuts. |\n| Holds | The finished plate holds 1.0 s after the imprint is painted. |\n\n## How the composition develops\n| Time | Beat | What is painted |\n|---|---|---|\n| 0-2.0 s | Set-up | Pencil plan; Latin name; sky (cerulean → aureolin) and soil (sienna, then umber below); the dry ochre seed. |\n| 2.0-3.8 s | ① Water wakes the seed | Rinse; a drip; the cerulean bloom spreads to a ragged ring; the seed is re-glazed 30 % larger; \"i.\" leader + key line. |\n| 3.8-6.0 s | ② A root reaches down | The sepia rigger root draws downward; two rootlets; \"ii.\" leader + key line. |\n| 6.0-8.0 s | ③ A shoot finds the light | The sun glow, the sap-green shoot stroke, two leaf washes flooding outward; \"iii.\" leader + key line. |\n| 8.0-10.5 s | Plate complete | Title painted; imprint; hold. |\n\n## Sound fingerprint\nA quiet desk piece at 80 BPM in F major (F · Dm · B♭ · C → F):\n- **Music:** felt-piano arpeggios (soft FM e-piano), a strings-like pad, and a glass-bell motif per beat.\n- **Water:** a brush rinse in the jar before each beat (bubbles + a low swish), and a drip for the bloom.\n- **Washes:** each wash is a soft filtered noise stroke for its spread duration.\n- **Line work:** a fine scribble under the rigger and shoot strokes; a pencil hiss for the underdrawing and every painted letter.\n\nMix −16.4 LUFS (deliberately soft), −3.0 dBTP.\n\n## Reusable prompt\n> Create a {10.5}-second {1080×1920} watercolour botanical plate of {subject} that paints itself as {process} happens. Start with a faint pencil underdrawing of the whole plate. Then spread transparent washes over cold-press paper: layered-polygon shapes with edge darkening, vignetted falloffs, a wet front that carries extra pigment, and granulation into the paper tooth; colours glaze subtractively. Use a restricted pigment set. Draw roots/stems as dry-brush rigger strokes along paths. Mark each beat with a numbered figure (pencil leader + italic numeral) and add its caption to a plate key at the bottom; paint the title last. Only a slow 3 % push; no cuts. Score: soft felt piano + pad, with studio sounds (rinse, wet strokes, drip, pencil). Avoid: opaque fills, vector edges, saturated digital colours, motion that isn't paint spreading.\n\n## Adaptation guidance\n| Change | Safe? | Notes |\n|---|---|---|\n| Subject | ✅ | Any natural or crafted object; plan the plate (figure, key, title) in pencil first. |\n| Pigments | ✅ | Swap transmittance colours; keep ≤ 9 and let them mix by glazing. |\n| Copy | ✅ | Key lines ≤ 28 characters at 50 px; title ≤ 22 characters at 104 px. |\n| Fonts | ✅ | Any refined italic serif + small caps; letters must be *painted* through the same deposit model. |\n| 16:9 | ✅ | Figure left, key right. |\n| Speed | ⚠️ | Washes shorter than about 0.35 s read as digital wipes. |\n| **Essential** | , | Transparency + subtractive glazing, wet fronts, edge darkening, granulation, the pencil plan, painted lettering, stillness except for paint. |\n\n## Accessibility\nKey text is indigo on cream (about 9:1). The key repeats each beat in words. There is no flashing and almost no motion (a slow 3 % push). The soundtrack is gentle, with no sudden transients above the bed.\n\n## Provenance\nOriginal style authored for this library (2026-10-07); no Animate seed. The wash construction is a public technique (layered deformed polygons, popularised by generative artists), implemented from scratch here. Fonts: Instrument Serif and Jost (SIL OFL). All paint, paper and sound are procedural.", "review": { "technical": { "state": "Supplied checks passed", "scope": "Source handoff records complete decode, stream dimensions and audio measurements. Browser playback is checked separately.", "artifactSha256": "0c123c6b43d318dd0cbffcfb8a8a52592d1d33e8f40549d0ceac01ad16d32c71" }, "creative": { "state": "Not independently accepted", "scope": "not independently established", "artifactSha256": "0c123c6b43d318dd0cbffcfb8a8a52592d1d33e8f40549d0ceac01ad16d32c71" }, "listening": { "state": "Not verified", "scope": "No perceptual listening pass is established by this library import.", "artifactSha256": "0c123c6b43d318dd0cbffcfb8a8a52592d1d33e8f40549d0ceac01ad16d32c71" }, "reproduction": { "state": "Not tested", "scope": "Source is supplied. Cross-machine cold-start reproduction has not been established.", "artifactSha256": "0c123c6b43d318dd0cbffcfb8a8a52592d1d33e8f40549d0ceac01ad16d32c71" } }, "detailUrl": "https://library.jkylehobson.chatgpt.site/video-library/#family=watercolor-wash&example=claude-cloud", "processUrl": "/video-library/process.html?family=watercolor-wash&example=claude-cloud", "downloads": { "prompt": { "available": true, "url": "/video-library/prompts/watercolor-wash--claude-cloud.txt", "sha256": "32ac74565b9875ec46c48c84bce7924e715797309d37526d82cbab218fadc97a", "bytes": 1871, "label": "Reusable, example-specific instructions" }, "video": { "name": "watercolor-wash--claude-cloud.mp4", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/watercolor-wash--claude-cloud.mp4", "bytes": 12980494, "sha256": "0c123c6b43d318dd0cbffcfb8a8a52592d1d33e8f40549d0ceac01ad16d32c71", "available": true, "label": "12.4 MB" }, "source": { "name": "watercolor-wash--claude-cloud--source.zip", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/watercolor-wash--claude-cloud--source.zip", "bytes": 25517187, "sha256": "18f920d9a84aed506d782b539c03c1326912993d3b830f5525192a2ef2a3defe", "available": true, "label": "24.3 MB", "contents": [ "editable source", "variant guidance", "source assets", "audio inputs", "dependency declarations", "file manifest" ], "includedFiles": 62, "includedFilePaths": [ "CASE_STUDY.md", "RUN.md", "SKILL.md", "STYLE.md", "assets/components/density-leaf0.png", "assets/components/density-root.png", "assets/components/density-seed-wet.png", "assets/components/density-sun.png", "assets/components/density-water.png", "assets/components/pigment-swatches.png", "assets/layers/t10.20/01_paint.png", "assets/layers/t10.20/02_lettering.png", "assets/layers/t10.20/03_pencil.png", "assets/layers/t3.40/01_paint.png", "assets/layers/t3.40/02_lettering.png", "assets/layers/t3.40/03_pencil.png", "assets/layers/t6.00/01_paint.png", "assets/layers/t6.00/02_lettering.png", "assets/layers/t6.00/03_pencil.png", "assets/paths/root.json", "assets/paths/root.svg", "assets/paths/rootletA.json", "assets/paths/rootletA.svg", "assets/paths/rootletB.json", "assets/paths/rootletB.svg", "assets/paths/shoot.json", "assets/paths/shoot.svg", "assets/textures/cold-press-paper.png", "audio/cues.json", "audio/mix.flac", "audio/stems/music.flac", "audio/stems/sfx.flac", "engine/audio.mjs", "engine/audio/dsp.js", "engine/audio/instruments.js", "engine/audio/sfx.js", "engine/browser.mjs", "engine/export.mjs", "engine/finish.mjs", "engine/lib/draw.js", "engine/lib/util.js", "engine/page.html", "engine/render.mjs", "engine/runtime.js", "engine/server.mjs", "film/FILM_DELIVERED_SEPARATELY.txt", "film/contact_sheet.jpg", "film/spectrogram.png", "film/stills/01_1.20s.jpg", "film/stills/02_2.90s.jpg", "film/stills/03_4.80s.jpg", "film/stills/04_6.60s.jpg", "film/stills/05_7.60s.jpg", "film/stills/06_10.20s.jpg", "overview/encoded-contact-sheet.jpg", "package.json", "qa.json", "spec.json", "styles/watercolor-wash/scene.js", "styles/watercolor-wash/score.js", "styles/watercolor-wash/timeline.js", "BUNDLE-GUIDE.md" ], "externalPrerequisites": { "runtime": [ "Node.js", "Chromium or Chrome", "FFmpeg and ffprobe" ], "packageDependencies": { "@fontsource/anton": "^5.1.0", "@fontsource/archivo-black": "^5.1.0", "@fontsource/bangers": "^5.1.0", "@fontsource/bebas-neue": "^5.1.0", "@fontsource/caveat": "^5.1.0", "@fontsource/dm-sans": "^5.1.0", "@fontsource/dm-serif-display": "^5.1.0", "@fontsource/fraunces": "^5.1.0", "@fontsource/ibm-plex-mono": "^5.1.0", "@fontsource/instrument-serif": "^5.1.0", "@fontsource/inter": "^5.1.0", "@fontsource/jetbrains-mono": "^5.1.0", "@fontsource/jost": "^5.3.0", "@fontsource/nunito": "^5.1.0", "@fontsource/permanent-marker": "^5.1.0", "@fontsource/playfair-display": "^5.1.0", "@fontsource/press-start-2p": "^5.1.0", "@fontsource/space-grotesk": "^5.1.0", "@fontsource/space-mono": "^5.1.0", "@fontsource/syne": "^5.1.0", "@fontsource/vt323": "^5.1.0", "three": "0.170.0", "playwright": "1.56.1" }, "lockfileIncluded": false, "coldStart": false }, "license": { "summary": "User-directed publication of supplied authored source; preserve listed third-party notices; no new license granted here.", "includedNoticePaths": [], "newLicenseGranted": false } }, "bundle": { "name": "watercolor-wash--claude-cloud--full.zip", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-2026-10-08-v1/watercolor-wash--claude-cloud--full.zip", "bytes": 38558427, "sha256": "2e97c283b363af7fef228406e4fd5b2af1614a0b93b37975291640b424e46e3e", "available": true, "label": "36.8 MB", "contents": [ "selected master", "editable source", "variant guidance", "source assets", "audio inputs", "dependency declarations", "file manifest", "designed cover", "starter prompt" ], "includedFiles": 65, "includedFilePaths": [ "CASE_STUDY.md", "RUN.md", "SKILL.md", "STYLE.md", "assets/components/density-leaf0.png", "assets/components/density-root.png", "assets/components/density-seed-wet.png", "assets/components/density-sun.png", "assets/components/density-water.png", "assets/components/pigment-swatches.png", "assets/layers/t10.20/01_paint.png", "assets/layers/t10.20/02_lettering.png", "assets/layers/t10.20/03_pencil.png", "assets/layers/t3.40/01_paint.png", "assets/layers/t3.40/02_lettering.png", "assets/layers/t3.40/03_pencil.png", "assets/layers/t6.00/01_paint.png", "assets/layers/t6.00/02_lettering.png", "assets/layers/t6.00/03_pencil.png", "assets/paths/root.json", "assets/paths/root.svg", "assets/paths/rootletA.json", "assets/paths/rootletA.svg", "assets/paths/rootletB.json", "assets/paths/rootletB.svg", "assets/paths/shoot.json", "assets/paths/shoot.svg", "assets/textures/cold-press-paper.png", "audio/cues.json", "audio/mix.flac", "audio/stems/music.flac", "audio/stems/sfx.flac", "display/cover.webp", "engine/audio.mjs", "engine/audio/dsp.js", "engine/audio/instruments.js", "engine/audio/sfx.js", "engine/browser.mjs", "engine/export.mjs", "engine/finish.mjs", "engine/lib/draw.js", "engine/lib/util.js", "engine/page.html", "engine/render.mjs", "engine/runtime.js", "engine/server.mjs", "film/FILM_DELIVERED_SEPARATELY.txt", "film/contact_sheet.jpg", "film/spectrogram.png", "film/stills/01_1.20s.jpg", "film/stills/02_2.90s.jpg", "film/stills/03_4.80s.jpg", "film/stills/04_6.60s.jpg", "film/stills/05_7.60s.jpg", "film/stills/06_10.20s.jpg", "film/watercolor-wash.mp4", "overview/encoded-contact-sheet.jpg", "package.json", "qa.json", "spec.json", "starter-prompt.txt", "styles/watercolor-wash/scene.js", "styles/watercolor-wash/score.js", "styles/watercolor-wash/timeline.js", "BUNDLE-GUIDE.md" ], "externalPrerequisites": { "runtime": [ "Node.js", "Chromium or Chrome", "FFmpeg and ffprobe" ], "packageDependencies": { "@fontsource/anton": "^5.1.0", "@fontsource/archivo-black": "^5.1.0", "@fontsource/bangers": "^5.1.0", "@fontsource/bebas-neue": "^5.1.0", "@fontsource/caveat": "^5.1.0", "@fontsource/dm-sans": "^5.1.0", "@fontsource/dm-serif-display": "^5.1.0", "@fontsource/fraunces": "^5.1.0", "@fontsource/ibm-plex-mono": "^5.1.0", "@fontsource/instrument-serif": "^5.1.0", "@fontsource/inter": "^5.1.0", "@fontsource/jetbrains-mono": "^5.1.0", "@fontsource/jost": "^5.3.0", "@fontsource/nunito": "^5.1.0", "@fontsource/permanent-marker": "^5.1.0", "@fontsource/playfair-display": "^5.1.0", "@fontsource/press-start-2p": "^5.1.0", "@fontsource/space-grotesk": "^5.1.0", "@fontsource/space-mono": "^5.1.0", "@fontsource/syne": "^5.1.0", "@fontsource/vt323": "^5.1.0", "three": "0.170.0", "playwright": "1.56.1" }, "lockfileIncluded": false, "coldStart": false }, "license": { "summary": "User-directed publication of supplied authored source; preserve listed third-party notices; no new license granted here.", "includedNoticePaths": [], "newLicenseGranted": false } } }, "cadenceNote": "Encoded fps describes the file. Scene evaluation and held actor poses depend on this source recipe.", "starterPrompt": "Create a {10.5}-second {1080×1920} watercolour botanical plate of {subject} that paints itself as {process} happens. Start with a faint pencil underdrawing of the whole plate. Then spread transparent washes over cold-press paper: layered-polygon shapes with edge darkening, vignetted falloffs, a wet front that carries extra pigment, and granulation into the paper tooth; colours glaze subtractively. Use a restricted pigment set. Draw roots/stems as dry-brush rigger strokes along paths. Mark each beat with a numbered figure (pencil leader + italic numeral) and add its caption to a plate key at the bottom; paint the title last. Only a slow 3 % push; no cuts. Score: soft felt piano + pad, with studio sounds (rinse, wet strokes, drip, pencil). Avoid: opaque fills, vector edges, saturated digital colours, motion that isn't paint spreading.\n\nSelected example: Seed to Seedling\nFamily: watercolor-wash\nVariant: claude-cloud\nTypography: Jost 500 caps, Instrument Serif italic\nProduction: canvas-2d\nExact reference master SHA-256: 0c123c6b43d318dd0cbffcfb8a8a52592d1d33e8f40549d0ceac01ad16d32c71\n\nRead the selected STYLE.md, SKILL.md and reproduction instructions before adapting. Keep the declared renderer and source closure; do not assume another family variant has interchangeable parameters. Preserve exact font or custom glyph sources, color roles, spatial continuity and readable text. Record encoded frame rate, scene evaluation and held poses separately. Review the changed render visually and listen to the encoded audio before claiming those checks passed. Existing approval applies only to its recorded artifact.\n\nSuccess check: the adapted story is clear; key type remains readable in motion; the source rebuilds with its declared inputs; all media and review records identify the exact output. State any untested reproduction, listening or rights limits.", "downloadNote": "Downloads match this selected example. The full bundle includes its source, original video, cover and starter prompt. Source packages include artwork, audio inputs and dependency declarations. Requires Node.js, Chromium or Chrome, FFmpeg and ffprobe. Follow the included run guide for package installation and reproduction limits.", "model": "Opus 5.5", "reasoningEffort": "Extra" } ], "relatedMethodIds": [] } ], "methods": [ { "methodId": "cut-paper", "summary": "Torn paper, shadows, crayon, patterns, and playful character worlds.", "bestFor": "Warm character stories and tactile explainers", "motion": "Layered collage with animation on twos", "status": "demo frame smoke passed; full film/audio unverified", "styleRules": "# Cut paper\n\n![sample](sample.png)\n\nTorn-edge paper shapes with soft drop shadows, paper grain and crayon in the fills, patterns (stripes, dots, gingham, wood grain), full-bleed colour worlds, and characters with simple faces. Collage-style animation: playful, warm, busy with small life.\n\n## Palette\n\n`PAL` in `kit.js`. Warm and saturated, on cream: ink `#2a1d18`, paper `#fbf6ea`, cream `#f3ead6`, navy `#26315f`, wood `#c08048`, mustard `#d9a441`, yellow `#f6cf55`, teal `#3f9f9a`, mint `#a9d9c6`, pink `#f3a3bf`, sky `#cfe2ee`, purple `#8c7ad8`, blue `#4c6fb5`, green `#5aa05a`, skin tones, charcoal. **Orange `#ec7a4f` is reserved for the spark** (the hero) — never decoration.\n\n## The medium\n\n- `cut(points, fill, { pat, crayon, grain, shadow, tear, sy, sb })`: every shape is torn paper — a wobbly torn edge (`tear`), a soft shadow (`sy` offset, `sb` blur), grain and an optional crayon scribble in the fill.\n- Patterns: `pat.stripes`, `pat.dots`, `pat.gingham`, `pat.grainWood`, … clipped inside the shape.\n- One dominant wall colour per scene, a floor or table, then props in front.\n- The morph window is a torn hole with a paper rim (`STYLE.window`); morphs happen on blank cream paper `#efe5cf`.\n\n## Motion habits\n\n- On 2s: everything (boil, camera, moves) keys on `B = floor(F / 2)`.\n- Pops (`popS`) for things arriving, write-ons (`handText(..., { frac })`) for words.\n- The spark idles on its own: bob, blink, ray sway.\n- Chronologies join worlds with shape morphs (the sun becomes an eye); character pieces cut hard on the beat.\n\n## Frame checklist (on top of grammar/FRAME.md)\n\n1. **A character with a face, acting** — the spark, a person, an animal, a mug with eyes. Things happen to it and it reacts (wow, sad, delighted, focused).\n2. **A full-bleed world:** wallpaper, sky, a table, gingham, a starry night or a flat colour card for the beat's mood. Never an object floating on blank paper, unless blank is the stage.\n3. **Paper you can feel:** torn edges, shadows, crayon, at least one pattern per frame.\n4. **3+ details of background life** that don't carry the plot: a sleeping cat, birds on a wire, a moth at the lamp, steam from a mug, confetti, a clock, sticky notes, bunting.\n5. **Hand-lettered text on paper tags** (`yearTag`, `capStrip`, `tag`), never bare type.\n6. **The spark's ray count tells time** in a chronology (one more per era).\n\n## Kit API\n\n`styles/cut-paper/kit.js`: `cut`, `rect`, `pat.*`, `torn`, `grainIn`, `face(x, y, s, mood)`, `spark(x, y, r, { rays, mood, key, s })`, `person`, `hand`, `clock`, `cat`, `mug`, `plant`, `books`, `sparkle`, `tag`, `yearTag`, `capStrip`, `handText`, `handW`, `dot`, `capsulePts`, `rot`, `PAL`. Needs `HAND` (font stack) and `CX` (caption centre x) from the piece head.\n\n## Do / don't\n\n- **Do** give every scene its own wall colour so it reads on a contact sheet; make the bridge object big and in frame at the morph.\n- **Don't** fade props with `globalAlpha` (the textures reset it); skip them instead. Don't blend two wall colours in a morph (mud): morph on blank paper.\n\n## Proven on\n\n`examples/history-of-ai` (60s, 15 worlds, 13 shape morphs, one hard cut on the payoff) and `demo/` (8s, the moon becomes the sun).\n", "license": "MIT", "sourceProject": "cth9191/animate", "sourceRevision": "7e5eb56feb2dd573f890e1b7b34748af43d58263", "sourceHash": "026aace14bb88641cf9c9108cde8fd083f4bbe0e55e804199097b1641c445c22", "relatedFamilyIds": [ "cut-paper" ], "id": "method/cut-paper", "kind": "reference-template", "title": "Cut Paper", "category": "Handmade 2d", "facets": { "material": [ "paper", "collage", "handmade", "character" ] }, "poster": { "url": "/video-library/media/reference-templates/cut-paper.webp", "width": 540, "height": 960, "sha256": "27463c3d015de69c4237e7f2115dc75870c3cf04916d37dbab2ac79d2c1cfe8c", "sourceSha256": "378e45dadf1a42b9a6e96b6eddc7452ed1239f4da58aa77453c73ebd1ef45f4f", "role": "Original reference sample" }, "sourceUrl": "https://github.com/cth9191/animate/tree/7e5eb56feb2dd573f890e1b7b34748af43d58263/plugins/animate/skills/animate/styles/cut-paper", "downloads": { "source": { "name": "animate-method-cut-paper.zip", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-reference-templates-2026-10-08-v1/animate-method-cut-paper.zip", "bytes": 607169, "sha256": "512191e25f44c9603a4a6eb5beed42ae51a5aee88c74024f237c3d2a76a915f2", "available": true } } }, { "methodId": "crosshatch", "summary": "Boiling sketch ink, hatch shading, warm paper, and navy machine interiors.", "bestFor": "Process and mechanism explainers", "motion": "Sketchy ink with animation on twos", "status": "demo frame smoke passed; full film/audio unverified", "styleRules": "# Crosshatch ink\n\n![sample](sample.png)\n\nA sketchy ink line that boils on 2s, crosshatch and coloured-pencil shading clipped inside shapes, stipple, paper grain. Warm cream paper and wood by day; navy \"inside the computer\" worlds with periwinkle lines and glowing accents.\n\n## Palette\n\n`C` in `kit/core.js`. Day: ink `#3a2417`, paper `#f4ecd9`, cream `#efe5cf`, wood `#d6a466`, yellow `#f0c55a`, green `#5f9c5c`, red `#d4382c`, sky `#9cc4d6`, rose `#d98b8b`. Night: navy `#0c0d1c` / `#15173a`, periwinkle `#c8d0f0`, cyan `#52d6c4`, magenta `#e0368f`, glow green `#5de37a`. **Terracotta `#d97757` is the hero** (the ink dot); red pencil dashes `rgba(212,56,44,0.92)` mean a plan.\n\n## The medium\n\n- `ink(points, { w, color, amt, key, frac, double })`: a wobbly stroke reseeded every boil step; `frac` writes it on.\n- `paint(points, { fill, w, line, tex: [...] })`: fill, then textures clipped inside — `hatch` (angle, gap, dash, `dens(x, y)`), `cross`, `pencil` (coloured-pencil strokes), `stipple` — then the ink outline.\n- Shade with a density function (`dens: (x, y) => 0..1`) rather than flat fills: light from the top-left, darker toward the bottom-right.\n- `grain()` over every frame (`STYLE.post`).\n\n## Motion habits\n\n- On 2s: lines boil (re-wobble) every 2 frames even in held shots — the drawing is alive when nothing moves.\n- Write-ons (`frac`) for lines, plans and handwriting; `monoText(..., { count })` types code.\n- Beat-cut pieces: 120 BPM at 24fps, cuts on 8ths, 16ths in the rush; iris in/out (`irisHole`) into the dark world.\n- Dark close-ups on 9:16 need ~1.2× zoom to fill the phone-safe area.\n\n## Frame checklist (on top of grammar/FRAME.md)\n\n1. **Every filled shape has a texture** (hatch, cross, pencil or stipple) shaped by light — no flat fills except paper.\n2. **The line boils** — never a perfectly still stroke in a held frame.\n3. **Tool-call pills (`toolPill('Read', 'notes.md', …)`) make agent steps readable** — and must be true.\n4. **The dark world and the paper world look different on a contact sheet:** navy + periwinkle lines inside the machine, cream + ink outside.\n5. **The hero dot keeps its terracotta and asterisk** in both worlds (it gets a glow in the dark).\n6. **World-anchored textures** when the camera pans (texture keys don't depend on screen position).\n\n## Kit API\n\n`kit/core.js`: `ink`, `paint`, `hatch`, `pencil`, `stipple`, `wobble`, `grain`, `construct`, `ruler`, `sparkBurst`, `burst`, `star4`, `rainbow`, `hexGrid`, `irisRim`, `irisHole`, `camera`, `monoText`, `monoW`, `handwrite`, `drawPencil`, `asterisk`, `C`.\n`styles/crosshatch/kit.js`: `paperSheet`, `woodSurface`, `darkWorld`, `stripedCloth`, `inkMug`, `toolPill`, `planInk`, `dotHero(x, y, r, { dark, mood })`, `inkCard`, `inkTag`, `inkCaption`, `handText`, `handW`, `box`.\n\n## Do / don't\n\n- **Do** keep a plan (red dashes) separate from the doing (ink); show the plan first, then the same thing done for real.\n- **Don't** use `paint()`/`hatch()` to fade a prop: they reset `globalAlpha`. Skip the prop instead.\n\n## Proven on\n\nSeveral Claude Code explainers (a 32s deadline mission, a 24s subagent story, a 13s life-of-a-prompt) and `demo/` (6s: a desk by morning; the coffee becomes the moon over the machine).\n", "license": "MIT", "sourceProject": "cth9191/animate", "sourceRevision": "7e5eb56feb2dd573f890e1b7b34748af43d58263", "sourceHash": "c7355b22751c3a64ce360870e3e7651801b16a98454764898a24145a9f74116e", "relatedFamilyIds": [ "crosshatch" ], "id": "method/crosshatch", "kind": "reference-template", "title": "Crosshatch", "category": "Hand-drawn 2d", "facets": { "material": [ "ink", "hatching", "boil", "paper" ] }, "poster": { "url": "/video-library/media/reference-templates/crosshatch.webp", "width": 540, "height": 960, "sha256": "c6c8aa603df42b623e504743ffab114a7832fc0d6c8cd55495a93dbc5ffcb599", "sourceSha256": "6a6c8445cc58eeeef43a88bef6631ef294fe935927c39e7b14b9ed72f56a42d0", "role": "Original reference sample" }, "sourceUrl": "https://github.com/cth9191/animate/tree/7e5eb56feb2dd573f890e1b7b34748af43d58263/plugins/animate/skills/animate/styles/crosshatch", "downloads": { "source": { "name": "animate-method-crosshatch.zip", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-reference-templates-2026-10-08-v1/animate-method-crosshatch.zip", "bytes": 1144511, "sha256": "fbc9d9b00b4aaab8f96f350a7bb35c37effd2fe55b5ea7d983f6c688f2b3f132", "available": true } } }, { "methodId": "riso", "summary": "Three-ink risograph texture with halftone screens, overprints, and misregistration.", "bestFor": "Print-like editorial storytelling", "motion": "Halftone print with animation on twos", "status": "demo frame smoke passed; full film/audio unverified", "styleRules": "# Riso\n\n![sample](sample.png)\n\nA three-ink risograph print on cream paper: halftone screens at their own angles, overprints instead of mixed colours, plates a few pixels off register, ink dropouts that sparkle in the darks. Flat, bright, a little worn, on 2s.\n\n**The one rule: nothing is painted, everything is printed.** A frame is a sheet of paper run through three spot-ink plates. A plate only says how much ink goes where (a grey tone 0..1). The screen turns that tone into dots at the plate's angle, and the inks multiply. There is no black ink and no white ink.\n\nThe parameters below were measured from a reference print animation (1080 wide, 24fps, 120 BPM) and then rebuilt in code; the demo here is an original subject.\n\n## Palette\n\n| what | value | notes |\n|---|---|---|\n| paper | **(241.5, 235.5, 226.5)** `#f2ece3`, std ~1.2 | almost flat; faint curly fibres and specks only. Mottle over ~1 level reads as dirt on a phone |\n| teal ink | (54, 137, 171) | the key plate (registered) |\n| fluorescent pink ink | (220, 68, 160) | |\n| yellow ink | (238, 222, 30) | |\n| coral / red-orange | pink + yellow | `MIX.coral`; `MIX.orange` = pink 0.55 + yellow 1 |\n| green | teal + yellow | `MIX.green` |\n| ink-blue / violet | teal + pink | `MIX.blue`, the hero's colour |\n| olive-black | all three | `MIX.dark`. Never (0, 0, 0) |\n| white | paper | a knockout: a fill with no tones, `fill(path, {})` |\n\nOverprint model: `paper × Π(1 − coverage × (1 − ink / paper))`, per channel. `inkRGB(tones)` gives the printed colour of any tones; `tonesOf(color)` goes the other way (nearest tones on the 20-level grid), so the renderer's hex colours (`ERA_BG`, bridge colours) still print in the three inks.\n\n## Screens and plates\n\n- **Angles:** teal 15°, pink 75°, yellow 45°. Overlaps moire like real print.\n- **Tone** is quantized to 20 levels. Up to 50%: a round dot of radius `cell·√(tone/π)`. Above 50%: the solid with paper holes of the same law on the cell corners. Tone 1 prints solid (no dots), which is how type and lines stay crisp.\n- **Pitch belongs to the illustration and scales with it** (`PITCH`): `fine` 7px (tags, small vignettes, a hero printed alone), `world` 10.8px (a full-frame world), `field` 17.5px (a coarse far field: sky, a wall). One layer = one pitch; a coarse region is its own layer.\n- **A layer** = three grey plate canvases + a mask, printed into the sheet by one per-pixel pass. Layers print in order; each knocks back to paper inside its mask.\n- **Fills knock out** (every plate set inside the shape, unlisted plates → paper). **Lines overprint** (`lighten` on the listed plates) unless `knock: true`.\n- **Misregistration:** pink (+4, −3), yellow (−3, +4) against the teal key, ±0.3px jitter per boil variant `B % 3`. Darks get coral and yellow fringes; the ink-blue hero gets pink and teal ones.\n- **Wear:** ~0.6% of pixels per variant drop one plate (1–2px specks); `specks()` knocks a few dozen tiny single-ink dots into a large dark.\n- **Gradients** are grey gradients on a plate (`lin`, `rad`); the screen turns them into dot-size ramps. A glow is `fill(circ, { yellow: rad(...) }, { over: true })`: the plate rises without a hard edge.\n\n## The line\n\nresample → `wobble` on the boil → a tapered ribbon with pressure (`w·(1 + rough·noise)`, noise keyed `B % 3`) → filled through the plates. `rough` ~0.15 is a brush line; 0.45–0.55 is the dry-brush rim every printed circle gets (`rim`, `rimLine`: a rough ribbon plus a thinner second pass that doesn't agree with the first). Paper lines (ripples, highlights, grout, the glint on a fruit) are `line(P, {}, { knock: true })`.\n\n## Motion habits\n\n- On 2s: `TT` steps every 2 frames, wobble reseeds with `B`; misregistration, dropouts and line pressure cycle through 3 variants (`B % 3`), so the print shimmers without crawling.\n- Cuts, worlds opening and event cues on the 8th grid (120 BPM at 24fps: 6 frames); fast onsets on 16ths (3 frames).\n- Worlds open as **circles with a rough teal rim** (the renderer's `window` hook does this for morphs). In a hand-cut piece: a vignette circle grows over 4 frames (r 172, 252, 293, 308 → 310 at 1080 wide), shrinks over 3 (291, 244, 153); an iris cut shows the new world in a circle r 410, then 650, then full frame.\n- The screen never swims under the picture: the camera transform is composed into every layer, so dots pan and zoom with the illustration like a filmed print.\n\n## Frame checklist\n\nCheck every key frame (and the sample) against these, on top of `grammar/FRAME.md`:\n\n1. **Every colour is plate tones.** No RGB in a scene: `{ teal, pink, yellow }` or a `MIX` name. The renderer's hex colours come from `inkRGB(...)`.\n2. **Darks are three-ink overprints** (olive-black), with dropouts and a few specks in them. No pure black pixels anywhere.\n3. **White is paper.** Highlights, eyes, type on dark, grout, the glint on fruit: knockouts, never a white ink.\n4. **One screen pitch per layer**, scaled with the illustration: the far field coarse (17.5), the world at ~10.8, small printed things (tags) fine (7). Dots visibly change size across a gradient.\n5. **Fringes visible:** zoom on any dark or ink-blue edge; pink and yellow should peek out on opposite sides.\n6. **Fills knock, lines overprint:** a teal line over yellow reads green; a pink detail on a dark ground must be knocked (`knock: true`) or it turns ink-blue.\n7. **The paper is flat:** no vignette, no mottle over ~1 level, no grain filter on top.\n8. **Type is printed:** solid tone 1, misregistered with the rest; captions go through `DEFER` (`risoTag`, `risoCaption`) so they print at screen size after the camera.\n9. **Full-bleed:** a field layer covers the whole frame (`full: true`) before the world layer prints over it.\n10. **Content in the safe area** (x 60–940, y 250–1500 at 1080x1920); fields and backgrounds run to the edges.\n\n## Kit API (`styles/riso/kit.js`, on top of `kit/core.js`)\n\n- **Sheet:** `beginSheet()` (fresh paper) or `beginSheet(box)` (print over what `ctx` already shows in `box`), then layers, then `endSheet()`. A scene in a morph chain draws one sheet; the renderer swaps `ctx` to its offscreen layer, so the kit always prints into the current `ctx`.\n- **Layers:** `beginLayer(pitch, { T: { s, x, y, rot }, box, full, auto, shapes })` … `printLayer()`, or `printed(pitch, o, fn)`. `full` masks the whole box (a field); `shapes` adds every fill/line/type to the mask (a world printed over a field); `auto` masks wherever any plate has ink (line-only layers).\n- **Marks:** `fill(path, tones, { over, mask, rule })`, `line(P, tones, { w, taper, rough, amt, knock, closed, frac, key })`, `type(str, x, y, size, tones, { knock, align, frac, weight, key })`, `rim(cx, cy, r, key, o)`, `rimLine(P, key, o)`, `specks(x0, y0, x1, y1, n, key)`, `clipTo(path)` / `unclip()`.\n- **Paths and tones:** `circ`, `ell`, `poly`, `curvy` (smoothed closed), `rect`, `rrect`, `hand(P, key, amt)` (wobbled on the boil), `boxPts`, `ringPts`; `lin`, `rad` grey gradients; `MIX`; `inkRGB`, `tonesOf`, `rgbHex`.\n- **Hero:** `risoHero(x, y, r, { key, mood: 'smile' | 'happy' | 'wow', arms: [l, r], look: [dx, dy], hop, hold: fn(hx, hy), shadow })` prints an ink-blue bean with paper eyes, pink cheeks and a green sprout inside the current layer; sets `SPARK_AT`. `heroOutline(x, y, r)` for bridges.\n- **Captions:** `risoTag(str)` (a yellow slip on a screened pink block, top left, pops in) and `risoCaption(str)` (a paper card with a teal rim, bottom, written on); `printTag` / `printCard` for custom placement.\n- **STYLE hooks:** `backdrop` prints a flat plate tone (`tonesOf(c)`), `window` draws the era through the outline with a rough teal printed rim, `blob` prints the morphing shape as a screened fill with a dry-brush rim a step darker, `hero` prints the hero alone at the fine pitch. No `post`: the sheet already is the paper.\n- **Cost:** about 70–100 ms per full-frame layer at 1080x1920 (the per-pixel print pass); a world is two layers plus small sheets for captions, ~160–250 ms a frame.\n\n## Do / don't\n\n**Do**\n- Decide every colour as plate tones, then check the overprints: two inks make a third colour for free.\n- Knock fills, overprint lines; keep white as paper.\n- Keep darks as three-ink overprints and let them sparkle.\n- Give each world a coarse field layer and one world layer; print tags and lone props at the fine pitch.\n- Key boil variation on `B % 3` (registration, pressure, dropouts) and wobble on `B`.\n- Use `over: true` grey gradients for glows and light; let the dots do the shading.\n\n**Don't**\n- Don't add a black ink, pure black pixels, or a white ink.\n- Don't draw smooth RGB gradients, drop shadows, blurs or `ctx.filter` on top of a print.\n- Don't move the screen independently of the picture (no screen-space dots over a panning world).\n- Don't reuse the crosshatch kit's `ink()` / `paint()` here: this medium has no pen.\n- Don't put many full-frame layers in one frame: each one costs a per-pixel pass. Give small things a `box`.\n\n**Proven on:** a 6s frame-matched study of a reference print animation (1080x1080, every number above measured on both), and this demo: a 6s 9:16 morph chain (a rooftop at dawn; the sun becomes an orange in a market crate).\n", "license": "MIT", "sourceProject": "cth9191/animate", "sourceRevision": "7e5eb56feb2dd573f890e1b7b34748af43d58263", "sourceHash": "13a8a97022a607812ca15b2f80f5fa6d208918a971a0a15f949b34663f142473", "relatedFamilyIds": [ "riso" ], "id": "method/riso", "kind": "reference-template", "title": "Riso", "category": "Print", "facets": { "material": [ "print", "halftone", "overprint" ] }, "poster": { "url": "/video-library/media/reference-templates/riso.webp", "width": 540, "height": 960, "sha256": "6c6edbdca999af69e2e539681e9a84d0e991cc1d8fd552e63b39cdb383172331", "sourceSha256": "288b1932f09e5a57e4d5a1dd1159d62987dc1aa440507b064d344efae273e20c", "role": "Original reference sample" }, "sourceUrl": "https://github.com/cth9191/animate/tree/7e5eb56feb2dd573f890e1b7b34748af43d58263/plugins/animate/skills/animate/styles/riso", "downloads": { "source": { "name": "animate-method-riso.zip", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-reference-templates-2026-10-08-v1/animate-method-riso.zip", "bytes": 1952879, "sha256": "a53ae8da386832200e008fa4044ce8f8dd5d9d344f81e24573ecfa87e28da197", "available": true } } }, { "methodId": "sketchbook", "summary": "Graphite, one accent color, hand lettering, and an open notebook feel.", "bestFor": "Informal educational walkthroughs", "motion": "Pencil drawing with animation on twos", "status": "demo smoke passed; caption overlap needs project repair; full film/audio unverified", "styleRules": "# Sketchbook\n\n![sample](sample.png)\n\nGraphite and one accent colour on a warm sketchbook page. Every line is drawn by hand and boils on 2s. Things get **pencilled in, inked over, then coloured with a quick scribble**, and hand lettering on the page does the narrating. The page is the world: its dot grid, spiral binding, smudges and coffee ring stay in view, and the camera moves across the page instead of cutting away from it.\n\n## Palette (`SK` in kit.js)\n\n| role | value | use |\n|---|---|---|\n| paper | `#f2ead8` | the page; also the blank sheet a morph happens on |\n| ink | `#2a2420` | settled lines, lettering, eyes |\n| graphite | `#6f6a63` (light `#9a948b`) | construction lines, the mess, hatching, things not settled yet |\n| **accent: terracotta** | `#d97757` (shade `#b85c3f`) | the hero, and only the hero |\n| highlighter | `#f7d64a` | the one word to read; one glowing object (a bulb, the sun) |\n| red marker | `#e0483a` | a title underline or a stamp, once per scene |\n| green | `#4f9d5d` | a check mark (done / correct) |\n| prop colours | pencil `#f1bf2c`, wood `#ecc995`, eraser `#ef9aa6`, tape `#efe2b4`, card `#fffdf6` | real objects on the desk keep their own colours, kept small |\n\n## Line and texture\n\n- **Two pens.** `gline` is ink: one confident stroke plus a thin second pass that doesn't quite agree. `gpencil` is graphite: two light, looser passes. Use graphite for anything provisional and ink once it's decided.\n- **The boil.** The wobble's phases reseed on every boil step (`B`), and it's index-based, so the tremor travels along the stroke. Structure (where a scribble goes, how long a hatch line runs) is seeded by key and never moves. Only the tremor changes.\n- **Colour sits off the line.** `gfill` lays a flat colour a few pixels off the ink, the way a quick colour pass misses the outline.\n- **Shading is hatching,** never a gradient. `ghatch` goes inside a clip, and `litHatch` shades a round thing but leaves a lit circle top-left.\n- **Colour is a scribble.** `scribbleFill` shades a shape in one colour with a back-and-forth stroke, over a faint wash. It can write on.\n- **The page** (`sketchPage`) is built once from a seeded RNG and cached: tooth specks, fibres, a vignette, a dot grid (or `ruled`), graphite smudges, ghosts of erased lines, a coffee ring, the edges of the pages below, and a spiral binding along the top. `post()` adds faint grain that boils on top.\n- **Overshoot.** `loopPts` circles run past their start and drift outward. `sketchBox` boxes end a little past the corner they began at.\n\n## Lettering\n\n- Local system fonts only. Hand: `\"Ink Free\", \"Segoe Print\", \"Bradley Hand\", \"Comic Sans MS\", \"Chalkboard SE\", cursive` (the head's `HAND`). Marker: `\"Segoe Print\", \"Marker Felt\", \"Bradley Hand\", \"Comic Sans MS\", cursive` (`SK_MARKER`).\n- `handLetter` places each glyph separately with jitter that boils, and adds a pen-weight stroke so thin system hand fonts read at phone size. With `reveal` 0..1, letters write on one at a time: each fades in, rises a little and grows to full size.\n- A highlighter swipe (`highlight`, multiplied under the ink) lands on **one** word per caption, after the line is down. A red `underline` marks a title.\n- Captions are short (about 20 characters a line, two lines at most, 80px), centred on `CX`, sitting at y ≈ 1330–1420.\n\n## Motion habits\n\n- **On 2s** (`TT` steps every 2 frames). Everything boils, including the page grain.\n- **Things are drawn, not popped.** An object is pencilled on (`part`), inked over, then scribbled in colour, and the pencil prop (`pencilTool` at `writeEnd(...)`) follows the line as it goes. Rubbing something out uses `eraserTool` and crumbs.\n- **Quick cuts are steps of one move.** The source ran at 30fps / 112.5 BPM, so a beat is 16 frames, an 8th 8 and a 16th 4. Cuts and write-ons landed on that grid, and a run of 16th cuts was one gesture, not separate shots. At 24fps / 120 BPM a 16th is 3 frames.\n- The hero acts with squash and stretch (`sx`, `sy`), a hop on the beat, eyes that look at the subject (`look`) and blink, and a mood (`calm`, `wow`, `happy`, `puzzled`). Small graphite marks show what it's feeling: `?`, `!`, `sweat`, `sparkle`.\n- The camera leans in on the subject and pulls back to show the world, always across the same page.\n\n## Frame checklist (sketchbook)\n\n1. **Graphite carries everything.** Count the colours. Ink and graphite should do most of the drawing, terracotta appears only on the hero, and highlighter yellow appears only on the word to read or the one glowing thing. If a second thing turns terracotta, the colour no longer means \"the hero\".\n2. **Lettering is the narrator.** The caption says the beat in under about 20 characters a line, with one highlighted word. You should be able to read it at phone size without the picture.\n3. **The page is the world.** Some page should show in every frame: the grid, the binding, a smudge or the page edge. Nothing full-bleed covers it, and the morph happens on the bare page.\n4. **Write-ons instead of pops.** New things are drawn on: pencil first, then ink, then colour. Only a reaction gets a pop: a `!`, a stamp, a hop.\n5. **Mess is graphite; what's settled is ink.** Raw input, clutter and first tries are pencil tangles (`graphiteScribble`). Results are inked, neat and few.\n6. **Everything boils, nothing swims.** Structure stays fixed while the tremor changes on 2s. Nothing should slide smoothly on 1s, apart from the camera.\n7. **One subject, one gesture.** At any moment one thing is being drawn, and the pencil is on it. Background life (a plane looping the margin, an ant on a line, twinkling margin stars, chimney smoke, birds) is graphite and small.\n8. **Safe area.** Content stays inside x 60–940, y 250–1500. The tag sits at y ≈ 340 and the caption at y ≈ 1330–1420.\n\n## Kit API (`styles/sketchbook/kit.js`)\n\n- **Lines:** `gline(P, { w, col, a, key, amp, part, step, second, closed })`, `gpencil(P, { w, col, a, key, amp, part, passes, closed })`, `gwob(P, key, amp)`, `writeOn(P, part)`, `writeEnd(P, part)` (where the pen is), `closeP(P)`\n- **Shapes:** `loopPts(cx, cy, rx, ry, over, a0, n)`, `sketchBox(x, y, w, h, r, over)`; core's `ellipsePts`, `arcPts`, `xform` and `bbox` still work\n- **Colour and shade:** `gfill(P, col, { a, off, key })`, `gclip(P)`, `ghatch(x0, y0, x1, y1, { ang, gap, col, w, a, key })`, `litHatch(P, {...})`, `scribbleFill(P, col, { ang, gap, w, part, base, key })`, `graphiteScribble(cx, cy, w, h, key)`, `smudge(x, y, rx, ry, a, rot)`\n- **Lettering:** `handLetter(str, x, y, size, { face: 'hand' | 'marker', col, align, reveal, key, jit, rot, stroke })` returns `[x0, x1]`, `letterW(str, size, face)`, `highlight(x0, x1, y, h, part)`, `underline(x0, x1, y, { col, part })`\n- **Page:** `sketchPage({ grid: 'dots' | 'ruled' | 'plain', tint, tintA })`, `pageTex(grid)`\n- **Props:** `pencilTool(tx, ty, ang, s)`, `eraserTool`, `paperPlane`, `noteCard(x, y, rot, s, lines, key)`, `inkStamp(str, x, y, s, rot, a)`, `checkMark(x, y, s, part)`, `sparkle(x, y, r, k)`, `arrowPencil(P, part)`, `sweat(x, y, k)`, `scrap(x, y, rot, s)`, `tapeStrip(x, y, w, rot)`, `doodleStar(x, y, r)`, `doodleBird(x, y, s, flap)`\n- **Hero:** `doodleHero(x, y, r, { mood, look, sx, sy, rot, legs, step, arms, key })` sets `SPARK_AT`\n- **Captions (DEFER):** `pageTag('sketch it')`, `pageCaption(['line one', 'line two'], [[1, 'word']], { y, size, at })`\n- **STYLE:** `backdrop` (the page washed toward a colour), `window` (the world through a graphite outline lifted by a soft smudge shadow), `blob` (a colour scribble inside a graphite outline), `hero`, `heroColor` (terracotta), `heroPts`, `post` (boiling grain)\n- **Needs from the head:** `HAND`, `CX`\n\n## Do / don't\n\n- **Do** draw things on in order (pencil, ink, colour), have the pencil prop follow the line, and keep props small and real.\n- **Do** key every random value: `key` for structure, with `B` mixed in for the tremor. The page cache is static and seeded.\n- **Do** give a house or tree crown a paper `gfill` before its ink, so graphite behind it doesn't show through.\n- **Don't** use a second accent colour, gradients for shading, flat drop shadows (use a smudge), or type that looks typeset.\n- **Don't** reuse core names (`ink`, `pencil`, `hatch`, `resample`, `trace`, `ellipsePts`, `rrectPts`). The kit's versions are `gline`, `gpencil`, `ghatch`, `loopPts`, `sketchBox`.\n- **Don't** load web fonts, images or URLs (`build.mjs` rejects them). Fonts are the local stacks above.\n- **Don't** fill the frame edge to edge with drawing. Leave paper.\n\n**Proven on:** a 15s explainer (a hand-lettered short with no voice-over, 30fps / 112.5 BPM); this demo (6s, 24fps / 120 BPM, a lightbulb doodle morphs into the sun over a sketched hill).\n", "license": "MIT", "sourceProject": "cth9191/animate", "sourceRevision": "7e5eb56feb2dd573f890e1b7b34748af43d58263", "sourceHash": "4312ce9a8e3491fcafdfa395b0a2da634afb02a7319d941995306129ef04c670", "relatedFamilyIds": [ "sketchbook" ], "id": "method/sketchbook", "kind": "reference-template", "title": "Sketchbook", "category": "Hand-drawn 2d", "facets": { "material": [ "graphite", "pencil", "hand-lettering" ] }, "poster": { "url": "/video-library/media/reference-templates/sketchbook.webp", "width": 540, "height": 960, "sha256": "776332b6c5367b9df9f92c7edb965dfc4ae18801629487f99b1e8e6dfa127964", "sourceSha256": "9aec4681282a744c8b09a17404bced48c0416d3f1888ff85721a42cf32c4f553", "role": "Original reference sample" }, "sourceUrl": "https://github.com/cth9191/animate/tree/7e5eb56feb2dd573f890e1b7b34748af43d58263/plugins/animate/skills/animate/styles/sketchbook", "downloads": { "source": { "name": "animate-method-sketchbook.zip", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-reference-templates-2026-10-08-v1/animate-method-sketchbook.zip", "bytes": 1224660, "sha256": "43f277760e92310ece5a4be21750b51dbbab08cc27f5c9395c69e464063a26d6", "available": true } } }, { "methodId": "math", "summary": "Black stage, axes, graphs, color-coded variables, and smooth easing.", "bestFor": "Quantitative ideas and visual proofs", "motion": "Precise diagrams with animation on ones", "status": "demo frame smoke passed; full film/audio unverified", "styleRules": "# Math\n\n![sample](sample.png)\n\nA manim-style math explainer look. Coloured math on a near-black stage:\n- serif type that is **Written** on\n- axes, number planes and graphs that **ShowCreation** sweeps draw\n- equations and shapes that **Transform** into each other\n- a tracking dot with a live decimal readout\n- a small pi-shaped hero with eyes that watches the math happen\n\nThe motion is smooth, on 1s, and eased with manim's sigmoid `smooth`. Nothing boils and there's no texture or grain. It's clean vector strokes, so the colour coding does the work.\n\nUse it when the subject is an idea with a picture: a formula, a proof, a function, a rate, a geometric fact. The look promises rigour, so it only works when the math on screen is true.\n\n## Palette\n\nThese are manim's colour constants (`MC.*` in the kit). Most colours carry meaning: **give each quantity one colour and keep it everywhere**: in the formula, on the figure, in the labels, in the readouts and in the captions.\n\n| key | value | use |\n|---|---|---|\n| `bg` | `#0E0E10` | the stage (and `STYLE.paper`). Near-black, flat |\n| `white` | `#FFFFFF` | operators (`+ = ( )`), neutral text |\n| `grey` / `greyC` / `greyD` | `#BBBBBB` / `#888888` / `#444444` | axes and ticks / secondary labels, tags / underlines, guides |\n| `blueD` | `#29ABCA` | number-plane lines only (at 14–42% alpha) |\n| `red` | `#FC6255` | quantity 1 (demo: `a`, `cos θ`) |\n| `green` | `#83C167` | quantity 2 (demo: `b`, `sin θ`) |\n| `yellow` | `#F7D96F` | quantity 3, often the result or the \"whole\" (demo: `c`, `1`, the circle, the tracking dot) |\n| `blue` | `#58C4DD` | quantity 4, often the angle or the parameter (demo: `θ`) |\n| `teal` / `gold` / `purple` / `maroon` / `pink` / `orange` | `#5CD0B3` / `#F0AC5F` / `#9A72AC` / `#C55F73` / `#D147BD` / `#FF862F` | more quantities, when a piece needs them |\n| `yellowP` | `#FFFF00` | pure yellow, for Flash only |\n| `pi` / `piD` | `#2E86AB` / `#1C5A75` | the hero's body and edge (never a quantity's colour) |\n\nFills are the stroke colour at 14–35% alpha (manim's `fill_opacity`). Captions sit on a black BackgroundRectangle at 75% alpha.\n\n## Type\n\n- **Serif for all math and prose:** `Cambria, \"Cambria Math\", \"Latin Modern Roman\", \"CMU Serif\", \"STIX Two Text\", \"Times New Roman\", Georgia, serif` (`MATH_SERIF`). Cambria comes first because it has a real italic; Cambria Math has none, so the browser would fake it.\n- **Mono for code:** `Consolas, Menlo, \"DejaVu Sans Mono\", \"Courier New\", monospace` (`MATH_MONO`).\n- **TeX conventions:**\n - variables are italic (`mv`)\n - digits, function names (`cos`, `sin`, `log`) and units are upright (`mn`)\n - binary operators and relations get TeX's spacing (automatic in `texLayout`)\n - superscripts are at 0.6 size\n - use a true minus `−` (`fmtNum` does this)\n- **Sizes at 1080×1920:**\n - the main formula: 90–110px\n - a second line: 60–70px\n - labels on a figure: 40–52px\n - tick labels: 28–32px\n - captions: 50px\n - nothing under 28px\n\n## Motion habits\n\n- **On 1s** (`STYLE.ones = true`): TT advances every frame. Easing is manim's `smooth` (`smoothM`, a sigmoid with inflection 10) or `thereBack` for Indicate / hop moves. Never linear, except a value that a tracker drives.\n- **Run times about 1s:** Write 0.7–1.0s, ShowCreation 0.5–1.0s, Transform 0.8–1.0s, FadeIn 0.3–0.5s, Flash 0.4–0.5s. `runS(t0, d)` is a `play(..., run_time=d)` starting at `t0`.\n- **Lag ratios (LaggedStart):** about 1.2–1.4 across the glyphs of a Write, and 0.5 across sibling objects. Use `lagged(p, i, n, 0.5)` for the three squares or three sides.\n- **Write:** the outline draws on over each glyph's first half, the fill fades in over its second half, lagged left to right. Formulas are Written, not typed, and they never pop.\n- **ShowCreation:**\n - a line, an arc or an axis sweeps from its start\n - a closed shape draws its border, then the fill fades up (DrawBorderThenFill)\n - axes come before ticks, and ticks before labels\n- **Transform:** an equation turns into the next one by matching terms (`transformTex`, ids). Terms that stay glide to their new place. Terms that change cross-fade while they move. A shape turns into a shape (`STYLE.blob`, the morph bridge).\n- **Trackers:**\n - a value moves smoothly (`keysM`)\n - the dot, the drop lines and the readouts are recomputed from it every frame\n - the readout shows the honest value at its precision\n- **The camera stays still.** If you need a zoom, make it one slow, eased push.\n- **Formats:**\n - **9:16** (1080×1920, 24fps, 120 BPM): the 8th grid is 6 frames.\n - **Native b-roll** is 16:9 at 60fps (1920×1080). At 120 BPM an 8th is exactly 15 frames, so cuts land on whole frames. A 16th would be 7.5 frames, so stay on 8ths.\n\n## Frame checklist\n\nCheck every key frame against this before you call it done:\n\n1. **One idea per frame.** A frame shows one step of the argument: one formula being Written, one figure being built, or one Transform. If two things are animating, they're the same step in two forms, like the equation and its picture.\n2. **Colour-coded variables are consistent.** Every quantity has exactly one colour, and it's the same in the formula, on the figure, in labels, in readouts and in captions. The hero's blue and the grey guides are never a quantity's colour. A term that changes identity (`a` → `cos θ`) keeps its colour through the Transform.\n3. **The equation and the picture agree.**\n - The numbers on screen are the numbers the figure shows: 16 cells in the square on 4, and a readout computed from the same tracker as the dot.\n - Rounded values must still add up as displayed.\n - If a claim isn't exactly true at the shown precision, change what you show.\n4. **The text is real math, typeset cleanly.**\n - italic variables, upright functions and digits\n - TeX spacing round operators, a true minus sign\n - superscripts raised and smaller\n - no label crossing a stroke, and no label crossing another label\n - labels sit on the side of a segment away from the figure, and fade when their segment gets too short\n5. **Motion explains.** Every move maps to a step of the argument: drawing a side defines it, a square appearing is \"squaring\", a Transform is a substitution, a sweep is \"for every θ\". Decorative motion is limited to the hero (blink, hop) and the Flash on the result.\n6. **Safe area and breathing room.** Everything sits inside x 60–940, y 250–1500 on 9:16. The formula stays at the top, the figure in the middle, readouts low left, the hero low right, and the caption at y 1440.\n7. **Background life is quiet.** Use a faint number plane, tick marks, unit cells, a right-angle mark, a section tag or a coordinate label. Use three or more, all low-contrast and all true.\n\n## Kit API (`styles/math/kit.js`, on top of `kit/core.js`)\n\n- **Easing / time:**\n - `smoothM(u)`, `thereBack(u)`\n - `runS(t0, d)`: smooth progress of a play at t0\n - `lagged(p, i, n, lag)`\n - `keysM([[t, v], ...])`: a smooth keyframed value\n - `fmtNum(v, d)`\n- **Text:**\n - `writeText(segs, x, y, size, p, { align, color, it, lag, alpha })`: segs = string or `[{ s, c, it }]`\n - `mText(...)`: already written\n - `writeGlyph`, `textW`\n- **Formulas:**\n - tokens `mv(s, c, { sup, sub, id })` (italic) and `mn(...)` (upright), operator strings `'+'`, `'='`, `'−'`, fractions `{ frac: [num, den], c }`, spaces `{ sp: em }`\n - `writeTex(tokens, x, y, size, p, o)` returns the screen layout\n - `texBox(layout, id)`: the box of a term (for a Flash, brace or arrow)\n - `transformTex(A, B, x, y, size, u)`: TransformMatchingTex by token id\n- **Strokes:**\n - `segLine(x1, y1, x2, y2, c, w, p, al)`\n - `showCreation(P, p, { c, w, closed, fill })`\n - `mArrow(x1, y1, x2, y2, c, w, p)`\n - `mBrace(x1, y1, x2, y2, { side, label, p })`\n - `rightAngle(x, y, d1, d2, s)`\n - `angleArc(x, y, r, a0, a1, c, p)`\n - `squareOn(x1, y1, x2, y2, side)`, `cellGrid(Q, n, c, al)`\n - `polyPath(P)`\n - `flashAt(x, y, u, c, r)`\n - `indicateS(u)`\n- **Plots:**\n - `axes2({ at, u, x, y, ext, step, tick, labels, p })` returns `{ to(x, y), ... }`\n - `numberPlane(A, { step, sub, p })`\n - `graphM(A, f, x0, x1, p, { c, w, area })`\n - `dropLines(A, x, y)`\n- **Trackers:**\n - `trackDot(x, y, c)`\n - `readout(label, v, d, x, y, size, { c, align, p })`: writes `label = value`\n- **Hero:** `piHero(x, y, s, { look: [x, y], mood: 'calm' | 'wow' | 'happy', hop, key })`. Feet at (x, y). Sets `SPARK_AT`. It blinks on its own, deterministically.\n- **Overlays (DEFER):**\n - `mathCaption(segs)`: a written caption on a BackgroundRectangle at (CX, 1440)\n - `mathTag(str)`: a grey italic section tag, top left\n- **STYLE:**\n - `paper` is the stage colour, and `backdrop(c)` is a flat fill\n - `window` shows the world through the bridge outline, rimmed in the bridge shape's own colour\n - `blob` is a coloured stroke over a 32% fill (the Transform look)\n - `hero` and `heroPts` give the pi hero for hero-to-hero bridges\n - `ones: true`, and there's no post pass\n- **Needs from the head:** `CX` (caption centre x). `HAND` is only used by the storyboard title, so set it to the serif stack.\n\n## Do / don't\n\n- **Do** write the colour code down first (quantity → colour), then use it everywhere, captions included.\n- **Do** build the figure in the order of the argument: sides, then squares, then cells, then the count, then the sum.\n- **Do** compute every readout from the same tracker that moves the picture. Round so the displayed arithmetic is exact. The demo shows `sin²` as `1 − round(cos²)`.\n- **Do** bridge eras with a shape that *is* the next idea: the square on c becomes the circle of radius c.\n- **Don't** use grain, wobble, boil, drop shadows, gradients behind math, or textures. This is the one clean style.\n- **Don't** use pure `#FFFF00` for anything but a Flash. Don't use pure black for the stage.\n- **Don't** let a label sit on a stroke. Don't let tick labels sit where a curve crosses the axis.\n- **Don't** pop formulas in, and don't type them like a terminal. Write them.\n- **Don't** state anything the math doesn't support, even in a caption.\n\n## Proven on\n\nTwo short math explainers (20s and 30s, 16:9 at 60fps), and this demo (6s 9:16):\n- `a² + b² = c²` drawn as a 4-3-5 triangle with 16 + 9 = 25 unit cells\n- the square on c morphs into the unit circle\n- the formula Transforms to `cos²θ + sin²θ = 1` while a live readout keeps summing to 1\n", "license": "MIT", "sourceProject": "cth9191/animate", "sourceRevision": "7e5eb56feb2dd573f890e1b7b34748af43d58263", "sourceHash": "febbdf10e927834f4667c1cf252782ce7aa5f060b8b78320e2bf4107f955add1", "relatedFamilyIds": [ "math" ], "id": "method/math", "kind": "reference-template", "title": "Math", "category": "Information design", "facets": { "material": [ "math", "graph", "formula", "dark-stage" ] }, "poster": { "url": "/video-library/media/reference-templates/math.webp", "width": 540, "height": 960, "sha256": "77e2555914e1e75159a5f424555a38f7d3517af3de9aa3a897c01feb40765b40", "sourceSha256": "133d4f1ff778fcb7fd70d3e9b48a14f94b3b5f4e96f77bf40883c475ee86443a", "role": "Original reference sample" }, "sourceUrl": "https://github.com/cth9191/animate/tree/7e5eb56feb2dd573f890e1b7b34748af43d58263/plugins/animate/skills/animate/styles/math", "downloads": { "source": { "name": "animate-method-math.zip", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-reference-templates-2026-10-08-v1/animate-method-math.zip", "bytes": 698475, "sha256": "b7e541f3843d1a97546a076b3dfe609cbd4224edaf1755716e96af740ccce9db", "available": true } } }, { "methodId": "pixel", "summary": "True low-resolution drawing enlarged with nearest-neighbor scaling.", "bestFor": "Retro timelines and digital history", "motion": "Pixel motion on ones or twos", "status": "demo frame smoke passed; full film/audio unverified", "styleRules": "# Pixel\n\n![sample](sample.png)\n\nPixel art. Every picture is drawn at a low internal resolution — 90x160, 135x240, 180x320 for a 9:16 frame — with whole-pixel primitives in a limited palette, then scaled up nearest-neighbour to 1080x1920. Hard square pixels, ordered (Bayer) dithering instead of gradients, a built-in 5x7 bitmap font, sprites from string arrays, and screen effects that belong to a device: an LCD grid for a handheld, scanlines and a curved-tube vignette for an arcade. **Resolution can tell time:** an early era is chunkier than a later one, so a chronology gets sharper as it goes.\n\n## Resolutions per era\n\nEach era picks an internal resolution that divides 1080x1920 exactly, so every pixel is a whole square on screen. Declare it in `src/bridges.js` as `ERA_RES = [[w, h], ...]`; scenes draw with `lowres(ERA_RES[e], ...)`, and the STYLE hooks read it to size morph windows, the morphing blob and the post effects.\n\n| res | pixel size | feels like | glyphs across (5x7 font) |\n|---|---|---|---|\n| 54x96 / 72x128 | 20 / 15 px | the earliest, blockiest eras | 9 / 12 |\n| 90x160 | 12 px | a 4-colour handheld | 15 |\n| 135x240 | 8 px | an early home console | 22 |\n| 180x320 | 6 px | a 16-colour arcade | 30 |\n| 270x480 | 4 px | a late, detailed era | 45 |\n\nDivisors of both 1080 and 1920: 2, 3, 4, 5, 6, 8, 10, 12, 15, 20, 24, 30, 40, 60, 120. Keep at least a 2x step between neighbouring eras so the change reads on a phone. The demo goes 90x160 (12 px) → 180x320 (6 px): the moon is 17 pixels across, the coin it becomes is 37.\n\n## Palettes\n\n`PAL16` and `HANDHELD` in `kit.js`. One palette per era; give each era a different one when the eras are different devices.\n\n- **PAL16** (16 colours): ink `#14101e`, night `#232a4e`, blue `#2f5fa8`, sky `#5fb4e6`, ice `#a8f0f0`, white `#f4f0e6`, grey `#8a8ca0`, slate `#4a4e66`, green `#2e8a4a`, lime `#8ad04a`, yellow `#f6d64a`, orange `#f08a32`, red `#d83a3a`, pink `#f07aa8`, purple `#6a3a8a`, brown `#7a4a2a`. **Orange is the hero's body** (`HERO_PAL`).\n- **HANDHELD** (4 greens, darkest first): `#0f2a14`, `#306a2e`, `#8aac2a`, `#c4d870`. Everything in such an era — sky, trees, hero (`HERO_HH`), text, window rims — is one of these four.\n- **Enforce it:** `lowres(res, draw, { fx: { pal: HANDHELD } })` snaps every pixel of the era's picture to the nearest palette colour after drawing. Set `ERA_POST[e].pal` too, so the morph's backdrop and blob dither with the era's own colours.\n- The paper (the blank screen a morph happens on) is ink `#14101e`; in an era with its own palette it snaps to that palette's darkest colour.\n\n## The font\n\n`FONT5`: 5x7 glyphs, one number per row (bit 16 = the left column), A–Z, 0–9 and `. , ! ? : - + / ' \" > < * = ( ) # % _ $`; lower case draws as upper case. A glyph advances 6 pixels. `pixText(str, x, y, colour, { scale, count, align, shadow, cursor })` draws it with whole-pixel rects (one per run of lit pixels). `count` is the typing reveal; `cursor` blinks a block after the last typed glyph. Text always lives in the era's own resolution, so it is chunkier in early eras — that's the point. Never use a system font for on-screen text.\n\n## Dithering\n\nA 4x4 Bayer matrix (`bayer(x, y)` → a threshold in 0..1). `pgrad(x, y, w, h, colours)` dithers a vertical (or `horiz`) gradient through a list of palette colours; `pdither(x, y, w, h, a, b, f)` puts colour b wherever `f(x, y)` beats the threshold; `pglow(cx, cy, r0, r1, colour, amt)` is a dithered halo for moons, lamps and coins. Shading on round things (the hero, the blob) is a light top-left and dark bottom-right, dithered at the boundary. Never use a smooth gradient: a gradient is two or three palette colours and a dither.\n\n## Era effects\n\nTwo places, both deterministic (keyed on `B`):\n- **On the low-res picture**, `lowres(..., { fx })`: `pal` (snap to palette), `posterize: n`, `noise: count` + `noiseAmt` (colour noise), `blocks: frac` + `bs` (JPEG-ish flattened blocks), `flicker: amt` (brightness jitter), `blur: px` (a soft, early-generative look; it breaks the palette, so keep it to one era).\n- **On the screen**, `ERA_POST[e] = { scan, lcd, vignette, rim, pal }` drawn by `STYLE.post` on the era's pixel grid: `scan` darkens the bottom third of each pixel row, `lcd` draws a thin gap between pixels, `vignette` dithers the corners dark (a curved tube), `rim: [light, dark]` colours the morph window's rims.\n\n## Motion habits\n\n- **On 2s** (`STYLE.ones = false`). TT steps at 12 fps; a one-pixel-per-step move is a steady 12 low-res px/s, sprites have two frames, and on-1s motion would only add in-between positions that pixel art doesn't draw. A piece that needs smooth scrolling can set `STYLE.ones = true` in its scenes.\n- **Whole-pixel moves only.** Positions are integers in pixel space (`Math.floor(TT * 12)` per boil, `Math.round` on eased paths). Nothing slides by a fraction of a pixel.\n- **Sprite frames flip on beats** (`Math.floor(TT / BEAT) % 2`): idle squash, ears, tufts of grass, tree tips. Walk cycles flip every pixel or two. Spins step through 4–6 widths on 8ths.\n- **Jumps are parabolas in whole pixels** (`Math.round(Hmax * 4u(1 - u))`), with the shadow shrinking under them.\n- **Things blink rather than fade:** stars, fireflies, lit windows, cursors — on/off keyed on `B` or the beat, never an alpha ramp.\n- **No camera.** `pieceCam` returns null; move the world instead. A camera on the context is honoured (pans snap to whole pixels) but zooms would make pixels uneven; to \"zoom in\", cut to a finer resolution.\n- The morph: the old era shrinks into a stepped window on its own grid, the blob morphs while its grid steps from the old era's pixel size to the new one (12 → 10 → 8 → 6 px), and the new era opens from a stepped window on its finer grid.\n\n## Frame checklist (on top of grammar/FRAME.md)\n\n1. **Every edge on the pixel grid.** No anti-aliasing, no sub-pixel motion, no arcs, strokes or font text: zoom into a still at full size and every edge is a staircase of equal squares.\n2. **A limited palette per era:** 4 colours for a handheld, 16 for an arcade, each era's own. Enforce with `fx: { pal }`; mixed colours are dithered, never blended.\n3. **Readable silhouettes at the true resolution.** Check the scene at its internal size (90x160 is tiny): the hero, the bridge object and the caption read as shapes there. Rim-light dark shapes on dark skies (the demo's pines get a one-pixel moonlit edge).\n4. **A hero acting:** `pixHero` with eyes that look at things, a mood (`wow`, `happy`), a hop or a jump, a `!` bubble when it notices something.\n5. **3+ details of background life:** blinking stars, fireflies, a walking critter, drifting clouds, windows lighting on the beat, a patrolling slime, sparkles.\n6. **A full-bleed world:** sky, horizon and ground to the edges; UI panels (tags, captions, HUD) sit on top of it.\n7. **Text in the pixel font, in the era's resolution:** captions type themselves on with a blinking block cursor; tags pop in at double size for one boil.\n8. **Resolution tells time:** later eras are sharper (and usually more colourful). The bridge object keeps its screen position and size; only its pixel size changes.\n9. **Inside the safe area** (x 60–940, y 250–1500) for every tag, caption, HUD line and the hero.\n\n## Kit API\n\n`styles/pixel/kit.js` (needs `W`, `H`, `CX`, `BEAT` from the piece head; optional `ERA_RES`, `ERA_POST`):\n\n- **The low-res pass:** `lowres(res, draw, { fx, al })` (res = `[w, h]` or a pixel size), `withGrid(G, fn)` (pixel primitives straight onto the screen at G px per pixel), `pixToScreen(x, y)`, `pixToWorld(x, y, res)` (a pixel's centre in 1080x1920 — use it to place bridge shapes), `pixFromWorld(x, y, res)`, `PIX` (the current mapping).\n- **Primitives (pixel coords):** `pset`, `prect`, `pfill`, `pline` (Bresenham), `pellipse(cx, cy, rx, ry, c, { ring })`, `pcircle`, `ppoly(points, c)`, `polySpans`, `pdither`, `pgrad`, `pglow`, `cellR`.\n- **Colour:** `PAL16`, `HANDHELD` (`PAL4`), `PIX_ALL`, `bayer`, `BAYER4`, `ditherPair(c, pal)`, `nearestC`, `posterize`, `shadeC`, `rgbOf`, `hexOf`, `pixFX`.\n- **Text and sprites:** `FONT5`, `pixText`, `pixTextW`, `sprite(rows, map, x, y, { flip, scale, anchor })`, `SPR` (spark, twinkle, heart, note).\n- **Hero:** `pixHero(x, y, r, { pal, mood, look, hop, frame, blink, key })` → `{ top, foot }`; sets `SPARK_AT`. `HERO_PAL`, `HERO_HH`. `pixBubble(str, x, y, o)`, `pixBox(x, y, w, h, { bg, edge, shadow })`.\n- **Overlays (DEFER, in the era's resolution):** `pixCaption(str, { fg, bg, edge, y, cx, at, dur, scale })`, `pixTag(str, o)`, `pixOverlay(draw)` for a HUD or score.\n- **Hooks' helpers:** `gridAt(t)`, `gridOfEra(e)`, `eraLook(e)`, `eraPal(...eras)`, `gridMask`, `maskRing`, `maskPath`, `pixPost`.\n- **STYLE:** `paper` ink; `backdrop(c)` = c as a two-colour dither on the era's grid; `window(P)` = the world through P rasterised on the era's grid, a stepped edge with light and dark one-pixel rims and a shadow; `blob(P, c)` = P as chunky dithered pixels whose grid steps between the eras' sizes; `hero` = `pixHero` on the current grid; `post` = `ERA_POST` effects; `ones: false`.\n\n## Do / don't\n\n- **Do** pick resolutions that divide 1080x1920, and place bridge objects with `pixToWorld` so the morph lands on the drawn object.\n- **Do** design sprites at their true size (a 6x4 beetle, an 8x6 slime) and procedural shapes (`pixHero`, `pcircle`) at the era's resolution, so a later era's hero has more pixels, not bigger ones.\n- **Do** keep UI panels pixel-native: one-pixel borders with clipped corners, a palette fill, the bitmap font.\n- **Do** give dark shapes a one-pixel rim light, and a sparkle or glow to the thing the eye should land on.\n- **Don't** draw with `arc`, `stroke`, `fillText`, `filter` or alpha ramps inside `lowres` (the opt-in `fx.blur` aside); don't scale sprites by non-integer amounts; don't move anything by fractions of a pixel.\n- **Don't** mix palettes inside an era, or use a smooth CSS/canvas gradient anywhere.\n- **Don't** zoom the camera; cut to a finer resolution instead.\n- **Don't** imitate any specific commercial game's characters, logos or iconic blocks; the arcade vocabulary (coins, bricks, a score) is generic.\n\n**Proven on:** a fixed-stage history of AI video (each era's picture rendered at its true resolution and scaled up nearest-neighbour, with per-era noise and blur); this demo (a 4-colour handheld dusk at 90x160 whose moon becomes a spinning coin over a 16-colour arcade night at 180x320).\n", "license": "MIT", "sourceProject": "cth9191/animate", "sourceRevision": "7e5eb56feb2dd573f890e1b7b34748af43d58263", "sourceHash": "661f93c9a9b9a3f7172e162ad816f8fffd6d37c12b90f0bb47753b848fa72de3", "relatedFamilyIds": [ "pixel" ], "id": "method/pixel", "kind": "reference-template", "title": "Pixel", "category": "Retro digital", "facets": { "material": [ "pixel", "retro", "bitmap-font" ] }, "poster": { "url": "/video-library/media/reference-templates/pixel.webp", "width": 540, "height": 960, "sha256": "fe65dfa5f266562379dfcc9cc98d7099323eaab0237a9eb47ec3821873a9c6d1", "sourceSha256": "78db9a4fadc0b89496305a0c91011759e68ad67b2e2aff0f1dd50a1576f5f1f9", "role": "Original reference sample" }, "sourceUrl": "https://github.com/cth9191/animate/tree/7e5eb56feb2dd573f890e1b7b34748af43d58263/plugins/animate/skills/animate/styles/pixel", "downloads": { "source": { "name": "animate-method-pixel.zip", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-reference-templates-2026-10-08-v1/animate-method-pixel.zip", "bytes": 694302, "sha256": "fb52881e7e59ce9f8f5926a1484d9525d161ebe77c28f0e436277242c86b50ee", "available": true } } }, { "methodId": "isometric", "summary": "Product line art with constant hairlines, white faces, rounded slabs, and one dark accent.", "bestFor": "System and product architecture", "motion": "Isometric movement on ones with spring settles", "status": "demo frame smoke passed; full film/audio unverified", "styleRules": "# Isometric line art\n\n![sample](sample.png)\n\nCalm, precise product illustration: objects in 2:1 dimetric isometric on a white ground, drawn only with constant hairlines. Grey silhouettes and edges, lighter inner and receding lines, faces filled white so nearer objects hide farther lines. Rounded slabs and plates with visible thickness, stacked layers, grids of repeated parts (keys, vents, pillars, ports), and one tiny dark accent per frame. Motion on 1s with spring settles; otherwise still. Studied from MIT-licensed isometric line figures (references kept local, never copied).\n\n## Measured (from the reference figures' live SVG, and screenshots of them)\n\n| what | reference | this style |\n|---|---|---|\n| ground | `#ffffff` (screenshot palette: the 248 bucket, 95-99% of pixels) | `#ffffff`; 97% of a frame |\n| silhouette / edges | `rgb(164,164,172)`, 0.9px non-scaling | `#a4a4ac` (= 164,164,172), **2.0px at 1080 wide** |\n| inner / receding lines | `rgb(224,224,228)`, 0.9px | `#e0e0e4`, 2.0px (same weight, lighter colour) |\n| faces | filled `#fff` | filled `PAL.face` (white) |\n| accent | `rgb(35,35,39)`, one element per figure | `#232327`; one focus per frame (plus the hero's eyes) |\n| projection | 2:1 dimetric, edges slope 0.5 (26.57°) | same: x → (u, u/2), y → (−u, u/2), z → (0, −1.2247u) |\n| slab thickness | ~7 units on a 400-unit viewBox (1.75%) | 9-22 world units on ~420-unit objects (2-5%) |\n| corners | rounded / chamfered, radius ~5-10% of the slab | `r` 10-44 (about 5-10% of the slab's long side) |\n| line : figure width | 0.9px on a ~480px figure ≈ 0.19% | 2.0px on a ~800px figure ≈ 0.25% (see Not matched) |\n| figure : frame width | ~34% (a gallery view) | ~75-80% of 1080 (a phone frame) |\n| shadows, texture, grain | none | none |\n\nPalette as `compare.mjs` buckets (crop of the terminal figure vs our t=2.35s): ref 248 96.2% · 232 2.6% · 216 0.9%; ours 248 97.1% · 168 1.0% · 232 0.5%. The reference's hairlines land in the 216-232 buckets only because the 0.9px lines were downsampled to ~0.5px in the screenshot; the SVG says 164 and 224.\n\n## Palette and meaning (`PAL` in kit.js)\n\n- `paper` / `face` `#ffffff` — the ground and every face. White fills do the hidden-line work.\n- `edge` `#a4a4ac` — silhouettes, the cap facing the viewer, sharp edges, cables, hero outline.\n- `inner` `#e0e0e4` — receding and inner lines: rounded-corner creases, bezels, vents, trackpad, steam, contact rings.\n- `accent` `#232327` — the focus: the cursor, the active blade's LED. One per frame. The hero's two eyes use it too.\n- `text` `#5c5c64`, `textD` `#9a9aa2` — captions, labels, typed mono.\n- **Dark variant** (`const ISO_DARK = true;` before the kit, see `demo-dark/`): ground and faces `#101014`, edge `#8e8e9a`, inner `#34343c`, accent `#f4f4f6` (the focus becomes the brightest thing), text `#b4b4be`.\n\n## Line and geometry\n\n- Hairlines are **constant on screen**: `hair(color)` divides the width by the current transform's scale, so a camera push never thickens a line. Round joins and caps. No wobble, no boil.\n- Every edge lies on an iso axis (x, y or z) unless something is rotating (a lid on its hinge, a leaf).\n- A solid is a rounded rectangle extruded along an axis (`isoSlab`): white silhouette fill, silhouette stroke, the front cap's outline, and **one** extrusion line at the corner nearest the viewer (`inner` when the corner is rounded, `edge` when sharp).\n- Hidden lines by painter's order: back to front (smaller x + y first; lower z first in a stack; a thing pulled forward is still drawn in its stack slot, and whatever rides on it is drawn last).\n- Type: sans for captions (`\"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif`, 46px, centred at `CX`, a 44px rule above), mono for tags and labels (`Consolas, Menlo, \"DejaVu Sans Mono\", monospace`). Labels on objects are set into the face (`isoText` skews the glyphs into the plane).\n\n## Motion habits\n\n- On 1s (`ones: true`): motion is smooth; nothing boils. Held frames are truly still apart from tiny idle life (the hero's bob, a lamp toggling once a second, steam, a leaf sway).\n- Every move settles on a spring: `spring(t, t0, { k, damp })` (closed form, no state). Things **drop in** (plates, props: `1 - spring` times a height), **rise** (keys in a diagonal wave, `(i + j) * 0.028` s apart), **open** (a lid on its hinge), **slide** (a blade out of a rack, k 55, damp 0.72). `kick()` for squash and antenna sway.\n- Stagger reveals along the iso diagonal; never all at once.\n- Camera: still, or a slow push of a few percent (z ≤ 1.05). No shake, no zoom bumps.\n- Morphs: the renderer's shape morph works on 2D outlines; give it a face outline (`facePts`) on both sides so the morphing shape lies in the same plane in both eras.\n\n## Frame checklist (on top of the skill's grammar/FRAME.md)\n\n1. **Every edge sits on an iso axis** (slope ±0.5 or vertical), except a part that is visibly rotating.\n2. **Hairlines are constant** at any zoom and the same weight everywhere (2.0px at 1080); only the colour changes (edge vs inner).\n3. **Nearer faces are white and hide what is behind** — no line shows through a solid; check the painter's order wherever two objects overlap on screen.\n4. **One dark accent, and it is the focus** (the cursor, the live LED). Other lamps toggle between outline and grey, never dark.\n5. **Detail comes from repetition** — a grid of keys, vents, ports, plates — not from texture or shading. Big faces stay empty.\n6. **Slabs have thickness and rounded corners**, and stacks show their layers (a gap or an inset between plates).\n7. **White space around the object** is part of the look: one object group in the middle, the caption well below it, nothing touching the frame edge.\n8. **Every move settles on a spring** and then holds still.\n9. No shadows, gradients, grain or colour.\n\n## Kit API (`kit.js`, on top of `kit/core.js`)\n\n- Projection: `setIso({ ox, oy, u })`, `iso(x, y, z)`, `isoP([x, y, z])`, `ZK`, `ISO_VIEW`, vectors `vadd vsub vsc vdot vcross`.\n- Lines: `hair(color, w)`, `polyPath(P, closed)`, `line3(P3, color)`, `hull2(P)`, `zoomNow()`.\n- Solids: `isoSlab(o, a, b, n, w, d, h, { r, seg, fill, edge, crease, creaseC })` → `{ front, at(u, v, s) }`; `isoBox(x, y, z, w, d, h, o)`; `isoPanelY` / `isoPanelX` (standing panels); `isoCyl(x, y, z, r, h)`; `isoPlates(x, y, z, w, d, [{ h, gap, inset, r, dz }])`; `isoGrid(nx, ny, fn(i, j))` (painter's order).\n- Faces (u right, v down): `faceOf(origin, a, b)`, `slabFace(slab)`, `facePath`, `faceRR(fp, x, y, w, h, r, { fill, stroke })`, `faceEll`, `faceLine`, `faceSlab(fp, x, y, w, h, t, o)` (a raised pill / key / button), `facePts` (outlines for bridges), `isoText(fp, str, u, v, size, { color, count, font })`, `accentDot(fp, u, v, r)`, `lamp(fp, u, v, r, lit)`.\n- Motion: `spring(t, t0, { k, damp })`, `kick(t, t0, { k, damp })`, `springTo`, `blinkOn(t, period, phase)`.\n- Props: `isoMug(x, y, z, r, h)`, `isoPlant(x, y, z, s)`, `isoCable(P3, { w })`.\n- Hero: `cubeBot(x, y, z, s, { key, hop, look, faceX })` — a rounded cube with two accent-dark eyes that blink, a mouth line, an antenna that sways after a hop, an idle bob, a contact ring while airborne; sets `SPARK_AT`.\n- Captions: `isoCaption(str)`, `isoTag(num, label)` (through `DEFER`).\n- `STYLE`: `paper`, `backdrop` (flat fill), `window` (the source seen through the outline with a hairline rim and a light thickness line under it), `blob` (a hairline slab; its fill goes from accent-dark to white as the stroke colour goes from accent to edge, so a dark cursor can become a white panel), `hero`, `heroColor`, `heroPts`, `post` (nothing), `ones: true`.\n\n## Do / don't\n\n- **Do** design in world units (≈ px with `u` ≈ 1) and lay out each era's group so its silhouette spans ~75-80% of the frame width.\n- **Do** put text and small parts *on faces* (`faceOf`, `slabFace`) so they skew with the object.\n- **Do** draw riders (the hero on a blade) after everything they sit in front of.\n- **Don't** stroke inside a skewed face transform (the width skews too); project points and stroke in world space (all `face*` helpers do).\n- **Don't** add a second dark element to show emphasis; move the accent instead.\n- **Don't** use non-convex outlines with `isoSlab` (it fills the convex hull); build an L-shape from two slabs.\n\n## Not matched (deliberate or open)\n\n- **Line lightness as seen:** the reference screenshots read lighter (their 0.9px lines downsample to 216-232 grey); at 2.0px we draw the true SVG colours, so our frames read about one grey step darker. Deliberate: thinner or lighter lines vanish on a phone after compression.\n- **Line-to-figure ratio** 0.25% vs 0.19%, for the same reason.\n- **Scale:** the subject fills ~75-80% of the frame width (the reference gallery shows ~34%).\n- **Bevels:** the reference often doubles slab edges with an inset parallel line (a bevel); we draw one cap outline. Add a `faceRR` inset by hand where wanted.\n- **Type:** the reference figures carry no type; we add mono labels set into faces and a sans caption.\n- **Non-convex plates** (L-shaped floors) are not a primitive.\n- **The morph's in-between** pinches when a tiny shape becomes a long thin one (the renderer resamples by angle) — the references don't morph at all.\n\n## Proven on\n\n`demo/` (6s, 9:16, 120 BPM, 24fps): a laptop on a stacked plinth drops in, opens on a spring, its keys rise in a wave and a prompt is typed; the dark cursor block morphs at 3.0s into the front of a server blade, which slides out of a rack with the cube-bot riding it. Tile deterministic; `demo-dark/` renders the same piece on the dark ground.\n", "license": "MIT", "sourceProject": "cth9191/animate", "sourceRevision": "7e5eb56feb2dd573f890e1b7b34748af43d58263", "sourceHash": "ff2b3f92629aadb938cd9f53e7e249700e8a637cd0b2432c16c68c3621500c89", "relatedFamilyIds": [ "isometric" ], "id": "method/isometric", "kind": "reference-template", "title": "Isometric", "category": "Technical illustration", "facets": { "material": [ "isometric", "hairline", "explainer" ] }, "poster": { "url": "/video-library/media/reference-templates/isometric.webp", "width": 540, "height": 960, "sha256": "8ef8170f19625ae8843c15cf1c986f2feca54bcd81bcd1b23a4f77f89b358cb9", "sourceSha256": "98f67dd5780a43c4e409b2fbe0062028013f252e22065dcc865b871e52ea02a4", "role": "Original reference sample" }, "sourceUrl": "https://github.com/cth9191/animate/tree/7e5eb56feb2dd573f890e1b7b34748af43d58263/plugins/animate/skills/animate/styles/isometric", "downloads": { "source": { "name": "animate-method-isometric.zip", "url": "https://github.com/JonathanKHobson/shareables/releases/download/video-library-reference-templates-2026-10-08-v1/animate-method-isometric.zip", "bytes": 707121, "sha256": "d8ee7f9e74707ca63f7c31d49731b3f09a16dcf68918efa55d988cbf66ed2a1e", "available": true } } } ], "sourceEdition": "2026-10-08", "counts": { "families": 30, "examples": 38, "referenceMethods": 7 }, "release": { "url": "https://github.com/JonathanKHobson/shareables/releases/tag/video-library-2026-10-08-v1", "tag": "video-library-2026-10-08-v1", "assets": 114, "verified": "Exact size and SHA-256 matched GitHub release asset readback." }, "referenceRelease": { "url": "https://github.com/JonathanKHobson/shareables/releases/tag/video-library-reference-templates-2026-10-08-v1", "tag": "video-library-reference-templates-2026-10-08-v1", "assets": 7 } }