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, data-mouse-radius, data-strength, data-relaxation, data-displacement, data-aberration, data-velocity-decay) | 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 components. 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
- Hero 1 — the wordmark is a grid-deform target; it re-rasterizes when the color scheme changes (
rasuke:color-schemeevent) so it stays visible in both modes. - Services 2 — the aside frame is a
.hover-deformtarget. When a row swaps the crossfaded still, the module also swaps the lens's sampled image. - 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 and fallbacks
- Three.js is the npm package (0.184) and is bundled by Next.js; there is no classic vendor script in this package.
- WebGL canvases sit inside the section container (or a designed full-bleed child). Never inject a canvas with inline script.
file-protocol.jsdetects local-file restrictions andios-webkit.jsdetects iOS WebKit; in those cases effects keep the static DOM image.- Reduced-motion users keep the static fallback already present in the markup.
- WebGL textures need a normal browser origin — always preview over HTTP (see Local Preview).