Block Cascade

Twenty-four blocks arranged in a three-column grid run a deterministic 13-step choreography. Each block slides one or two columns left or right on its own delayed beat, then the whole grid resets from a collapsed center stack. The step table was transcribed from the original pure-CSS if() implementation, so every hop matches the source - but the timeline is driven by a tiny interval so it runs in any browser.

block-cascade-preview

Loading preview...

Why it helps: Stepped, staggered motion turns a plain grid into something that feels mechanically alive. Per-block cubic-bezier easing with varied delays gives the cascade a hand-tuned rhythm that flat keyframes can't easily express.

Also good to know:

-The choreography is a fixed 24-block table - not configurable per block
-Runs a re-render every step (trivial at 24 nodes, but it is JS-driven)
-No reduced-motion fallback for the step interval

Source

components/live/BlockCascade.tsx

// Loading source...

Usage

example.tsx

import { BlockCascade } from "@/components/live/BlockCascade";

<BlockCascade
  className="w-full aspect-video"
/>
import { BlockCascade } from "@/components/live/BlockCascade";

<BlockCascade
  className="w-full aspect-video"
/>

Props

className-

string

Additional CSS classes.

stepMs800

number

Milliseconds per choreography step.