Agent skill · design visual · nexu-io
webgl-pixel-reveal-gallery
A scroll-reactive masonry gallery (Three.js + GSAP) where each image develops from a pixel/grid dissolve on viewport entry, with a split-text heading and click-to-fullscreen Flip.
Why this skill is useful
Provides a specific implementation of a WebGL gallery using Three.js and GSAP that the AI wouldn't reliably generate on its own.
What it needs
Requires gsap, three installed locally. About 1k tokens when loaded. Last updated 2026-08-07. 84,236 stars on the source repository.
What this skill does
Pixel Reveal Gallery Produce a single self-contained index.html — A scroll-reactive masonry gallery (Three.js + GSAP) where each image develops from a pixel/grid dissolve on viewport entry, with a split-text heading and click-to-fullscreen Flip. Why this is a powered artifact OpenDesign detects getContext('webgl2') / heavy WebGL and renders this file in powered preview (a cross-origin-isolated iframe). The full GPU + scroll pipeline runs; no opaque-sandbox workarounds are needed. Resource map Credits / attribution effect: J0SUKE / Codrops (MIT) imagery: Original (AI-generated) Keep any bundled LICENSE and on-screen credit intact. Replace imagery only with license-clean assets (original / AI, Lummi.ai, Unsplash/Pexels — never scraped imagery).
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills nexu-io/webgl-pixel-reveal-gallery