Skeleton Shimmer
X-ray · layers
Parameters
How this effect works
A skeleton screen is a promise: "content is coming, and it will be this shape." The blocks are plain gray divs sized like the avatar, title and text they stand in for. The sheen is one wide linear gradient — transparent, a soft white band, transparent again — laid over each block with background-size: 250%, so there's room for the band to travel. Every frame we move its background-position from one side to the other; the browser never repaints the gradient itself, just shifts it.
The stagger layer offsets each card's clock by a fixed delay, so the light appears to travel across the page, card by card — one shared wave washing over the interface instead of everything blinking in lockstep. That reads as "the system is working through it", which is exactly the feeling a loading state should sell.