# Metal Fold > A sculpted metal sheet that dents under your pointer, bending brushed silver and copper reflections across its folds. Canonical: https://gsapvault.com/effects/metal-fold Live demo: https://gsapvault.com/demos/metal-fold/index.html | Property | Value | |----------|-------| | Type | effect | | Tier | paid | | Price | £10 | | Difficulty | advanced | | Plugins | Core GSAP only | | Techniques | webgl-shader | | Uses Lenis | No | ## Lighthouse, as measured Google Lighthouse on the demo, 15 September 2026. A measurement of the demo as shipped, not a promise for your page. | Category | Score | |----------|-------| | Accessibility | 100 | | Best practices | 100 | No performance score is published: it depends on the deployment (server compression, caching, CDN, connection and device) rather than on the code, so measure it where it will live. ## Overview A wide, pleated metal sheet suspended on a charcoal stage. Move across the surface to bend its reflections, then press and drag to deepen a local dent. Bright studio bands travel around the folds as the material settles back into shape. Silver and copper finishes blend smoothly. The composition turns upright on a phone, where touch drives the same pressure response. GSAP shapes the press and release, blends the finish, and owns responsive cleanup; Three.js renders the mesh and material. ## Features - A displaced metal surface with normals that follow every fold and dent - Travelling pointer and touch pressure with a controlled 650ms release - Brushed silver and copper finishes with reflected studio-light bands - A portrait composition for phones and an optional subtle idle pressure drift - Keyboard-operated pressure pulse and native material buttons - Static sculpture posters for reduced motion, no JavaScript and unavailable WebGL - Documented strength, fold depth, settle duration and pixel-ratio controls ## Use Cases - Material-led portfolio introductions and product microsites - Art direction for jewellery, metalwork and industrial design - Interactive editorial artwork with a tactile surface response ## Vibe-Code Ready Setup This effect includes `START-HERE-AI.md`, a product-specific copy-paste setup prompt for Cursor, Claude Code, ChatGPT, GitHub Copilot, Windsurf, and other coding assistants. It tells the assistant to inspect the existing stack, integrate the supplied files, preserve the design, scope selectors, retain accessibility and responsive behaviour, add framework-appropriate GSAP cleanup, and report what it tested. [How AI-assisted setup works](https://gsapvault.com/vibe-coding) ## How It Works A Three.js surface responds to a moving pressure field. Its changing shape redirects a procedural studio environment, producing the bright bands and darker folds of brushed metal without an external texture or environment map. GSAP controls the pressure envelope and material transition while the render loop smooths pointer movement. ## Documentation How this effect works and how it goes into a page. The reference you use once you own the files (worked examples, events, the programmatic API, the class list) ships with the download. ### Quick Start **1. Copy `assets/` into your project and add the stylesheet and pre-paint probe to ``.** The probe keeps the static fallback from flashing before WebGL starts. Keep the timeout so an unavailable dependency restores the poster. _Code snippet omitted: it ships with the download._ **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. _Code snippet omitted: it ships with the download._ **3. Add the dependencies before ``.** The import map must precede any import of Three.js. Adjust both asset paths when moving the files. _Code snippet omitted: it ships with the download._ 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`. ### Using It With Your Own Design **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 ``. 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. ### Options Set attributes on `[data-metal-fold]` before initialization. | Attribute | Range / values | Default | Meaning | |---|---|---|---| | `data-strength` | `0`–`1.5` | `1` | Maximum depth of pointer and touch pressure; `0` gives a static shape with finish controls. | | `data-bend` | `0.4`–`1.5` | `1` | Depth of the permanent pleats. | | `data-ambient` | `0`–`0.5` | `0.16` | Subtle travelling pressure after 2.5 seconds without input. Set `0` to disable. | | `data-ease` | `0.02`–`1` | `0.12` | Pointer follow fraction at 60Hz, normalized for the elapsed frame time. | | `data-settle` | `0.1`–`2` | `0.65` | Pressure release duration in seconds. | | `data-material` | `silver`, `copper` | `silver` | Initial metal finish. | | `data-pixel-ratio` | `0.5`–`2` | `2` fine / `1.5` coarse | Render resolution cap; coarse pointers always cap at `1.5`. | All numeric options accept an explicit `0` where their range allows it. Inputs outside the listed ranges are clamped. ### Accessibility - 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. ### Browser Support 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. ### Performance 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. ### Dependencies | Dependency | Role | |---|---| | GSAP 3.12+ (demo pinned to GSAP 3.15.0) | Press/release envelope, silver/copper blend, shared frame clock, matchMedia and teardown. | | Three.js (demo pinned to the import-map URL above) | Geometry, GPU shader material, camera and rendering. | 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. ## What You Get - `index.html`: working demo page - `assets/script.js`: commented, readable source - `assets/style.css`: effect styles - `README.md`: full documentation with examples and framework integration notes - `START-HERE-AI.md`: product-specific copy-paste prompt for AI-assisted setup - `LICENSE.txt`: standard license terms - Lifetime updates: re-download anytime from your library ## Get the Code This is a premium effect. The standard license costs £10 one-time and covers unlimited personal and commercial projects with no attribution required for our code. Bundled third-party assets retain their own licences and attribution requirements. The only restrictions: no redistribution of the code itself and no competing effect libraries. - [Buy Metal Fold](https://gsapvault.com/effects/metal-fold) - [The Vault (£99 one-time, best value): every collection in the Vault library, plus future items added to those collections](https://gsapvault.com/effects) --- From [GSAP Vault](https://gsapvault.com): production-ready GSAP animation effects. Full catalog for agents: https://gsapvault.com/llms-full.txt