Wireframe sphere on the left, rendered sphere on the right — two ways to look at the same body.

Previews

Every material on this site shows a sphere. Two different things render that sphere depending on context: a stylized CSS proxy at thumbnail size, and a real-time WebGL render on entry-page heroes. This page is the map.

The CSS sphere proxy

A gradient ball, finish-aware, drawn entirely in CSS from the entry's authored palette (base / highlight / shadow / accent). Owns every thumbnail position — listing pages, by-finish gallery, substitute pills, search results — and stands as the fallback for browsers without WebGL2 or for users who turn the live preview off in Preferences. Stylized, never claims to be photoreal, scales to six hundred entries cheaply, reads as the right family of material at sphere-thumbnail distance.

The WebGL live preview

A real-time Three.js MeshPhysicalMaterial sphere, lit by a synthetic studio environment, draggable. Renders on every entry-page hero across every category — metals, woods, polymers, ceramics, paints, textiles, gemstones, glass. Same derive_pbr() values that feed the Blender / Rhino / glTF / USD snippets drive what you see here; one source of truth, one renderer. Optional — disabled per browser in Preferences for slower hardware.

The principle

One render path, every material. Earlier rounds carried four — CSS proxy, WebGL with hand-tuned per-family recipes, Cycles turntables baked from a third-party material library, static Cycles renders — and each fell down at a different boundary: the WebGL recipe couldn't reach gem refraction, the Cycles library didn't cover all 25 gemstones, the static renders didn't rotate. Replacing the lot with a single MeshPhysicalMaterial setup lit by a synthetic environment gets one code path that carries every category, including the gems that broke earlier passes. The CSS proxy stays as the floor — never wrong, never over-promising, always there.

What this means in practice

Open any entry page. The hero sphere is the live render, drag it to rotate. Click into a thumbnail elsewhere (on listings, in the by-finish gallery, on a substitute pill) and you're looking at the CSS proxy. They share the same authored palette, so the family read is consistent across both — what you see in the listing matches what you see on the entry page, just at lower fidelity.

If the live preview is missing on an entry page, your browser doesn't support WebGL2 (rare) or the Live Preview is turned off in Preferences. The CSS proxy fills the spot.

Concordance

House vocabulary — terms ForMatter uses with intent.

anisotropic: Direction-dependent. Wood reads differently along the grain than across it; rolled steel is stiffer along the rolling direction. The Principled-BSDF anisotropic input rotates the highlight to match.
anodize: Electrochemical oxide layer grown on aluminum (Type II / III), titanium, or niobium. Type II accepts dye for color; titanium / niobium use voltage-driven thin-film interference instead of dye. The CMF entry covers the seal step that locks the color in.
application: What the thing IS, in the world. The third entity, peer of material and process. A water bottle, a chair, an extruded-aluminum profile.
BRDF: Bidirectional Reflectance Distribution Function. The math behind how a surface returns light for any incoming and outgoing direction. The PBR model is a parameterized BRDF.
channeled: A voice block written within a dead author's philosophy, marked and cited. Distinct from a verbatim quote. Roland Barthes channeled on PMMA reads like Barthes; the citation attributes the lineage.
CMF: Color, Material, Finish — the trio designers specify together when handing a part off for production. ForMatter's Finish entity is the F in CMF: 10 categories — polish / anodize / patina / plate / coating / texture / cut / mold_finish / glaze / stone_finish — and 100+ entries. Every finish entry pairs to the materials and processes it suits.
choral fugue: ForMatter's register. Subject stated plainly (freshman tier), answered in technical and sensorial registers, countersubjects from linked processes and applications, citations as final stretto. Voice blocks where canon attaches.
clearcoat: A second specular layer over the base surface. Glossy plastics and lacquered woods get a clearcoat term in the PBR table. IOR 1.5 by default.
compatibility (process): Each process entry lists which materials it can work. The cross-ref renders as sphere pills so the gallery feeling extends inward.
confidence: Each entry tagged high / medium / low. A senior's low-confidence-with-three-citations beats a freshman's high-confidence-with-none. The label is a contract with the reader, not a brag.
crystalline (finish): A faceted-surface read — gemstones, glassy minerals, ice. Drives PBR defaults: IOR 2.42 (diamond), transmission 1.0, low roughness.
derive_pbr(): The build's single source of truth — sphere palette + finish enum → Principled-BSDF starter values. One function feeds the entry-page table, the per-host snippets, the glTF export, and the Three.js Live Preview.
finish (entity): ForMatter's CMF layer — surface treatments and conditions a designer chooses for a given material and process. Categories: polish, anodize, patina, plate, coating, texture, cut, mold_finish, glaze, stone_finish. Distinct from the sphere `finish` enum (metallic / matte / glossy / etc.) which is the visual register of the proxy.
freshman / senior register: Two registers in every entry — the plain freshman description and the technical / sensorial one. Same database, two readers, no extra subscription.
glTF: GL Transmission Format — the open 3D-asset standard every modern app reads. ForMatter emits a .gltf material doc per material. Open standard, designer-friendly handoff.
IOR: Index of Refraction. How much light bends entering the surface. Air 1.0, water 1.33, glass 1.5, diamond 2.42. Drives transmission and the specular term.
iridescent (finish): Hue-shifted accent over base. Anodized titanium and niobium, opal, paraíba. Drives PBR defaults: low metalness, full iridescence, clearcoat.
iridescence: Thin-film interference layer over the base material. KHR_materials_iridescence in glTF, MeshPhysicalMaterial.iridescence in Three.js. Tunable from the FOCUS slider on iridescent / pearlescent entries. The ior and thickness range together set the visible color sweep — opal uses a 100–800 nm thickness range (film, not wavelength) to span the full visible band.
lite-PBR: ForMatter's PBR approach — Principled-BSDF starter values per entry, no measured BRDFs, no commercial assets. Honest reasonable defaults from the finish enum, per-entry numeric overrides where you have a real reason.
Live Preview: The Three.js shader ball that replaces the static CSS sphere on every entry page. One render path for every category — metals, woods, polymers, ceramics, paints, textiles, gemstones, glass. Same derive_pbr() values, real-time lit by a synthetic studio environment, draggable. Optional — toggle in Preferences.
material: What the thing is MADE OF. The first entity. Aluminum 6061, white oak, soda-lime glass.
metallic (finish): Specular highlight, deep shadow rim. Drives PBR defaults: metalness 1, low roughness, IOR 1.45. Polished steel, gold, copper.
mood board: Folded into the Project workspace at /project.html. The mood-board upload, palette extraction, character chips, and matcher results all live alongside the collected items grid and the save .formatter / save PDF / open .formatter actions — one feature, one page.
Ollama: Local-LLM scaffold on the Project page. Off by default. When toggled on in Preferences AND Ollama is reachable at localhost:11434, the natural-language input box ('something soft and warm with a wet read') asks the model to translate the description into character-chip toggles. Never invents material properties; the LLM only translates intent into existing chip vocabulary. The keyword fast-path (chips alone, no LLM) is the default — see suite-wide ai-integration pattern.
project: The full workspace at /project.html — collected materials, processes, applications, finishes plus an optional mood-board image whose dominant colors search the library for matches. Save / open .formatter files round-trip the project state. Cross-conversation: the Project page replaces the slide-down panel that used to live behind the appbar 'project' button.
patina: A chemical color shift on metal — heat-blue on steel, fume-black on silver, verdigris on copper, gun-blue on tool steel, ferric on copper. CMF-layer entry; cited by both the material and the process pages that produce it.
PBR: Physically-Based Rendering. The shading model every modern 3D app uses, parameterized by metallic / roughness / IOR / transmission / clearcoat / sheen. ForMatter publishes starter values for every material entry.
SPI mold finish: Society of the Plastics Industry mold-cavity finish standard. A1 / A2 / A3 (diamond polish, mirror), B1 / B2 / B3 (paper, semi-gloss), C1 / C2 / C3 (stone, matte), D1 / D2 / D3 (dry blast, textured). The finish prints from the mold cavity onto the molded part — a designer picks the SPI grade with the molder when specifying the tool.
Principled BSDF: Blender's name for the consolidated PBR shader. Most other apps ship the same shader under different names (Standard Surface, ShaderGraph, Substance). One node, every output.
process: How the material is MADE INTO the thing. The second entity. Cast, machined, kerf-bent, anodized, planished, granulated. Process is a peer of material, not a footnote.
quote: A voice block carrying a verbatim quotation from a living author, with citation. Distinct from a channeled block. Living = quote only; the rule is enforced at the schema layer.
roughness: Microsurface scatter. 0 is mirror-smooth; 1 is fully diffuse. Most real surfaces sit between 0.2 and 0.8.
sphere proxy: ForMatter's visible-character stand-in for every material. CSS-gradient driven by the entry's palette and finish, not a baked render. Honest about being a proxy, scales to six hundred entries cheaply, tweakable in one place.
substitute: A peer material that could fill a similar role. Cross-references render as sphere pills inside an entry — the gallery feeling extends inward.
transmission: How much light passes through. 1 is fully transparent; 0 is opaque. Glass, gemstones, clear plastics carry transmission.
PVD: Physical Vapor Deposition — vacuum-chamber sputter or cathodic-arc deposition of a thin ceramic film onto a metal substrate. The CMF-layer's modern coating chemistry: TiN (gold), ZrN (champagne), CrN (pewter), TiCN (warm bronze / rose-gold), AlTiN (charcoal-anthracite, near-black), DLC (deep black). Hard, doesn't tarnish, paint-thin.
VDI 3400: German engineering reference standard for mold-cavity texture (Erodieren bearbeitete Werkstückoberflächen). The full scale runs reference plates 0–45 by Ra value; production specs typically draw from 12–45 because plates 0–11 require diamond-mirror polish on the mold cavity and are rarely commissioned in commercial tooling. Pairs with the SPI standard; both define what gets cut into the mold.
voice block: A versal block where a real authored voice attaches to the material or process. Schema-tagged with status (living / dead) and mode (quote / channeled). Citations always.
woodgrain (finish): Directional sheen with grain ring. Drives PBR defaults: anisotropic 0.6, medium roughness, no metalness. Every wood entry.

Press ⌘⇧/ to open this panel from anywhere · Esc to close.

ForMatter

Materials and processes for people who design and make things.

A local-first library of materials, processes, applications, and finishes — equal weight, citable everywhere, with cost-over-volume curves, trade-off profiles, equipment-tier filters, and second-life paths layered onto the data so a student can move from "what is this" toward "what's actually buildable here, now, by me." Part of the renato.design ecosystem — sibling of Plenum, Specimen, Ingenue, gesture, graf, and the Renato Rhino plug-ins. Form and matter, inseparable.

Why this exists

Half of teaching materials is teaching how the material is made into the thing. The standard subscription library was always light on that half. The wedge here isn't better samples or a prettier interface — it's treating Process as a peer entity, not a footnote.

Rules of the house

Citations or it didn't happen. Every property number, every claim, every borrowed register has a traceable source.
Living authors are quoted only. Verbatim or not at all.
Dead authors may be channeled within their philosophy — marked, cited, never impersonated.
Permalink or nothing. Museum holdings link to the specific collection-record URL. Designer overview pages, press releases, and exhibition listings don't qualify.
Relative, not absolute. Cost, lead time, and other figures that age get published as ratios and ranges. Crossover points beat magnitudes.
Confidence labeled honestly. A senior's low-confidence-with-three-citations beats a freshman's high-confidence-with-none.
Local-first. Works offline, no login, no subscription.

Sister apps

Ingenue — five voices argue about what to build from electronic parts. Where ForMatter teaches what the thing is made of, Ingenue proposes what the thing could be.
Plenum — VIN, fender-tag, and broadcast-sheet decoder for muscle and pony cars; doo-wop register.
Specimen — iPhone 3D scanner that treats the captured object as a specimen, with voiced commentary.
renato.design — the rest.

Sources

Conway's Material World on raw materials, Lefteri's Making It on processes, Forty's Concrete and Culture, Sparke's Design in Context, Bürdek's Design: History, Theory and Practice of Product Design, Schröpfer's Material Design on materials in architecture, Winchester's The Perfectionists on tolerance, Minshall's Your Life Is Manufactured on the global supply chain, von Busch's Making Trouble on material activism, Were's How Materials Matter, Hegger / Drexler / Zeumer's Basics Materials, Untracht and McCreight on metalsmithing, USDA Forest Products Lab on woods, GIA on gemstones, Schott / CoorsTek / Toray / Owens Corning datasheets, MakeItFrom for verifiable property numbers, ASM Handbook, ISO standards. Museum holdings draw from the Met, MAD, V&A, Smithsonian American Art Museum, Newark Museum of Art, British Museum, Heard Museum, Smithsonian NMAI, Eiteljorg Museum, Philadelphia Museum of Art, Cranbrook Art Museum, and Grand Rapids Art Museum — collection-record permalinks only, designer overview pages and exhibition listings excluded. Voice blocks now ride on every entry kind — material, process, application, and finish — and include Ruskin on iron, Anni Albers on twining, Greg Lynn on the shred-and-teeth NURBS lineage, Pugin on the metal that won't be hammered, Barthes / Yanagi / Benjamin channeled within their philosophy; Sparke, Bürdek, Forty, Conway, Schröpfer, Minshall, von Busch, Lefteri, Pat Pruitt, Mary Lee Hu, Tom Joyce, Albert Paley, and the rest of the contemporary makers quoted verbatim with citation. All cited.

v0.6.82 — 2026-05-11 · Phil Renato · renato.design · MIT-licensed code, CC BY-NC research content

Preferences

Local to this browser. No cloud, no account, no telemetry.

Live Preview on entry pages Three.js shader ball replacing the static sphere. Disable on slower hardware or to keep entry pages text-only.

UI scale Browser-style zoom. Useful for classroom projection or close work.

Sphere density How many material spheres fit per row on the landing grid. Smaller spheres pack more across the page; larger ones fewer. Adapts to desktop and phone.

more fewer

Default confidence filter Search dropdown defaults to this level when the page loads.

Local LLM (Ollama) Off by default. When on, the Project page surfaces a natural-language input that asks Ollama (running locally at localhost:11434) to translate descriptions like "something soft and warm" into character-chip toggles. The LLM never invents material properties — only translates intent into existing vocabulary. Keyword chips remain the fast-path; this is a layer on top.

Default register Entry pages can render in 'more' mode (everything visible — freshman + senior register, property tables, PBR, voices, citations) or 'less' mode (freshman desc + sphere + cross-links + citations only). Per-entry toggle override available via the 'register' button next to '+ project'.

Stored in localStorage under formatter:prefs.