Layout

Shuffle Grid

Four brand-colored tiles that continuously reshuffle using layout animation.

A grid that reshuffles itself sounds like a complex animation, but it's actually just layout on each tile. The layout prop enables FLIP animation: when a tile's position changes in the DOM, it animates from its old position to its new one. The key is stable key props.

#Step 1: Layout prop

A static 2x2 grid of colored tiles. No animation yet, just the visual structure.

tsx

Loading...

#Step 2: Auto shuffle

setInterval randomly reorders the array every 800ms. Without animation, tiles just snap to new positions.

tsx

Loading...

#Step 3: Motion layout

Adding layout to each motion.div enables FLIP animation. When the array reorders, tiles animate smoothly from their old grid position to the new one. The spring config (stiffness: 300, damping: 25) gives a snappy feel.

tsx

Loading...

#Configuration

Tune the animation.

tsx

Loading...

All Lab Entries