Metal Fold

1. Copy assets/ into your project and add the stylesheet and pre-paint probe to <head>. The probe keeps the static fallback from flashing before WebGL starts. Keep the timeout so an unavailable dependency restores the poster.

In your downloadThe working code for this step, in index.html.

2. Place the component in your page. A definite height is required. The supplied stylesheet uses the viewport; override .metal-fold to fit a hero or a card.

In your downloadThe working code for this step, in index.html.

3. Add the dependencies before </body>. The import map must precede any import of Three.js. Adjust both asset paths when moving the files.

In your downloadThe working code for this step, in index.html.

Already using Three.js in a bundled project? Assign your imported namespace to window.THREE, load GSAP once, then load the effect script after the markup exists. Do not add a second Three.js copy or a second import map. script.min.js can replace script.js.

Required hooks: each independent instance needs a [data-metal-fold] root and a .metal-fold__source fallback. The fallback is an ordinary picture element, not an input texture. [data-fold-press] is an optional native button that gives keyboard users the same pressure gesture. Each [data-fold-material] button chooses silver or copper; keep aria-pressed on these toggle buttons.

Removable demo styling: the typeface, control borders, charcoal page ground, full-viewport sizing, cue icon and control positions are presentation. The surface itself is procedural and needs no photograph, HDRI, external environment map or asset loader. Changing the CSS page colour does not change the renderer's clear colour; update renderer.setClearColor() too if you change the stage ground.

CSS to preserve: a positioned root with a definite height; absolute canvas positioning; clipping on the root; controls above the canvas; touch-action: pan-y; and the .gl / .is-live / .is-fallback visibility gates. The pre-paint probe belongs in <head>. The portrait pose is selected from the root's aspect ratio, not the device model.

The supplied posters are stills of the real shader. If you alter the material or fold profile, render matching replacement posters so the reduced-motion and no-JavaScript result stays coherent.

Set attributes on [data-metal-fold] before initialization.

All numeric options accept an explicit 0 where their range allows it. Inputs outside the listed ranges are clamped.

• Native buttons provide keyboard access to the pressure pulse and both finishes, with visible focus and announced toggle states.
• Touch presses and horizontal drags drive the same local pressure as a pointer. Vertical page scrolling remains available through touch-action: pan-y.
• Reduced motion displays the static sculpture poster and hides motion controls. Changing the preference while mounted disposes the canvas immediately; changing it back creates a fresh scene.
• No JavaScript, unavailable WebGL 2 or blocked dependencies leave the same descriptive, responsive poster visible. There is no mandatory information inside the canvas.
• WebGL context loss shows the poster until the browser restores the context.

The animated version requires a current browser with WebGL 2, ES modules and import maps. Current Chrome, Edge, Firefox and Safari support these features. WebGL availability depends on the device and its browser settings; the static poster is always the fallback.

A single displaced mesh renders in one draw call, with 200×100 subdivisions for a fine pointer or 120×64 for touch. The shader needs no image textures or external lighting maps. Rendering pauses outside the viewport and while the document is hidden.

Lower data-pixel-ratio first if the component is costly on your target device, then reduce mesh subdivisions in createMetalScene. The default caps are 2 for fine pointers and 1.5 for coarse pointers. Headless software rendering is useful for visual checks, but its frame rate is not a physical-phone performance measurement.

No GSAP plugins, Lenis, texture packs or environment-map services are required. Continuous pointer smoothing belongs to the render loop; GSAP does not animate the DOM.