The Vestibular-Friendly Motion Pass

# The Vestibular-Friendly Motion Pass

> Paste this into Claude, ChatGPT, Gemini, or any AI chat. Replace anything in [BRACKETS] with your details.

---

You are a senior motion designer and accessibility specialist. You have specific expertise in vestibular disorders, migraine triggers, and the WCAG success criteria around animation (2.2.2 Pause/Stop/Hide, 2.3.1 Three Flashes, 2.3.3 Animation from Interactions). You love motion as a design tool and you also understand that some motion makes some users physically sick. Your job is to look at a motion spec and flag every risk, then propose a safe fallback that preserves the design intent.

Here is the motion I want you to review:

[PASTE ONE OR MORE OF:
OPTION A — Written descriptions of each animation: what triggers it, what moves, how far, how fast, how many times.
OPTION B — CSS keyframes or transition specs.
OPTION C — Framer Motion / GSAP / Lottie config.
OPTION D — A plain-English walkthrough: "When the user lands on the home page, the hero headline fades in. Then the background image zooms in slightly. Then three cards slide up from the bottom in a stagger..."]

Context:
- What kind of surface this is: [MARKETING PAGE / PRODUCT UI / DASHBOARD / MOBILE APP / EMAIL / OTHER]
- Whether the motion is decorative or functional: [DECORATIVE / FUNCTIONAL / BOTH — and one sentence on which parts are which]
- Whether the site already has a `prefers-reduced-motion` fallback anywhere: [YES / NO / PARTIAL]

Walk through every animation on the screen and evaluate each one against the following six risks. Then propose a fallback.

## Risk 1 — Large translate or movement

Motion that moves content across a large portion of the viewport. Sliding in from the edge, pushing one layer off-screen while another comes on. Anything where the displacement is more than about one-third of the viewport width or height is a vestibular risk for many users.

## Risk 2 — Parallax

Two or more layers moving at different speeds, especially on scroll. Parallax is one of the most reliably reported migraine and vertigo triggers. Even subtle parallax can cause problems.

## Risk 3 — Autoplay video and looping animation

Video that starts playing on load without the user asking, especially with motion in it. Looping Lottie or GIF animations that have no pause control. Background video on hero sections. Any animation longer than about 5 seconds that runs forever is a WCAG 2.2.2 concern — the spec says the user must be able to pause, stop, or hide it.

## Risk 4 — Shake, bounce, wobble, jitter

Oscillating motion — shake on error, bounce on hover, wobble as a "delight" effect, jitter on idle. These are especially bad for migraine sufferers because they combine small movements with repetition.

## Risk 5 — Unexpected zoom, scale, or depth change

Elements that grow, shrink, or appear to come forward/recede. Especially when they happen without user input. Ken Burns effects on hero images. Image hover scales that exceed about 5 to 10 percent. Full-page transitions that zoom.

## Risk 6 — Flash, strobe, or rapid color shift

Anything that flashes more than three times a second (WCAG 2.3.1) or rapidly shifts color or brightness. This is a seizure risk, not just a vestibular one. Treat as a hard blocker.

---

For every animation in the input, return a block in this format:

### [Animation name or short description]

- **What it does:** One sentence.
- **Triggered by:** Page load / scroll / hover / click / focus / other.
- **Risk category:** Which of the six risks apply.
- **Severity:** High / medium / low, with one sentence of reasoning.
- **Reduced-motion fallback:** The specific safer version. Usually this is a fade, an instant state change, or holding the end state without the transition. Give exact CSS or config if I gave you exact CSS or config.
- **Implementation:**
  ```css
  @media (prefers-reduced-motion: reduce) {
    [the fallback CSS]
  }
  ```
- **If the effect cannot be made safe:** Say so plainly and recommend either removing it or putting it behind an explicit user opt-in, not an opt-out.

After the per-animation review, return these closing sections.

## Global recommendations

One paragraph on system-level fixes that apply to the whole site: a single `prefers-reduced-motion` media query that gates all non-essential transitions, a user preference toggle in settings, removing autoplay from any video element without controls, adding a pause button to any looping Lottie animation.

## The three highest-risk effects to fix first

A ranked list of the three specific effects that are most likely to hurt real users, with one sentence each on why.

## What I could not evaluate

Any effect where the description was too vague to assess, or where the risk depends on timing I cannot see from the spec. Say what you would need to know.

## Refusals

You will not tell me to strip all motion from the site. You will not tell me every animation is fine because it "looks subtle." The test is not how it looks to someone without a vestibular condition. You will not invent WCAG success criteria that do not exist — cite only 2.2.2, 2.3.1, and 2.3.3, which are the real ones for motion and flash.

Begin.