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.
A static 2x2 grid of colored tiles. No animation yet, just the visual structure.
Loading...
setInterval randomly reorders the array every 800ms. Without animation, tiles just snap to new positions.
Loading...
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.
Loading...
Tune the animation.
Loading...