/init · Visual reference library
Find a form.
Give it a purpose.
References, visual studies and build recipes for interfaces. Understand a technique. Take a brief into your next project.
Start here
Search by technique or project. Every note links back to its original source.
Browse source notes ↗Recipes turn references into production steps, tools and constraints.
Read a sample recipe ↗Copy a brief from a source or recipe. Give it to a collaborator or coding agent.
Read the quick start ↗01 / The library
Good references. Useful next steps. Sources are saved evidence. Recipes are our synthesis. Open a card for the original link, project fit and a copyable build brief.
33 source notes · 10 recipes. Use the controls to narrow the collection.
Argues that useful visual AI should generate editable symbolic artifacts—HTML, SVG, Lottie, Blender scripts or USD scenes—then let a renderer produce pixels.
A broad tutorial index spanning kinetic code art, Three.js terrain, random walkers, Grasshopper, TouchDesigner, particle oceans and seamless noise loops.
Explains per-pixel fragment shaders through a dependency-free pointer reveal that mixes two images with uniforms and a noisy circular mask.
Shows an interactive wireframe lattice morphing between parametric surfaces, with GLSL-driven color, pulse waves and bloom.
Documents a layered system: topographic pixels are split into channels, textured by separate shaders, displaced, colored and recomposed under live control.
Research on a node-based environment where natural-language prompts generate p5.js sketches that can branch, merge and change through semantic controls.
Presents prompt- or reference-derived generators with live parameters, layers and keyframes that export as editable SVG or high-resolution raster.
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.
Shares a concrete layer order and settings for blue-noise dither, organic glyph conversion, a fluid mouse trail, chromatic noise displacement and light rays.
Introduces an open React component that converts video to ASCII art with WebGL, reverse engineered from a visual reference.
A visual technical reference covering pixels, color spaces, blending, curves, rasterization, SVG filters, GPU fundamentals, signed-distance fields, noise and ray techniques.
Practical interface guidance on animation cost: limit large blurs, pause or unmount offscreen media, apply will-change temporarily and adapt to hardware and network.
The animation toolkit spans CSS, SVG, canvas and WebGL, with scroll sequencing and responsive matchMedia support.
A detailed production prompt for editorial scroll pacing, oversized type, connected scene transformations, responsive art direction and reduced-motion support.
An indexed collection of product details, transitions, easter eggs and small interactions across mobile and desktop interfaces.
Introduces a workflow that searches an interface for places genuinely improved by motion and also identifies what should remain still.
Recommends deriving a single HTML design-system reference from a codebase so future agent-made artifacts can match the company’s actual style.
Includes a frontend-design skill focused on distinctive production interfaces, deliberate aesthetic choices and avoidance of generic AI-made patterns.
A frequently updated index of contemporary interface fragments including interactive cards, drawers, timelines, grids and scrolling treatments.
A design-engineering portfolio spanning browser ray marching, Voronoi fractures, Gaussian splatting, a web level editor, pixel conversion and generated textures.
Frames Swift and Xcode as a creative-coding studio alongside Processing, p5.js and openFrameworks, with references to data-driven visual art.
Includes a work that re-contextualizes user-made 3D models of remembered dreams together with the makers’ own accounts of translating memory into form.
A text component that swaps letter copies vertically on hover, with forward-only and reversible ping-pong timeline modes.
Describes recreating a familiar Photoshop process as a live node stack—halftone, mosaic, blur and grain—with switches and adjustable values.
Observes that more intricate generated sites vary typography, layout and animation effectively for marketing pages, while requiring longer generation time.
Shows web references becoming editable Figma layers and points toward generation grounded in an existing design system.
Explores procedural computation through drawn forms; a repeat meta-node clones a part, exposes an index and lets later nodes transform each instance differently.
Maps rolling text-window embeddings through dimensionality reduction and renders the resulting semantic structure as an explorable Three.js form.
A focused visual-direction session produced a beating heart, field-scanner interface, live ECG and synthesized sound directly in the browser.
A deliberately blunt defense of fast, legible, semantic HTML and content that works without an ornamental interaction gauntlet.
The author describes a minimal WebGPU library with explicit control, shader syntax checks, headless rendering and build-time WGSL validation.
A tutorial moves from selected references to SVG geometry, separate particle and line systems, screenshot feedback and reusable animation parameters.
The author describes using concept images as visual targets, modeling through Blender MCP and iterating against rendered gameplay screenshots.
02 / Original studies
Three works from the Metanomicon gallery. Each offers a visual direction to explore through a recipe.
An original Metanomicon AI-assisted study of language gathering into a landscape.
An original Metanomicon AI-assisted study of material, tension and the conditions held inside a form.
An original Metanomicon AI-assisted study of a field reshaped around a changed center.
03 / Applications
Choose a direction. The atlas narrows to the references that can serve it.
Memory becomes a place.
Recall, time and relationships ↗ 02 / AESTHETICS/tasteA memory for how you choose.
Patterns between references ↗ 03 / COORDINATIONMission ControlThe work leaves a trace.
State, intent and evidence ↗ 04 / DISCOVERYEvidence systemsMeaning survives the interface.
Sources people and agents can read ↗Research applications. These mappings describe where a technique could fit, not a claim of a shipped integration.
Working principles
Geometry, parameters, materials, timing and DOM remain the artifact—not only the final pixels.
Reveal state, causality, scale or transition. If it does none of these, remove it.
Blender and TouchDesigner discover the visual language. Web runtimes receive compressed geometry, textures, curves and rules.
Every live field owns a still, low-power and reduced-motion expression with the same composition.
Expose seed, density, turbulence and palette. Save chosen states as named visual specimens.
The Reader corpus is rich in browser-native shaders and agentic visual workflows, but thin on deep Geometry Nodes, TouchDesigner network, SDF/raymarching and GPGPU curricula. Those stay marked for external sourcing—not disguised as retrieved evidence.
Signals name an intentional interaction and its public object. No pointer trails, search text, source content or personal data leaves the surface.
Reading room
33 source notes. 10 production recipes. A short guide for turning a reference into a useful brief.
FORM//GRAPH is the visual systems atlas of /init: a collection of source notes and original production recipes connecting procedural geometry, shaders, motion and semantic interfaces.
Source notes summarize retrieved references and link to the original when available. Build translations and recipes are FORM//GRAPH synthesis. Recipe budgets are design targets, not measured performance or proof of a completed implementation.
Start with the public JSON index, follow the canonical source and recipe pages, and keep source summaries distinct from editorial synthesis. Recheck the original reference before attributing a claim. The index contains public metadata, not private Reader records.
Working on the system? Canonical GitHub repository · README · Handoff. These team documents require authorized GitHub access; the public guide above is open to everyone.