fix(components): respect `prefers-reduced-motion` in animations by benjamincanac · Pull Request #6723 · nuxt/ui

benjamincanac · 2026-07-13T12:29:36Z

🔗 Linked issue

❓ Type of change

📖 Documentation (updates to the documentation or readme)
🐞 Bug fix (a non-breaking change that fixes an issue)
👌 Enhancement (improving an existing functionality)
✨ New feature (a non-breaking change that adds functionality)
🧹 Chore (updates to the build process or auxiliary tools and libraries)
⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

Infinite animations currently keep running when the user has prefers-reduced-motion enabled. This gates them behind motion-safe: and adds a designed fallback where a plain freeze would break the visual:

ChatShimmer: the shimmer stops and the text is displayed as static muted text, a frozen animation would leave the highlight band stuck over transparent text
ChatMessages: the typing indicator dots stop bouncing and are displayed statically
Marquee: the content stops scrolling and is displayed statically, in both orientations and RTL
Progress: the indeterminate bar is displayed as a full size opacity pulse, a plain freeze would read as a stuck bar at 100% since the carousel/swing/elastic keyframes are what set its size
Table: the loading bar is displayed as a full width opacity pulse, inset-x-0 is added under reduced motion because the keyframes are what give the bar its width

One-shot enter/exit transitions, spinners and the Skeleton pulse are deliberately left untouched: they are either brief, opacity only or convey loading state.

Each component page gets a tip documenting the reduced motion behavior, and snapshots are regenerated, including Toast and PageLogos which embed Progress and Marquee.

📝 Checklist

I have linked an issue or discussion.
I have updated the documentation accordingly.

coderabbitai · 2026-07-13T12:40:10Z

📝 Walkthrough

Walkthrough

Updated component themes to respect reduced-motion preferences for chat indicators, shimmer, marquee, progress, and table loading animations. Motion-safe variants preserve animations for users who allow motion, while reduced-motion rules provide static, muted, or pulse-based presentations. Documentation now describes these behaviors for each affected component.

Estimated code review effort: 2 (Simple) | ~10 minutes

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly matches the main change: making component animations respect prefers-reduced-motion.
Description check	✅ Passed	The description accurately describes the reduced-motion animation updates and documentation changes in the changeset.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

📝 Generate docstrings

Create stacked PR
Commit on current branch

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch fix/prefers-reduced-motion

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands.}

coderabbitai

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@docs/content/docs/2.components/progress.md`:
- Around line 98-100: Hyphenate “full width pulse” as “full-width pulse” in the
documentation tip at docs/content/docs/2.components/progress.md lines 98-100 and
the corresponding tip at docs/content/docs/2.components/table.md lines 189-191.

🪄 Autofix (Beta)

❌ Autofix failed (check again to retry)

Fix all unresolved CodeRabbit comments on this PR:

Push a commit to this branch (recommended)
Create a new PR with the fixes

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 33aa2db7-e496-4ca4-895e-459af49878a7

📥 Commits

Reviewing files that changed from the base of the PR and between fe5bb23 and a810883.

⛔ Files ignored due to path filters (18)

test/components/__snapshots__/ChatMessages-vue.spec.ts.snap is excluded by !**/*.snap
test/components/__snapshots__/ChatMessages.spec.ts.snap is excluded by !**/*.snap
test/components/__snapshots__/ChatReasoning-vue.spec.ts.snap is excluded by !**/*.snap
test/components/__snapshots__/ChatReasoning.spec.ts.snap is excluded by !**/*.snap
test/components/__snapshots__/ChatShimmer-vue.spec.ts.snap is excluded by !**/*.snap
test/components/__snapshots__/ChatShimmer.spec.ts.snap is excluded by !**/*.snap
test/components/__snapshots__/ChatTool-vue.spec.ts.snap is excluded by !**/*.snap
test/components/__snapshots__/ChatTool.spec.ts.snap is excluded by !**/*.snap
test/components/__snapshots__/Marquee-vue.spec.ts.snap is excluded by !**/*.snap
test/components/__snapshots__/Marquee.spec.ts.snap is excluded by !**/*.snap
test/components/__snapshots__/PageLogos-vue.spec.ts.snap is excluded by !**/*.snap
test/components/__snapshots__/PageLogos.spec.ts.snap is excluded by !**/*.snap
test/components/__snapshots__/Progress-vue.spec.ts.snap is excluded by !**/*.snap
test/components/__snapshots__/Progress.spec.ts.snap is excluded by !**/*.snap
test/components/__snapshots__/Table-vue.spec.ts.snap is excluded by !**/*.snap
test/components/__snapshots__/Table.spec.ts.snap is excluded by !**/*.snap
test/components/__snapshots__/Toast-vue.spec.ts.snap is excluded by !**/*.snap
test/components/__snapshots__/Toast.spec.ts.snap is excluded by !**/*.snap

📒 Files selected for processing (9)

docs/content/docs/2.components/chat-shimmer.md
docs/content/docs/2.components/marquee.md
docs/content/docs/2.components/progress.md
docs/content/docs/2.components/table.md
src/theme/chat-messages.ts
src/theme/chat-shimmer.ts
src/theme/marquee.ts
src/theme/progress.ts
src/theme/table.ts

coderabbitai · 2026-07-13T12:40:13Z

+::tip
+The animation is automatically disabled when the user prefers reduced motion, the indeterminate bar is displayed as a full width pulse instead.
+::


📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win

Hyphenate “full-width” in both documentation tips.

docs/content/docs/2.components/progress.md#L98-L100: Change “full width pulse” to “full-width pulse”.

docs/content/docs/2.components/table.md#L189-L191: Change “full width pulse” to “full-width pulse”.

🧰 Tools

🪛 LanguageTool

[grammar] ~99-~99: Use a hyphen to join words.
Context: ...indeterminate bar is displayed as a full width pulse instead. :: ### Orientation...

(QB_NEW_EN_HYPHEN)

📍 Affects 2 files

docs/content/docs/2.components/progress.md#L98-L100 (this comment)

docs/content/docs/2.components/table.md#L189-L191

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@docs/content/docs/2.components/progress.md` around lines 98 - 100, Hyphenate “full width pulse” as “full-width pulse” in the documentation tip at docs/content/docs/2.components/progress.md lines 98-100 and the corresponding tip at docs/content/docs/2.components/table.md lines 189-191.

Source: Linters/SAST tools

🧩 Analysis chain

🏁 Script executed:

rg -n "full width pulse" docs/content/docs/2.components/table.md

Length of output: 345

@benjamincanac Confirmed the line in table.md. Here's the fix.

Hyphenate "full width pulse" → "full-width pulse" in table.md tip

Failed to handle agent chat message. Please try again.

pkg-pr-new · 2026-07-13T12:41:54Z

npm i https://pkg.pr.new/@nuxt/ui@6723

commit: a810883

coderabbitai · 2026-07-13T12:42:29Z

Note

Autofix is a beta feature. Expect some limitations and changes as we gather feedback and continue to improve it.

An unexpected error occurred while generating fixes: Not Found - https://docs.github.com/rest/git/refs#get-a-reference

fix: respect prefers-reduced-motion in animated components

a810883

github-actions Bot added the v4 #4488 label Jul 13, 2026

benjamincanac changed the title ~~fix: respect prefers-reduced-motion in animated components~~ fix(components): respect prefers-reduced-motion in animations Jul 13, 2026

benjamincanac changed the title ~~fix(components): respect prefers-reduced-motion in animations~~ fix(components): respect prefers-reduced-motion in animations Jul 13, 2026

coderabbitai Bot reviewed Jul 13, 2026

View reviewed changes

vercel Bot deployed to Preview – ui July 13, 2026 12:47 View deployment

benjamincanac merged commit f951529 into v4 Jul 13, 2026
24 checks passed

benjamincanac deleted the fix/prefers-reduced-motion branch July 13, 2026 12:53

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix(components): respect `prefers-reduced-motion` in animations#6723

fix(components): respect `prefers-reduced-motion` in animations#6723
benjamincanac merged 1 commit into
v4from
fix/prefers-reduced-motion

benjamincanac commented Jul 13, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented Jul 13, 2026

Walkthrough

Uh oh!

coderabbitai Bot left a comment •

edited

Loading

Uh oh!

coderabbitai Bot Jul 13, 2026 •

edited

Loading

Uh oh!

benjamincanac Jul 13, 2026

Uh oh!

coderabbitai Bot Jul 13, 2026

Uh oh!

pkg-pr-new Bot commented Jul 13, 2026

Uh oh!

coderabbitai Bot commented Jul 13, 2026 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

benjamincanac commented Jul 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🔗 Linked issue

❓ Type of change

📚 Description

📝 Checklist

Uh oh!

coderabbitai Bot commented Jul 13, 2026

Walkthrough

Uh oh!

coderabbitai Bot left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

coderabbitai Bot Jul 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

benjamincanac Jul 13, 2026

Choose a reason for hiding this comment

Uh oh!

coderabbitai Bot Jul 13, 2026

Choose a reason for hiding this comment

Uh oh!

pkg-pr-new Bot commented Jul 13, 2026

Uh oh!

coderabbitai Bot commented Jul 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

benjamincanac commented Jul 13, 2026 •

edited

Loading

coderabbitai Bot left a comment •

edited

Loading

coderabbitai Bot Jul 13, 2026 •

edited

Loading

coderabbitai Bot commented Jul 13, 2026 •

edited

Loading