Pro
GSAP
Square Translate
Scroll
Overview
Image Pixel Reveal transforms image entrances into a sequence of animated pixel fragments. As users scroll, scattered square blocks give way to the underlying image, progressively revealing the full visual instead of displaying it through a conventional fade or slide.
The effect combines pixel-style masking with subtle parallax movement, adding depth as images enter and move through the viewport. In a multi-image gallery, each visual reveals as scrolling progresses, creating a natural rhythm across the collection.
Designed for creative portfolios, photography websites, editorial galleries, and campaign pages, Image Pixel Reveal makes scrolling part of the visual storytelling without compromising the sharpness of the final images.
Usage Code
page
import ImagePixelReveal from '@/components/effects/image-pixel-reveal' const page = () => { return ( <> <ImagePixelReveal imageSrc="https://pub-8abee449136941f5b0a1cd2c014534e9.r2.dev/vault-listing-images/assets-images/portal-carousel/crimson-drift.jpg" className="h-screen w-full" /> </> )} export default pageExample Production Use Case
Consider a creative studio showcasing a collection of photography and digital artwork. Instead of displaying a static gallery, the website introduces each image through an animated pixel reveal as visitors scroll.
The images gradually emerge from fragmented square blocks, with subtle parallax movement creating additional depth. A staggered gallery layout allows different visuals to reveal at different points, maintaining interest as visitors explore the collection.
The result is a more distinctive portfolio experience that gives individual images their own entrance without interrupting the natural scrolling flow.
Best Used For
- Portfolio highlights and case-study showcases.
- Campaign visuals, editorial spreads, and launch imagery.
- Build visual rhythm across image-led layouts.
- Fashion, lifestyle, visual identity, and photography-led pages.
Not For
Image Pixel Reveal is less suitable for content-heavy pages, dashboards, or interfaces where images need to be visible immediately. The fragmented entrance adds a visual step that may slow down information discovery.
Avoid applying it to every image on a long page. The effect works best when used selectively, allowing important visuals to stand out without making scrolling repetitive.
Performance Budget
Keep the pixel reveal lightweight, particularly when several images enter the viewport together. Use optimised image assets, efficient masking, and restrained parallax movement to avoid unnecessary rendering work.
Limit animation updates to relevant visible elements and avoid expensive layout calculations during scrolling. On lower-powered devices, reduce pixel complexity or simplify the transition to preserve smooth scrolling.
Accessibility and Mobile
Provide meaningful alt text and keep essential information independent of the animation. Images should remain understandable if the reveal does not run or is interrupted.
On mobile, reduce pixel density and parallax distance where necessary. Respect prefers-reduced-motion by displaying the complete image immediately or using a minimal fade.
Common Mistakes
- Using too many fragments.
- Overpowering parallax movements
- Poor scroll synchronisation
- Delayed image loading
- Applying the effect everywhere
Changelog
v1.0.0
Oct 26, 2026Initial release
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
gridSize | number | 24 | Size of each pixel cell, in px. |
edgeHeight | number | 0.3 | How wide the scattered pixel edge is, from 0 (clean line) to 1. |
direction | string | down | Which way the reveal travels across the image. |
parallax | number | 0.5 | Demo only: strength of the scroll parallax on each image. 0 turns it off. |
scrub | boolean | false | Tie the reveal to scroll position. Off plays it once on enter. |
duration | number | 1.4 | Length of the reveal in seconds when not scrubbing. |
