The component is designed for flexibility and full customization through its properties.
You can set a "delay," which essentially controls the speed of the image's reveal effect.
Additionally, you can define the "grid size," controlling the size of the rectangles. The higher the number, the smaller the rectangles. If the grid size is greater than 0, the component will display the color specified in the grid color, obscuring the image on the canvas. To see the image, set the grid size to 0, but remember to change it back to a higher value when you publish the site for the animation to work properly.
You can also toggle between "Layer on View" or "On Appear" triggers. Layer on View sparks the reveal when the image enters the viewport, while On Appear instantaneously triggers it on page load.
Lastly, the Grid color should align with the website's background color.
Step / 01
Remix the project.
Step / 02
Copy the component to your website.
Step / 03
Adjust the component properties to fit your needs.