◈ component · material-plate
Tactile Material Plate
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 32 real materials catalogued.
Two materials, one light.
Bohemian cut crystal, Moroccan onyx & chromed steel
These are authored material-response coefficients, not measured constants for an entire country. Roughness spreads highlights; metalness changes the dielectric/conductor blend; anisotropy gives the highlight a direction.
getUniforms: () => ({
"u_base": [
0.06666666666666667,
0.27058823529411763,
0.49411764705882355
],
"u_scatter": 0.75,
"u_rough": 0.03,
"u_aniso": 0.1,
"u_metal": 0.35,
"u_ior": 1.66,
"u_patina": 0.05
})
// Use with createMaterialPlateRenderer and useOpticalSurface.
// Host: position:relative; explicit height; still fallback beneath canvas.Copies component source and tokens directly into your repository with requirements listed for this item: no additional npm dependencies beyond the host framework.
Open-source under MIT. We preserve the source header comment, and invite you to credit the archive on your project's /about, /colophon, or footer. Display our Archival Colophon Seal or copy a citation snippet below. Sites displaying the seal are welcome to submit to our Federation Showcase!
Mount it in your application.
React examples use a client component. Optical surfaces need a sized host, the installed optical stylesheet, and a MovementProvider above the preview. Import your chosen movement tokens and load the fonts separately. The document reader uses Tailwind utilities; include its installed source in your Tailwind scan.
"use client";
import { MovementProvider } from '@/components/MovementProvider';
import '@/registry/optical-components.css';
// Install movement-themes separately for the ten authored palettes.
// import '@/registry/movement-themes.css';
export default function Example() {
return <MovementProvider>{/* place the selected preview here */}</MovementProvider>;
}Coefficients
- 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
Source
components/optics/renderers/materialPlate.tscomponents/TactileMaterialPlate.tsx
Registry item: /r/material-plate.json