style: prefer reduced motion

[paanSinghCoder]

Summary

This PR updates the Apsara component library so key animated components respect the prefers-reduced-motion: reduce media query. When reduced motion is enabled, we disable/simplify the primary animation effects (shimmer, open/close transitions, overlay/panel transitions, icon/content transitions, loader/spinner rotations, and similar motion).

Video demonstrates the animation changes after enabling "Reduce Motion" in OS settings (Macbook in this case):

Screen.Recording.2026-03-20.at.5.35.08.PM.mov

Note:

We’re avoiding a global reduced-motion rule because it risks affecting the host app’s own animations as well. In frontier, Apsara’s ThemeProvider is mounted near the app root, so a “scoped global” would still have high blast radius. Per-component overrides keep changes limited to Apsara components and are easier to verify

Changes

• Added @media (prefers-reduced-motion: reduce) overrides in the relevant Raystack component CSS modules for:
  • Skeleton, Link, Popover, Tooltip, Collapsible, Accordion, Spinner, Button (loader), PreviewCard, Toast, Sidebar, Tabs, Drawer (Sheet), Dialog
• Updated component docs to explicitly mention reduced-motion behavior in Accessibility notes for the affected components.

Testing / Validation

• Manually verified component interactions with the OS “Reduce Motion” setting enabled to confirm animations are suppressed while functionality remains unchanged.

Summary by CodeRabbit

• New Features

  • Added support for the prefers-reduced-motion accessibility preference across components including Accordion, AlertDialog, Button, Collapsible, Dialog, Drawer, Link, Popover, Skeleton, Spinner, Toast, and Tooltip. Animations and transitions are now disabled for users who prefer reduced motion.

• Documentation

  • Updated component documentation to reflect the reduced-motion behaviors.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
apsara	Ready	Preview, Comment	Mar 20, 2026 0:08am

[coderabbitai]

📝 Walkthrough

Walkthrough

This PR adds accessibility support for the prefers-reduced-motion: reduce CSS media query across multiple UI components. It includes both documentation updates describing motion preferences and corresponding CSS implementations that disable animations and transitions for users with reduced-motion preferences enabled.

Changes

Cohort / File(s)	Summary
Documentation Updates apps/www/src/content/docs/components/accordion/index.mdx, apps/www/src/content/docs/components/alert-dialog/index.mdx, apps/www/src/content/docs/components/button/index.mdx, apps/www/src/content/docs/components/collapsible/index.mdx, apps/www/src/content/docs/components/dialog/index.mdx, apps/www/src/content/docs/components/drawer/index.mdx, apps/www/src/content/docs/components/link/index.mdx, apps/www/src/content/docs/components/popover/index.mdx, apps/www/src/content/docs/components/spinner/index.mdx, apps/www/src/content/docs/components/toast/index.mdx, apps/www/src/content/docs/components/tooltip/index.mdx	Added accessibility notes documenting that components respect prefers-reduced-motion: reduce by disabling specific animations and transitions (icon rotation, content height, overlay transitions, loader rotation, etc.).
Skeleton Documentation apps/www/src/content/docs/components/skeleton/index.mdx	Clarified accessibility documentation to specify shimmer animation disabling occurs specifically when prefers-reduced-motion: reduce is set.
Component CSS Modules packages/raystack/components/accordion/accordion.module.css, packages/raystack/components/button/button.module.css, packages/raystack/components/collapsible/collapsible.module.css, packages/raystack/components/link/link.module.css, packages/raystack/components/popover/popover.module.css, packages/raystack/components/skeleton/skeleton.module.css, packages/raystack/components/spinner/spinner.module.css, packages/raystack/components/tooltip/tooltip.module.css	Added @media (prefers-reduced-motion: reduce) rules that override animations and transitions to none or disable them for reduced-motion users across accordion icons/content, button loaders, collapsible panels, link hover effects, popover entrance, skeleton shimmer, spinner rotation, and tooltip animations.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related issues

• Add prefers-reduced-motion support for animations #677: Directly implements the prefers-reduced-motion media query support across component CSS modules as requested in this issue.

Possibly related PRs

• feat: migrate accordion to Base UI #583: Both modify accordion CSS module to update animation/transition behavior.
• feat (Tabs): Add a few improvements and some minor fixes #664: Both add prefers-reduced-motion support to component styles.

Suggested reviewers

• ravisuhag
• rsbh
• rohanchkrabrty

Poem

🐰 Hopping through code with gentle grace,
Where motion pauses for its place,
No spinning, sliding, fading fast—
A softer dance that's built to last!
For hearts that need a slower beat, ✨
Accessibility makes the web complete. 🌿

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'style: prefer reduced motion' directly and accurately reflects the primary change: updating components to respect the prefers-reduced-motion CSS media query. It is concise and clearly summarizes the main objective.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ 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 style/prefer-reduced-motion

📝 Coding Plan

• Generate coding plan for human review comments

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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