webgl-pixel-reveal-gallery

Create a scroll-reactive masonry gallery with WebGL pixel-grid dissolve effects and GSAP animations.

93.2k|10.8k|Updated Apr 28, 2026

Search Tags:#Three.js #gallery #scroll #GSAP #Animation #masonry #webGL

One-click install

npx skills add https://github.com/nexu-io/open-design --skill webgl-pixel-reveal-gallery

Or copy as Structured Prompt for Agent▼

Please help me install this Agent Skill.
Skill: webgl-pixel-reveal-gallery
Source: https://github.com/nexu-io/open-design/tree/main/plugins/_official/examples/webgl-pixel-reveal-gallery
Command: npx skills add https://github.com/nexu-io/open-design --skill webgl-pixel-reveal-gallery

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires three, gsap.

What problem does it solve?

This Skill addresses the complexity of implementing high-performance, scroll-triggered WebGL visual effects in web design, allowing creators to build immersive galleries without writing boilerplate Three.js or GSAP integration code.

Core Features & Use Cases

WebGL Pixel Reveal: Automatically applies a pixel/grid dissolve effect to images as they enter the viewport.
Interactive Flip Transitions: Implements click-to-fullscreen animations using GSAP Flip for smooth UI transitions.
Use Case: Ideal for portfolio sites, digital archives, or high-end product showcases where visual storytelling and scroll-based engagement are critical.

Quick Start

Generate a scroll-reactive masonry gallery using the webgl-pixel-reveal-gallery skill for the current project.

Frequently Asked Questions about webgl-pixel-reveal-gallery

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I implement the pixel reveal effect?▼

The pixel reveal effect is handled by a custom ShaderMaterial in Three.js that uses a fragment shader to calculate grid-based dissolve progress based on the scroll position.

Does this gallery support responsive layouts?▼

Yes, the gallery uses CSS column-count for the masonry grid and dynamically updates the WebGL canvas and plane positions on window resize to maintain alignment with DOM elements.

Can I use my own images in the gallery?▼

Yes, you can replace the image URLs in the DATA array within the script. Ensure images are hosted on a domain that supports CORS if you encounter texture loading issues.

What libraries are required for this gallery?▼

The gallery requires Three.js for WebGL rendering and GSAP (with ScrollTrigger, SplitText, and Flip plugins) for animation and layout transitions.