The animation is the cheap part: what 62 template demos actually download

What a file size is not

The number you are given about a template is the size of the file. The number your visitor pays is everything the browser has to fetch before the page is on screen. Those are different quantities, and one turns out to be a poor guide to the other — in both directions, by as much as a factor of ten.

So we stopped reading the files. Every one of the 62 demos on this site was opened in a real browser engine at a desktop viewport with an empty cache, and every request it made was recorded along with the bytes that came back. The pages are served compressed, so these are transfer figures: what crosses the connection, not what the file measures on disk. Where that distinction could change a conclusion, both numbers are given.

This is not a speed test. Bytes are not seconds. There is no frame rate and no performance score anywhere below, because judging how smooth the motion feels needs a range of real handsets, which we do not have. That number is absent rather than estimated.

A median of 240 KB

For scale: the HTTP Archive’s 2025 survey puts the median mobile home page at 2,559 KB, with images alone accounting for about 911 KB of it. Fifty-six of our 62 demos are under that median outright, and 44 of them are under 300 KB — roughly a tenth of a typical page. Whatever else animation costs, it is not paid in bytes.

The mean is 1,001 KB, four times the median, and that gap is the most useful thing in the table. Two demos carry 54% of all the bytes in the catalogue: Nebula at 24.65 MB and Nocturne at 8.34 MB. Averages across a catalogue like this describe nothing real. Only eight of the 62 are over 1 MB at all.

The conventional templates are the heavy ones

This was the result we did not expect. The 44 interactive templates have a median weight of 140 KB. The 18 conventional ones — no scroll choreography, no WebGL — have a median of 256 KB. The lightest template in the classic tier weighs more than the median template in the animated one.

The reason is visible as soon as the bytes are sorted by what they are. Animation is instructions: a keyframe, an easing curve and a transform cost a line of text each. A photograph costs what a photograph costs, and a conventional business template is mostly photographs.

Scripts and stylesheets together — everything that makes the motion happen — come to under 3 MB across all 62 templates. Media and images come to nearly 32 MB. If you are choosing between the animated catalogue and the conventional one, weight is not the axis that separates them, and if it were, it would point the other way.

Nothing waits for the scroll

Each demo was then scrolled from top to bottom and measured again. Not one of the 62 fetched a single additional byte. Everything a page needs arrives before the visitor has moved, and 17 of the 62 arrive in exactly one request — one document, no fonts, no libraries, nothing else at all.

That cuts two ways and it is worth being clear about both. In favour: the arrival figure is the whole cost, so there are no surprises further down the page and the template will behave the same on a connection that drops after the first second. Against: nothing is deferred, so a heavy template spends all of its weight before showing anything, and none of these templates has lazy loading you could benefit from without adding it.

This is the part that reading the source cannot give you. Markup tells you a tag is present; only running the page tells you whether the browser actually went and fetched it. Two of the measurements below exist only because of that difference.

Three documents Google stops reading

Google documents a hard limit on how much of a file it will fetch: Googlebot crawls the first 2 MB of a supported file type, and once that cutoff is reached it stops the fetch and sends only the part it already has for indexing consideration. Not a penalty, not a ranking factor — it simply stops reading.

Three of our entry documents are over that line, and they are over it whether you measure the compressed bytes on the wire or the file on disk:

All three are single-file templates that encode their imagery into the document itself, which is what makes them self-contained and also what makes them enormous. Two more are close enough to be worth naming: Skyline at 1.09 MB and Infinite Discovery Chamber at 1.04 MB, the latter because it carries an entire copy of Three.js inside the file.

This costs us nothing, and it is worth saying why rather than leaving it implied: the demos on this site are served with a noindex header. They exist to be opened and scrolled, not to be found in a search result, so Google giving up halfway through one has no consequence for anybody. The limit becomes your problem at the moment you ship that file as your own indexable page — and then the consequence is specific. Whatever text sits below the cutoff is not read, so it is not indexed, and the page you launched is partly invisible for reasons that have nothing to do with how it looks.

It is also not a redesign to fix. The weight is inlined media; moving it out into ordinary image files beside the document brings the document under the limit and changes nothing on screen. If you are considering one of those three, that is the conversation to have before launch rather than after, and the pre-launch checks cover the rest of it.

What the page fetches from somebody else

"Single-file HTML" suggests a page that depends on nothing. Forty-four of the 62 make at least one request to a host we do not control. Google Fonts accounts for most of it — 38 demos load typefaces from fonts.googleapis.com and fonts.gstatic.com, at an average of 71 KB each — and every one of the 18 conventional templates is in that group. A further 20 pull a JavaScript library: 15 from cdnjs, four from jsdelivr, one from unpkg, averaging 144 KB of script and ranging from 46 KB to 296 KB.

That is the other direction in which a file size misleads. Signal Facade Compact is a 12 KB document that downloads 124 KB, because 119 KB of it is a library fetched at run time. Neither number is wrong; they are answers to different questions, and only one of them is the question your visitor is asking.

Self-hosting a font or a library is a small change — download the file, put it beside the page, change one URL — but it is the kind of thing worth knowing you will want to do before you commit, not after. Each template’s detail page states which libraries it pulls from a CDN, in its Format line.

Which brings us to the two measurements that only existed because the page was run rather than read. Twenty templates declared a CDN dependency and twenty fetch a library host — but two of them were the wrong two, and this measurement is what found it. Deck declared none and makes no external reference anywhere in its markup; once the scene starts it dynamically imports Three.js from unpkg, 258 KB of script. Infinite Discovery Chamber declared a CDN and makes exactly one request in total: its copy of Three.js is inlined verbatim, on purpose, with a note in the source explaining that it was done so the page works with no internet connection — and the only CDN address in the file sits inside that note, which is what every previous reading had matched. Both Format lines were corrected on the day this was published.

Which of these numbers should decide anything

Weight predicts the cost of arriving. It does not predict whether the experience is good, and it says nothing at all about whether the motion is smooth — that is a question about one thread in the browser and the hardware under it, and it is treated properly in the guide on animation and SEO and in what these templates do on a phone.

Most of the weight in the heavy ones is not the template at all. Aurora is an 11 KB document and a 2.9 MB video, and the video is 99.8% of its arrival weight. It is also sample content: replace it with your own footage and the number becomes whatever your footage weighs. Nexora makes 125 requests for 4.75 MB because its hero is an image sequence — again, pictures you would swap. Where the weight genuinely is the design, as in a generated 3D scene, it does not come down, and that is a real difference between the two kinds of heavy.

So there are two numbers worth asking any template seller for, and both are checkable on a demo in a browser’s network panel without anybody’s permission. How large is the single document you are going to ship — because the 2 MB line is real and it is not a matter of taste. And does the page fetch anything from a host you do not control, because that is a dependency you have inherited rather than chosen.

Where these figures stop: one browser engine, one desktop viewport, one run each, cache empty, no network or CPU throttling. A narrower viewport can change which assets a page decides to request, so a phone would not produce this table exactly. And none of it is a measurement of real visitors — this site has no analytics property, so no field data exists to compare against, which is a limitation worth stating rather than hiding behind the precision of the byte counts.