84b9987c49
Brings the working codebase (Next.js app, auth system, Stripe billing, Docker/deploy config, tests, docs) into version control on top of the placeholder initial commit, and adds account self-deletion (Danger Zone in Settings, password + typed-email confirmation, cascading DB cleanup, Stripe cancellation) per GDPR right-to-erasure. Excludes local build caches, node_modules, and internal agent scratch files; .gitignore hardened to keep those out going forward. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
74 lines
2.7 KiB
Markdown
74 lines
2.7 KiB
Markdown
# 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
|
||
```
|