Mahjong Grid Loading

A tile-based loading animation.

Mahjong Preloader is a premium loading screen component built around the visual language of a Mahjong game viewed from directly above. A tight grid of tiles sits on a dark background — and one by one, a single tile lifts off the surface, glides down its column, and knocks the tile at the bottom row out of place before settling in. The cycle repeats, giving your loading state a calm, purposeful rhythm. The component is built entirely with Framer Motion and requires no external dependencies. It works as a full-screen overlay loader, an inline section transition, or a decorative loading indicator. Every visual detail is controllable — tile color, background, glow, grid dimensions, easing, duration, and stagger — so it adapts cleanly to any design system or brand palette. Drop it into your Framer project, connect a progress prop to your actual load state, or let it loop freely as a standalone animation.

A tile-based loading animation.