Animation guardrails

Installation

pnpm dlx shadcn@latest add @aura/rule-fundation-animations

• MUST: Honor prefers-reduced-motion with a reduced variant.
• MUST: Prefer CSS (@theme animation tokens + @keyframes in @layer components) over Web Animations API or JS libraries.
• MUST: Animate transform and opacity only. Avoid layout props (top/left/width/height) except accordion/collapsible height to var(--radix-*-content-height).
• MUST: Set transform-origin so motion starts where it physically should.
• MUST: Enter/exit content with opacity + transform: scale(). Overlays SHOULD use opacity only.
• MUST: Keep motion interruptible and input-driven (no decorative autoplay).
• SHOULD: Interactive hover/active use scale(1.03) / scale(0.97) with transition: transform ….
• SHOULD: Use ~250ms steps; match easing to the change (tooltips ease-in-out, dialogs cubic-bezier(0.16, 1, 0.3, 1), accordion ease, buttons cubic-bezier(0.4, 0, 0.6, 1)).
• SHOULD: Animate only to clarify cause/effect or add deliberate delight.