Web & Frontendlow risk
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.
nexu-io/open-design·plugins/_official/examples/webgl-pixel-reveal-gallery/SKILL.md
61/ 100推荐值
导入这个 Skill
选择你的 coding agent，复制项目级或个人级安装命令。
导入当前项目.agents/skills/webgl-pixel-reveal-gallery
npx skills add https://github.com/nexu-io/open-design/tree/7533db3f4342d09b27368fa5d907ebd3cdb93b75/plugins/_official/examples/webgl-pixel-reveal-gallery -a codex -y导入个人环境~/.agents/skills/webgl-pixel-reveal-gallery
npx skills add https://github.com/nexu-io/open-design/tree/7533db3f4342d09b27368fa5d907ebd3cdb93b75/plugins/_official/examples/webgl-pixel-reveal-gallery -a codex -g -y导入当前项目.claude/skills/webgl-pixel-reveal-gallery
npx skills add https://github.com/nexu-io/open-design/tree/7533db3f4342d09b27368fa5d907ebd3cdb93b75/plugins/_official/examples/webgl-pixel-reveal-gallery -a claude-code -y导入个人环境~/.claude/skills/webgl-pixel-reveal-gallery
npx skills add https://github.com/nexu-io/open-design/tree/7533db3f4342d09b27368fa5d907ebd3cdb93b75/plugins/_official/examples/webgl-pixel-reveal-gallery -a claude-code -g -y导入当前项目.agents/skills/webgl-pixel-reveal-gallery
npx skills add https://github.com/nexu-io/open-design/tree/7533db3f4342d09b27368fa5d907ebd3cdb93b75/plugins/_official/examples/webgl-pixel-reveal-gallery -a github-copilot -y导入个人环境~/.copilot/skills/webgl-pixel-reveal-gallery
npx skills add https://github.com/nexu-io/open-design/tree/7533db3f4342d09b27368fa5d907ebd3cdb93b75/plugins/_official/examples/webgl-pixel-reveal-gallery -a github-copilot -g -y导入当前项目.agents/skills/webgl-pixel-reveal-gallery
npx skills add https://github.com/nexu-io/open-design/tree/7533db3f4342d09b27368fa5d907ebd3cdb93b75/plugins/_official/examples/webgl-pixel-reveal-gallery -a cursor -y导入个人环境~/.cursor/skills/webgl-pixel-reveal-gallery
npx skills add https://github.com/nexu-io/open-design/tree/7533db3f4342d09b27368fa5d907ebd3cdb93b75/plugins/_official/examples/webgl-pixel-reveal-gallery -a cursor -g -y导入当前项目.agents/skills/webgl-pixel-reveal-gallery
npx skills add https://github.com/nexu-io/open-design/tree/7533db3f4342d09b27368fa5d907ebd3cdb93b75/plugins/_official/examples/webgl-pixel-reveal-gallery -a gemini-cli -y导入个人环境~/.gemini/skills/webgl-pixel-reveal-gallery
npx skills add https://github.com/nexu-io/open-design/tree/7533db3f4342d09b27368fa5d907ebd3cdb93b75/plugins/_official/examples/webgl-pixel-reveal-gallery -a gemini-cli -g -yNative Gemini CLI
gemini skills install https://github.com/nexu-io/open-design.git --scope workspace --path plugins/_official/examples/webgl-pixel-reveal-gallery⚠ 安装命令使用开源 skills CLI。执行前请检查来源、脚本和权限。
Skill 指令
在 GitHub 查看原始文件 ↗# 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
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-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).