WebGL Depth Gallery
FreeCreate a scroll-reactive 3D image gallery with ease.
Free · Opens the source repo
What WebGL Depth Gallery does
The WebGL Depth Gallery skill allows developers and designers to create an interactive 3D image gallery using Three.js. This skill produces a self-contained index.html file that features Z-stacked images that crossfade over mood backgrounds as users scroll. The gallery includes a glowing cursor trail and an editorial color card that displays CMYK, RGB, HEX, and PMS values, enhancing the visual experience. This makes it an ideal tool for those looking to create visually engaging web experiences without extensive coding knowledge.
The skill leverages WebGL capabilities to provide a smooth, GPU-accelerated rendering experience. Open Design ensures that the gallery runs in a cross-origin-isolated iframe, allowing the full GPU and scroll pipeline to operate without needing workarounds. This means that developers can focus on design and functionality rather than troubleshooting rendering issues, making it a powerful addition to any web project.
Whether you are a web developer looking to enhance your portfolio or a designer wanting to showcase your work in an interactive format, the WebGL Depth Gallery skill simplifies the process of creating stunning 3D galleries. The included example file serves as a practical reference, enabling users to quickly understand how to implement and customize the gallery to fit their needs. With its emphasis on ease of use and visual appeal, this skill is a valuable resource for anyone interested in web design and development.
When to use it
Use this skill when you need to create an engaging, scroll-reactive image gallery for a web project.
When not to use it
This skill may not be suitable for projects requiring extensive customization or non-Three.js frameworks.
What you can build with it
Showcasing Photography
Use the gallery to present a series of photographs in an engaging way, enhancing user interaction.
Portfolio Development
Web developers can use this skill to create an impressive portfolio piece that demonstrates their design capabilities.
Interactive Art Display
Artists can utilize the gallery to create a dynamic display of their artwork, providing viewers with a unique experience.
How to install WebGL Depth Gallery
View source1. Install with the skills CLI
npx skills add nexu-io/open-design/webgl-depth-gallery --agent claude-code2. Or install it manually
Download the skill folder and drop it into ~/.claude/skills/ for all projects, or .claude/skills/ to scope it to one repo. Restart Claude Code so it picks up the new skill.
Anthropic's agentic coding CLI, and the reference implementation of Agent Skills. Drop a skill folder into ~/.claude/skills and Claude Code loads it automatically whenever a task matches the skill's description. Claude Code docs
Inside SKILL.md
Written by nexu-ioDepth Gallery
Produce a single self-contained index.html — A scroll-reactive 3D image gallery in Three.js: Z-stacked images crossfade over per-image mood backgrounds with velocity breath, a glowing cursor trail and an editorial CMYK/RGB/HEX/PMS color card.
Why this is a powered artifact
Open Design 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
webgl-depth-gallery/
├── SKILL.md ← you're reading this
├── example.html ← the complete, working artifact (READ FIRST)
└── (assets, if any)
Credits / attribution
- effect: Houmahani Kane / Codrops (MIT)
- imagery: Lummi.ai
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).
Frequently asked questions about WebGL Depth Gallery
Similar skills
Implicit CAD
Create and render implicit CAD models in JavaScript.
CAD Generation and Inspection
Create and validate parametric CAD models from natural language.
CLI for FreeCAD
Harness FreeCAD's capabilities through a comprehensive CLI.
3D & CAD Matrix
A comprehensive CLI tool for 3D modeling and CAD workflows.
Blender CLI Interface
Edit 3D scenes efficiently from the command line.
OpenSCAD
Create and render 3D models with ease.