Grid Transition

About this Component

Grid Transition is a no-code animation component that reveals images through a dynamic pixel grid transition.The image is progressively uncovered using animated square pixels, creating a clean, digital-style reveal that feels both technical and elegant.

Customizable Properties

Image

Image – Upload or replace the image to be revealed

Pixel Style

Pixel Color – Color of the pixel grid used during the revealPixel Size – Size of each pixel square (in px)

Animation

Direction – Reveal direction (Top, Bottom, Left, Right)Duration – Total length of the reveal animationDelay – Delay before the animation starts

Interaction

Play on Appear – Automatically plays when the component enters the viewportPlay on Hover – Triggers the animation on hover instead of on load

Use cases

Hero sections · Image reveals · Editorial layouts · Portfolios · Experimental UI · Subtle visual accents