Three.js

Selected Rasuke sections mount a WebGL canvas with the Three.js npm package (0.184). Official docs: threejs.org

Where it is used

Effect	Mount	Source
Grid deformation	Elements with the grid-deform markup / data attributes (`data-grid-size`, …)	`grid-deform.js` → `grid-deform/GridDeform.js` (+ `rasterize.js`, `shaders.js`)
Hover deformation (lens / ripple)	`.hover-deform` targets (`data-lens-radius`, `data-lens-strength`, `data-ripple-*`, …)	`hover-deform.js` → `hover-deform/HoverDeform.js` (+ `shaders.js`)
Showcase 2 WebGL carousel skin	`project-showcase-2` stage — per-pixel seam / channel-split transition over the DOM slides	`showcase-2-gl.js` (imported by `showcase-2.js`)

Each module looks for its host element and returns immediately when the section is not on the page. Instances are retrievable with getGridDeform(el) / getHoverDeform(el). GLSL lives next to the class files in shaders.js — treat those as implementation details, not something to paste into HTML. Text elements are rasterized to textures by grid-deform/rasterize.js and stay gated behind their reveal classes until the reveal finishes.

Consumers inside the template

Services 2 (services-2.js): the aside frame is a .hover-deform target. When a row swaps the crossfaded still, the module also swaps the lens's sampled image — otherwise the lens would keep magnifying the first service's photo.
Showcase 2: the DOM keeps every slide (captions, links, alt text); the canvas only re-paints the photographs so the transition can drag pixels and split colour channels. If WebGL textures are unavailable, the DOM photographs stay.

Notes

In the ThemeForest HTML package, Three.js ships as a classic vendor script (assets/js/vendors/three.min.js) together with the app bundle; in dev it is the npm package, re-exported as window.THREE.
WebGL canvases sit inside the section .container (or a designed full-bleed child inside it). Do not inject a canvas with inline script.
Fallbacks: file-protocol.js detects file:// + Firefox (local textures are insecure there) and iOS WebKit is detected by ios-webkit.js; in those cases effects keep the static DOM image. Reduced-motion users keep a static fallback already present in the markup.
WebGL textures need a normal browser origin. Prefer a local HTTP server; on file:// use Chrome/Edge. See Local Preview.