Toggle & reduced motion

The whole engine can be switched off at runtime. The preference is persisted to localStorage and survives reloads.

import { toggleAnimations,
         enableReducedMotion,
         disableReducedMotion } from 'gclass-anims'

toggleAnimations()        // flips on/off, persists + reloads
enableReducedMotion()     // hard override: animations OFF
disableReducedMotion()    // clears the override

Precedence

forcedReducedenableReducedMotion() wins over everything

stored choiceAn explicit toggle always beats the OS setting

no choiceDefaults to ON unless prefers-reduced-motion: reduce

Per-element opt-out

While the OS requests reduced motion, any element carrying .reduced is left completely un-animated - its spawn, loop, click and scroll behaviours all skip. Elements without .reduced keep animating.

html

<div class="spawn-up">animates even under reduce-motion</div>
<div class="spawn-up reduced">skipped under reduce-motion</div>

All three toggles reload the page after persisting so the running engine tears down cleanly.