# Brushed Titanium Aperveil / Light, shaped for the web. A satin metal surface with directional reflections and linear or radial machining. Explore Brushed Titanium and export its WebGPU material for React. [Aperveil integration guide](https://www.aperveil.com/docs) ## What it does Brushed Titanium uses anisotropic microfacet reflections on a continuous rigid surface. Brush angle and machining mode define the directional finish; the pointer adjusts local viewing tilt. ## Choose it for Create a precise, restrained introduction for a hardware or industrial design studio. Pair the satin finish with a narrow technical headline and generous margins. ## Limits Titanium names the art direction, not a measured alloy. There is no material scan, CAD mesh, HDRI upload or full spectral conductor calibration. ## Current look Default. Color Looks change colors only; motion, geometry and typography remain unchanged. [Open editor](https://www.aperveil.com/shaders/brushed-titanium/edit?look=default) ## Install Download the Export Kit from the editor. No shader-specific npm package or CLI is published yet. ```sh npm install ./vendor/aperveil-runtime-0.1.0.tgz ./vendor/aperveil-react-0.1.0.tgz ``` Every control in the editor is a typed prop. Leave a prop out to keep the value you exported; change one and the running shader updates without restarting. Give the surface a size and pass fallback for browsers without WebGPU. ```tsx "use client"; import BrushedTitanium from "./BrushedTitanium"; export default function Hero() { return ( } /> ); } // .hero-shader { width: 100%; height: 560px; } ``` Component props: `roughness`, `curvature`, `lightAngle`, `lightSize`, `tilt`, `motion`, `zoom`, `position`, `rotation`, `materialColor`, `lightColor`, `background`, `opacity`, `anisotropy`, `brushAngle`, `machining`, `center`, `className`, `style`, `paused`, `fallback`, `onReady`, `onError`. Raw WGSL is included for a custom WebGPU host; it is not CSS. Keep semantic headings and links in HTML. ## Controls - Roughness (`roughness`, slider): Softness of the reflection across the brush lines; higher values give a duller satin. - Surface curvature (`curvature`, slider): How domed the plate is; more curvature bends the highlights across it. - Light angle (`lightAngle`, slider): Direction of the studio light, in degrees. - Light spread (`lightSize`, slider): Size of the studio's area light; larger lights give broader, softer highlights. - Pointer tilt (`tilt`, slider): How much the plate seems to tilt toward the pointer. - Light drift (`motion`, slider): How much the light sways on its own; 0 holds it still. - Pattern scale (`zoom`, slider): Scale of the plate and its machining; above 1 shows it closer. - Position (`position`, xy): Shifts the plate across the surface. - Rotation (`rotation`, slider): Turns the plate, in degrees. - Material tint (`materialColor`, color): Base colour of the metal's reflection. - Studio light (`lightColor`, color): Colour of the studio light. - Environment tint (`background`, color): Colour of the surroundings, faintly reflected in the metal. - Opacity (`opacity`, slider): default 1 - Anisotropy (`anisotropy`, slider): How strongly the brushing stretches highlights along the grain; 0 reflects like plain satin. - Brush direction (`brushAngle`, slider): Direction of the linear brush strokes, in degrees. - Machining (`machining`, radio): Straight brushing, or circular turning around a centre point. - Machining center (`center`, xy): Centre of the circular turning when Machining is Radial. ## Compatibility WebGPU rendering requires a supported browser and secure context. The landing shows a real poster for the selected Look when live rendering is unavailable. The standard exported component does not bundle a poster fallback. Supply your own fallback in the host layout. Text exports also retain readable HTML typography. ## Performance 3.31 ms GPU timestamp median; p95 4.391 ms. 1440x900 @ dpr 1.5; Metal driver on macOS Version 26.6.2 (Build 25G83); measured 2026-09-06. This is a recorded headless sample, not a browser FPS or mobile-performance guarantee. ## Questions ### Does the machining change the direction of the highlight? Yes. The tangent direction and anisotropy shape the reflection. Brush angle and Linear/Radial machining change that direction without turning the metal into a flowing liquid. ### Can I switch between straight brushing and radial machining? Yes. Machining selects Linear or Radial, Brush direction orients the grain, and Machining center positions the radial pattern. Anisotropy and Roughness shape the reflected highlight; no image texture is required. ### What should I not use Brushed Titanium for? Titanium names the art direction, not a measured alloy. There is no material scan, CAD mesh, HDRI upload or full spectral conductor calibration. ### What happens without WebGPU? This landing shows a still poster of your selected Color Look. The raw WGSL needs a WebGPU host. Landing posters are not bundled in the Export Kit: add your own fallback around the exported component. ### Can I use this shader commercially? Part of the Free collection for Aperveil 1.0. Public live preview and Color Looks are open. Free Export Kits do not require an account. Purchasing is not available yet. Follow the license notices supplied with the source you download. The planned Free collection permits personal and commercial interface projects. An alpha access grant is not a purchase or a replacement for those license terms. ## License Part of the Free collection for Aperveil 1.0. Public live preview and Color Looks are open. Free Export Kits do not require an account. Purchasing is not available yet. Follow the license notices supplied with the source you download. The planned Free collection permits personal and commercial interface projects. An alpha access grant is not a purchase or a replacement for those license terms. ## Related shaders - [Liquid Chrome](https://www.aperveil.com/shaders/liquid-chrome) - [Iridescent Foil](https://www.aperveil.com/shaders/iridescent-foil) - [Glass Facets](https://www.aperveil.com/shaders/glass-facets)