A main container holds and positions the images at the center of the page using flexbox align center and justify content center.

An additional flexbox arranges a gallery of images in a row with a small gap between each item.

JavaScript listens for mousemove events on the gallery. As the cursor moves, JavaScript calculates how close each image is to the mouse position and assigns a flex value based on that proximity. Images closer to the cursor expand more, while images further away shrink back to their base size. This creates a smooth, wave-like effect that follows the cursor across the gallery.

Instead of toggling CSS classes, flex values are interpolated frame-by-frame using requestAnimationFrame. Each frame, the current flex value moves a fraction of the way toward its target, creating a fluid gliding motion rather than an instant snap. When the cursor leaves the gallery, all images smoothly return to equal sizes.

CSS media queries remove images from the DOM on smaller screen sizes using the :nth-child pseudo-class. For example, on tablets, we can remove the last three images using :nth-child(10), :nth-child(9), and :nth-child(8). We continue this technique down to mobile, where only four images are shown. Selecting via :nth-child gives us the flexibility to dynamically adjust content without having to target specific image IDs.