1# Sections
2 
3This file defines all sections, their ordering, impact levels, and descriptions.
4The section ID (in parentheses) is the filename prefix used to group rules.
5 
6---
7 
8## 1. Animation Principles (timing, physics, staging)
9 
10**Impact:** CRITICAL
11**Description:** Disney's 12 principles adapted for web. Timing, physics, and staging rules ensure animations feel natural and purposeful. Violations here produce the most noticeable quality issues.
12 
13## 2. Timing Functions (spring, easing, duration, none)
14 
15**Impact:** HIGH
16**Description:** Choosing the right timing function—spring, easing curve, or no animation—based on whether motion is user-driven, system-driven, or high-frequency.
17 
18## 3. Exit Animations (exit, presence, mode, nested)
19 
20**Impact:** HIGH
21**Description:** AnimatePresence and exit animation patterns in Motion/Framer Motion. Correct usage prevents layout shifts, stale interactions, and orphaned elements.
22 
23## 4. CSS Pseudo Elements (pseudo, transition, native)
24 
25**Impact:** MEDIUM
26**Description:** Leveraging ::before, ::after, View Transitions API, and native pseudo-elements (::backdrop, ::placeholder, ::selection) to reduce DOM nodes and improve transitions.
27 
28## 5. Audio Feedback (a11y, appropriate, impl, weight)
29 
30**Impact:** MEDIUM
31**Description:** When and how to use sound in UI. Covers accessibility, appropriateness heuristics, implementation patterns, and matching sound weight to action importance.
32 
33## 6. Sound Synthesis (context, envelope, design, param)
34 
35**Impact:** MEDIUM
36**Description:** Web Audio API best practices for procedural sound generation. Covers AudioContext management, envelope shaping, sound design patterns, and parameter ranges.
37 
38## 7. Morphing Icons (morphing)
39 
40**Impact:** LOW
41**Description:** Building icon components that morph between any two icons through SVG line transformation. All icons share a 3-line structure enabling seamless transitions.
42 
43## 8. Container Animation (container)
44 
45**Impact:** MEDIUM
46**Description:** Animating container width and height using a measure-and-animate pattern with ResizeObserver and Motion. The two-div pattern separates measurement from animation to avoid feedback loops.
47 
48## 9. Laws of UX (ux)
49 
50**Impact:** HIGH
51**Description:** Psychological principles behind interfaces that feel right. Covers Fitts's Law (target sizing), Hick's Law (choice reduction), Miller's Law (chunking), Doherty Threshold (response time), and Postel's Law (input tolerance).
52 
53## 10. Predictive Prefetching (prefetch)
54 
55**Impact:** MEDIUM
56**Description:** Loading content before the user clicks by analyzing cursor trajectory, reducing perceived latency by 100-200ms. Covers trajectory vs hover vs click strategies and device-aware fallbacks.
57 
58## 11. Typography (type)
59 
60**Impact:** MEDIUM
61**Description:** CSS font and text properties most developers overlook. OpenType features, numeric variants, variable font axes, text rendering, wrapping, and decoration controls that make typography feel considered.
62 
63## 12. Visual Design (visual)
64 
65**Impact:** HIGH
66**Description:** CSS design fundamentals that compound into visual polish. Concentric border radius, layered shadows, consistent spacing scales, and alpha borders. Small details that separate considered interfaces from default ones.
67