Pixel Dissolve Transition

Installation

npx kinetic-ui-cli@latest add pixel-dissolve-transition

How It Works

This component generates an absolute-positioned CSS Grid overlay matching the dimensions of the screen. Inside the grid, we render an array of square <motion.div> "pixels".

When triggered, we animate the scale and opacity of these pixels. By pre-calculating a randomized array of stagger delays (Math.random()), each block animates at a slightly different time.

Once the blocks have fully covered the screen (creating a solid color), we instantly swap the underlying page content, and then the blocks reverse their animation to scatter away.

Usage Guide

1. Import the Component

Import the component into your React or Next.js page:

import { PixelDissolveTransition } from "@/components/creative/pixel-dissolve-transition";

2. Implementation Example

Render the component and customize its behavior by passing props:

import { PixelDissolveTransition } from "@/components/creative/pixel-dissolve-transition";

export default function Example() {
  return (
    <div className="w-full flex items-center justify-center p-8">
      <PixelDissolveTransition
        isTriggered{true}
        onAnimationComplete{/* value */}
        gridSize{10}
      >
        <div>Content goes here</div>
      </PixelDissolveTransition>
    </div>
  );
}