# ScanReceipts — Marketing Video

A cinematic 35-second hype/marketing video built with [Remotion](https://remotion.dev), showcasing the ScanReceipts AI receipt-to-Excel app.

## 🎬 Video Structure

| Scene | Frames | Duration | Description |
|-------|--------|----------|-------------|
| 01 — Intro | 0–215 | 7s | Logo reveal + animated headlines + receipts flying in + live AI scan |
| 02 — Problem | 210–405 | 6.5s | Dark panel with stat counters (hours/€ wasted) + pain-point cards |
| 03 — Magic | 390–605 | 7s | 3-panel flow: Receipt → AI Extraction fields → Excel export |
| 04 — Features | 600–815 | 7s | 6-card feature grid with staggered spring animations |
| 05 — Social Proof | 810–965 | 5s | Dark scene with KPI stats + testimonial cards |
| 06 — CTA | 960–1050 | 3s | Punchy CTA with typewriter URL + pulsing glow button |

## 🚀 Commands

```bash
# Open Remotion Studio (live preview at http://localhost:3030)
npm start

# Render the video (standard quality)
npm run render

# Render high-quality (CRF 14, quality 100)
npm run render:hq

# Export a single frame as PNG
npm run still
```

## 📐 Specs

- **Resolution**: 1920 × 1080 (16:9 Full HD)
- **FPS**: 30
- **Duration**: 35 seconds (1050 frames)
- **Fonts**: Hanken Grotesk · Inter · JetBrains Mono (via @remotion/google-fonts)
- **Design System**: Zenith Silver (matches the ScanReceipts brand)

## 🎨 Design Tokens

| Token | Value | Use |
|-------|-------|-----|
| Background | `#F6F9FF` | Page background |
| Surface | `#FFFFFF` | Cards / modals |
| Border | `#E2E8F0` | Dividers |
| Ink | `#161C22` | Body text |
| Accent | `#000000` | Headlines, buttons |
| Success | `#059669` | Status badges, scan line |
| Ink-2 | `#475569` | Subtext |

## 📁 Structure

```
src/
├── index.ts              # Remotion entry point
├── Root.tsx              # Composition registry
├── MarketingVideo.tsx    # Main video with all Sequences
├── components/
│   ├── AnimatedHeadline.tsx  # Word-by-word stagger animation
│   ├── Background.tsx        # Scrolling grid background
│   ├── ExcelMock.tsx         # Spreadsheet UI mock
│   ├── FontLoader.tsx        # Google Fonts preloader
│   ├── ReceiptMock.tsx       # Animated receipt with scanline
│   └── Reveal.tsx            # Spring-based entrance animation
└── scenes/
    ├── Scene01Intro.tsx      # Hero scene
    ├── Scene02Problem.tsx    # Pain points + counters
    ├── Scene03Magic.tsx      # AI demo flow
    ├── Scene04Features.tsx   # Feature grid
    ├── Scene05Social.tsx     # Social proof
    └── Scene06CTA.tsx        # Call to action
```