{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "material-plate", "type": "registry:component", "title": "Tactile Material Plate", "description": "A specimen plaque lit by a pointer-following grazing light. Every optical response is driven by authored MaterialOptics coefficients rather than art direction — so it arrives with 31 real materials catalogued.", "registryDependencies": [ "https://chromologium.com/r/optical-engine.json" ], "files": [ { "path": "components/optics/renderers/materialPlate.ts", "content": "/* Design tokens & architecture sourced from The Chromologium (https://chromologium.com) */\n/**\n * The Chromologium — Tactile Material Plate Renderer (Phase 4)\n *\n * A specimen plaque lit by a grazing light that follows the visitor's\n * pointer. Every optical response is driven by the archive's authored\n * `MaterialOptics` coefficients — micro-facet roughness perturbs the normal\n * field, anisotropy stretches the specular lobe along the grain, metalness\n * tints reflection with the material's own color, IOR sets the Fresnel rim,\n * scatterDepth feeds wrap-lighting subsurface glow, and patinaRate weathers\n * the plate's edges. Carrara marble and urushi lacquer respond differently\n * because their rows in the archive differ — not because of art direction.\n */\n\nimport { readTokenSrgb } from \"@/lib/shaderTokens\";\nimport { createProgram, drawFullscreen, setUniforms } from \"../glUtils\";\nimport type { FrameInfo, OpticalRenderer, OpticalSurfaceState } from \"../types\";\n\nconst FRAGMENT = `#version 300 es\nprecision highp float;\n\nin vec2 v_uv;\nout vec4 outColor;\n\nuniform vec2 u_resolution;\nuniform float u_time;\nuniform vec2 u_pointer; // uv, y up\nuniform float u_pointerIn;\nuniform vec3 u_base; // material base color (sRGB)\nuniform vec3 u_accent;\nuniform float u_scatter; // scatterDepth 0..1\nuniform float u_rough; // roughness 0..1\nuniform float u_aniso; // anisotropy 0..1\nuniform float u_metal; // metalness 0..1\nuniform float u_ior; // ~1.3..1.8\nuniform float u_patina; // patinaRate 0..1\n\nfloat hash(vec2 p) { return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453); }\nfloat noise(vec2 p) {\n vec2 i = floor(p);\n vec2 f = fract(p);\n f = f * f * (3.0 - 2.0 * f);\n return mix(\n mix(hash(i), hash(i + vec2(1, 0)), f.x),\n mix(hash(i + vec2(0, 1)), hash(i + vec2(1, 1)), f.x),\n f.y\n );\n}\nfloat fbm(vec2 p) {\n float v = 0.0;\n float a = 0.5;\n for (int i = 0; i < 4; i++) {\n v += a * noise(p);\n p = p * 2.13 + 7.7;\n a *= 0.5;\n }\n return v;\n}\n\nvec3 srgbToLinear(vec3 c) { return pow(c, vec3(2.2)); }\nvec3 linearToSrgb(vec3 c) { return pow(max(c, 0.0), vec3(1.0 / 2.2)); }\n\nvoid main() {\n float aspect = u_resolution.x / max(u_resolution.y, 1.0);\n vec2 p = (v_uv - 0.5) * vec2(aspect, 1.0);\n\n vec3 base = srgbToLinear(u_base);\n\n // --- Surface micro-structure ------------------------------------------\n // Grain frequency stretched by anisotropy (brushed metal, wood grain,\n // woven silk); amplitude scaled by roughness.\n vec2 grainUv = p * vec2(mix(24.0, 90.0, u_aniso), 24.0);\n float bump = fbm(grainUv) - 0.5;\n float bumpX = fbm(grainUv + vec2(0.12, 0.0)) - 0.5;\n float bumpY = fbm(grainUv + vec2(0.0, 0.12)) - 0.5;\n vec3 n = normalize(vec3(\n (bump - bumpX) * u_rough * 2.4,\n (bump - bumpY) * u_rough * 2.4 / mix(1.0, 3.2, u_aniso),\n 1.0\n ));\n\n // --- Grazing light follows the pointer, orbits when idle ---------------\n vec2 lp = mix(\n vec2(cos(u_time * 0.35) * 0.6, sin(u_time * 0.28) * 0.4),\n (u_pointer - 0.5) * vec2(aspect, 1.0) * 2.0,\n u_pointerIn\n );\n vec3 lightPos = vec3(lp, 0.55);\n vec3 lightDir = normalize(lightPos - vec3(p, 0.0));\n vec3 viewDir = vec3(0.0, 0.0, 1.0);\n vec3 halfV = normalize(lightDir + viewDir);\n\n // --- Diffuse with subsurface wrap --------------------------------------\n float ndl = dot(n, lightDir);\n float wrap = u_scatter * 0.8;\n float diffuse = clamp((ndl + wrap) / (1.0 + wrap), 0.0, 1.0);\n // Subsurface bleed: light entering near the limb re-emerges tinted\n float sss = u_scatter * pow(clamp(1.0 - abs(ndl), 0.0, 1.0), 2.0) * 0.55;\n\n // --- Specular: Blinn-ish lobe, anisotropically stretched ----------------\n vec3 hA = normalize(vec3(halfV.x / mix(1.0, 4.0, u_aniso), halfV.y, halfV.z));\n float shininess = mix(220.0, 8.0, u_rough);\n float spec = pow(max(dot(n, hA), 0.0), shininess);\n // Fresnel from IOR (Schlick), boosted to unity response for metals\n float f0 = pow((u_ior - 1.0) / (u_ior + 1.0), 2.0);\n float fresnel = f0 + (1.0 - f0) * pow(1.0 - max(dot(n, viewDir), 0.0), 5.0);\n vec3 specTint = mix(vec3(1.0), base, u_metal);\n float specAmt = mix(fresnel, 0.85, u_metal);\n\n // --- Patina: edges weather first ---------------------------------------\n float rim = smoothstep(0.25, 0.62, length(p / vec2(aspect, 1.0)) * 1.4);\n float mottle = fbm(p * 6.0 + 31.0);\n float patina = u_patina * rim * (0.4 + 0.6 * mottle);\n // Verdigris drift for metals, umber deepening for dielectrics\n vec3 patinaTint = mix(base * 0.45, vec3(0.24, 0.42, 0.36), u_metal * 0.8);\n\n // --- Compose ------------------------------------------------------------\n vec3 albedo = mix(base, base * (1.0 - 0.3 * u_metal), u_metal);\n vec3 col = albedo * (0.24 + 0.76 * diffuse);\n col += base * sss * vec3(1.0, 0.92, 0.85);\n col += specTint * spec * specAmt * mix(1.0, 2.2, u_metal);\n col = mix(col, patinaTint, patina * 0.5);\n\n // Plaque vignette\n col *= 1.0 - 0.34 * smoothstep(0.45, 0.95, length(p / vec2(aspect, 1.0)) * 1.35);\n\n outColor = vec4(linearToSrgb(col), 1.0);\n}`;\n\ninterface PlateStore {\n program: WebGLProgram;\n locations: Map;\n}\n\nexport function createMaterialPlateRenderer(): OpticalRenderer {\n return {\n init(gl: WebGL2RenderingContext, surface: OpticalSurfaceState): void {\n const program = createProgram(gl, FRAGMENT);\n surface.store.set(\"plate\", {\n program,\n locations: new Map(),\n } satisfies PlateStore);\n },\n\n render(\n gl: WebGL2RenderingContext,\n surface: OpticalSurfaceState,\n frame: FrameInfo,\n ): void {\n const store = surface.store.get(\"plate\") as PlateStore;\n gl.useProgram(store.program);\n const custom = surface.getUniforms?.() ?? {};\n setUniforms(gl, store.program, store.locations, {\n u_resolution: [surface.width, surface.height],\n u_time: frame.t,\n u_pointer: [\n surface.pointer.x / Math.max(1, surface.cssWidth),\n 1 - surface.pointer.y / Math.max(1, surface.cssHeight),\n ],\n u_pointerIn: surface.pointer.inside ? 1 : 0,\n u_accent: readTokenSrgb(\"--ds-accent\", [0.79, 0.65, 0.35]),\n ...custom,\n });\n drawFullscreen(gl);\n },\n\n dispose(gl: WebGL2RenderingContext, surface: OpticalSurfaceState): void {\n const store = surface.store.get(\"plate\") as PlateStore | undefined;\n if (store) gl.deleteProgram(store.program);\n surface.store.delete(\"plate\");\n },\n };\n}\n", "type": "registry:component", "target": "components/optics/renderers/materialPlate.ts" }, { "path": "components/TactileMaterialPlate.tsx", "content": "/* Design tokens & architecture sourced from The Chromologium (https://chromologium.com) */\n\"use client\";\n\n/**\n * The Chromologium — Tactile Material Plate\n *\n * A specimen plaque whose light response is bound to authored\n * `MaterialOptics` coefficients from the archive. Hover to graze light\n * across the surface; translucent materials glow at the limb, brushed\n * metals streak, and high-patina substrates carry weathered edges.\n * Under reduced-motion or the static tier this renders as a plain\n * material swatch — the ordinary path.\n */\n\nimport type { MaterialOptics } from \"@/lib/materialOptics\";\nimport { parseCssColor } from \"@/lib/shaderTokens\";\nimport { useOpticalSurface } from \"./optics/useOpticalSurface\";\nimport { createMaterialPlateRenderer } from \"./optics/renderers/materialPlate\";\n\nexport interface TactileMaterialPlateProps {\n optics: MaterialOptics;\n /** Material base color (hex). */\n color: string;\n /** Accessible description of the material. */\n label: string;\n /** Plate height in px (defaults to 180). Ignored when `fill` is set. */\n height?: number;\n /** Fill the nearest positioned ancestor instead of a fixed height. */\n fill?: boolean;\n /** Show the SSS/roughness/IOR chip row (defaults to true). */\n showMeta?: boolean;\n}\n\nexport function TactileMaterialPlate({\n optics,\n color,\n label,\n height = 180,\n fill = false,\n showMeta = true,\n}: TactileMaterialPlateProps) {\n const { hostRef, canvasRef, ready } = useOpticalSurface({\n createRenderer: createMaterialPlateRenderer,\n getUniforms: () => ({\n u_base: parseCssColor(color) ?? [0.6, 0.6, 0.6],\n u_scatter: optics.scatterDepth,\n u_rough: optics.roughness,\n u_aniso: optics.anisotropy,\n u_metal: optics.metalness,\n u_ior: optics.ior,\n u_patina: optics.patinaRate,\n }),\n interactive: true,\n });\n\n return (\n \n {/* Static CSS state: a flat material swatch with a soft sheen */}\n \n \n {showMeta && (\n \n \n SSS {optics.scatterDepth.toFixed(2)}\n \n \n σ {optics.roughness.toFixed(2)}\n \n \n n {optics.ior.toFixed(2)}\n \n \n )}\n \n );\n}\n", "type": "registry:component", "target": "components/TactileMaterialPlate.tsx" } ], "meta": { "specimens": { "jpn": { "code": "JPN", "name": "Japan", "material": "Hinoki cypress & washi paper", "tactileProfile": "Hinoki Wood & Washi Fiber Grain", "frictionScore": 0.28, "optics": { "scatterDepth": 0.55, "roughness": 0.65, "anisotropy": 0.5, "metalness": 0, "ior": 1.54, "patinaRate": 0.31 } }, "ita": { "code": "ITA", "name": "Italy", "material": "Carrara marble", "tactileProfile": "Polished Carrara Marble & Venetian Plaster", "frictionScore": 0.12, "optics": { "scatterDepth": 0.65, "roughness": 0.15, "anisotropy": 0.05, "metalness": 0, "ior": 1.56, "patinaRate": 0.08 } }, "fra": { "code": "FRA", "name": "France", "material": "Limestone & wrought iron", "tactileProfile": "Honed French Limestone & Patinated Brass", "frictionScore": 0.22, "optics": { "scatterDepth": 0.35, "roughness": 0.55, "anisotropy": 0.15, "metalness": 0.2, "ior": 1.52, "patinaRate": 0.22 } }, "deu": { "code": "DEU", "name": "Germany", "material": "Industrial steel & plate glass", "tactileProfile": "Cold Rolled Steel & Plate Glass", "frictionScore": 0.08, "optics": { "scatterDepth": 0.08, "roughness": 0.1, "anisotropy": 0.7, "metalness": 0.85, "ior": 1.52, "patinaRate": 0.05 } }, "esp": { "code": "ESP", "name": "Spain", "material": "Trencadís ceramic mosaic", "tactileProfile": "Unglazed Terracotta & Glazed Ceramic Shards", "frictionScore": 0.45, "optics": { "scatterDepth": 0.3, "roughness": 0.35, "anisotropy": 0.1, "metalness": 0, "ior": 1.54, "patinaRate": 0.18 } }, "gbr": { "code": "GBR", "name": "United Kingdom", "material": "Portland stone & cast iron", "tactileProfile": "Honed Portland Stone & Cast Iron Grain", "frictionScore": 0.35, "optics": { "scatterDepth": 0.22, "roughness": 0.6, "anisotropy": 0.1, "metalness": 0.25, "ior": 1.53, "patinaRate": 0.35 } }, "nld": { "code": "NLD", "name": "Netherlands", "material": "Delft blue ceramic", "tactileProfile": "Smooth Enamel Paint & Flat Birch Plywood", "frictionScore": 0.15, "optics": { "scatterDepth": 0.25, "roughness": 0.08, "anisotropy": 0.02, "metalness": 0, "ior": 1.56, "patinaRate": 0.1 } }, "dnk": { "code": "DNK", "name": "Denmark", "material": "Molded teak & beech", "tactileProfile": "Soap-Finished Solid Oak & Natural Saddle Leather", "frictionScore": 0.32, "optics": { "scatterDepth": 0.5, "roughness": 0.45, "anisotropy": 0.6, "metalness": 0, "ior": 1.53, "patinaRate": 0.28 } }, "usa": { "code": "USA", "name": "United States", "material": "Reinforced cantilever concrete & steel", "tactileProfile": "Molded Plywood & Anodized Spun Aluminum", "frictionScore": 0.24, "optics": { "scatterDepth": 0.15, "roughness": 0.7, "anisotropy": 0.2, "metalness": 0.3, "ior": 1.47, "patinaRate": 0.2 } }, "bra": { "code": "BRA", "name": "Brazil", "material": "Board-formed concrete & jacaranda wood", "tactileProfile": "Board-Formed Concrete & Jacaranda Hardwood", "frictionScore": 0.38, "optics": { "scatterDepth": 0.4, "roughness": 0.75, "anisotropy": 0.45, "metalness": 0, "ior": 1.5, "patinaRate": 0.25 } }, "ind": { "code": "IND", "name": "India", "material": "Makrana marble & sandstone", "tactileProfile": "Honed Makrana Marble & Chiseled Red Sandstone", "frictionScore": 0.36, "optics": { "scatterDepth": 0.68, "roughness": 0.2, "anisotropy": 0.05, "metalness": 0, "ior": 1.56, "patinaRate": 0.1 } }, "chn": { "code": "CHN", "name": "China", "material": "Lacquered nanmu wood & imperial yellow glazed tile", "tactileProfile": "Polished Cinnabar Lacquer & Glazed Ceramic", "frictionScore": 0.14, "optics": { "scatterDepth": 0.35, "roughness": 0.06, "anisotropy": 0.08, "metalness": 0, "ior": 1.62, "patinaRate": 0.12 } }, "egy": { "code": "EGY", "name": "Egypt", "material": "Tura limestone, red granite & gold leaf", "tactileProfile": "Fine Grained Tura Limestone & Polished Gold Leaf", "frictionScore": 0.3, "optics": { "scatterDepth": 0.18, "roughness": 0.5, "anisotropy": 0.05, "metalness": 0.35, "ior": 1.55, "patinaRate": 0.06 } }, "mex": { "code": "MEX", "name": "Mexico", "material": "Volcanic basalt stone (pedregal) & rough lime plaster", "tactileProfile": "Rough Volcanic Lime Plaster & Honed Basalt", "frictionScore": 0.52, "optics": { "scatterDepth": 0.28, "roughness": 0.85, "anisotropy": 0.1, "metalness": 0, "ior": 1.55, "patinaRate": 0.3 } }, "tur": { "code": "TUR", "name": "Türkiye", "material": "İznik ceramic tile, Marmara marble & copper domes", "tactileProfile": "Glazed İznik Quartz Frit & Marmara Marble", "frictionScore": 0.16, "optics": { "scatterDepth": 0.6, "roughness": 0.12, "anisotropy": 0.1, "metalness": 0.3, "ior": 1.6, "patinaRate": 0.4 } }, "grc": { "code": "GRC", "name": "Greece", "material": "Pentelic marble & bronze clamps", "tactileProfile": "Pentelic Marble & Fluted Doric Columns", "frictionScore": 0.18, "optics": { "scatterDepth": 0.55, "roughness": 0.4, "anisotropy": 0.05, "metalness": 0.2, "ior": 1.56, "patinaRate": 0.45 } }, "mar": { "code": "MAR", "name": "Morocco", "material": "Zellige glazed terracotta, sculpted stucco & cedarwood", "tactileProfile": "Hand-Cut Zellige Glaze & Scented Atlas Cedar", "frictionScore": 0.42, "optics": { "scatterDepth": 0.35, "roughness": 0.3, "anisotropy": 0.15, "metalness": 0, "ior": 1.55, "patinaRate": 0.2 } }, "rus": { "code": "RUS", "name": "Russia", "material": "Perforated brickwork, structural timber & industrial steel", "tactileProfile": "Raw Perforated Brick & Matte Unbleached Linen", "frictionScore": 0.48, "optics": { "scatterDepth": 0.2, "roughness": 0.7, "anisotropy": 0.35, "metalness": 0.3, "ior": 1.52, "patinaRate": 0.28 } }, "aus": { "code": "AUS", "name": "Australia", "material": "Ironbark hardwood, red earth ochre & Sydney sandstone", "tactileProfile": "Raw Ironbark Grain & Natural Earth Ochre Wash", "frictionScore": 0.4, "optics": { "scatterDepth": 0.3, "roughness": 0.8, "anisotropy": 0.5, "metalness": 0, "ior": 1.53, "patinaRate": 0.24 } }, "kor": { "code": "KOR", "name": "South Korea", "material": "Red pine, granite foundation stones & white porcelain", "tactileProfile": "Silken Unglazed Porcelain & Oiled Pine Maru", "frictionScore": 0.16, "optics": { "scatterDepth": 0.55, "roughness": 0.3, "anisotropy": 0.4, "metalness": 0, "ior": 1.54, "patinaRate": 0.2 } }, "irn": { "code": "IRN", "name": "Iran", "material": "Haft-rangi glazed ceramic tile & Isfahan alabaster", "tactileProfile": "High-Gloss Haft-Rangi Tile & Carved Isfahan Plaster", "frictionScore": 0.18, "optics": { "scatterDepth": 0.7, "roughness": 0.15, "anisotropy": 0.05, "metalness": 0, "ior": 1.57, "patinaRate": 0.15 } }, "per": { "code": "PER", "name": "Peru", "material": "White granite cyclopean blocks & alpaca wool", "tactileProfile": "Polished Andesite Stone & Fine Alpaca Fiber", "frictionScore": 0.34, "optics": { "scatterDepth": 0.25, "roughness": 0.65, "anisotropy": 0.3, "metalness": 0, "ior": 1.54, "patinaRate": 0.1 } }, "prt": { "code": "PRT", "name": "Portugal", "material": "Glazed cobalt azulejos & lioz limestone", "tactileProfile": "Tin-Glazed Ceramic Azulejo & Honed Lioz Stone", "frictionScore": 0.15, "optics": { "scatterDepth": 0.3, "roughness": 0.1, "anisotropy": 0.05, "metalness": 0, "ior": 1.56, "patinaRate": 0.14 } }, "swe": { "code": "SWE", "name": "Sweden", "material": "Falu red painted timber, light birch & stucco", "tactileProfile": "Fine Nordic Birch Grain & Matte Falu Pigment", "frictionScore": 0.26, "optics": { "scatterDepth": 0.45, "roughness": 0.6, "anisotropy": 0.4, "metalness": 0, "ior": 1.52, "patinaRate": 0.26 } }, "fin": { "code": "FIN", "name": "Finland", "material": "Molded bent birch plywood & copper fittings", "tactileProfile": "Warm Molded Birch Plywood & Patinated Copper", "frictionScore": 0.2, "optics": { "scatterDepth": 0.5, "roughness": 0.35, "anisotropy": 0.55, "metalness": 0.2, "ior": 1.53, "patinaRate": 0.32 } }, "che": { "code": "CHE", "name": "Switzerland", "material": "Valser quartzite stone & brushed stainless steel", "tactileProfile": "Wet-Honed Valser Quartzite & Brushed Precision Steel", "frictionScore": 0.1, "optics": { "scatterDepth": 0.12, "roughness": 0.25, "anisotropy": 0.75, "metalness": 0.45, "ior": 1.55, "patinaRate": 0.04 } }, "aut": { "code": "AUT", "name": "Austria", "material": "Gold leaf, white plaster & bentwood beech", "tactileProfile": "Hammered Gold Leaf & Black-Stained Bentwood", "frictionScore": 0.22, "optics": { "scatterDepth": 0.4, "roughness": 0.3, "anisotropy": 0.25, "metalness": 0.5, "ior": 1.54, "patinaRate": 0.18 } }, "cze": { "code": "CZE", "name": "Czech Republic", "material": "Bohemian cut crystal, Moroccan onyx & chromed steel", "tactileProfile": "Lead Crystal Cut Facets & Polished Onyx", "frictionScore": 0.1, "optics": { "scatterDepth": 0.75, "roughness": 0.03, "anisotropy": 0.1, "metalness": 0.35, "ior": 1.66, "patinaRate": 0.05 } }, "col": { "code": "COL", "name": "Colombia", "material": "Tumbaga gold alloy, emerald crystal & guadua bamboo", "tactileProfile": "Polished Tumbaga Gold & Flexible Guadua Bamboo", "frictionScore": 0.25, "optics": { "scatterDepth": 0.55, "roughness": 0.2, "anisotropy": 0.3, "metalness": 0.55, "ior": 1.58, "patinaRate": 0.38 } }, "nga": { "code": "NGA", "name": "Nigeria", "material": "Cast bronze, carved ivory & laterite red mudbrick", "tactileProfile": "Chiseled Benin Lost-Wax Bronze & Compacted Laterite", "frictionScore": 0.38, "optics": { "scatterDepth": 0.2, "roughness": 0.4, "anisotropy": 0.15, "metalness": 0.6, "ior": 1.54, "patinaRate": 0.42 } }, "gha": { "code": "GHA", "name": "Ghana", "material": "Handwoven kente silk, beaten gold & laterite earth", "tactileProfile": "Raw Silk Warp & Weft Textures & Beaten Pure Gold", "frictionScore": 0.35, "optics": { "scatterDepth": 0.45, "roughness": 0.5, "anisotropy": 0.65, "metalness": 0.4, "ior": 1.55, "patinaRate": 0.22 } } }, "fields": { "scatterDepth": "sub-surface light re-emission (0 opaque – 1 translucent)", "roughness": "micro-facet RMS roughness", "anisotropy": "directional grain of the specular lobe", "metalness": "dielectric-to-conductor blend", "ior": "refractive index at 589 nm (sodium D line)", "patinaRate": "visible patina acquired per simulated century" } }, "author": "The Chromologium", "homepage": "https://chromologium.com", "license": "MIT" }