The Pixelated Reveal Card brings a bold, digital-inspired transition effect to your Framer projects. When triggered, the card uses a grid of square pixels that appear in random order, covering the surface before smoothly revealing the alternate content.
Interactive Behavior
On desktop: reveal triggers on hover enter and revert on hover leave.
On mobile: toggle reveal with a tap.
The transition feels crisp, playful, and modern — no fades or blurs, just a clean pixel swap.
Customizable Controls
First Content / Second Content: Add any layer, text, image, or component.
Grid Size: Choose how many pixels (default 7×7, adjustable 2–20).
Pixel Color: Match your brand style.
Animation Duration: Control how fast the transition runs (default 0.3s).
Aspect Ratio: Set flexible dimensions (1:1, 16:9, etc.).
Background / Border / Radius: Style the card to fit seamlessly into your design.
Trigger Mode: Auto-detect, hover, or tap.
Use Cases
Product reveal cards
Portfolio galleries
Interactive hero sections
Any creative swap between two visual states
Responsive & Lightweight
Works across screen sizes with aspect-ratio support.
Runs efficiently with randomized staggered animations.
Add a pixel-perfect interactive twist to your site — your users will love the playful reveal effect.
Avesh Mishra
