Source from repo

User Interface Wiki

Living wiki of UI design patterns and best practices built with Fumadocs, Next.js, and Base UI components.

raphaelsalajaGitHub raphaelsalajaSource repo Original GitHub link Publisher page

Files

157

Skill

n/a

Size

184.3 KB

Entrypoint

SKILL.md

Format

git-repo

Open file

rules/morphing-reduced-motion.md

Syntax-highlighted preview of this file as included in the skill package.

Rendered Source

markdown29 linesFree

rules/morphing-reduced-motion.md

1---
2title: Reduced Motion Support for Icons
3impact: MEDIUM
4tags: morphing, a11y, reduced-motion
5---
6 
7## Reduced Motion Support for Icons
8 
9Respect prefers-reduced-motion by disabling animations.
10 
11**Incorrect (always animates):**
12 
13```tsx
14function MorphingIcon({ icon }: Props) {
15  return <motion.line animate={...} transition={{ duration: 0.4 }} />;
16}
17```
18 
19**Correct (respects preference):**
20 
21```tsx
22function MorphingIcon({ icon }: Props) {
23  const reducedMotion = useReducedMotion() ?? false;
24  const activeTransition = reducedMotion ? { duration: 0 } : transition;
25  
26  return <motion.line animate={...} transition={activeTransition} />;
27}
28```
29

Preparing the source view

User Interface Wiki

rules/morphing-reduced-motion.md