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.
- License 许可
- MIT
- 最近更新
- 2026-10-30
- Stars
- ★ 1
- Forks
- 0
01 前言 Front Matter
- od
- { "mode": "prototype", "craft": { "requires": [ "animation-discipline" ] }, "preview": { "type": "html", "entry": "index.html", "reload": "debounce-100" }, "platform": "web", "scenario": "design", "design_system": { "requires": false } }
- name
- webgl-pixel-reveal-gallery
- triggers
- [ "pixel reveal gallery", "webgl gallery" ]
- description
- 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.
02 资源文件 9
- 参考文档example.html13.4 KB
- 资产文件expedition/e1.jpg199.0 KB
- 资产文件expedition/e2.jpg142.6 KB
- 资产文件expedition/e3.jpg258.4 KB
- 资产文件expedition/e4.jpg162.7 KB
- 资产文件expedition/e5.jpg221.9 KB
- 资产文件expedition/e6.jpg224.2 KB
- 许可证LICENSE1.3 KB
- 参考文档open-design.json3.1 KB
03 SKILL.md 正文
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
webgl-pixel-reveal-gallery/
├── SKILL.md ← you're reading this
├── example.html ← the complete, working artifact (READ FIRST)
└── (assets, if any)
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).
04 同仓库更多 Skills
Beta Skill
Instruction-only fixture skill.
Alpha Skill
First fixture skill with a runnable demo.
Deck One
A small deck template fixture.
youtube-clipper
YouTube clip generation and editing with automated workflows — pull source video, slice highlights, add captions, and export.
writing-guidelines
Review docs/prose for Writing Guidelines compliance. Use when asked to "review my docs", "check writing style", "audit prose", "review docs voice and tone", or "check this page against the writing handbook".
wpds
WordPress Design System. Apply WordPress's official design tokens, typography, and component patterns to themes and sites.