Isolated staging site. Nothing here is linked from, or shared with, any published site.
A protective device sequence drawn as vector shapes rather than video. The whole animation is geometry and timing, so it stays sharp at any size, works offline, and the text inside it is real text rather than pixels.
One shared runtime file for the whole site, then one small data file per animation. The runtime is downloaded once and cached; each additional animation on any page of the site costs only its own data file.
| Component | Transferred | Scope |
|---|---|---|
| Animation runtime | 46 KB | Once per visitor, all pages |
| Animation data | 4 KB | Per animation |
| Subset typeface | 4 KB | Once per visitor |
| Embed helper | 1 KB | Once per visitor |
Markup on the page is a single element. The description in aria-label is what a
screen reader announces, and it is also what shows if the data file ever fails to load.
This one is deliberately placed below the fold. Its data file is only requested when it comes close to the viewport, so a long page carrying several animations does not download or run all of them at once.
That the animation never shows an empty first frame, that a background tab stays still and starts when it is actually looked at, that reduced-motion settings are respected by showing the finished diagram instead of the motion, that the below-the-fold animation is not fetched early, and that everything is served from this origin with no external requests.