webgl-depth-gallery
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.
Source facts
- Repository
- nexu-io/open-design
- Last source activity
- August 18, 2026 at 07:09
- Detected SKILL.md language
- English
- Stars
- 104,766
- Forks
- 11,960
Install options
The review-first prompt is selected by default. You can switch to a direct command or download a local copy.
Review the source files
Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.
File Explorer
9 filesShowing SKILL.md
SKILL.md
Source instructions · Read-only preview- name
- webgl-depth-gallery
- description
- 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.
- triggers
- ["depth gallery","webgl gallery"]
- od
- {"mode":"prototype","platform":"web","scenario":"design","preview":{"type":"html","entry":"index.html","reload":"debounce-100"},"design_system":{"requires":false},"craft":{"requires":["animation-discipline"]}}
# Depth 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
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
```
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).
View on GitHub