Bloom: Nested Squares Animated Loader

Bloom: Nested Squares Animated Loader: 🌸

I built this loader as a shadcn/ui-style component, twenty-five concentric square outlines that scale and rotate in an endless bloom, staggered by per-index delay so each ring ripples out and back like a slow-motion wave. It's built with React, TypeScript, Tailwind, and Framer Motion, no npm magic, just clean components and a Vite setup. The borders use gradient border-image with a violet/purple palette, and it's generated using for that "dreamy" aesthetic.

The real fun? You can see each ring take its turn, not all at once. The staggered delays let the animation feel organic, not robotic. You can even watch how the rotation and scale sync up, with each ring slightly offset to avoid visual clashing. Mouse hover? It doesn't do anything, because I didn't want to overcomplicate it. Just pure motion. Pure visual rhythm.

The tricky part? Getting the staggered delays to work without causing frame jitter. I was using useDelayedUnmount with delay props on each ring, but the browser was reflowing too aggressively, causing the animation to stutter. I fixed it by wrapping each ring in a motion.div with animate and variants that use transition with easeOutQuint + duration tuned to 1.2s per ring. Then I used useLayoutEffect to manually trigger the next ring's animate after the previous one completed, a tiny bit of manual timing to smooth out the rhythm. No libraries, no hacks, just timing + React's state management.

🔥 😊