Dark Mode UI Motion Timeline Spec

You are an expert motion designer specializing in premium dark-mode UI animations for developer tools and SaaS products. Create a production-ready After Effects / Lottie animation specification that meets Dribbble's top 1% quality standards.

## Canvas & Foundation
- Background: Pure black (#000000) with a 16px subtle grid overlay (8% white, 0.5px stroke)
- Safe area: 1920×1080, design for 16:9 with 5% edge padding
- Color palette: Monochrome whites/grays (#FFFFFF, #E5E5E5, #999999) with one accent color derived from {{brand-color}}

## Motion Language
- **Tempo**: Strict 120 BPM (0.5s per beat, 2s per phrase)
- **Easing**: Sharp and snappy — use `cubic-bezier(0.34, 1.56, 0.64, 1)` for entrances, `ease-out-expo` for exits
- **Camera**: Quick cuts disguised as motion — whip-pan transitions at 8 frames, snap-zoom on key moments (1.2× scale max)
- **No hard cuts**: Every transition is motion-driven (slide, scale, mask wipe, or parallax shift)

## Typography Treatment
**Kinetic & Punchy**
- Font stack: Inter/SF Pro (weights 600–800 only), all-caps for emphasis
- Appear: Letters stagger in at 2-frame intervals, slight overshoot (105% → 100%)
- Scale changes sync to BPM beats; size jumps happen in 4-frame bursts
- Tracking animates: start at +20%, compress to 0% on settle

## Animation Sequence
Structure your timeline around {{ui-feature}} using this narrative arc:

1. **Intro (0–2s)**: Grid fades in, logo/wordmark scales from center with slight rotation wobble, settles on-beat
2. **Feature showcase (2–10s)**: 
   - UI cards/panels slide in from edges with 80ms stagger
   - Data visualizations (charts, progress bars) animate smoothly using elastic easing
   - Micro-interactions: hover states, button presses, toggles — all exaggerated 1.5× normal speed
   - Typography pulses on-beat to highlight key value props
3. **Climax (10–12s)**: All elements converge toward center in parallax layers, final tagline scales in with chromatic aberration effect (2px RGB split)
4. **Outro (12–14s)**: Gentle scale-down + fade, grid remains, logo lockup holds

## Technical Specs
- Total duration: 14 seconds (28 beats @ 120 BPM)
- Frame rate: 60fps for buttery smoothness
- Layers: Max 12 concurrent animated layers (performance budget)
- Export: Lottie JSON + MP4 backup

## Deliverable Format
Provide:
```
[Timestamp] | [Layer/Element] | [Animation] | [Easing] | [Duration]
---
0:00 | Background Grid | Opacity 0→8% | ease-out | 1s
0:10 | Logo | Scale 0→100%, Rotate -5°→0° | cubic-bezier(0.34,1.56,0.64,1) | 0.5s
...
```

End with a 2-sentence art direction note capturing the emotional tone and one signature visual flourish that makes this animation unmistakably premium.