Pixel Dissolve Reveal
A block-grid dissolve driven by a seeded shuffle, so it clears perfectly evenly.
- Category
- Animations
- Added
- 2026-09-20
- Deps
- none
- Updated
- 2026-09-20
This is a viberdy Pro component
The live preview, the props panel and the write-up are open to everyone. The full source, the AI prompt and CLI install are part of Pro.
Props
"use client";
import { useMemo, useState, type ReactNode } from "react";
export function PixelDissolveReveal({
from,
to,
revealed,
cols = 22,
rows = 14,
}: {
/** The panel that dissolves away. */
from: ReactNode;
/** The panel underneath. */
to: ReactNode;
/** 0-1. Drive from scroll, hover, state — whatever you like. */
revealed: number;
cols?: number;
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}About this animation
The obvious way to build a pixel dissolve is to give every cell a random threshold and clear it once progress passes that value. It looks fine in a screenshot and wrong in motion, because random values are not evenly distributed: clusters of low thresholds empty early while other regions linger, so the dissolve proceeds in blotches rather than uniformly. Shuffling the list of cell indices and using each cell's position in that order instead guarantees exactly one cell clears per step — the result still appears scattered, but the rate is perfectly even, which is what makes it read as a dissolve rather than as decay. Seeding the shuffle matters for two separate reasons: it keeps the server and client permutations identical, avoiding a real hydration mismatch, and it stops the pattern reshuffling on every re-render, which would make the dissolve jitter. Progress is a prop rather than internal state, so the same component works driven by scroll, by hover, or by a transition between routes.
Curator’s note
Built for viberdy 2.1. Shuffle-and-rank rather than random thresholds — the difference is a dissolve that clears evenly instead of in blotches.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
Flip Reveal Tiles
animationsA tile grid that flips on a diagonal wavefront to resolve into one image.
Perspective Grid Floor
backgroundsA tilted, endlessly scrolling grid floor that recedes toward the horizon.
Pointer Warp Dot Field
backgroundsA canvas dot grid that bulges and brightens away from the cursor.