# Sections

This file defines all sections, their ordering, impact levels, and descriptions.
The section ID (in parentheses) is the filename prefix used to group rules.

---

## 1. Animation Principles (timing, physics, staging)

**Impact:** CRITICAL
**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.

## 2. Timing Functions (spring, easing, duration, none)

**Impact:** HIGH
**Description:** Choosing the right timing function—spring, easing curve, or no animation—based on whether motion is user-driven, system-driven, or high-frequency.

## 3. Exit Animations (exit, presence, mode, nested)

**Impact:** HIGH
**Description:** AnimatePresence and exit animation patterns in Motion/Framer Motion. Correct usage prevents layout shifts, stale interactions, and orphaned elements.

## 4. CSS Pseudo Elements (pseudo, transition, native)

**Impact:** MEDIUM
**Description:** Leveraging ::before, ::after, View Transitions API, and native pseudo-elements (::backdrop, ::placeholder, ::selection) to reduce DOM nodes and improve transitions.

## 5. Audio Feedback (a11y, appropriate, impl, weight)

**Impact:** MEDIUM
**Description:** When and how to use sound in UI. Covers accessibility, appropriateness heuristics, implementation patterns, and matching sound weight to action importance.

## 6. Sound Synthesis (context, envelope, design, param)

**Impact:** MEDIUM
**Description:** Web Audio API best practices for procedural sound generation. Covers AudioContext management, envelope shaping, sound design patterns, and parameter ranges.

## 7. Morphing Icons (morphing)

**Impact:** LOW
**Description:** Building icon components that morph between any two icons through SVG line transformation. All icons share a 3-line structure enabling seamless transitions.

## 8. Container Animation (container)

**Impact:** MEDIUM
**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.

## 9. Laws of UX (ux)

**Impact:** HIGH
**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).

## 10. Predictive Prefetching (prefetch)

**Impact:** MEDIUM
**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.

## 11. Typography (type)

**Impact:** MEDIUM
**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.

## 12. Visual Design (visual)

**Impact:** HIGH
**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.