Staggered Wipe Transition Component
I couldn't find a transition that felt right for my projects, so I built this. It creates a "reveal" effect by breaking the screen into a grid of tiles that disappear in a timed sequence, making the transition feel more like a physical curtain or a wall breaking apart.
What it Does
Instead of everything just fading in at once, this component lets you control how the screen clears to show your content:
Movement Patterns: You can have the tiles sweep away from the side or ripple out from the center.
Automatic Cleanup: The component completely removes itself once the animation is finished so it doesn't slow down your site or interfere with buttons and links.
Look and Feel
Backgrounds: You can use a solid color, a smooth gradient, or even a single image that "shatters" as the tiles move away.
Animation Styles: Choose between tiles sliding off-screen, shrinking away, or simply dissolving.
Speed and Rhythm: It includes settings for different "vibes"—from quick and snappy to smooth and bouncy. You can also adjust the delay to make the tiles move as one solid block or as individual pieces.
Let me know what you think
https://www.framer.com/marketplace/components/staggeredwipe/