Sixty-one of our 62 templates say they respect “reduce motion”. Fifteen keep moving anyway

The check everybody runs, and why it is wrong

If you want to know whether a template respects someone’s request for less motion, there is an obvious way to find out: open the file and search it for prefers-reduced-motion. That is the CSS media query the setting maps to, and its presence looks like the answer.

We ran that search across our own catalogue. Sixty-one of the 62 templates contain it. Sixty of them also call matchMedia from JavaScript, which is the part that matters for a scene drawn on a canvas, because a CSS rule cannot stop a drawing loop. On paper that is close to a clean sweep.

Then we opened all 62 in a browser with the setting actually turned on, waited five seconds, took a picture of the screen, waited another second and a half and took a second picture. If the two pictures are identical, nothing moved. Fifteen of the 62 were still moving — and every one of those fifteen is in the sixty-one that said they would stop. Fourteen of them carry both the CSS rule and the JavaScript check.

The declaration is not the behaviour. A template can honour the setting in its entrance animations, where it is easy, and keep its background scene running underneath, where it is not. Searching the file finds the first and tells you nothing about the second.

Why the question is “after five seconds”

Five seconds is not an arbitrary cut-off. It is the line drawn by WCAG success criterion 2.2.2, Pause, Stop, Hide, which is a Level A requirement — the lowest conformance tier, the one almost every accessibility policy adopts as a floor.

It applies to information that moves, blinks or scrolls, where the movement starts on its own, lasts more than five seconds, and sits alongside other content. Where all three are true, the page is required to give the reader a way to pause, stop or hide it. There is an exception for movement that is essential to the activity, which is doing real work on a site whose product is motion — but it is an exception you have to be able to argue, not a default.

So the measurement is deliberately shaped like the criterion. We are not asking whether a page animates on arrival. Entrance animation finishes, and nobody legislates against it. We are asking what the page is doing once the visitor has stopped scrolling and started reading — which is also, in plain terms, the moment at which motion stops being design and starts being interruption.

What 62 templates do when you stop touching them

The cleanest line in the table is the one nobody needs a measurement to act on: every one of the 18 conventional templates is completely still once it has loaded. Not quieter, not calmer — identical, pixel for pixel, between two screenshots. If what you want is a page that holds still while someone reads a case study, that half of the catalogue answers the question on its own.

Among the 44 interactive templates, three are also completely still when idle: Aperture, Nocturne and Formynex AI Solutions. All three are scroll-driven rather than ambient — the motion is something the reader causes by scrolling, and when they stop, it stops. That is a genuinely different design from a scene that runs whether anyone is watching or not, and it is invisible in a demo video, because a demo video is someone scrolling.

The remaining 41 keep moving. Twenty-six of them stop the moment the operating-system setting is switched on, which is the behaviour the setting exists for and is worth crediting. Fifteen do not.

The fifteen, and what they have in common

Naming them is more useful than counting them, so: Signal Facade and its Tower and Compact variants, Bot Palette Wall, Modular Tool City, Neural Citadel, Symbol Network, Living Alphabet Archive, Bauhaus Signal Deck, Infinite Discovery Chamber, Tool Vortex First Cut, Machine, Pathway, Axiom, and Aurora Video Hero.

Fourteen of the fifteen sit in the AI and technology categories — eight in AI & Technology, six in Technology — and they are the templates whose entire concept is an environment that exists independently of the reader: a city that builds itself, a wall of indicators that cycle, a generated interior you move through. The motion is not decoration applied to a page. It is the page. Switching it off does not produce a calmer version of the design; it produces an empty rectangle.

Aurora is the odd one out and the easiest to explain. It is a full-bleed looping video behind a headline. A looping video ignores a CSS media query by nature — it is not an animation, it is playback — and stopping it is a decision somebody has to write code to make. The template declares reduced-motion support for its typewriter headline, which does stop. The footage behind it keeps playing.

We are describing these as a finding, not an accusation. WCAG’s own exception for motion that is essential to the activity is exactly the argument most of these fifteen would make, and for several of them it is a good argument. The problem is not that they move. It is that a buyer searching the file for prefers-reduced-motion would conclude they stop.

What this should change about how you choose

The useful question is not “does this template support reduced motion”. Nearly everything says yes. The useful question is what the page is doing thirty seconds after it loads, while somebody reads the third paragraph of your about page.

• Open the demo, scroll to a section with real text in it, and then take your hands off the keyboard for half a minute. Whatever is still moving is what your visitors will be reading against, permanently.

• Turn on your own operating system’s reduce-motion setting and reload. On macOS it is in Accessibility, Display; on Windows, Accessibility, Visual effects; on iOS and Android, Accessibility, Motion. Then repeat the half-minute.

• Decide whether the motion that survives is the thing you are buying, or the thing that is in the way of the thing you are buying. For an agency showreel those are often the same answer. For a page whose job is to be read, they usually are not.

• If your audience includes people who get motion sickness or migraines, or you answer to a public-sector accessibility policy, treat the fifteen above as a shortlist to avoid rather than a risk to manage.

There is a version of this advice that says use less animation, and it is not what we are saying. Motion that a reader causes — the three scroll-driven templates above, and most of the 26 that stop when asked — carries almost none of this cost, because it ends when attention moves elsewhere. Ambient motion is the expensive kind, and it is expensive in proportion to how much reading the page expects.

Where this measurement stops

One browser engine, one desktop viewport, one run each. Two identical screenshots prove nothing repainted in that particular second and a half; they do not prove a page never moves again, and a slow cycle could in principle hide between two frames. The reverse error is not possible — if the pictures differ, something moved.

The measurement is binary on purpose. It records whether the screen changed, not how much, because a page with a gently breathing gradient and a page with a rotating 3D city both come back as “moving” and they are not remotely the same experience to sit in front of. Reading the fifteen names is more informative than any number we could have put next to them, which is why there is not one.

And none of this measures whether the motion is smooth, or what it costs a phone to run. Those are different questions, answered separately in what these templates do on a phone and what a template demo actually downloads. Stillness and weight are unrelated: Aperture and Nocturne are two of the three interactive templates that sit completely still, and they are also two of the three heaviest single documents in the catalogue.