Pixel Reveal Gallery
FreeCreate stunning scroll-reactive image galleries with ease.
Free · Opens the source repo
What Pixel Reveal Gallery does
The Pixel Reveal Gallery is a self-contained web artifact designed for developers and designers looking to implement visually engaging image galleries on their websites. Built using Three.js and GSAP, this gallery features a unique scroll-reactive masonry layout that animates images into view through a pixel/grid dissolve effect, enhancing user engagement and providing a modern aesthetic. The gallery also includes a split-text heading and a click-to-fullscreen flip feature, making it versatile for various applications, from portfolios to promotional sites.
This skill is particularly useful for those who want to create interactive and visually appealing presentations of images without having to dive deep into complex WebGL programming. The provided example.html serves as a complete working artifact, allowing users to see the implementation in action and customize it as needed. The gallery is optimized for performance, leveraging the full capabilities of the GPU and scroll pipeline, ensuring smooth animations and transitions.
The Pixel Reveal Gallery is ideal for designers who want to showcase their work in an innovative format or developers looking to enhance their web projects with interactive elements. The skill is designed to be easy to integrate into existing projects, making it a valuable addition to any web developer's toolkit. By utilizing this gallery, users can elevate the visual experience of their websites and engage visitors more effectively.
When to use it
Use this skill when you need to create a visually engaging gallery for a website that reacts to user scrolling and enhances the viewing experience.
When not to use it
This skill may not be suitable for projects requiring extensive customization beyond the provided functionality or for those needing a simple static image display.
What you can build with it
Portfolio Showcase
Use the Pixel Reveal Gallery to display your design or photography portfolio, making your work stand out with engaging animations.
Product Promotions
Integrate the gallery into e-commerce sites to showcase products in an interactive way, enhancing user experience and engagement.
Event Highlights
Create an interactive gallery for events or exhibitions, allowing users to explore images dynamically as they scroll.
How to install Pixel Reveal Gallery
View source1. Install with the skills CLI
npx skills add nexu-io/open-design/webgl-pixel-reveal-gallery --agent claude-code2. Or install it manually
Download the skill folder and drop it into ~/.claude/skills/ for all projects, or .claude/skills/ to scope it to one repo. Restart Claude Code so it picks up the new skill.
Anthropic's agentic coding CLI, and the reference implementation of Agent Skills. Drop a skill folder into ~/.claude/skills and Claude Code loads it automatically whenever a task matches the skill's description. Claude Code docs
Inside SKILL.md
Written by nexu-ioPixel 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).
Frequently asked questions about Pixel Reveal Gallery
Similar skills
Penpot UI/UX Design
Create professional UI/UX designs in Penpot with ease.
UX Theming
Streamline your VS Code theming process with best practices.
Wireframe
Create low-fidelity UI wireframes in SVG format.
Waitlist Page
Create a clean, focused pre-launch landing page.
Hallmark
Design skill for creating unique, structured UIs.
UI Styling
Create beautiful, accessible user interfaces effortlessly.