aidimension UI Animation

# aidimension UI — Animation

aidimension UI ships 10 motion elements in `src/components/motion/`. All
respect `prefers-reduced-motion` and use only CSS + `requestAnimationFrame` —
no external animation library.

## When to use each

| Element | Use case |
|---|---|
| `FadeIn` | Hero text, cards, anything that should slide-in on mount |
| `ScrollReveal` | Sections that should reveal when scrolled into view |
| `CountUp` | Animated numbers on mount (e.g. stats) |
| `Typewriter` | Type out text char-by-char, cycle phrases |
| `Shimmer` / `ShimmerText` | Loading skeletons |
| `Pulse` | Radial glow behind a CTA / icon |
| `GlowCard` | Card with cursor-tracked soft glow |
| `Tilt3D` | 3D tilt on hover (use sparingly — products, not every card) |
| `Magnetic` | Cursor-pull for hero CTAs |
| `GradientBorder` | Animated conic gradient ring |

## The `reduced-motion` rule

NEVER gate the reduced-motion check inside an animation element. Each
component already handles this internally. Just import and use.

## Hero pattern

```tsx
<FadeIn direction="up" duration={500}>
  <Badge>New</Badge>
  <h1>Headline</h1>
</FadeIn>
<FadeIn direction="up" delay={80} duration={700}>
  <p>Subheadline that animates after the headline</p>
</FadeIn>
<FadeIn direction="up" delay={200} duration={600}>
  <Button>Get started</Button>
</FadeIn>
```

Stagger delays of 80–200ms feel best in practice.

## Section pattern

```tsx
<section className="border-b">
  <div className="mx-auto max-w-6xl px-6 py-20">
    <ScrollReveal>
      <h2>Title</h2>
    </ScrollReveal>
    <ScrollReveal delay={100}>
      <p>Subtitle</p>
    </ScrollReveal>
  </div>
</section>
```

## Things to avoid

- Animating a single long page with 20+ `FadeIn` (it feels slow)
- Using `Tilt3D` on every card (it's expensive — 60fps transform)
- Combining `Magnetic` with `Tilt3D` (visual chaos)
- Animating layout properties (width, height) — only transform + opacity

## Performance

All aidimension UI motion elements:
- Use `transform` and `opacity` only (GPU-accelerated)
- Avoid layout thrash
- Bail early on `prefers-reduced-motion: reduce`
- Use `requestAnimationFrame` for JS-driven counters
- IntersectionObserver-based reveals do not run off-screen