Brushed Titanium Free WebGPU shader

Precision has a surface.

A satin metal surface with directional reflections and linear or radial machining. Explore Brushed Titanium and export its WebGPU material for React.

Open editor Meet the surface

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.

A surface, not a screenshot.

FreeReact exportRaw WGSL

THE SYSTEM BEHIND THE SURFACE

Inside Brushed Titanium.

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.

Titanium names the art direction, not a measured alloy. There is no material scan, CAD mesh, HDRI upload or full spectral conductor calibration.

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.

Roughness

Softness of the reflection across the brush lines; higher values give a duller satin.

Surface curvature

How domed the plate is; more curvature bends the highlights across it.

Light angle

Direction of the studio light, in degrees.

Light spread

Size of the studio's area light; larger lights give broader, softer highlights.

Color Looks preserve these settings. Open the editor for all 17 controls.

KEEP THE SOURCE. KEEP THE CONTROL.

From preview to your project.

Choose a Look, tune it in the editor, then download the Export Kit. Install the runtime and copy the generated component into your project.

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.

In Next.js, use a client component and give its container an explicit size. Keep headings, links and accessible content in HTML above the decorative canvas.

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.

Open editor & export

Markdown guide

Usage example — download BrushedTitanium.tsx from the editor first. This example imports that local file; it is not the shader component itself.

Terminal

npm install ./vendor/aperveil-runtime-0.1.0.tgz ./vendor/aperveil-react-0.1.0.tgz

BrushedTitanium usage

"use client";

import BrushedTitanium from "./BrushedTitanium";

export default function Hero() {
  return (
    <BrushedTitanium
      className="hero-shader"
      roughness={0.32} materialColor="#b8bcc5"
      fallback={<div className="hero-shader-fallback" />}
    />
  );
}

// .hero-shader { width: 100%; height: 560px; }

Download and extract the complete Export Kit first. Run its local package command from the ZIP root, then copy the component into your project. Public npm and CLI distribution is coming soon.

THE SURFACE IN CONTEXT

Made for a real interface.

Create a precise, restrained introduction for a hardware or industrial design studio. Pair the satin finish with a narrow technical headline and generous margins.