Skeleton screens always felt like a guess to me: grey bars in roughly the right shape, then the real content pops in somewhere slightly different.

So I built Arrivo. While loading is true, an effect plays exactly where your content will land. When it turns false, the real elements are revealed in place.

Demo : https://tuancuongpham.github.io/arrivo/

Code: https://github.com/tuancuongpham/arrivo

npm i u/brottin/arrivo import { Reveal } from '@brottin/arrivo'; import { halftone } from '@brottin/arrivo/effects'; <Reveal effect={halftone} loading={isLoading}> <ArticleCard post={post} /> </Reveal>

How it works:

Your content stays in the DOM, hidden with visibility , so nothing shifts when it lands.

Each wrapper gets one canvas overlay. Text lines are measured with Range rects and images are read from the page, so the effect draws the real shape of your content instead of a guess.

An effect is two draw functions, idle() and reveal(p) .…