Menu

Individual skill

animaxxing-webgl

0upvotes

Add GSAP-driven WebGL to a site without restyling it, on one shared OGL renderer and canvas per document. Image planes track each img for a hover lens, scroll-velocity wave, wipe, glitch, dissolve, pixelation, and ripple. Framed views draw in an element's box: a camera flight through a 3D spiral of images, GPU particles morphing between shapes, a liquid image, and liquid-metal drops that melt into a word or pour down a page. GSAP tweens shader uniforms. The real img, or a poster img for a view, stays the accessible content and the fallback when WebGL is missing, the context is lost, an image lacks CORS, or motion is reduced. Use for WebGL image effects, shader hover, 3D scroll flights, particle morphs, liquid hover, uniform tweens, or keeping a canvas alive across routes. Pair with the matching GSAP framework skill for lifecycle timing. Not for glTF models, physics, DOM-only effects (use animaxxing), branding, or GSAP API questions.

skills/animaxxing-webgl/SKILL.md

Read pinned source

Source commit 8ddf542ec239b018ba43ce0878842205c529b1c6

What was checked

Matches the observed repository HEAD
Yes
Scanner rules are current
Yes
Repository scan complete
No
Skill scan complete
No
Observed behavior
Instructions only
Last checked
Nov 11, 2026

These are observations at the recorded commit, not a guarantee of safety. Review the source before running it.

Install this skill

Choose an agent in your Stack or copy a command below. Commands fetch the pinned commit and copy only this skill directory. Existing destinations are refused. Copying a command does not install anything.

An install command is unavailable: current rules, complete repository and skill scans, an eligible behavior level and a permitted license are required.

Repository context

Repository stars (not skill ratings)
27
Repository last updated
Oct 28, 2026
License
MIT

Observed agent integration: No specific integration evidence. Standard SKILL.md installation does not imply verified compatibility.

Files and excerpt

File metadata and permitted, redacted excerpts come from the recorded scan. Source links are pinned to that commit.

Browse files
Read excerpt

# Animaxxing WebGL

Vanilla TypeScript recipes that let GSAP drive WebGL. A plane draws each image in its exact box; a framed view draws a scene, particles, or a liquid surface in an element's box. GSAP tweens their shader uniforms. The page stays the DOM: the real `<img>`, or a view's poster `<img>`, keeps its alt text, layout, and links, and shows itself whenever WebGL cannot draw.

Load the matching `gsap-<framework>` skill first (`gsap-vanilla` for plain sites), installing it if missing. It owns **mount → initial state → intro → settled → outro → end state → unmount**, initialization, navigation, recovery, and cleanup timing. Its `references/transition-archetypes.md`, **Persistent WebGL canvas**, covers keeping the canvas alive across routes. DOM-only effects live in the `animaxxing` skill; this skill never requires it.

## Renderer: OGL

The recipes use [OGL](https://github.com/oframe/ogl) 1.x. Measured with esbuild for the classes these recipes use (renderer, program, mesh, plane geometry, texture, scene), minified and gzipped: OGL 1.0.11 is 14.5 KB, three.js r186 is 133 KB, because three's `WebGLRenderer` pulls in most of the library. The image recipes need 2D planes in pixel space with custom shaders; the framed views add a camera, a render target, and point geometry, with no lights, materials, or loaders. OGL's `Program`, `Mesh`, `Plane`, `Camera`, `RenderTarget`, and `Texture` map one to one onto that. It does not handle context loss, so the stage does: it rebuilds its renderer and every layer on restore.

If the project already ships three.js, port the recipes rather than add OGL: `ShaderMaterial` for `Program` (same uniform objects), `PlaneGeometry` for `Plane`, `Texture` for `Texture`, a `Scene` and any camera with the recipes' pixel-space vertex shader, and `dispose()` calls for the deletes. three.js restores lost contexts itself, so drop the rebuild and keep the DOM fallback.

## Setup and adaptation
Back to top