Wireframe

Build a fullscreen preloader called Wireframe.

Inside a 7% inset, draw a card on white with a faint one-pixel border, a generous corner radius and overflow hidden. Fill it with a miniature interface in grey placeholder blocks at 15% of the foreground colour: a header row with a round avatar, two stacked lines of different widths beside it and a pill button pushed to the right; then a paragraph of three full-width lines at 100%, 92% and 64%; then a row of three equal cards filling the remaining height.

The layout should mirror a page you would actually ship. A skeleton that matches nothing is just a grey rectangle, and the reason this pattern works is that the eye starts parsing the structure before the content lands.

Give each block a 2.6s ease-in-out opacity cycle between 0.42 and 0.92, staggered 110ms apart in reading order, so the card breathes unevenly rather than pulsing as one slab.

Over the top, lay a highlight: an element 38% of the card's width, full height, filled with a horizontal gradient from transparent to near-opaque white and back. Sweep it with translateX from -140% to 240% and a -14 degree skew over 2.4s on cubic-bezier(0.4, 0, 0.2, 1). It reads not because it is bright but because it passes over grey.

Loop forever. Under prefers-reduced-motion, hold the blocks at rest and stop the sweep.