{ "schemaVersion": "form-graph.public/1", "name": "FORM//GRAPH", "brand": "/init", "canonical": "https://metanomicon.org/init/form", "description": "A visual systems atlas from /init. Explore procedural geometry, shaders, motion and build recipes, with sources and synthesis clearly separated.", "provenance": { "sources": "Grounded source summaries; signal and translation fields are editorial interpretation.", "recipes": "Original FORM//GRAPH synthesis. Proposed implementation steps and budgets are not verified performance results.", "related": "Editorial associations by category and shared tools, not evidential support.", "privacy": "Only public source metadata is included. Private library identifiers and personal records are withheld." }, "counts": { "sources": 33, "recipes": 10 }, "sources": [ { "title": "Visual AI is shifting from pixels to code", "author": "QuiverAI", "category": "systems", "stacks": [ "Blender", "SVG", "Lottie", "USD" ], "summary": "Argues that useful visual AI should generate editable symbolic artifacts—HTML, SVG, Lottie, Blender scripts or USD scenes—then let a renderer produce pixels.", "signal": "The source of truth is geometry, layers, components, timing curves and scene structure, not a flattened render.", "translation": "Make SOL author visual contracts and machine-editable scene specs; let Blender, TouchDesigner and Kimi each own a defined production stage.", "id": "source-001", "kind": "source", "sourceUrl": "https://twitter.com/QuiverAI/status/2062213713797509586/", "canonical": "https://metanomicon.org/init/form/sources/source-001" }, { "title": "Tutorials | Learn how to create generative art", "author": "Generative Hut", "category": "procedural", "stacks": [ "p5.js", "Three.js", "TouchDesigner", "Processing" ], "summary": "A broad tutorial index spanning kinetic code art, Three.js terrain, random walkers, Grasshopper, TouchDesigner, particle oceans and seamless noise loops.", "signal": "One algorithm can become a family when its seed, force field, density and output medium are treated as controls.", "translation": "Use the index as a curriculum: reproduce one small technique weekly, then convert the strongest experiments into house generators.", "id": "source-002", "kind": "source", "sourceUrl": "https://www.generativehut.com/tutorials", "canonical": "https://metanomicon.org/init/form/sources/source-002" }, { "title": "A brief intro to WebGL shaders", "author": "Steve Sewell", "category": "shader", "stacks": [ "WebGL", "GLSL", "JavaScript" ], "summary": "Explains per-pixel fragment shaders through a dependency-free pointer reveal that mixes two images with uniforms and a noisy circular mask.", "signal": "WebGL need not mean a heavy 3D stack; a small fragment shader can deliver precise, performant 2D interaction.", "translation": "Reserve minimal GLSL for tactile hero reveals, image comparisons and local material reactions; preserve semantic HTML above it.", "id": "source-003", "kind": "source", "sourceUrl": "https://www.builder.io/blog/webgl-shaders", "canonical": "https://metanomicon.org/init/form/sources/source-003" }, { "title": "Interactive Three.js wireframe lattice morphing between parametric math surfaces", "author": "Techartist", "category": "procedural", "stacks": [ "Three.js", "GLSL", "WebGL" ], "summary": "Shows an interactive wireframe lattice morphing between parametric surfaces, with GLSL-driven color, pulse waves and bloom.", "signal": "A single consistent topology can interpolate between forms while shaders carry pulse, depth and chromatic identity.", "translation": "Turn project states into surface equations and morph one mesh between them instead of swapping disconnected hero scenes.", "id": "source-004", "kind": "source", "sourceUrl": "https://twitter.com/techartist_/status/2014012286432928250/", "canonical": "https://metanomicon.org/init/form/sources/source-004" }, { "title": "PRIMAL", "author": "D/VISION7", "category": "shader", "stacks": [ "GLSL", "Python", "Realtime controls" ], "summary": "Documents a layered system: topographic pixels are split into channels, textured by separate shaders, displaced, colored and recomposed under live control.", "signal": "The artist steers deterministic randomness at the edge of failure and curates each render individually rather than batch-picking outputs.", "translation": "Build a live visual instrument with named instability zones; save each approved state with its seed and parameter signature.", "id": "source-005", "kind": "source", "sourceUrl": "https://medium.com/@division7.art/primal-488256b99243", "canonical": "https://metanomicon.org/init/form/sources/source-005" }, { "title": "Spellburst: A Node-based Interface for Exploratory Creative Coding", "author": "Tyler Angert et al.", "category": "systems", "stacks": [ "p5.js", "Node graph", "LLM" ], "summary": "Research on a node-based environment where natural-language prompts generate p5.js sketches that can branch, merge and change through semantic controls.", "signal": "Creative exploration benefits from preserving ancestry: each variation stays connected to the sketch and intent that produced it.", "translation": "Give the visual pipeline a visible genealogy of prompts, parameter changes and approved branches instead of overwriting iterations.", "id": "source-006", "kind": "source", "sourceUrl": "https://arxiv.org/abs/2308.03921", "canonical": "https://metanomicon.org/init/form/sources/source-006" }, { "title": "Create your own shaders. Use them everywhere.", "author": "Nexus", "category": "systems", "stacks": [ "Shaders", "SVG", "Figma", "After Effects" ], "summary": "Presents prompt- or reference-derived generators with live parameters, layers and keyframes that export as editable SVG or high-resolution raster.", "signal": "A reusable generator owns density, color, seed and motion controls; it is not a frozen preset.", "translation": "Package every signature look as a parameter schema that can travel between campaign, product and motion tools.", "id": "source-007", "kind": "source", "sourceUrl": "https://nexus.synkit.net/welcome", "canonical": "https://metanomicon.org/init/form/sources/source-007" }, { "title": "Playground", "author": "thisiswhitespace.com", "category": "motion", "stacks": [ "Three.js", "R3F", "HTML in canvas" ], "summary": "A collection including a 3D ring of HTML slides passing through a shader portal and a form that lifts into an extruded dot-relief scene on focus.", "signal": "Ordinary interface elements become spatial without surrendering their recognizable structure.", "translation": "Choose one crucial interaction—story carousel or input—and let it cross the DOM/scene boundary as the moment of wonder.", "id": "source-008", "kind": "source", "sourceUrl": "https://experiments.thisiswhitespace.com/", "canonical": "https://metanomicon.org/init/form/sources/source-008" }, { "title": "Dither + glyph + mouse-trail effect breakdown", "author": "Oriku", "category": "craft", "stacks": [ "Dither", "Glyphs", "Displacement" ], "summary": "Shares a concrete layer order and settings for blue-noise dither, organic glyph conversion, a fluid mouse trail, chromatic noise displacement and light rays.", "signal": "Character comes from a controlled stack of modest effects, each with a clear mix value—not one oversized post-process.", "translation": "Rebuild the stack as a tunable house material, then trim it to two active effects per viewport for runtime discipline.", "id": "source-009", "kind": "source", "sourceUrl": "https://twitter.com/Oriku175/status/2069678310989390113/", "canonical": "https://metanomicon.org/init/form/sources/source-009" }, { "title": "Introducing Video2Ascii", "author": "Elijah Kurien", "category": "craft", "stacks": [ "WebGL", "React", "ASCII" ], "summary": "Introduces an open React component that converts video to ASCII art with WebGL, reverse engineered from a visual reference.", "signal": "Live video can be reduced to a typographic material while GPU sampling keeps the transformation responsive.", "translation": "Use ASCII conversion as a semantic mode—memory, surveillance or machine vision—not a global retro skin.", "id": "source-010", "kind": "source", "sourceUrl": "https://twitter.com/ElijahKurien/status/2003542206699942225/", "canonical": "https://metanomicon.org/init/form/sources/source-010" }, { "title": "Making Software", "author": "makingsoftware.com", "category": "reference", "stacks": [ "SVG", "Shaders", "Color", "SDF" ], "summary": "A visual technical reference covering pixels, color spaces, blending, curves, rasterization, SVG filters, GPU fundamentals, signed-distance fields, noise and ray techniques.", "signal": "A strong visual system rests on knowing what the browser and GPU actually calculate.", "translation": "Use it as the engineering desk reference behind shader reviews, color decisions and performance debugging.", "id": "source-011", "kind": "source", "sourceUrl": "https://www.makingsoftware.com/", "canonical": "https://metanomicon.org/init/form/sources/source-011" }, { "title": "Guidelines", "author": "rauno.me", "category": "reference", "stacks": [ "CSS", "Motion", "Performance" ], "summary": "Practical interface guidance on animation cost: limit large blurs, pause or unmount offscreen media, apply will-change temporarily and adapt to hardware and network.", "signal": "Performance is an art-direction constraint; device capability should alter the expression, not merely lower frame rate.", "translation": "Define full, lean and static tiers in the visual contract and test them as first-class compositions.", "id": "source-012", "kind": "source", "sourceUrl": "https://interfaces.rauno.me/", "canonical": "https://metanomicon.org/init/form/sources/source-012" }, { "title": "GSAP", "author": "npm", "category": "motion", "stacks": [ "GSAP", "SVG", "Canvas", "WebGL" ], "summary": "The animation toolkit spans CSS, SVG, canvas and WebGL, with scroll sequencing and responsive matchMedia support.", "signal": "One timeline language can coordinate DOM and rendered scenes, including breakpoint-specific and accessibility-aware behavior.", "translation": "Use a small number of scene timelines as choreography; keep geometry and content outside the timeline itself.", "id": "source-013", "kind": "source", "sourceUrl": "https://www.npmjs.com/package/gsap", "canonical": "https://metanomicon.org/init/form/sources/source-013" }, { "title": "Kimi K3 cinematic website prompt", "author": "JUMPERZ", "category": "systems", "stacks": [ "Kimi", "GSAP", "React", "WebGL" ], "summary": "A detailed production prompt for editorial scroll pacing, oversized type, connected scene transformations, responsive art direction and reduced-motion support.", "signal": "It explicitly favors real HTML, restrained timelines and narrative geometry while rejecting template tropes and decorative particles.", "translation": "Use its constraints as Kimi’s frontend contract, then feed it authored geometry and motion tokens from the visual pipeline.", "id": "source-014", "kind": "source", "sourceUrl": "https://x.com/jumperz/status/2077884505612750861/", "canonical": "https://metanomicon.org/init/form/sources/source-014" }, { "title": "Design details that feel like magic", "author": "Design Spells", "category": "reference", "stacks": [ "Microinteraction", "Motion", "UI" ], "summary": "An indexed collection of product details, transitions, easter eggs and small interactions across mobile and desktop interfaces.", "signal": "Memorable delight often lives in a precise response to a familiar action, not in a permanent spectacle.", "translation": "Assign one ‘spell’ to each key journey and measure whether it clarifies feedback before adopting its surface style.", "id": "source-015", "kind": "source", "sourceUrl": "https://designspells.com/", "canonical": "https://metanomicon.org/init/form/sources/source-015" }, { "title": "Find animation opportunities", "author": "Emil Kowalski", "category": "motion", "stacks": [ "Motion audit", "UI" ], "summary": "Introduces a workflow that searches an interface for places genuinely improved by motion and also identifies what should remain still.", "signal": "Animation quality begins with selection: scarce, meaningful motion carries more authority.", "translation": "Run a motion-opportunity audit after static composition and before implementing any global reveal system.", "id": "source-016", "kind": "source", "sourceUrl": "https://twitter.com/emilkowalski/status/2077404975555031509/", "canonical": "https://metanomicon.org/init/form/sources/source-016" }, { "title": "Using Claude Code: The Unreasonable Effectiveness of HTML", "author": "Thariq", "category": "systems", "stacks": [ "HTML", "Design system", "Agents" ], "summary": "Recommends deriving a single HTML design-system reference from a codebase so future agent-made artifacts can match the company’s actual style.", "signal": "A rendered, inspectable reference communicates behavior and visual rules to coding agents better than prose alone.", "translation": "Evolve FORM//GRAPH into the canonical executable design specimen that every build agent must inspect.", "id": "source-017", "kind": "source", "sourceUrl": "https://twitter.com/trq212/status/2052809885763747935/", "canonical": "https://metanomicon.org/init/form/sources/source-017" }, { "title": "A Guide to Claude Code 2.0 and better coding agents", "author": "Sankalp", "category": "systems", "stacks": [ "Agent skill", "Frontend", "Code" ], "summary": "Includes a frontend-design skill focused on distinctive production interfaces, deliberate aesthetic choices and avoidance of generic AI-made patterns.", "signal": "Quality improves when the agent receives a reusable process and explicit taste constraints, not only a page request.", "translation": "Pair the executable specimen with a skill that enforces composition, runtime budgets, accessibility and an anti-trope list.", "id": "source-018", "kind": "source", "sourceUrl": "https://sankalp.bearblog.dev/my-experience-with-claude-code-20-and-how-to-get-better-at-using-coding-agents/", "canonical": "https://metanomicon.org/init/form/sources/source-018" }, { "title": "Recent Design", "author": "recent.design", "category": "reference", "stacks": [ "UI", "Web", "Motion" ], "summary": "A frequently updated index of contemporary interface fragments including interactive cards, drawers, timelines, grids and scrolling treatments.", "signal": "Pattern reconnaissance is most useful at component scale, where behavior can be compared without copying an entire brand.", "translation": "Use it for weekly pattern sampling; record the interaction grammar and rebuild it in the house material system.", "id": "source-019", "kind": "source", "sourceUrl": "https://recent.design/", "canonical": "https://metanomicon.org/init/form/sources/source-019" }, { "title": "Hugo Duprez", "author": "hugoduprez.com", "category": "reference", "stacks": [ "WebGPU", "Voronoi", "Gaussian splats", "Pixel art" ], "summary": "A design-engineering portfolio spanning browser ray marching, Voronoi fractures, Gaussian splatting, a web level editor, pixel conversion and generated textures.", "signal": "A coherent practice can move between tools, experiments and products while preserving a recognizable interest in editable visual systems.", "translation": "Treat experimental demos as reusable capability probes; graduate only the proven ones into product surfaces.", "id": "source-020", "kind": "source", "sourceUrl": "https://www.hugoduprez.com/", "canonical": "https://metanomicon.org/init/form/sources/source-020" }, { "title": "Exploring creative coding with Swift and SwiftUI", "author": "Stefano Perna", "category": "procedural", "stacks": [ "SwiftUI", "Creative coding", "Data art" ], "summary": "Frames Swift and Xcode as a creative-coding studio alongside Processing, p5.js and openFrameworks, with references to data-driven visual art.", "signal": "The procedural language can extend beyond the website into a native iOS expression instead of becoming a screenshot of the web.", "translation": "Port shared field equations and visual tokens into SwiftUI Canvas or Metal for coherent native moments.", "id": "source-021", "kind": "source", "sourceUrl": "https://www.createwithswift.com/exploring-creative-coding-with-swift-and-swiftui/", "canonical": "https://metanomicon.org/init/form/sources/source-021" }, { "title": "Post Internet", "author": "Gene McHugh", "category": "reference", "stacks": [ "3D archive", "Narrative", "Web art" ], "summary": "Includes a work that re-contextualizes user-made 3D models of remembered dreams together with the makers’ own accounts of translating memory into form.", "signal": "An imperfect model becomes compelling when its provenance and translation story remain attached.", "translation": "Let procedural assets carry a readable origin: source signal, transformation and selected final state.", "id": "source-022", "kind": "source", "sourceUrl": "https://www.linkartcenter.eu/public/editions/Gene_McHugh_Post_Internet_Link_Editions_2011.pdf", "canonical": "https://metanomicon.org/init/form/sources/source-022" }, { "title": "Letter Swap", "author": "Daniel Petho", "category": "motion", "stacks": [ "Typography", "Hover", "Component" ], "summary": "A text component that swaps letter copies vertically on hover, with forward-only and reversible ping-pong timeline modes.", "signal": "A tiny typographic state change can make an action tactile without moving the surrounding layout.", "translation": "Use on rare command labels or project transitions; preserve the readable text layer and disable for reduced motion.", "id": "source-023", "kind": "source", "sourceUrl": "https://www.fancycomponents.dev/docs/components/text/letter-swap", "canonical": "https://metanomicon.org/init/form/sources/source-023" }, { "title": "Halftone / Mosaic / Blur / Grain node study", "author": "yosukewada / Libstems", "category": "craft", "stacks": [ "Halftone", "Mosaic", "Blur", "Grain" ], "summary": "Describes recreating a familiar Photoshop process as a live node stack—halftone, mosaic, blur and grain—with switches and adjustable values.", "signal": "Turning a destructive image recipe into nodes invites performance, variation and musical improvisation.", "translation": "Rebuild static house treatments as switchable operator chains so motion assets inherit the exact same material logic.", "id": "source-024", "kind": "source", "sourceUrl": "https://twitter.com/ysk_libstems/status/2076658488919593240/", "canonical": "https://metanomicon.org/init/form/sources/source-024" }, { "title": "How GLM-5.2 Beat Fable 5 at Website Design", "author": "Design Arena", "category": "systems", "stacks": [ "Coding model", "Frontend", "Motion" ], "summary": "Observes that more intricate generated sites vary typography, layout and animation effectively for marketing pages, while requiring longer generation time.", "signal": "Model output quality is partly an exploration-budget decision; variation and detail cost generation and review time.", "translation": "Use fast model passes for breadth, then reserve long Kimi builds for a locked visual contract and selected scene sequence.", "id": "source-025", "kind": "source", "sourceUrl": "https://twitter.com/Designarena/status/2068030598028087788/", "canonical": "https://metanomicon.org/init/form/sources/source-025" }, { "title": "Prompt your ideas to life with Figma Make", "author": "Figma", "category": "systems", "stacks": [ "Figma", "Editable layers", "Design system" ], "summary": "Shows web references becoming editable Figma layers and points toward generation grounded in an existing design system.", "signal": "The handoff becomes stronger when generated results return to structured, editable design primitives.", "translation": "Use Figma as review and annotation space, but keep the executable visual specimen and scene code as canonical.", "id": "source-026", "kind": "source", "sourceUrl": "https://twitter.com/figma/status/2065101067709472781/", "canonical": "https://metanomicon.org/init/form/sources/source-026" }, { "title": "Drawing Dynamic Models", "author": "Ink & Switch", "category": "procedural", "stacks": [ "Crosscut", "Meta-nodes", "Drawing", "Instancing" ], "summary": "Explores procedural computation through drawn forms; a repeat meta-node clones a part, exposes an index and lets later nodes transform each instance differently.", "signal": "A hand-authored shape can remain legible while a procedural system multiplies and varies it—an approachable analogue to Geometry Nodes.", "translation": "Let visual designers sketch the primitive and its intent first; SOL then converts repetition, index and transformation rules into Blender or browser-native operators.", "id": "source-027", "kind": "source", "sourceUrl": "https://www.inkandswitch.com/crosscut/", "canonical": "https://metanomicon.org/init/form/sources/source-027" }, { "title": "What’s the shape of the text?", "author": "Kat · the Poet Engineer", "category": "procedural", "stacks": [ "Embeddings", "UMAP", "Three.js", "Semantic geometry" ], "summary": "Maps rolling text-window embeddings through dimensionality reduction and renders the resulting semantic structure as an explorable Three.js form.", "signal": "Geometry becomes meaningful when position encodes semantic similarity rather than ornamental randomness.", "translation": "Use project documents, memories or live signals to author the spatial field; retain readable source passages as anchors around the visualization.", "id": "source-028", "kind": "source", "sourceUrl": "https://x.com/poetengineer__/status/1801536851024413091", "canonical": "https://metanomicon.org/init/form/sources/source-028" }, { "title": "Browser-native heart / scanner HUD experiment", "author": "Daniel An", "category": "motion", "stacks": [ "HTML", "HUD", "Audio", "Iterative prompting" ], "summary": "A focused visual-direction session produced a beating heart, field-scanner interface, live ECG and synthesized sound directly in the browser.", "signal": "The useful unit is a multimodal behavior contract—object, instrument, sound and response—not a vague request for a cinematic hero.", "translation": "Prototype the living system in HTML first, then move only the form or signal behavior that genuinely benefits from Blender or TouchDesigner.", "id": "source-029", "kind": "source", "sourceUrl": "https://twitter.com/Daniel_An23/status/2076811924352770511/", "canonical": "https://metanomicon.org/init/form/sources/source-029" }, { "title": "This is a motherfucking website", "author": "motherfuckingwebsite.com", "category": "reference", "stacks": [ "Semantic HTML", "Legibility", "Performance", "Accessibility" ], "summary": "A deliberately blunt defense of fast, legible, semantic HTML and content that works without an ornamental interaction gauntlet.", "signal": "Spectacle earns its place only when the page underneath remains readable, navigable and useful.", "translation": "Treat semantic DOM, keyboard use, reduced motion and static fallbacks as the base composition; mount procedural visuals as progressive enhancement.", "id": "source-030", "kind": "source", "sourceUrl": "https://motherfuckingwebsite.com/", "canonical": "https://metanomicon.org/init/form/sources/source-030" }, { "title": "vgpu: shader tools designed for agents", "author": "Matias", "category": "systems", "stacks": [ "WebGPU", "WGSL", "Vercel", "CLI" ], "summary": "The author describes a minimal WebGPU library with explicit control, shader syntax checks, headless rendering and build-time WGSL validation.", "signal": "A visual workflow becomes easier to inspect when shader code, validation and render output share one toolchain.", "translation": "Evaluate the documented workflow for future shader specimens; preserve the current Canvas fallback and measure compatibility before changing the runtime.", "id": "source-031", "kind": "source", "sourceUrl": "https://twitter.com/matiNotFound/status/2093012548031254932/", "canonical": "https://metanomicon.org/init/form/sources/source-031" }, { "title": "From drawn geometry to programmable graphics", "author": "Alex / Relate Studio", "category": "motion", "stacks": [ "SVG", "Three.js", "JavaScript", "Webflow" ], "summary": "A tutorial moves from selected references to SVG geometry, separate particle and line systems, screenshot feedback and reusable animation parameters.", "signal": "Keep text in the document and let explicit geometry control the visual; design the transition between readable states.", "translation": "Give a source, recipe and project the same visual identity across views. Keep labels selectable and make relationships persist through transitions.", "id": "source-032", "kind": "source", "sourceUrl": "https://twitter.com/semochkin_alex/status/2091815761044029800/", "canonical": "https://metanomicon.org/init/form/sources/source-032" }, { "title": "Concept target → Blender → rendered comparison", "author": "Anshu", "category": "systems", "stacks": [ "Blender", "MCP", "Visual QA", "3D" ], "summary": "The author describes using concept images as visual targets, modeling through Blender MCP and iterating against rendered gameplay screenshots.", "signal": "A visual target and repeatable render inspection make art direction concrete. The reported result is a demonstration, not a verified performance benchmark.", "translation": "Every asset brief should specify silhouette, editable source, render checkpoints, a measured frame budget and a browser fallback.", "id": "source-033", "kind": "source", "sourceUrl": "https://twitter.com/anshuc/status/2096008083826725132/", "canonical": "https://metanomicon.org/init/form/sources/source-033" } ], "recipes": [ { "id": "recipe-blender-membrane", "title": "Spectral data membrane", "category": "procedural", "stacks": [ "Blender", "Geometry Nodes", "glTF" ], "summary": "A single subdivided surface becomes the project’s living signature: displaced by a seeded field, tinted by attributes and exported as runtime geometry.", "signal": "Best for a hero identity that must morph between states without changing topology.", "translation": "SOL defines the field contract; Blender Python builds the node group; Kimi mounts the compressed glTF and DOM choreography.", "steps": [ "Create a 96 × 64 grid and store normalized UV plus a deterministic seed attribute.", "Displace along normals with layered 4D noise; expose amplitude, ridge, frequency and phase.", "Map curvature and field value into a four-color spectral ramp; keep roughness high and bloom out.", "Export a decimated glTF under 450 KB plus a 1600 px AVIF still and a six-second WebM fallback.", "In Three.js, animate only phase and pointer force; freeze when offscreen or reduced motion is active." ], "output": "glTF + AVIF + WebM + parameter JSON", "payload": "≤ 650 KB first view", "kind": "recipe", "canonical": "https://metanomicon.org/init/form/recipes/recipe-blender-membrane" }, { "id": "recipe-blender-relic", "title": "Data relic glyph field", "category": "procedural", "stacks": [ "Blender", "Python", "Geometry Nodes" ], "summary": "Turn a project dataset into a point field of instanced marks, then sculpt the density into a recognizable silhouette with forensic labels in the DOM.", "signal": "Best for evidence, archives, knowledge graphs and systems whose data should visibly author the art.", "translation": "Normalize a CSV to points in Python, use Geometry Nodes for instancing, and export only positions plus a tiny shared glyph mesh.", "steps": [ "Define the semantic unit: one dot per source, event, memory or connection.", "Normalize fields into position, height, scale and palette-index attributes.", "Instance a low-poly disc, dash or custom mark; reveal clusters with distance fields.", "Render an art-directed master in Blender, then export the sparse attribute buffer for web.", "Place labels and interactions in semantic HTML aligned to projected anchor points." ], "output": "Attribute buffer + shared mesh + reference render", "payload": "≤ 280 KB", "kind": "recipe", "canonical": "https://metanomicon.org/init/form/recipes/recipe-blender-relic" }, { "id": "recipe-td-constellation", "title": "Live signal constellation", "category": "shader", "stacks": [ "TouchDesigner", "SOP", "CHOP", "TOP" ], "summary": "A real-time node field where incoming project signals influence attraction, pulse and color, designed first as performance and then distilled for web.", "signal": "Best for launches, installations, streams and hero captures that need genuine signal-reactivity.", "translation": "TouchDesigner discovers the motion grammar; exported lookup textures and curves reproduce the chosen behavior in WebGL.", "steps": [ "Receive normalized events through WebSocket or a recorded JSON replay.", "Build points in SOPs, adjacency in a Script SOP and event envelopes in CHOPs.", "Render points and restrained links into separate TOP passes for independent compositing.", "Record a deterministic 20-second hero loop and export motion curves as sampled arrays.", "Rebuild the selected loop in WebGL; keep the TD network for campaigns and live moments." ], "output": "TOE network + curve JSON + WebM master", "payload": "Web runtime ≤ 900 KB", "kind": "recipe", "sourceUrls": [ "https://www.generativehut.com/post/exclusive-touchdesigner-tutorial" ], "sourceNote": "Feedback-line technique expanded from the saved Generative Hut index. This constellation recipe is FORM//GRAPH synthesis, not a transcription of that tutorial.", "canonical": "https://metanomicon.org/init/form/recipes/recipe-td-constellation" }, { "id": "recipe-td-dither", "title": "Reactive dither operator chain", "category": "craft", "stacks": [ "TouchDesigner", "Dither", "Glyph", "Feedback" ], "summary": "A reusable node stack turns image or video into blue-noise dither, glyph texture and a restrained feedback trail with named presets.", "signal": "Best as a house material that can process campaigns, portraits and product footage consistently.", "translation": "Build high-resolution masters in TouchDesigner; ship a simplified two-pass shader or pre-rendered loop per surface.", "steps": [ "Prepare image/video with saturation and contrast as explicit pre-process controls.", "Apply blue-noise thresholding, then optional glyph quantization on luminance.", "Add a pointer or audio envelope to a short feedback displacement—not global turbulence.", "Save named states: forensic, bloom, archive and nocturne with parameter manifests.", "Export AVIF/WebM and a GLSL approximation; compare visual delta before choosing live runtime." ], "output": "TOX component + preset JSON + shader approximation", "payload": "Live effect ≤ 2 passes", "kind": "recipe", "canonical": "https://metanomicon.org/init/form/recipes/recipe-td-dither" }, { "id": "recipe-webgl-lattice", "title": "Parametric lattice portal", "category": "procedural", "stacks": [ "Three.js", "GLSL", "WebGL" ], "summary": "One indexed grid morphs between mathematical surfaces while a vertex shader carries pulse waves and a fragment shader handles restrained spectral color.", "signal": "Best for connected chapters, project states and scroll sequences where one form must transform rather than disappear.", "translation": "Let scroll set a semantic state index; interpolate equations in the shader and pin labels to stable UV anchors.", "steps": [ "Generate a fixed 80 × 54 indexed grid with UV coordinates.", "Implement two surface functions and interpolate positions with a smooth state uniform.", "Add one travelling pulse to vertex displacement; avoid post-processing until composition works.", "Use a three-stop palette indexed by normal, depth and project state.", "Cap device pixel ratio, pause on invisibility and replace morph with crossfade in reduced motion." ], "output": "Three.js scene module + static SVG silhouette", "payload": "≤ 180 KB custom code", "kind": "recipe", "sourceUrls": [ "https://www.generativehut.com/post/render-3d-scenes-from-webgl-to-svg" ], "sourceNote": "The linked tutorial supports the vector export step. The morphing lattice is FORM//GRAPH synthesis.", "canonical": "https://metanomicon.org/init/form/recipes/recipe-webgl-lattice" }, { "id": "recipe-webgl-reveal", "title": "Forensic material reveal", "category": "shader", "stacks": [ "WebGL", "GLSL", "Pointer" ], "summary": "A minimal fragment shader mixes source and interpreted images through a pointer-driven noisy mask, turning inspection into the core interaction.", "signal": "Best for before/after, source/meaning, garment/detail and archive/restoration stories.", "translation": "Two textures, pointer, viewport and one noise function are enough; the surrounding explanation stays real HTML.", "steps": [ "Align two equal-size images: raw evidence and interpreted layer.", "Pass pointer position and viewport dimensions as uniforms.", "Build a circular signed-distance mask disturbed by low-cost hash noise.", "Mix textures inside the mask and add a one-pixel threshold edge for forensic precision.", "On touch use press-and-drag; on reduced motion provide a labeled comparison slider." ], "output": "Dependency-free WebGL module + comparison fallback", "payload": "Textures dominate; code ≤ 12 KB", "kind": "recipe", "canonical": "https://metanomicon.org/init/form/recipes/recipe-webgl-reveal" }, { "id": "recipe-canvas-ascii", "title": "Semantic ASCII silhouette", "category": "craft", "stacks": [ "Canvas 2D", "ASCII", "Video" ], "summary": "Sample a low-resolution image or video, quantize luminance into a custom glyph ramp and use semantic characters instead of generic ASCII.", "signal": "Best when machine vision, memory, text or indexing is part of the story.", "translation": "Let each project define its own glyph vocabulary; render at a stable text grid and keep a no-video seeded field fallback.", "steps": [ "Downsample media to a grid sized by font metrics and device capability.", "Calculate luminance and optional edge magnitude per cell.", "Map values to a curated glyph ramp containing project-native marks.", "Color glyphs from the sampled texture or a constrained four-token palette.", "Throttle to 24 fps, pause offscreen and render one deterministic frame for reduced motion." ], "output": "Canvas module + accessible text summary", "payload": "≤ 18 KB plus media", "kind": "recipe", "canonical": "https://metanomicon.org/init/form/recipes/recipe-canvas-ascii" }, { "id": "recipe-svg-topology", "title": "Living topology diagram", "category": "motion", "stacks": [ "SVG", "DOM", "CSS" ], "summary": "A semantic diagram whose paths breathe, reroute and annotate system state without giving up selectable labels, keyboard navigation or print quality.", "signal": "Best for architectures, knowledge maps and product explanations where exact relationships matter.", "translation": "Generate layout data, render labeled SVG groups, and reserve animation for changed paths or active causal chains.", "steps": [ "Model nodes and typed edges as data, including a human-readable description per connection.", "Lay out with simple lanes or a precomputed graph; never hide hierarchy behind random force motion.", "Render each node as a focusable SVG group linked to its detail panel.", "Animate stroke-dash and path morph only when state or selection changes.", "Offer a table view and disable path motion under reduced-motion preference." ], "output": "Inline SVG + JSON model + table fallback", "payload": "≤ 80 KB", "kind": "recipe", "canonical": "https://metanomicon.org/init/form/recipes/recipe-svg-topology" }, { "id": "recipe-hybrid-handoff", "title": "Authored scene → lean interface", "category": "systems", "stacks": [ "Blender", "Three.js", "DOM", "Kimi" ], "summary": "A disciplined handoff: art-direct in Blender, export only the essential mesh and curves, then let Kimi build a semantic interface around the runtime scene.", "signal": "Best as the default pipeline for major web heroes and chapter transitions.", "translation": "The browser receives an asset contract, not a .blend file: named anchors, state curves, palette tokens, budgets and fallbacks.", "steps": [ "Lock the static composition in Blender at desktop, tablet and mobile camera ratios.", "Name interactive anchors and export them with compressed geometry, baked normals and no unused materials.", "Export camera/state curves separately from the asset so Kimi can coordinate them with HTML.", "Implement DOM content first, mount the scene as an enhancement and test all anchors at target breakpoints.", "Profile on an actual iPhone; enforce geometry, texture, DPR and long-task budgets before polish." ], "output": "Asset contract + glTF + curves + Kimi implementation prompt", "payload": "Hero ≤ 1.2 MB compressed", "kind": "recipe", "canonical": "https://metanomicon.org/init/form/recipes/recipe-hybrid-handoff" }, { "id": "recipe-agent-loop", "title": "SOL × Blender × TD × Kimi loop", "category": "systems", "stacks": [ "GPT SOL", "Blender", "TouchDesigner", "Kimi" ], "summary": "A four-role production loop: SOL directs and specifies, Blender authors form, TouchDesigner discovers signal behavior, and Kimi integrates the selected system.", "signal": "Best as the operating model for a repeatable studio rather than a one-off beautiful page.", "translation": "Every pass returns editable files, renders, parameter manifests and a decision note; no agent approves its own stage.", "steps": [ "SOL writes the visual thesis, narrative purpose, scene list, anti-tropes and measurable runtime contract.", "Blender automation produces three form families plus parameter manifests and contact sheets.", "TouchDesigner tests motion, reactivity and material chains against recorded signals.", "SOL selects one state and creates the handoff bundle; Kimi builds responsive semantic UI around it.", "A separate QA pass measures accessibility, reduced motion, loading, frame pacing and cross-breakpoint composition." ], "output": "Versioned scene bundle + executable design specimen", "payload": "Budget defined per project", "kind": "recipe", "canonical": "https://metanomicon.org/init/form/recipes/recipe-agent-loop" } ], "documentation": { "quickStart": "https://metanomicon.org/init/form/guide", "agentGuide": "https://metanomicon.org/init/form/llms.txt", "publicIndex": "https://metanomicon.org/init/form/atlas.json", "studies": "https://metanomicon.org/init/form/studies.json", "teamHandoff": "https://github.com/ydefix/ui-ux/blob/main/assets/init/HANDOFF.md", "agentInstructions": "https://github.com/ydefix/ui-ux/blob/main/AGENTS.md", "trackedTask": "https://github.com/ydefix/ui-ux/issues/6" }, "sourceRepository": { "url": "https://github.com/ydefix/ui-ux", "readme": "https://github.com/ydefix/ui-ux/blob/main/README.md", "access": "private-team-access-required", "authority": "Canonical editable implementation and contribution rules. Read README, AGENTS.md and the FORM//GRAPH handoff before repository changes." } }