FORM//GRAPH / 33 entries

Source index

Public source notes on procedural geometry, shaders, motion and visual systems.

Each page separates a grounded source summary from an editorial build translation. Original references remain attributed to their creators.

1. source-001 / Build system

   Visual AI is shifting from pixels to code

   Argues that useful visual AI should generate editable symbolic artifacts—HTML, SVG, Lottie, Blender scripts or USD scenes—then let a renderer produce pixels.

2. source-002 / Procedural form

   Tutorials | Learn how to create generative art

   A broad tutorial index spanning kinetic code art, Three.js terrain, random walkers, Grasshopper, TouchDesigner, particle oceans and seamless noise loops.

3. source-003 / Shader / field

   A brief intro to WebGL shaders

   Explains per-pixel fragment shaders through a dependency-free pointer reveal that mixes two images with uniforms and a noisy circular mask.

4. source-004 / Procedural form

   Interactive Three.js wireframe lattice morphing between parametric math surfaces

   Shows an interactive wireframe lattice morphing between parametric surfaces, with GLSL-driven color, pulse waves and bloom.

5. source-005 / Shader / field

   PRIMAL

   Documents a layered system: topographic pixels are split into channels, textured by separate shaders, displaced, colored and recomposed under live control.

6. source-006 / Build system

   Spellburst: A Node-based Interface for Exploratory Creative Coding

   Research on a node-based environment where natural-language prompts generate p5.js sketches that can branch, merge and change through semantic controls.

7. source-007 / Build system

   Create your own shaders. Use them everywhere.

   Presents prompt- or reference-derived generators with live parameters, layers and keyframes that export as editable SVG or high-resolution raster.

8. source-008 / Motion grammar

   Playground

   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.

9. source-009 / Visual craft

   Dither + glyph + mouse-trail effect breakdown

   Shares a concrete layer order and settings for blue-noise dither, organic glyph conversion, a fluid mouse trail, chromatic noise displacement and light rays.

10. source-010 / Visual craft

    Introducing Video2Ascii

    Introduces an open React component that converts video to ASCII art with WebGL, reverse engineered from a visual reference.

11. source-011 / Reference

    Making Software

    A visual technical reference covering pixels, color spaces, blending, curves, rasterization, SVG filters, GPU fundamentals, signed-distance fields, noise and ray techniques.

12. source-012 / Reference

    Guidelines

    Practical interface guidance on animation cost: limit large blurs, pause or unmount offscreen media, apply will-change temporarily and adapt to hardware and network.

13. source-013 / Motion grammar

    GSAP

    The animation toolkit spans CSS, SVG, canvas and WebGL, with scroll sequencing and responsive matchMedia support.

14. source-014 / Build system

    Kimi K3 cinematic website prompt

    A detailed production prompt for editorial scroll pacing, oversized type, connected scene transformations, responsive art direction and reduced-motion support.

15. source-015 / Reference

    Design details that feel like magic

    An indexed collection of product details, transitions, easter eggs and small interactions across mobile and desktop interfaces.

16. source-016 / Motion grammar

    Find animation opportunities

    Introduces a workflow that searches an interface for places genuinely improved by motion and also identifies what should remain still.

17. source-017 / Build system

    Using Claude Code: The Unreasonable Effectiveness of HTML

    Recommends deriving a single HTML design-system reference from a codebase so future agent-made artifacts can match the company’s actual style.

18. source-018 / Build system

    A Guide to Claude Code 2.0 and better coding agents

    Includes a frontend-design skill focused on distinctive production interfaces, deliberate aesthetic choices and avoidance of generic AI-made patterns.

19. source-019 / Reference

    Recent Design

    A frequently updated index of contemporary interface fragments including interactive cards, drawers, timelines, grids and scrolling treatments.

20. source-020 / Reference

    Hugo Duprez

    A design-engineering portfolio spanning browser ray marching, Voronoi fractures, Gaussian splatting, a web level editor, pixel conversion and generated textures.

21. source-021 / Procedural form

    Exploring creative coding with Swift and SwiftUI

    Frames Swift and Xcode as a creative-coding studio alongside Processing, p5.js and openFrameworks, with references to data-driven visual art.

22. source-022 / Reference

    Post Internet

    Includes a work that re-contextualizes user-made 3D models of remembered dreams together with the makers’ own accounts of translating memory into form.

23. source-023 / Motion grammar

    Letter Swap

    A text component that swaps letter copies vertically on hover, with forward-only and reversible ping-pong timeline modes.

24. source-024 / Visual craft

    Halftone / Mosaic / Blur / Grain node study

    Describes recreating a familiar Photoshop process as a live node stack—halftone, mosaic, blur and grain—with switches and adjustable values.

25. source-025 / Build system

    How GLM-5.2 Beat Fable 5 at Website Design

    Observes that more intricate generated sites vary typography, layout and animation effectively for marketing pages, while requiring longer generation time.

26. source-026 / Build system

    Prompt your ideas to life with Figma Make

    Shows web references becoming editable Figma layers and points toward generation grounded in an existing design system.

27. source-027 / Procedural form

    Drawing Dynamic Models

    Explores procedural computation through drawn forms; a repeat meta-node clones a part, exposes an index and lets later nodes transform each instance differently.

28. source-028 / Procedural form

    What’s the shape of the text?

    Maps rolling text-window embeddings through dimensionality reduction and renders the resulting semantic structure as an explorable Three.js form.

29. source-029 / Motion grammar

    Browser-native heart / scanner HUD experiment

    A focused visual-direction session produced a beating heart, field-scanner interface, live ECG and synthesized sound directly in the browser.

30. source-030 / Reference

    This is a motherfucking website

    A deliberately blunt defense of fast, legible, semantic HTML and content that works without an ornamental interaction gauntlet.

31. source-031 / Build system

    vgpu: shader tools designed for agents

    The author describes a minimal WebGPU library with explicit control, shader syntax checks, headless rendering and build-time WGSL validation.

32. source-032 / Motion grammar

    From drawn geometry to programmable graphics

    A tutorial moves from selected references to SVG geometry, separate particle and line systems, screenshot feedback and reusable animation parameters.

33. source-033 / Build system

    Concept target → Blender → rendered comparison

    The author describes using concept images as visual targets, modeling through Blender MCP and iterating against rendered gameplay screenshots.