{ "v": 3, "ts": "2026-07-17T17:01:41Z", "title": "Wonder Spellbook", "thesis": "An infinite arsenal of capabilities transpiled into code \u2014 a gallery you invoke to create beauty as physical pixels.", "law": "cast = pixels; observe closes the loop; ability grows with every cast; visual-first: majority glass, meta collapses", "host": "https://wonder.lnk-us.com/motion/", "gallery": "https://wonder.lnk-us.com/motion/", "codex": "https://wonder.lnk-us.com/motion/spellbook.json", "wall": "https://wonder.lnk-us.com/motion/emissions.json", "observations": "https://wonder.lnk-us.com/motion/observations.json", "visual": { "modes": [ "wall", "pen", "mosaic", "full", "embed" ], "pixel_budget": "stage+tiles \u226560% viewport", "doctrine": "display/VISUAL_SURFACE.md", "plan": "research/visual-first-spellbook-codepen-plan.md", "keys": "1-9 cast \u00b7 F full \u00b7 M mosaic \u00b7 S snap \u00b7 arrows playlist" }, "schools": { "css": { "name": "Chrome", "sigil": "\u25c7", "pixel": "CSS compositor", "blurb": "Product glass \u2014 structure, expand, reveal, decisive motion", "order": 1, "detail": "Layout \u2192 paint \u2192 composite. Zero-asset beauty for truth UI. Springs and grid expansion live here.", "spell_ids": [ "Crossfade@v1", "Expand@v1", "Pulse@v1", "Reveal@v1", "Shimmer@v1" ], "count": 5 }, "rive": { "name": "Flux", "sigil": "\u25ce", "pixel": "Rive/canvas or CSS stand-in", "blurb": "Living continuous control \u2014 progress, loaders, bindable inputs", "order": 2, "detail": "State machines with numbers/bools/triggers. CSS stand-in until .riv drops; host contract unchanged.", "spell_ids": [ "Loader@v1" ], "count": 1 }, "aval": { "name": "Lumen", "sigil": "\u2726", "pixel": "WebCodecs \u2192 WebGL2", "blurb": "Filmed prestige \u2014 success pulses, micro-icon graphs", "order": 3, "detail": "Packed-alpha .avl units, seekless loops, graph routes. Highest fidelity ornamental emission.", "spell_ids": [ "Success@v1" ], "count": 1 }, "still": { "name": "Plate", "sigil": "\u25a3", "pixel": "img decode \u2192 composite", "blurb": "Research stills \u2014 taste plates, references, captions", "order": 4, "detail": "Single plate emission. Locked technique; gen only as filler inside the spell.", "spell_ids": [ "ResearchStill@v1" ], "count": 1 }, "procedural": { "name": "Mark", "sigil": "\u2316", "pixel": "CSS paint", "blurb": "Sigils, pins, marks \u2014 infinite variants from params", "order": 5, "detail": "No external media. Ornament only \u2014 never presence-truth.", "spell_ids": [ "Field@v1", "Glyph@v1", "Pin@v1", "Stamp@v1" ], "count": 4 }, "canvas": { "name": "Field", "sigil": "\u25c8", "pixel": "Canvas 2d procedural", "blurb": "Living fields \u2014 Shadertoy-class density without WebGL", "order": 6, "detail": "rAF canvas paint. Ornament only \u2014 never presence-truth.", "spell_ids": [], "count": 0 } }, "spells": [ { "id": "Crossfade@v1", "name": "Shared-axis crossfade", "school": "Chrome", "school_key": "css", "sigil": "\u25c7", "pixel_path": "CSS compositor", "blurb": "Crossfade between two labels on a shared axis \u2014 product navigation / state swap, not hero theater.", "detail": "Shared-axis pattern: opacity + slight y shift. Reduced-motion = hard cut.", "status": "ship", "holdout": "fixture", "rarity": "common", "cost": "trivial", "states": [ "a", "b", "fading" ], "triggers": [ "swap", "toA", "toB", "reset" ], "numbers": [], "bools": [], "events": [ "statechange", "swap", "settled" ], "mount": "mountCrossfade", "module": "./techniques/Crossfade@v1/crossfade.mjs", "cast": "cast Crossfade@v1", "incantations": [ "cast crossfade between views", "swap the labels", "shared axis fade" ], "stage_recipe": [ { "op": "setState", "args": [ "a" ] }, { "op": "fire", "args": [ "swap" ] } ], "params_ui": [ { "key": "labelA", "type": "string", "label": "Label A", "default": "Before" }, { "key": "labelB", "type": "string", "label": "Label B", "default": "After" } ], "pipeline": [ "mount Crossfade@v1", "runtime css", "CSS compositor", "pixels on glass" ], "proof": "Playwright: ms state b after swap", "notFor": [ "security-kyc" ], "path": "motion/techniques/Crossfade@v1", "digests": { "css": "72480571aa77ab29", "module": "8a201aed58a86f04" }, "mode": "A", "budgets": { "maxBytes": 3072, "notes": "swap \u2264280ms" }, "preview": { "still": "./techniques/Crossfade@v1/preview.svg", "kind": "sigil", "autoplay": true, "loop_ms": 2400, "pen": "https://wonder.lnk-us.com/motion/?cast=Crossfade@v1", "full": "https://wonder.lnk-us.com/motion/?cast=Crossfade@v1&view=full", "embed": "https://wonder.lnk-us.com/motion/?cast=Crossfade@v1&view=full&embed=1", "host_base": "./motion/techniques/Crossfade@v1" }, "learn": { "n": 3, "aligned": 3, "align_rate": 1.0, "mean_score": 1.0, "recent_mean": 1.0, "school": "Chrome", "probe_ok_rate": 1.0, "pixel_signal_rate": 1.0, "rank_score": 1.0 }, "rank_score": 1.0 }, { "id": "Loader@v1", "name": "Brand loader", "school": "Flux", "school_key": "rive", "sigil": "\u25ce", "pixel_path": "Rive/canvas or CSS stand-in", "blurb": "Loading / progress surface with Rive-shaped inputs (loading, progress). P0 ships CSS runtime; drop BrandLoader.riv later without changing host bind code.", "detail": "State machines with numbers/bools/triggers. CSS stand-in until .riv drops; host contract unchanged.", "status": "ship", "holdout": "fixture", "rarity": "common", "cost": "trivial", "states": [ "idle", "loading", "success", "error" ], "triggers": [ "complete", "fail", "reset" ], "numbers": [ "progress" ], "bools": [ "loading" ], "events": [ "statechange", "complete", "fail" ], "mount": "mountLoader", "module": "./techniques/Loader@v1/loader.mjs", "cast": "cast Loader@v1", "incantations": [ "cast loader", "show progress", "loading pulse" ], "stage_recipe": [ { "op": "setState", "args": [ "loading" ] }, { "op": "setBool", "args": [ "loading", true ] }, { "op": "setNumber", "args": [ "progress", 0.72 ] } ], "params_ui": [ { "key": "progress", "type": "number", "min": 0, "max": 1, "step": 0.01, "label": "Progress", "default": 0.5 } ], "pipeline": [ "host mounts loader.mjs", "optional .riv when hasRivFile", "conic-gradient or Rive canvas", "pixels on glass" ], "proof": null, "notFor": [ "security-kyc", "presence-truth" ], "path": "motion/techniques/Loader@v1", "digests": { "css": "be4b7c915c3a870d", "module": "2bf2aad74fefe86a" }, "mode": "A", "budgets": { "maxBytes": 8192, "notes": "CSS path ~2KB; riv target <40KB" }, "preview": { "still": "./techniques/Loader@v1/preview.svg", "kind": "sigil", "autoplay": true, "loop_ms": 2400, "pen": "https://wonder.lnk-us.com/motion/?cast=Loader@v1", "full": "https://wonder.lnk-us.com/motion/?cast=Loader@v1&view=full", "embed": "https://wonder.lnk-us.com/motion/?cast=Loader@v1&view=full&embed=1", "host_base": "./motion/techniques/Loader@v1" }, "learn": { "n": 2, "aligned": 2, "align_rate": 1.0, "mean_score": 1.0, "recent_mean": 1.0, "school": "Flux", "probe_ok_rate": 1.0, "pixel_signal_rate": 1.0, "rank_score": 1.0 }, "rank_score": 1.0 }, { "id": "Pin@v1", "name": "Map pin", "school": "Mark", "school_key": "procedural", "sigil": "\u2316", "pixel_path": "CSS paint", "blurb": "Procedural map pin emission \u2014 CSS only. Decorative; never presence-truth (Mode F).", "detail": "No external media. Ornament only \u2014 never presence-truth.", "status": "ship", "holdout": "fixture", "rarity": "common", "cost": "trivial", "states": [ "idle", "active", "alarm" ], "triggers": [ "activate", "idle", "alarm" ], "numbers": [], "bools": [ "active" ], "events": [ "statechange", "activate", "alarm" ], "mount": "mountPin", "module": "./techniques/Pin@v1/pin.mjs", "cast": "cast Pin@v1", "incantations": [ "cast pin", "mark the place", "map sigil" ], "stage_recipe": [ { "op": "fire", "args": [ "activate" ] } ], "params_ui": [ { "key": "label", "type": "string", "label": "Aria label", "default": "map pin" } ], "pipeline": [ "CSS pin geometry", "state classes idle/active/alarm", "pixels on glass (ornament only)" ], "proof": null, "notFor": [ "presence-truth", "security-as-ornament" ], "path": "motion/techniques/Pin@v1", "digests": { "css": "a0141467af9beee2", "module": "7e8eeb61c003c511" }, "mode": "A", "budgets": { "maxBytes": 2048 }, "preview": { "still": "./techniques/Pin@v1/preview.svg", "kind": "sigil", "autoplay": true, "loop_ms": 2400, "pen": "https://wonder.lnk-us.com/motion/?cast=Pin@v1", "full": "https://wonder.lnk-us.com/motion/?cast=Pin@v1&view=full", "embed": "https://wonder.lnk-us.com/motion/?cast=Pin@v1&view=full&embed=1", "host_base": "./motion/techniques/Pin@v1" }, "learn": { "n": 2, "aligned": 2, "align_rate": 1.0, "mean_score": 1.0, "recent_mean": 1.0, "school": "Mark", "probe_ok_rate": 1.0, "pixel_signal_rate": 1.0, "rank_score": 1.0 }, "rank_score": 1.0 }, { "id": "Pulse@v1", "name": "Soft attention pulse", "school": "Chrome", "school_key": "css", "sigil": "\u25c7", "pixel_path": "CSS compositor", "blurb": "Gentle focus ring pulse for product chrome \u2014 invites attention without alarm semantics. Never for KYC/deny.", "detail": "Product attention ornament. Reduced-motion collapses to static ring.", "status": "ship", "holdout": "fixture", "rarity": "common", "cost": "trivial", "states": [ "idle", "pulse", "hold" ], "triggers": [ "pulse", "hold", "idle", "reset" ], "numbers": [ "intensity" ], "bools": [ "active" ], "events": [ "statechange", "pulse", "hold" ], "mount": "mountPulse", "module": "./techniques/Pulse@v1/pulse.mjs", "cast": "cast Pulse@v1", "incantations": [ "cast pulse on the field", "attention pulse", "soft focus ring" ], "stage_recipe": [ { "op": "setState", "args": [ "idle" ] }, { "op": "fire", "args": [ "pulse" ] } ], "params_ui": [ { "key": "label", "type": "string", "label": "Label", "default": "focus" }, { "key": "intensity", "type": "number", "label": "Intensity 0\u20131", "default": 0.7 } ], "pipeline": [ "mount Pulse@v1", "runtime css", "CSS compositor", "pixels on glass" ], "proof": "Playwright: ms state pulse|hold", "notFor": [ "security-kyc", "alarms", "presence-truth" ], "path": "motion/techniques/Pulse@v1", "digests": { "css": "8aff787cffc45ba6", "module": "fdfd89ba6b806a18" }, "mode": "A", "budgets": { "maxBytes": 3072, "notes": "no continuous spin; pulse \u22641.2s" }, "preview": { "still": "./techniques/Pulse@v1/preview.svg", "kind": "sigil", "autoplay": true, "loop_ms": 2400, "pen": "https://wonder.lnk-us.com/motion/?cast=Pulse@v1", "full": "https://wonder.lnk-us.com/motion/?cast=Pulse@v1&view=full", "embed": "https://wonder.lnk-us.com/motion/?cast=Pulse@v1&view=full&embed=1", "host_base": "./motion/techniques/Pulse@v1" }, "learn": { "n": 4, "aligned": 4, "align_rate": 1.0, "mean_score": 1.0, "recent_mean": 1.0, "school": "Chrome", "probe_ok_rate": 1.0, "pixel_signal_rate": 1.0, "rank_score": 1.0 }, "rank_score": 1.0 }, { "id": "Stamp@v1", "name": "Status stamp", "school": "Mark", "school_key": "procedural", "sigil": "\u2316", "pixel_path": "CSS paint", "blurb": "Procedural status seal \u2014 time/word mark for emissions and ability ledgers. Ornament only; never presence-truth.", "detail": "Monochrome seal. Larger plate, dashed ring, SEAL mark on sealed. Learn-improved after inspect rank.", "status": "ship", "holdout": "fixture", "rarity": "common", "cost": "trivial", "states": [ "blank", "inked", "sealed" ], "triggers": [ "ink", "seal", "blank", "reset" ], "numbers": [], "bools": [ "sealed" ], "events": [ "statechange", "ink", "seal" ], "mount": "mountStamp", "module": "./techniques/Stamp@v1/stamp.mjs", "cast": "cast Stamp@v1", "incantations": [ "cast stamp sealed", "status stamp", "seal the emission" ], "stage_recipe": [ { "op": "fire", "args": [ "ink" ] }, { "op": "fire", "args": [ "seal" ] } ], "params_ui": [ { "key": "word", "type": "string", "label": "Stamp word", "default": "WONDER" }, { "key": "meta", "type": "string", "label": "Meta line", "default": "" } ], "pipeline": [ "mount Stamp@v1", "runtime procedural css", "CSS paint", "pixels on glass" ], "proof": "Playwright: ms state sealed; high-contrast sealed glass", "notFor": [ "presence-truth", "security-kyc" ], "path": "motion/techniques/Stamp@v1", "digests": { "css": "921e7f2ed34b856d", "module": "5f31be1a3a81b0fe" }, "mode": "A", "budgets": { "maxBytes": 2560 }, "preview": { "still": "./techniques/Stamp@v1/preview.svg", "kind": "sigil", "autoplay": true, "loop_ms": 2400, "pen": "https://wonder.lnk-us.com/motion/?cast=Stamp@v1", "full": "https://wonder.lnk-us.com/motion/?cast=Stamp@v1&view=full", "embed": "https://wonder.lnk-us.com/motion/?cast=Stamp@v1&view=full&embed=1", "host_base": "./motion/techniques/Stamp@v1" }, "learn": { "n": 3, "aligned": 3, "align_rate": 1.0, "mean_score": 1.0, "recent_mean": 1.0, "school": "Mark", "probe_ok_rate": 1.0, "pixel_signal_rate": 1.0, "rank_score": 1.0 }, "rank_score": 1.0 }, { "id": "Expand@v1", "name": "Expand panel", "school": "Chrome", "school_key": "css", "sigil": "\u25c7", "pixel_path": "CSS compositor", "blurb": "Product expand/collapse using 0fr\u21921fr grid + product.decisive tokens. Truth UI \u2014 not ornament.", "detail": "Layout \u2192 paint \u2192 composite. Zero-asset beauty for truth UI. Springs and grid expansion live here.", "status": "ship", "holdout": "fixture", "rarity": "common", "cost": "trivial", "states": [ "collapsed", "expanded" ], "triggers": [ "toggle" ], "numbers": [], "bools": [ "open" ], "events": [ "expanded", "collapsed", "statechange" ], "mount": "mountExpand", "module": "./techniques/Expand@v1/expand.mjs", "cast": "cast Expand@v1", "incantations": [ "cast expand", "open the panel", "reveal details" ], "stage_recipe": [ { "op": "setState", "args": [ "collapsed" ] }, { "op": "fire", "args": [ "toggle" ] } ], "params_ui": [], "pipeline": [ "host mounts expand.mjs", "CSS grid 0fr\u21921fr transition", "compositor paints expansion", "pixels on glass" ], "proof": null, "notFor": [ "security-kyc-as-decoration" ], "path": "motion/techniques/Expand@v1", "digests": { "css": "8d5e6f554b3b4d1b", "module": "6d85b51b2cfb9651", "hostSnippet": "21a2cf9f98d67d05" }, "mode": "A", "budgets": { "maxBytes": 4096, "notes": "meso expand \u2264320ms wall; reduced-motion instant" }, "preview": { "still": "./techniques/Expand@v1/preview.svg", "kind": "sigil", "autoplay": true, "loop_ms": 2400, "pen": "https://wonder.lnk-us.com/motion/?cast=Expand@v1", "full": "https://wonder.lnk-us.com/motion/?cast=Expand@v1&view=full", "embed": "https://wonder.lnk-us.com/motion/?cast=Expand@v1&view=full&embed=1", "host_base": "./motion/techniques/Expand@v1" }, "learn": { "n": 3, "aligned": 3, "align_rate": 1.0, "mean_score": 0.917, "recent_mean": 0.917, "school": "Chrome", "probe_ok_rate": 0.667, "pixel_signal_rate": 0.667, "rank_score": 0.908 }, "rank_score": 0.908 }, { "id": "Shimmer@v1", "name": "Skeleton shimmer", "school": "Chrome", "school_key": "css", "sigil": "\u25c7", "pixel_path": "CSS compositor", "blurb": "Loading chrome skeleton shimmer \u2014 structure-first placeholder, not progress truth. Distinct from Loader number path.", "detail": "Monochrome bars with gradient sweep. Reduced-motion freezes mid-tone bars.", "status": "ship", "holdout": "fixture", "rarity": "common", "cost": "trivial", "states": [ "idle", "shimmer", "ready" ], "triggers": [ "start", "ready", "idle", "reset" ], "numbers": [ "lines" ], "bools": [ "active" ], "events": [ "statechange", "start", "ready" ], "mount": "mountShimmer", "module": "./techniques/Shimmer@v1/shimmer.mjs", "cast": "cast Shimmer@v1", "incantations": [ "cast shimmer skeleton", "skeleton load", "placeholder shimmer" ], "stage_recipe": [ { "op": "setState", "args": [ "idle" ] }, { "op": "fire", "args": [ "start" ] } ], "params_ui": [ { "key": "lines", "type": "number", "label": "Skeleton lines", "default": 4 } ], "pipeline": [ "mount Shimmer@v1", "runtime css", "CSS compositor", "pixels on glass" ], "proof": "Playwright: ms state shimmer|ready", "notFor": [ "security-kyc", "progress-truth" ], "path": "motion/techniques/Shimmer@v1", "digests": { "css": "3edb09bbbfec3e56", "module": "6aa0fcb510fbbf20" }, "mode": "A", "budgets": { "maxBytes": 2560 }, "preview": { "still": "./techniques/Shimmer@v1/preview.svg", "kind": "sigil", "autoplay": true, "loop_ms": 2400, "pen": "https://wonder.lnk-us.com/motion/?cast=Shimmer@v1", "full": "https://wonder.lnk-us.com/motion/?cast=Shimmer@v1&view=full", "embed": "https://wonder.lnk-us.com/motion/?cast=Shimmer@v1&view=full&embed=1", "host_base": "./motion/techniques/Shimmer@v1" }, "learn": { "n": 3, "aligned": 3, "align_rate": 1.0, "mean_score": 0.86, "recent_mean": 0.86, "school": "Chrome", "probe_ok_rate": 0.333, "pixel_signal_rate": 1.0, "rank_score": 0.835 }, "rank_score": 0.835 }, { "id": "Reveal@v1", "name": "Line reveal", "school": "Chrome", "school_key": "css", "sigil": "\u25c7", "pixel_path": "CSS compositor", "blurb": "Staggered line reveal \u2014 beauty of arrival. Text/chrome fades in by line; product.interactive timing.", "detail": "Layout \u2192 paint \u2192 composite. Zero-asset beauty for truth UI. Springs and grid expansion live here.", "status": "ship", "holdout": "fixture", "rarity": "common", "cost": "trivial", "states": [ "hidden", "revealing", "shown" ], "triggers": [ "reveal", "hide", "reset" ], "numbers": [ "progress" ], "bools": [], "events": [ "statechange", "reveal", "shown" ], "mount": "mountReveal", "module": "./techniques/Reveal@v1/reveal.mjs", "cast": "cast Reveal@v1", "incantations": [ "cast reveal for the brief", "reveal the lines", "show the words" ], "stage_recipe": [ { "op": "setState", "args": [ "hidden" ] }, { "op": "fire", "args": [ "reveal" ] } ], "params_ui": [ { "key": "lines", "type": "string", "label": "Lines ( | separated)", "default": "Wonder compiles ideas|into display emissions|beauty as pixels" } ], "pipeline": [ "mount Reveal@v1", "runtime css", "CSS compositor", "pixels on glass" ], "proof": null, "notFor": [ "security-kyc" ], "path": "motion/techniques/Reveal@v1", "digests": { "css": "716f3cf0460d1656", "module": "27848da603dda22f" }, "mode": "A", "budgets": { "maxBytes": 4096, "notes": "stagger wall \u2264320ms for 3 lines" }, "preview": { "still": "./techniques/Reveal@v1/preview.svg", "kind": "sigil", "autoplay": true, "loop_ms": 2400, "pen": "https://wonder.lnk-us.com/motion/?cast=Reveal@v1", "full": "https://wonder.lnk-us.com/motion/?cast=Reveal@v1&view=full", "embed": "https://wonder.lnk-us.com/motion/?cast=Reveal@v1&view=full&embed=1", "host_base": "./motion/techniques/Reveal@v1" }, "learn": { "n": 66, "aligned": 66, "align_rate": 1.0, "mean_score": 0.783, "recent_mean": 0.767, "school": "Chrome", "probe_ok_rate": 0.045, "pixel_signal_rate": 0.03, "rank_score": 0.753 }, "rank_score": 0.753 }, { "id": "Glyph@v1", "name": "Sigil glyph", "school": "Mark", "school_key": "procedural", "sigil": "\u2316", "pixel_path": "CSS paint", "blurb": "Procedural monogram sigil \u2014 beauty mark from seed text. CSS paint emission; infinite variants from idea string.", "detail": "No external media. Ornament only \u2014 never presence-truth.", "status": "ship", "holdout": "fixture", "rarity": "common", "cost": "trivial", "states": [ "idle", "lit", "burn" ], "triggers": [ "ignite", "idle", "burn" ], "numbers": [], "bools": [ "lit" ], "events": [ "statechange", "ignite", "burn" ], "mount": "mountGlyph", "module": "./techniques/Glyph@v1/glyph.mjs", "cast": "cast Glyph@v1", "incantations": [ "cast glyph for LNK", "sigil of wonder", "monogram mark" ], "stage_recipe": [ { "op": "setState", "args": [ "idle" ] }, { "op": "fire", "args": [ "ignite" ] } ], "params_ui": [ { "key": "seed", "type": "string", "label": "Seed / monogram", "default": "W" } ], "pipeline": [ "mount Glyph@v1", "runtime procedural", "CSS paint", "pixels on glass" ], "proof": null, "notFor": [ "presence-truth", "security-kyc" ], "path": "motion/techniques/Glyph@v1", "digests": { "css": "d121d13e6daaf653", "module": "73eb1e42533d5fd9" }, "mode": "A", "budgets": { "maxBytes": 3072 }, "preview": { "still": "./techniques/Glyph@v1/preview.svg", "kind": "sigil", "autoplay": true, "loop_ms": 2400, "pen": "https://wonder.lnk-us.com/motion/?cast=Glyph@v1", "full": "https://wonder.lnk-us.com/motion/?cast=Glyph@v1&view=full", "embed": "https://wonder.lnk-us.com/motion/?cast=Glyph@v1&view=full&embed=1", "host_base": "./motion/techniques/Glyph@v1" }, "learn": { "n": 36, "aligned": 36, "align_rate": 1.0, "mean_score": 0.768, "recent_mean": 0.75, "school": "Mark", "probe_ok_rate": 0.083, "pixel_signal_rate": 0.083, "rank_score": 0.746 }, "rank_score": 0.746 }, { "id": "ResearchStill@v1", "name": "Research still", "school": "Plate", "school_key": "still", "sigil": "\u25a3", "pixel_path": "img decode \u2192 composite", "blurb": "Single research plate emission \u2014 img decode \u2192 CSS composite. Caption from idea. Optional src plate; else procedural plate.png.", "detail": "Single plate emission. Locked technique; gen only as filler inside the spell.", "status": "ship", "holdout": "fixture", "rarity": "common", "cost": "trivial", "states": [ "idle", "focus" ], "triggers": [ "focus", "blur" ], "numbers": [], "bools": [ "focus" ], "events": [ "statechange", "focus", "blur" ], "mount": "mountResearchStill", "module": "./techniques/ResearchStill@v1/still.mjs", "cast": "cast ResearchStill@v1", "incantations": [ "cast still", "show the plate", "research look" ], "stage_recipe": [ { "op": "fire", "args": [ "focus" ] } ], "params_ui": [ { "key": "caption", "type": "string", "label": "Caption", "default": "research still" }, { "key": "src", "type": "string", "label": "Plate image URL", "default": "" } ], "pipeline": [ "plate.png or src URL", "img decode", "CSS frame composite", "pixels on glass" ], "proof": null, "notFor": [ "security-kyc", "presence-truth" ], "path": "motion/techniques/ResearchStill@v1", "digests": { "css": "b5a3b3a681bcca10", "module": "e4445c1c29ed2ef1", "plate": "f132eb27f8a8c6d6", "plate.png": "f132eb27f8a8c6d6", "preview.png": "f132eb27f8a8c6d6" }, "mode": "C", "budgets": { "maxBytes": 400000, "notes": "one plate; no video gen in technique" }, "preview": { "still": "./techniques/ResearchStill@v1/preview.png", "kind": "capture", "autoplay": true, "loop_ms": 2400, "pen": "https://wonder.lnk-us.com/motion/?cast=ResearchStill@v1", "full": "https://wonder.lnk-us.com/motion/?cast=ResearchStill@v1&view=full", "embed": "https://wonder.lnk-us.com/motion/?cast=ResearchStill@v1&view=full&embed=1", "host_base": "./motion/techniques/ResearchStill@v1" }, "learn": { "n": 595, "aligned": 595, "align_rate": 1.0, "mean_score": 0.751, "recent_mean": 0.75, "school": "Plate", "probe_ok_rate": 0.003, "pixel_signal_rate": 0.003, "rank_score": 0.726 }, "rank_score": 0.726 }, { "id": "Success@v1", "name": "Prestige success pulse", "school": "Lumen", "school_key": "aval", "sigil": "\u2726", "pixel_path": "WebCodecs \u2192 WebGL2", "blurb": "Prestige success pulse. Compiled success.avl with packed-alpha (hard-edge plates, CRF12). Browser Aval player when packages resolve; CSS fallback otherwise.", "detail": "Packed-alpha .avl units, seekless loops, graph routes. Highest fidelity ornamental emission.", "status": "ship", "holdout": "fixture", "rarity": "uncommon", "cost": "low", "states": [ "idle", "success" ], "triggers": [ "celebrate", "reset" ], "numbers": [], "bools": [], "events": [ "statechange", "success" ], "mount": "mountSuccess", "module": "./techniques/Success@v1/success.mjs", "cast": "cast Success@v1", "incantations": [ "cast success", "celebrate", "prestige settle" ], "stage_recipe": [ { "op": "fire", "args": [ "celebrate" ] } ], "params_ui": [], "pipeline": [ "success.avl packed-alpha units", "WebCodecs decode in worker", "WebGL2 composite alpha panes", "pixels on glass" ], "proof": "Playwright: aval-player stateNames idle/success", "notFor": [ "security-kyc", "alarms", "presence-truth" ], "path": "motion/techniques/Success@v1", "digests": { "css": "0e4b4b9a8f18d2ac", "module": "48957733f9bb4b7f", "fallback": "5bd44af807e0ed2e", "avl": "2859367fd93f8551", "project": "57ec9ba06e015993", "avlPacked": "2859367fd93f8551", "success.avl": "2859367fd93f8551", "preview.png": "5bd44af807e0ed2e" }, "mode": "C", "budgets": { "maxBytes": 200000, "notes": "CSS path tiny; .avl after compile target <100KB for 128\u00b2" }, "preview": { "still": "./techniques/Success@v1/preview.png", "kind": "capture", "autoplay": true, "loop_ms": 2400, "pen": "https://wonder.lnk-us.com/motion/?cast=Success@v1", "full": "https://wonder.lnk-us.com/motion/?cast=Success@v1&view=full", "embed": "https://wonder.lnk-us.com/motion/?cast=Success@v1&view=full&embed=1", "host_base": "./motion/techniques/Success@v1" }, "learn": { "n": 126, "aligned": 126, "align_rate": 1.0, "mean_score": 0.701, "recent_mean": 0.7, "school": "Lumen", "probe_ok_rate": 0.063, "pixel_signal_rate": 0.024, "rank_score": 0.697 }, "rank_score": 0.697 }, { "id": "Field@v1", "name": "Living light field", "school": "Mark", "school_key": "procedural", "sigil": "\u25c8", "pixel_path": "Canvas 2d procedural", "blurb": "Canvas procedural field \u2014 Shadertoy-class visual density without WebGL. Soft monochrome aurora for greenhouse glass. Ornament only.", "detail": "Shadertoy grammar (fullscreen visual, params side) as product ornament. Reduced-motion freezes to still plate.", "status": "ship", "holdout": "fixture", "rarity": "uncommon", "cost": "low", "states": [ "idle", "flow", "surge", "still" ], "triggers": [ "flow", "surge", "still", "idle", "reset" ], "numbers": [ "energy", "speed" ], "bools": [ "active" ], "events": [ "statechange", "flow", "surge" ], "mount": "mountField", "module": "./techniques/Field@v1/field.mjs", "cast": "cast Field@v1", "incantations": [ "cast field", "light field", "aurora on glass" ], "stage_recipe": [ { "op": "setState", "args": [ "idle" ] }, { "op": "fire", "args": [ "flow" ] } ], "params_ui": [ { "key": "energy", "type": "number", "label": "Energy 0\u20131", "default": 0.65, "min": 0, "max": 1, "step": 0.05 }, { "key": "speed", "type": "number", "label": "Speed 0\u20131", "default": 0.45, "min": 0, "max": 1, "step": 0.05 }, { "key": "seed", "type": "string", "label": "Seed", "default": "wonder" } ], "pipeline": [ "mount Field@v1", "runtime canvas2d", "procedural field paint", "pixels on glass" ], "proof": "canvas present; ms-state flow|surge|still", "notFor": [ "security-kyc", "alarms", "presence-truth" ], "path": "motion/techniques/Field@v1", "digests": { "module": "bd38157178f10b09", "css": "9f82befd702054bf" }, "mode": "A", "budgets": { "maxBytes": 12000, "notes": "rAF cancelled on dispose; no WebGL required" }, "preview": { "still": "./techniques/Field@v1/preview.svg", "kind": "sigil", "autoplay": true, "loop_ms": 2400, "pen": "https://wonder.lnk-us.com/motion/?cast=Field@v1", "full": "https://wonder.lnk-us.com/motion/?cast=Field@v1&view=full", "embed": "https://wonder.lnk-us.com/motion/?cast=Field@v1&view=full&embed=1", "host_base": "./motion/techniques/Field@v1" } } ], "by_school": { "css": [ "Crossfade@v1", "Expand@v1", "Pulse@v1", "Reveal@v1", "Shimmer@v1" ], "procedural": [ "Field@v1", "Glyph@v1", "Pin@v1", "Stamp@v1" ], "rive": [ "Loader@v1" ], "still": [ "ResearchStill@v1" ], "aval": [ "Success@v1" ] }, "aliases": { "expand": "Expand@v1", "panel": "Expand@v1", "loader": "Loader@v1", "progress": "Loader@v1", "success": "Success@v1", "celebrate": "Success@v1", "prestige": "Success@v1", "still": "ResearchStill@v1", "plate": "ResearchStill@v1", "photo": "ResearchStill@v1", "pin": "Pin@v1", "marker": "Pin@v1", "map": "Pin@v1", "glyph": "Glyph@v1", "sigil": "Glyph@v1", "monogram": "Glyph@v1", "reveal": "Reveal@v1", "lines": "Reveal@v1", "words": "Reveal@v1", "pulse": "Pulse@v1", "attention": "Pulse@v1", "focus": "Pulse@v1", "crossfade": "Crossfade@v1", "swap": "Crossfade@v1", "fade": "Crossfade@v1", "stamp": "Stamp@v1", "seal": "Stamp@v1", "shimmer": "Shimmer@v1", "skeleton": "Shimmer@v1", "placeholder": "Shimmer@v1", "field": "Field@v1", "aurora": "Field@v1", "lightfield": "Field@v1", "shader": "Field@v1" }, "recent_casts": [ { "ts": "2026-07-17T17:01:41Z", "kind": "cast", "techniqueId": "ResearchStill@v1", "idea": "inspo \u00b7 Newsletter Issue No 01", "pixel_path": "img decode \u2192 CSS composite (research plate)" }, { "ts": "2026-07-17T17:01:41Z", "kind": "cast", "techniqueId": "ResearchStill@v1", "idea": "inspo \u00b7 Aave Cards", "pixel_path": "img decode \u2192 CSS composite (research plate)" }, { "ts": "2026-07-17T16:31:55Z", "kind": "cycle", "techniqueId": "Success@v1", "idea": "prestige success pulse for spotlight @Erik Marinovich", "pixel_path": "WebCodecs \u2192 WebGL2 packed-alpha emission" }, { "ts": "2026-07-17T16:31:52Z", "kind": "cast", "techniqueId": "ResearchStill@v1", "idea": "inspo \u00b7 Save.design | Organize your design inspiration", "pixel_path": "img decode \u2192 CSS composite (research plate)" }, { "ts": "2026-07-17T16:31:52Z", "kind": "cast", "techniqueId": "ResearchStill@v1", "idea": "inspo \u00b7 Race Condition", "pixel_path": "img decode \u2192 CSS composite (research plate)" }, { "ts": "2026-07-17T16:31:52Z", "kind": "cast", "techniqueId": "ResearchStill@v1", "idea": "inspo \u00b7 RISK", "pixel_path": "img decode \u2192 CSS composite (research plate)" }, { "ts": "2026-07-17T16:31:51Z", "kind": "cast", "techniqueId": "ResearchStill@v1", "idea": "inspo \u00b7 Patch Ai", "pixel_path": "img decode \u2192 CSS composite (research plate)" }, { "ts": "2026-07-17T16:31:51Z", "kind": "cast", "techniqueId": "ResearchStill@v1", "idea": "inspo \u00b7 PP Neue Montreal", "pixel_path": "img decode \u2192 CSS composite (research plate)" }, { "ts": "2026-07-17T16:31:50Z", "kind": "cast", "techniqueId": "ResearchStill@v1", "idea": "inspo \u00b7 OSI 90th Anniversary", "pixel_path": "img decode \u2192 CSS composite (research plate)" }, { "ts": "2026-07-17T16:31:50Z", "kind": "cast", "techniqueId": "ResearchStill@v1", "idea": "inspo \u00b7 Hiroto Sato", "pixel_path": "img decode \u2192 CSS composite (research plate)" }, { "ts": "2026-07-17T16:31:49Z", "kind": "cast", "techniqueId": "ResearchStill@v1", "idea": "inspo \u00b7 1820 Productions", "pixel_path": "img decode \u2192 CSS composite (research plate)" }, { "ts": "2026-07-17T16:31:49Z", "kind": "cast", "techniqueId": "ResearchStill@v1", "idea": "inspo \u00b7 108\u2122", "pixel_path": "img decode \u2192 CSS composite (research plate)" }, { "ts": "2026-07-17T16:31:48Z", "kind": "cast", "techniqueId": "ResearchStill@v1", "idea": "inspo \u00b7 Underscores Poster Series", "pixel_path": "img decode \u2192 CSS composite (research plate)" }, { "ts": "2026-07-17T16:31:48Z", "kind": "cast", "techniqueId": "ResearchStill@v1", "idea": "inspo \u00b7 Survive Particle Animation", "pixel_path": "img decode \u2192 CSS composite (research plate)" }, { "ts": "2026-07-17T16:31:47Z", "kind": "cast", "techniqueId": "ResearchStill@v1", "idea": "inspo \u00b7 Savee Weekly Editorial Showcase", "pixel_path": "img decode \u2192 CSS composite (research plate)" }, { "ts": "2026-07-17T16:01:29Z", "kind": "cycle", "techniqueId": "Success@v1", "idea": "prestige success pulse for spotlight @Erik Marinovich", "pixel_path": "WebCodecs \u2192 WebGL2 packed-alpha emission" }, { "ts": "2026-07-17T16:01:27Z", "kind": "cast", "techniqueId": "ResearchStill@v1", "idea": "inspo \u00b7 Nominal", "pixel_path": "img decode \u2192 CSS composite (research plate)" }, { "ts": "2026-07-17T16:01:27Z", "kind": "cast", "techniqueId": "ResearchStill@v1", "idea": "inspo \u00b7 Mobbin \u2014 UI & UX design inspiration for mobile & web apps", "pixel_path": "img decode \u2192 CSS composite (research plate)" }, { "ts": "2026-07-17T16:01:26Z", "kind": "cast", "techniqueId": "ResearchStill@v1", "idea": "inspo \u00b7 Meinhard Taxer", "pixel_path": "img decode \u2192 CSS composite (research plate)" }, { "ts": "2026-07-17T16:01:26Z", "kind": "cast", "techniqueId": "ResearchStill@v1", "idea": "inspo \u00b7 MIU MIU A House that we shaped", "pixel_path": "img decode \u2192 CSS composite (research plate)" }, { "ts": "2026-07-17T16:01:26Z", "kind": "cast", "techniqueId": "ResearchStill@v1", "idea": "inspo \u00b7 Ian Coad DP", "pixel_path": "img decode \u2192 CSS composite (research plate)" }, { "ts": "2026-07-17T16:01:25Z", "kind": "cast", "techniqueId": "ResearchStill@v1", "idea": "inspo \u00b7 Playful Delete Interaction", "pixel_path": "img decode \u2192 CSS composite (research plate)" }, { "ts": "2026-07-17T16:01:25Z", "kind": "cast", "techniqueId": "ResearchStill@v1", "idea": "inspo \u00b7 Particle Face Illustration", "pixel_path": "img decode \u2192 CSS composite (research plate)" }, { "ts": "2026-07-17T16:01:24Z", "kind": "cast", "techniqueId": "ResearchStill@v1", "idea": "inspo \u00b7 Oslo 1980 Stamp", "pixel_path": "img decode \u2192 CSS composite (research plate)" } ], "learn": { "spells": { "Success@v1": { "n": 126, "aligned": 126, "align_rate": 1.0, "mean_score": 0.701, "recent_mean": 0.7, "school": "Lumen", "probe_ok_rate": 0.063, "pixel_signal_rate": 0.024, "rank_score": 0.697 }, "Reveal@v1": { "n": 66, "aligned": 66, "align_rate": 1.0, "mean_score": 0.783, "recent_mean": 0.767, "school": "Chrome", "probe_ok_rate": 0.045, "pixel_signal_rate": 0.03, "rank_score": 0.753 }, "Glyph@v1": { "n": 36, "aligned": 36, "align_rate": 1.0, "mean_score": 0.768, "recent_mean": 0.75, "school": "Mark", "probe_ok_rate": 0.083, "pixel_signal_rate": 0.083, "rank_score": 0.746 }, "Expand@v1": { "n": 3, "aligned": 3, "align_rate": 1.0, "mean_score": 0.917, "recent_mean": 0.917, "school": "Chrome", "probe_ok_rate": 0.667, "pixel_signal_rate": 0.667, "rank_score": 0.908 }, "Loader@v1": { "n": 2, "aligned": 2, "align_rate": 1.0, "mean_score": 1.0, "recent_mean": 1.0, "school": "Flux", "probe_ok_rate": 1.0, "pixel_signal_rate": 1.0, "rank_score": 1.0 }, "Pin@v1": { "n": 2, "aligned": 2, "align_rate": 1.0, "mean_score": 1.0, "recent_mean": 1.0, "school": "Mark", "probe_ok_rate": 1.0, "pixel_signal_rate": 1.0, "rank_score": 1.0 }, "ResearchStill@v1": { "n": 595, "aligned": 595, "align_rate": 1.0, "mean_score": 0.751, "recent_mean": 0.75, "school": "Plate", "probe_ok_rate": 0.003, "pixel_signal_rate": 0.003, "rank_score": 0.726 }, "Crossfade@v1": { "n": 3, "aligned": 3, "align_rate": 1.0, "mean_score": 1.0, "recent_mean": 1.0, "school": "Chrome", "probe_ok_rate": 1.0, "pixel_signal_rate": 1.0, "rank_score": 1.0 }, "Pulse@v1": { "n": 4, "aligned": 4, "align_rate": 1.0, "mean_score": 1.0, "recent_mean": 1.0, "school": "Chrome", "probe_ok_rate": 1.0, "pixel_signal_rate": 1.0, "rank_score": 1.0 }, "Shimmer@v1": { "n": 3, "aligned": 3, "align_rate": 1.0, "mean_score": 0.86, "recent_mean": 0.86, "school": "Chrome", "probe_ok_rate": 0.333, "pixel_signal_rate": 1.0, "rank_score": 0.835 }, "Stamp@v1": { "n": 3, "aligned": 3, "align_rate": 1.0, "mean_score": 1.0, "recent_mean": 1.0, "school": "Mark", "probe_ok_rate": 1.0, "pixel_signal_rate": 1.0, "rank_score": 1.0 } }, "ranked": [ { "techniqueId": "Pulse@v1", "n": 4, "aligned": 4, "align_rate": 1.0, "mean_score": 1.0, "recent_mean": 1.0, "school": "Chrome", "probe_ok_rate": 1.0, "pixel_signal_rate": 1.0, "rank_score": 1.0 }, { "techniqueId": "Crossfade@v1", "n": 3, "aligned": 3, "align_rate": 1.0, "mean_score": 1.0, "recent_mean": 1.0, "school": "Chrome", "probe_ok_rate": 1.0, "pixel_signal_rate": 1.0, "rank_score": 1.0 }, { "techniqueId": "Stamp@v1", "n": 3, "aligned": 3, "align_rate": 1.0, "mean_score": 1.0, "recent_mean": 1.0, "school": "Mark", "probe_ok_rate": 1.0, "pixel_signal_rate": 1.0, "rank_score": 1.0 }, { "techniqueId": "Loader@v1", "n": 2, "aligned": 2, "align_rate": 1.0, "mean_score": 1.0, "recent_mean": 1.0, "school": "Flux", "probe_ok_rate": 1.0, "pixel_signal_rate": 1.0, "rank_score": 1.0 }, { "techniqueId": "Pin@v1", "n": 2, "aligned": 2, "align_rate": 1.0, "mean_score": 1.0, "recent_mean": 1.0, "school": "Mark", "probe_ok_rate": 1.0, "pixel_signal_rate": 1.0, "rank_score": 1.0 }, { "techniqueId": "Expand@v1", "n": 3, "aligned": 3, "align_rate": 1.0, "mean_score": 0.917, "recent_mean": 0.917, "school": "Chrome", "probe_ok_rate": 0.667, "pixel_signal_rate": 0.667, "rank_score": 0.908 }, { "techniqueId": "Shimmer@v1", "n": 3, "aligned": 3, "align_rate": 1.0, "mean_score": 0.86, "recent_mean": 0.86, "school": "Chrome", "probe_ok_rate": 0.333, "pixel_signal_rate": 1.0, "rank_score": 0.835 }, { "techniqueId": "Reveal@v1", "n": 66, "aligned": 66, "align_rate": 1.0, "mean_score": 0.783, "recent_mean": 0.767, "school": "Chrome", "probe_ok_rate": 0.045, "pixel_signal_rate": 0.03, "rank_score": 0.753 }, { "techniqueId": "Glyph@v1", "n": 36, "aligned": 36, "align_rate": 1.0, "mean_score": 0.768, "recent_mean": 0.75, "school": "Mark", "probe_ok_rate": 0.083, "pixel_signal_rate": 0.083, "rank_score": 0.746 }, { "techniqueId": "ResearchStill@v1", "n": 595, "aligned": 595, "align_rate": 1.0, "mean_score": 0.751, "recent_mean": 0.75, "school": "Plate", "probe_ok_rate": 0.003, "pixel_signal_rate": 0.003, "rank_score": 0.726 }, { "techniqueId": "Success@v1", "n": 126, "aligned": 126, "align_rate": 1.0, "mean_score": 0.701, "recent_mean": 0.7, "school": "Lumen", "probe_ok_rate": 0.063, "pixel_signal_rate": 0.024, "rank_score": 0.697 } ], "promote": [ { "techniqueId": "Pulse@v1", "n": 4, "aligned": 4, "align_rate": 1.0, "mean_score": 1.0, "recent_mean": 1.0, "school": "Chrome", "probe_ok_rate": 1.0, "pixel_signal_rate": 1.0, "rank_score": 1.0 }, { "techniqueId": "Crossfade@v1", "n": 3, "aligned": 3, "align_rate": 1.0, "mean_score": 1.0, "recent_mean": 1.0, "school": "Chrome", "probe_ok_rate": 1.0, "pixel_signal_rate": 1.0, "rank_score": 1.0 }, { "techniqueId": "Stamp@v1", "n": 3, "aligned": 3, "align_rate": 1.0, "mean_score": 1.0, "recent_mean": 1.0, "school": "Mark", "probe_ok_rate": 1.0, "pixel_signal_rate": 1.0, "rank_score": 1.0 }, { "techniqueId": "Loader@v1", "n": 2, "aligned": 2, "align_rate": 1.0, "mean_score": 1.0, "recent_mean": 1.0, "school": "Flux", "probe_ok_rate": 1.0, "pixel_signal_rate": 1.0, "rank_score": 1.0 }, { "techniqueId": "Pin@v1", "n": 2, "aligned": 2, "align_rate": 1.0, "mean_score": 1.0, "recent_mean": 1.0, "school": "Mark", "probe_ok_rate": 1.0, "pixel_signal_rate": 1.0, "rank_score": 1.0 } ], "inspect": [ { "techniqueId": "Shimmer@v1", "n": 3, "aligned": 3, "align_rate": 1.0, "mean_score": 0.86, "recent_mean": 0.86, "school": "Chrome", "probe_ok_rate": 0.333, "pixel_signal_rate": 1.0, "rank_score": 0.835 }, { "techniqueId": "Reveal@v1", "n": 66, "aligned": 66, "align_rate": 1.0, "mean_score": 0.783, "recent_mean": 0.767, "school": "Chrome", "probe_ok_rate": 0.045, "pixel_signal_rate": 0.03, "rank_score": 0.753 }, { "techniqueId": "Glyph@v1", "n": 36, "aligned": 36, "align_rate": 1.0, "mean_score": 0.768, "recent_mean": 0.75, "school": "Mark", "probe_ok_rate": 0.083, "pixel_signal_rate": 0.083, "rank_score": 0.746 }, { "techniqueId": "ResearchStill@v1", "n": 595, "aligned": 595, "align_rate": 1.0, "mean_score": 0.751, "recent_mean": 0.75, "school": "Plate", "probe_ok_rate": 0.003, "pixel_signal_rate": 0.003, "rank_score": 0.726 }, { "techniqueId": "Success@v1", "n": 126, "aligned": 126, "align_rate": 1.0, "mean_score": 0.701, "recent_mean": 0.7, "school": "Lumen", "probe_ok_rate": 0.063, "pixel_signal_rate": 0.024, "rank_score": 0.697 } ] }, "counts": { "spells": 12, "schools": 5, "live": 12, "casts_shown": 24, "observed": 11, "with_preview_still": 12 }, "invoke": { "cli_list": "python3 scripts/wonder_spellbook.py list", "cli_cast": "python3 scripts/wonder_spellbook.py cast --idea \"\u2026\"", "cli_build": "python3 scripts/wonder_spellbook.py build", "cli_inspect": "python3 scripts/wonder_spellbook.py inspect ", "cli_probe": "python3 scripts/wonder_observe.py probe ", "cli_fleet": "python3 scripts/wonder_observe.py probe-all", "cli_preview": "python3 scripts/wonder_preview.py all", "cli_scout": "python3 scripts/wonder_craft_scout.py list", "thread": "spellbook \u00b7 cast success \u00b7 probe success \u00b7 learn \u00b7 gallery", "keyboard": "1\u20139 cast by arsenal order in gallery (learn-ranked)", "modes": "wall \u00b7 pen (?cast=) \u00b7 full (&view=full) \u00b7 embed (&embed=1)" }, "doctrine": [ "display/SPELLBOOK.md", "display/DOCTRINE.md", "display/CYBERNETICS.md", "display/VISUAL_SURFACE.md" ] }