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).