Flip Reveal Tiles
A tile grid that flips on a diagonal wavefront to resolve into one image.
- 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 { useState } from "react";
export function FlipRevealTiles({
image,
cols = 7,
rows = 4,
stagger = 55,
axis = "y",
}: {
/** The image revealed when the tiles flip. */
image: string;
cols?: number;
rows?: number;
/** ms of delay added per diagonal step. */
stagger?: number;
/** Which way each tile turns. */
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}About this animation
Two choices decide whether a flip grid looks composed or mechanical. The first is where the stagger comes from: deriving the delay from row plus column produces a wavefront that sweeps diagonally across the grid, whereas the obvious flat-index version marches strictly left to right, row by row, and reads as a progress indicator. The diagonal costs exactly the same arithmetic and looks deliberate. The second is what the back faces show. Giving each tile its own copy of the image produces a wall of identical thumbnails; sizing the background to the full grid and offsetting it by the tile's row and column makes each face a slice, so the completed flip resolves into one picture. The browser detail that trips people up is that the back face needs `backface-visibility: hidden` AND the flipper needs `transform-style: preserve-3d` — with only one of the two, the reversed face bleeds through the front. Only transform animates, so the whole grid stays on the compositor.
Curator’s note
Built for viberdy 2.1. Diagonal delay and sliced backgrounds — the two things that separate this from a grid of identical flipping thumbnails.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
FLIP Grid Reorder
animationsA filterable grid whose tiles travel to their new positions instead of snapping.
Pixel Dissolve Reveal
animationsA block-grid dissolve driven by a seeded shuffle, so it clears perfectly evenly.