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!
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!
