Pixel Dissolve Reveal
A block-grid dissolve driven by a seeded shuffle, so it clears perfectly evenly.
DOM + CSS0 deps1 file · 2 KB TSX
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
// ---------------------------------------------------------------
}Details
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.
