Introduction
Add dynamic, pixel-based reveal animations to your Framer projects with the Pixel Grid Reveal component. Designed to create eye-catching entrances and transitions, this component lets you transform elements into a grid of animated pixels which is ideal for images, videos, slideshows, and retro-style reveals.
With full control over speed, layout, and animation, this component acts as a mask on top of your existing layer giving you the option to reveal pretty much anything.
The versatility of it, makes it perfect for any personal project, framer template, or even large scale commercial projects.
Don't have the component yet? Purchase it here.
Getting Started
Click on the remix link you received from Lemon Squeezy which will open the project in Framer. Grab the component from the canvas by copying and pasting it into your own project.
Be sure to select the component that's nested within the demo, as shown in the image below.
Component Features
Border Radius
Adjust the rounding of the overall container for softer or sharper edges.
Pixel Size
Set the size of each animated pixel unit in the grid layout.
Pixel Roundness
Control how square or circular each individual pixel appears during the animation.
Animation Random or Directional
Toggle randomization to vary the timing of each pixel for a more organic or glitch-style reveal. If toggled off, controls for directional disappearance of the pixels will show up (Top to Bottom, Bottom to Top, Left to Right, Right to Left).
Animation Speed
Customize how quickly the pixels animate into view using a smooth slider.
Start Delay
Set a delay before the animation begins once the component becomes visible.
Play On Appear
Enable or disable automatic playback when the component enters the viewport.
Visibility Threshold
Define how much of the component must be visible before the animation triggers.
Color
Select the color of the pixels to match your brand or section theme.
