About Pixel Reveal Engine
What's inside
Pixel Reveal is not a CSS fade or a Framer Motion opacity trick. It's a grid-rendered reveal engine built on Framer's animation primitives, with every cell individually timed using distance-based delay math. The result is a controlled, directional uncovering effect that feels hand-crafted every time it runs.
Patterns
Ten animation patterns ship out of the box. Top Left, Top Right, Bottom Left, Bottom Right, Center Out, Left to Right, Right to Left, Top to Bottom, Bottom to Top, and Random.
Features
10 directional animation patterns with distance-based delay engine
Color fill mode for solid pixel overlays on any background
Image fill mode using container queries to perfectly tile across the grid
Adjustable grid density via independent column and row controls
Animation speed control from instant snap to slow cinematic crawl
InView trigger, fires once when the component enters the viewport
Sub-pixel gap fix baked in, no rendering artifacts on any screen
Cover, contain, and stretch image fit modes
Zero layout shift, absolutely positioned overlay with pointer-events none
Property Controls
Every property is exposed in the Framer panel. Fill type, pixel color, image source, image fit, column count, row count, animation speed, and pattern are all switchable without touching code. Drop it, configure it, done.
How to use
Place Pixel Reveal as an absolute layer over any frame, image, card, or section. Set your fill type to Color or Image. Pick your pattern and speed. It triggers automatically on scroll into view. Works on hero sections, product images, loading screens, and full-page backgrounds.
Built for
Creative studios, portfolio sites, product launches, editorial Framer templates, and any project where a default opacity fade would be an embarrassment.
Need help?
Drop us a message on X at @vizualogy, we're always around. Built by Vizualogy Studio. We design and build premium Framer components and experiences for founders and brands who care about the details.