webgl-depth-gallery

Generate a scroll-reactive 3D image gallery using Three.js and WebGL shaders.

93.2k|10.8k|Updated Apr 28, 2026

Search Tags:#prototype #Three.js #gallery #3D #scroll #Animation #webGL

One-click install

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

Or copy as Structured Prompt for Agent▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill addresses the complexity of implementing high-performance, scroll-reactive 3D visual components in web interfaces, providing a pre-configured, GPU-accelerated gallery that avoids common sandbox limitations.

Core Features & Use Cases

WebGL 3D Rendering: Utilizes Three.js for Z-stacked image transitions and shader-based mood backgrounds.
Interactive Motion: Implements velocity-based breath effects, cursor trails, and scroll-linked parallax animations.
Use Case: Ideal for high-end editorial portfolios or product showcases where visual impact and smooth, hardware-accelerated transitions are required.

Quick Start

Use the webgl-depth-gallery skill to generate a 3D image gallery with the provided assets.

Frequently Asked Questions about webgl-depth-gallery

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

FAQPage Schema

How do I implement a scroll-reactive 3D gallery?▼

Use the webgl-depth-gallery skill to initialize a Three.js scene that maps scroll position to camera Z-depth, triggering crossfade transitions and shader-based background updates.

What framework is used for the 3D rendering?▼

The gallery is built using Three.js, leveraging WebGL2 for high-performance rendering of textures, shaders, and geometry within a self-contained HTML artifact.

Can I customize the mood backgrounds?▼

Yes, the background mood is controlled by the `bgSetMoodBlend` function, which interpolates between defined color palettes based on the current scroll index and velocity.

Does this gallery support mobile touch interactions?▼

The gallery uses standard pointer events and wheel listeners, ensuring compatibility with touch-based scrolling and pointer-driven cursor trail effects on modern web browsers.