webgl-pixel-reveal-gallery
Lets your agent create a scroll-reactive image gallery. Images appear gradually and can be viewed full-screen. Ideal for interactive visual presentations.
What it does
Creates a gallery of images that animates as you scroll. Images appear gradually from pixels or grids as they enter the screen, with a text heading that splits into letters and the option to view the image in full screen when clicked.
When to use it
- ✓To create a visually engaging portfolio page.
- ✓When developing a website to showcase photos or art.
- ✓To add a modern and dynamic effect to a website.
Example of what to ask your AI
“Create an image gallery with a pixel reveal effect on scroll, animated heading, and image zoom.”
Want more? Open the sections below.
How to use
The easiest way: copy the message below and paste it into Claude, ChatGPT, Cursor or any AI. It reads the skill and follows the instructions.
Skill link
Ready-to-paste message
How it works
It uses animation libraries (Three.js and GSAP) to create the visual effect. When you scroll the page, images load and appear with a pixel dissolve animation. Clicking an image expands it.
Installation
Easiest way: copy the skill link and paste it into Claude, ChatGPT or Cursor asking it to follow the instructions.
In the terminal (Claude Code, Codex, Cursor), in your project folder:
npx skills add nexu-io/open-design --skill webgl-pixel-reveal-galleryOr download just the file:
curl -L https://raw.githubusercontent.com/nexu-io/open-design/main/plugins/_official/examples/webgl-pixel-reveal-gallery/SKILL.md -o SKILL.mdTechnical content (original SKILL.md)
Original text by the author, straight from 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
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).
FAQ
What is a 'masonry gallery'?
It's a type of layout where items (in this case, images) are arranged to fill the available space efficiently, like puzzle pieces, without leaving large gaps.
What are Three.js and GSAP?
These are tools (libraries) that help developers create complex animations and graphics on the web, like the visual effects in this gallery.
What does 'click-to-fullscreen Flip' mean?
It means that when you click on an image, it expands to fill the entire screen (fullscreen) in an animated way (Flip).
Details
Original description by the author
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.
repo: nexu-io/open-design
Popularity
- GitHub stars
- 101k
- Ranking position
- #602
- License
- Apache-2.0
- Updated
- 10/16/2026
Comments
- …
More skills from this repository
sample-plugin
Makes your agent create a metadata file for tests. It helps ensure code works correctly in different situations.
nexu-io/open-design
aster-atelier
Helps your agent create an artistic website with a classic look. It uses elegant imagery, blue skies, and serif fonts for a cinematic feel.
nexu-io/open-design
audio-jingle
Makes your agent generate audio like jingles and sound effects. It can create music and voices, saving the result as an audio file.
nexu-io/open-design
blog-post
Helps your agent write long articles or blog posts. It includes space for images, quotes, and author information.
nexu-io/open-design
Similar skills
ios-icon-gen
Lets your agent generate icons for iOS apps. It uses Apple symbols or icons from other sources to create the correct files.
affaan-m/ECC
algorithmic-art
Helps your agent create art using code, generating unique images. It's useful when you want original computer-generated art.
anthropics/skills
canvas-design
Helps your agent create beautiful visual art in files. It's useful when you ask for a poster, art, or any static design.
anthropics/skills