The photo gallery reveals images one at a time

Every service page has a photo gallery at the bottom. The first image spans the full width of the grid. The rest sit two per row underneath. Each image is wrapped in a BlurReveal component with a staggered delay — the base delay plus the image index times one hundred milliseconds. The first image appears immediately. The second image fades in a tenth of a second later. The third a tenth after that. The whole gallery cascades from left to right, top to bottom, like cards being dealt. The gallery component takes three props — a photos array, an accent colour, and an optional base delay. It does not know which service page it is rendering for. The accent colour comes from the page above and controls a gradient overlay at the bottom of each image — a subtle tint that ties the photos to the service's colour identity. Cyan for audio. Emerald for production. Purple for software. The overlay is a pointer-events-none div with a linear gradient that goes from the accent colour at fifteen percent opacity to transparent. It sits on top of the image but lets clicks through. On hover, the image scales up five percent over half a second. The zoom is CSS-only — a transition on transform with a group-hover trigger. No JavaScript animation, no intersection observer, no scroll handler. Next.js Image handles the optimisation. The first photo renders at 800 pixels wide. The rest render at 400. AVIF and WebP conversion happens at build time. The entire gallery is a responsive CSS grid, a staggered reveal, a gradient overlay, and a hover zoom. About fifty lines of code for a component that appears on every service page.