Mosaic
No library Beginner
A 3×3 grid of colorful tiles that pulse in and out with a ripple delay, creating a vibrant mosaic shimmer effect. Pure CSS, no dependencies.
A 3×3 grid of colorful tiles that pulse in and out with a ripple delay, creating a vibrant mosaic shimmer effect. Pure CSS, no dependencies.
Goal: Create a "Mosaic" loader animation.
Visual behavior: A 3×3 grid of small squares (each ~12×12px with 4px gaps, 3px border-radius), each a different color: rose, orange, yellow, green, blue, purple, pink, teal, and rose again. They pulse between 15% opacity / 75% scale and 100% opacity / 100% scale. The delay ripples outward from the corners through the center, creating a diamond/wave ripple pattern across the grid.
Technique: A CSS Grid container (repeat(3, 1fr)) holds nine span elements. Each span uses the same scale + opacity keyframe (~1.6s, ease-in-out) with staggered animation-delay creating the ripple pattern. Corner cells (delay 0ms), edge midpoints (delay 100ms), center (delay 400ms).
Accessibility: aria-label on the wrapper. Animations disabled under prefers-reduced-motion; tiles shown at full opacity.
My stack: {{USER_STACK}}
My styling: {{USER_STYLING}}
My constraints: {{USER_CONSTRAINTS}}
Return a single self-contained component. Do not introduce dependencies beyond what I've listed.
Paste into Claude, ChatGPT, or Cursor. Edit YOUR_STACK /
YOUR_STYLING / YOUR_CONSTRAINTS before sending.