---
title: "Custom Reduced Motion"
description: "Essence Ghost theme honors prefers-reduced-motion with no setup. The page intro is skipped, shaders show one still frame and film grain stays static."
url: "https://www.priority.vision/docs/essence/custom-reduced-motion"
scope: theme
appliesTo: [Essence]
lastUpdated: 2026-10-01
---

# 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.

## Documentation Index
> Fetch the complete documentation index at: https://www.priority.vision/docs/essence/llms.txt
> Use this file to discover all available pages before exploring further.