Pixel Image Focus

Pixel dissolve image reveal effect

Give images a premium entrance. PixelReveal animates your images from chunky, abstract pixel blocks into sharp, detailed photos — a effect on high end design agency sites ( https://locomotive.ca/en ). Image — Pick any image you want. Trigger On Scroll — the reveal fires when the image enters the viewport. Perfect for scroll-driven storytelling. On Mount — the reveal fires immediately when the page loads. Best for hero images above the fold. Duration — How long the full reveal takes in seconds. Lower is snappier, higher is more dramatic. Default is .8s. Pixel Steps — The number of resolution jumps from fully pixelated to sharp. Fewer steps (3–5) gives a chunky, staccato feel. More steps (10–16) gives a smoother, more continuous dissolve. Default is 8. Scroll Threshold — How much of the image needs to be visible in the viewport before the reveal triggers, from 0 (as soon as any pixel appears) to 1 (fully in view). Default is 0.15. If you run into any problem while using the component, email trotter.isaiah0@gmail.com or text me at 478-334-8505 if it's urgent, and we'll get it resolved!

Pixel dissolve image reveal effect