Blog · October 31, 2026 · 4 min read

What 429 animated demos taught us

We scanned all 429 live demos in our catalog and measured them from their own code. The median demo is 718 KB without video, but one in ten is bigger than 5.2 MB. Video is the biggest line in the budget, nearly every demo has a reduced-motion rule, and only 61.5% give visitors a pause button. These numbers describe our catalog, not the whole web, and a static scan shows that code is present, not that it works.

By the AnimatedWebs team

This is the short version of the Animated Web Report 2026, written for people who build these pages. The catalog has 1,576 templates, and 429 of them have a live demo. We scanned every demo folder: file sizes, plus pattern checks on each demo's own HTML, CSS and JavaScript. The full tables and the downloadable data are in the report.

Most demos are small, a few are enormous

Without video, the median demo folder is 718 KB. Three in four are under 1.5 MB, and nine in ten are under 5.2 MB. The largest is 21.8 MB without video and 25.3 MB with it, and the smallest is 11 KB.

That spread is the lesson. A page is not heavy because it is animated. It is heavy because of a few decisions about images, frame sequences and video, and those decisions are easy to see once you list them. One caution: this is the size of a demo folder, not what a visitor downloads from a production site.

Video is the budget

21.2% of demos (91) ship a video file, and in those demos video is 44.1% of the bytes. Every one of them includes an mp4, and 7 also include a webm. The median demo that ships video is 4.0 MB.

The video-hero group makes it plain. Its median is 501 KB without video and 4.9 MB with it. The page itself is nearly free, and the clip is the page. So the advice writes itself: keep clips short, always set a poster image, and do not autoplay a long clip on a phone.

WebGL is not the heavy part

58.3% of demos use three.js and 54.1% ship custom shaders: 1,460 GLSL programs in all, with a median of 4 in each demo that has any. You might expect 3D to be the heaviest group. It is not. The median WebGL demo is 715 KB, while the median canvas demo is 4.1 MB.

The reason is where the bytes sit. A shader is a few kilobytes of text, and a scene built from code costs almost nothing to send. We did not measure why, but the likely cause is that canvas demos play back image sequences and sprite sheets, which count in full toward a folder's size. The 53 canvas demos have no three.js at all, and their p90 is 10.5 MB. If your budget is tight, procedural geometry and a shader beat a folder of frames.

GSAP appears in 27.5% of demos (118). Among images, 38.5% of demos ship webp, 25.4% jpg, 7.7% png and 0.5% avif, so the modern format is common but far from universal.

Accessibility is where the gap is

428 of 429 demos (99.8%) contain a prefers-reduced-motion rule. It is a text match, so it proves the rule exists and says nothing about whether it works. Turn the setting on in your operating system and check that nothing keeps moving.

A pause control is rarer: 61.5% (264). That leaves about 38.5% with no visible way to stop the motion. People who never touch a system setting still get tired of a moving page, and a pause button takes a few lines of code.

Phones and loading

59.9% of demos have a breakpoint at 760 pixels or narrower, which means about two in five have no narrow layout we can detect. Lazy loading shows up in 66.4%: 28.9% through the loading attribute and 63.9% through an IntersectionObserver, and some use both. Loading the heavy scene only when it nears the screen is the cheapest win on this list.

What these numbers cannot tell you

• The sample is our catalog, 429 demos, not the web. Do not read these as web-wide shares.
• The checks are static. They find code, not behavior, and they cannot see frame rate or what a visitor actually downloads.
• Sizes count folders on disk, using 1 KB as 1,024 bytes, the same as the sizes on our template cards.

What to take from it

1. 1Set a size budget before choosing an effect. Past 5.2 MB you are in the heaviest tenth of our catalog, so ask whether the page is carrying frames it could draw.
2. 2Prefer procedural scenes to image sequences when both would look the same.
3. 3Treat a pause control as a requirement, not a nice-to-have.

Read the full report for every table, or download the aggregate data as JSON or CSV from that page. If you cite it, the citation is at the bottom of the report. For two of the techniques behind the WebGL numbers, see How we ray trace a diamond in a fragment shader and Take-apart 3D.