The Animated Web Report 2026.

1. 01

   The median live demo is 718 KB without video, but one in ten is larger than 5.2 MB.

2. 02

   21.2% of demos (91) ship a video file, and video is 44.1% of the bytes in those demos.

3. 03

   58.3% of demos use three.js and 54.1% ship custom shaders, with a median of 4 GLSL programs in each demo that has any.

4. 04

   99.8% of demos include a prefers-reduced-motion rule, but only 61.5% also offer a pause control for motion.

5. 05

   WebGL demos have a median size of 715 KB, while canvas demos have a median size of 4.1 MB, so the heaviest group is not the one built on 3D.

Limits

• Demo size is the weight of a demo folder, not the weight of a production site. Frame sequences and unused files count in full, and a visitor never downloads all of them on first load.
• Scripts loaded from a CDN (many demos load GSAP and Lenis this way) are not counted in demo size.
• A static scan cannot tell whether a feature works. A page that mentions prefers-reduced-motion may handle it in only one section, and a pause control may be hidden.
• The sample is the AnimatedWebs catalog. It is not a sample of the whole web.

Cross-check: for 417 of 429 demos our size is within 2 KB of the figure on the template card. The card counts every file except video, so it also includes QA screenshots and notes that visitors do not download.

All 429 demos: median 718 KB, 75th percentile 1.5 MB, 90th percentile 5.2 MB, largest 21.8 MB. Including video, the median is 729 KB and the 90th percentile is 6.4 MB. The code alone (HTML, CSS and JavaScript) has a median of 50 KB.

By demo technology

This scan shows that canvas demos are larger than WebGL demos. It does not say why, and we have not tested a cause.

By category

Categories with at least 8 demos. Smaller samples are in the data files.

Left out for small samples: Web3 (4), Editorial (3), Nonprofit (3).

Video and images

91 demos (21.2%) ship a video file. 91 include mp4 and 7 include webm. In those demos video is 44.1% of all bytes, and their median size with video is 4.0 MB. Image files: webp in 38.5% of demos, jpg in 25.4%, png in 7.7%, avif in 0.5%.

264 demos (61.5%) have both. Free templates are a small group (26 demos), with a pause control in 11.5% of them. Mobile breakpoints at 760px or narrower appear in 59.9% of demos.

Pause control by category

232 demos have custom shaders, with 1,460 GLSL programs in total (one per main function found) and a median of 4 per demo. Lazy loading splits into the loading attribute (28.9%) and IntersectionObserver (63.9%).

• Set a size budget before you pick an effect

  Half of the demos we scanned are under 718 KB without video, and three in four are under 1.5 MB. If your page is past 5.2 MB, you are in the heaviest tenth of ours, so look at images, frame sequences and video first.

• Treat video as the biggest line in the budget

  Video is 44.1% of the bytes in the demos that ship it. Of the 91 demos with video, 91 include mp4 and 7 include webm. Keep clips short, always set a poster image, and do not autoplay a long clip on a phone.

• Write a reduced-motion rule, then test it

  Our scan found the string prefers-reduced-motion in 99.8% of demos. A string is not proof that it works, so turn on the setting in your operating system and check that nothing keeps moving.

• Give visitors a pause control

  Only 61.5% of demos have one. Visitors who do not use the reduced-motion setting still benefit from a visible way to stop motion, and it takes a few lines of code.

• Plan for a phone from the start

  59.9% of demos have a breakpoint at 760px or narrower. Lazy loading appears in 66.4%, through the loading attribute or an IntersectionObserver. Load the heavy scene only when it nears the screen.

Quote the figures with attribution and a link to this page.

The Animated Web Report 2026 was last regenerated on October 28, 2026. Add the date you read it when you quote a figure, because the catalog grows.