Reduced Motion
Essence respects the CSS prefers-reduced-motion: reduce media query. When a visitor has reduced motion enabled in their operating system or browser, the theme simplifies or disables animations.
What changes
| Feature | Normal | Reduced motion |
|---|---|---|
| Page intro | Cinematic staged reveal (~3s) | Skipped — content shown immediately |
| Shader backgrounds | Animated presets | Single still frame (animation paused) |
| Shader film grain | Animated or static per setting | Always static (animated noise disabled) |
| Liquid glass reveal | Fade transition on load | Liquid layer shown without crossfade delay |
| PVS navigation | Fade + 12px shift (~0.6s) | Instant swap (PVS built-in behavior) |
Reduced motion does not change your theme settings. It only affects how Essence renders for visitors who have opted out of motion in their OS.
Shader behavior
When reduced motion is active:
- Shader presets render one frame and stop the animation loop
- The background appears at full opacity immediately (no scale-in intro)
- Shader noise animated modes fall back to static grain
Visitors still see the chosen preset and colors — only continuous motion is removed.
Page intro
The cinematic page intro (hero text mask, card stagger, background scale-in) is fully skipped. All layout and content elements are revealed at once when the page loads.
Liquid glass cards
On liquid card surfaces, the glass-to-liquid crossfade is simplified. The liquid layer appears without the staged opacity transition.
Enable reduced motion
macOS
System Settings → Accessibility → Display → Reduce motion
Windows
Settings → Accessibility → Visual effects → Animation effects (off)
iOS / iPadOS
Settings → Accessibility → Motion → Reduce Motion
Android
Varies by device — look for Remove animations in accessibility settings.
Browser overrides
- Firefox:
about:config→ui.prefersReducedMotion→1 - Chrome DevTools: Rendering tab → Emulate CSS media feature
prefers-reduced-motion: reduce
For publishers
You do not need to configure anything in Ghost. Reduced motion is automatic.
If your audience includes motion-sensitive readers, avoid relying on animation alone to convey information. Essence keeps all text and navigation accessible with reduced motion enabled.