clawdbot-workspace/reonomy-demo-video/STORYBOARD.md

# Reonomy Contact Extractor - Video Storyboard

**Duration:** 37 seconds (1100 frames @ 30fps)  
**Resolution:** 1920 × 1080  
**Style:** Product demo with Canvas Viewport technique (camera moves WITHIN screenshots)

---

## Scene 1: Title Card
**Frames:** 0–120 (4 seconds)  
**Source:** Generated background (gradient)

### Visual Content
- Deep purple-to-indigo gradient background (`#0f172a → #1e1b4b → #0f172a`)
- Centered title: "🏢 Reonomy Contact Extractor"
- Subtitle below: "CRE Leads → Your CRM … On Demand"

### Motion
- **Title animation:** Fades in + slides up from 40px below (spring damping: 25)
- **Subtitle animation:** Same motion, delayed 25 frames (staggered entrance)
- **Background:** Subtle static gradient, no movement

### Typography
- Title: 72px, weight 800, white
- Subtitle: 28px, weight 400, slate-400 (`#94a3b8`)

### Transition Out
- Crossfade (20 frames overlap with next scene)

---

## Scene 2: Login
**Frames:** 110–260 (5 seconds)  
**Source:** `02-login-filled.png` (Reonomy login page with email pre-filled)

### Visual Content
- Reonomy login modal showing:
  - Logo at top
  - "Log In" / "Sign Up" tabs
  - "Sign in with Google" button
  - "Sign in with Salesforce" button
  - Email field showing `henry@realestateenhanced.com`
- Step badge in bottom-left: "1" + "Login to Reonomy"

### Motion (Canvas Viewport)
| Time | X | Y | Zoom | What's Visible |
|------|---|---|------|----------------|
| Start | 0.5 | 0.2 | 2.0× | Reonomy logo and top of login form |
| End | 0.5 | 0.7 | 2.5× | Login buttons and email field (zoomed tight) |

**Camera movement:** Slow vertical pan DOWN the login form, zooming IN as it descends to draw attention to the authentication area.

### Overlays
- Radial vignette (transparent center, 50% black at edges)
- Step badge animates in with spring (delay: 10 frames after scene start)

### Audio Cue (if added)
- Soft "whoosh" on scene entrance

---

## Scene 3: Search Interface
**Frames:** 250–400 (5 seconds)  
**Source:** `04-search-results.png` (Reonomy home/search page)

### Visual Content
- Reonomy search interface showing:
  - Navigation bar with "Saved Searches", "Data Upload"
  - Hero section: "What would you like to search for today?"
  - Large search input with placeholder text
  - Illustrated cityscape background
- Step badge: "2" + "Search & Filter"

### Motion (Canvas Viewport)
| Time | X | Y | Zoom | What's Visible |
|------|---|---|------|----------------|
| Start | 0.0 | 0.0 | 1.8× | Top-left: nav bar and start of search area |
| End | 0.3 | 0.5 | 1.6× | Centered on search bar, slight pull-back to show context |

**Camera movement:** Diagonal drift from top-left corner toward center, slight zoom OUT to reveal the full search interface. Creates sense of "arriving" at the workspace.

### Overlays
- Same vignette
- Step badge with spring animation

---

## Scene 4: Property Selection
**Frames:** 390–530 (4.7 seconds)  
**Source:** `05-property-detail.png` (Property detail page with satellite map)

### Visual Content
- Property detail page showing:
  - Satellite/aerial view of property (Orlando, FL area)
  - Yellow property boundary outline on map
  - Address: "...od Bay Dr, Orlando, FL 32821"
  - Map controls (zoom, rotate, layers)
  - Mini map inset on right
- Step badge: "3" + "Select Property"

### Motion (Canvas Viewport)
| Time | X | Y | Zoom | What's Visible |
|------|---|---|------|----------------|
| Start | 0.3 | 0.0 | 1.6× | Top portion: property header and map top |
| End | 0.5 | 0.4 | 1.4× | Centered on satellite view, showing property outline |

**Camera movement:** Gentle drift down and right, slight zoom OUT. Mimics "exploring" the property details. The yellow boundary should be clearly visible mid-scene.

### Overlays
- Vignette
- Step badge

---

## Scene 5: Owner Tab
**Frames:** 520–660 (4.7 seconds)  
**Source:** `06-owner-tab.png` (Property page with Owner tab visible)

### Visual Content
- Same property view but scrolled/panned to show:
  - Satellite map (upper portion)
  - Address visible
  - Tab navigation at bottom: "Sales", "Debt", "Tax", "Demographics", "Notes"
  - Owner tab should be highlighted/selected
- Step badge: "4" + "Owner Tab"

### Motion (Canvas Viewport)
| Time | X | Y | Zoom | What's Visible |
|------|---|---|------|----------------|
| Start | 0.5 | 0.2 | 1.5× | Map and upper property info |
| End | 0.6 | 0.5 | 1.8× | Lower portion with tabs visible, zoomed into Owner area |

**Camera movement:** Pan DOWN and slightly RIGHT while zooming IN. The motion "discovers" the Owner tab, guiding the viewer's eye to click target.

### Overlays
- Vignette
- Step badge

---

## Scene 6: Contact Extraction
**Frames:** 650–830 (6 seconds)  
**Source:** `09-contact-modal.png` (Contact modal with phone numbers and emails)

### Visual Content
- Contact modal/panel showing:
  - "Phone Numbers" header
  - Multiple phone contacts with company names:
    - 919-469-9553 (Greystone Property Management)
    - 727-341-0186 (Seaside Villas Gulfport)
    - 903-566-9506 (Apartment Income Reit, L.P.)
    - 407-671-2400 (F.P. Management, Inc.)
  - Property type pie chart visible in background
  - Company name "INTERNATIONAL LLC +5 more companies"
- Step badge: "5" + "Extract Contacts"

### Motion (Canvas Viewport)
| Time | X | Y | Zoom | What's Visible |
|------|---|---|------|----------------|
| Start | 0.6 | 0.1 | 1.8× | Top of contact list, first phone number |
| End | 0.6 | 0.6 | 2.2× | Scrolled down, showing multiple contacts |

**Camera movement:** Vertical scroll DOWN through the contact list while zooming IN. This is the "money shot" — the viewer sees real contact data appearing. Slow, deliberate movement to let them read the numbers.

### Overlays
- Vignette
- Step badge
- **Key moment:** Camera should pause slightly on each phone number (achieved via easing, not literal pauses)

---

## Scene 7: Results Summary
**Frames:** 820–1100 (9.3 seconds)  
**Source:** Generated (React components, not screenshot)

### Visual Content

#### Phase 1: Title (frames 820–870)
- "🎉 Contacts Extracted" title
- Spring animation entrance

#### Phase 2: Contact Lists (frames 870–980)
Two columns side by side:

**Left column — Phone Numbers (green accent)**
```
📞 Phone Numbers
┌─────────────────┐
│ 919-469-9553    │
│ 727-341-0186    │
│ 903-566-9506    │
│ 407-671-2400    │
│ 407-382-2683    │
└─────────────────┘
```

**Right column — Email Addresses (purple accent)**
```
📧 Email Addresses
┌──────────────────────────────┐
│ berrizoro@gmail.com          │
│ aberriz@hotmail.com          │
│ jasonhitch1@gmail.com        │
│ albert@annarborusa.org       │
│ albertb@sterlinghousing.com  │
└──────────────────────────────┘
```

#### Phase 3: Stats (frames 980–1100)
Four stat counters across bottom:

| Stat | Value | Color |
|------|-------|-------|
| Contacts | 10 | Purple (`#6366f1`) |
| Phones | 5 | Green (`#10b981`) |
| Emails | 5 | Amber (`#f59e0b`) |
| Time | 60s | Pink (`#ec4899`) |

### Motion
- **Title:** Fade in + slide up (spring, damping 25)
- **Column headers:** Staggered fade in (phones at frame 870, emails at 875)
- **Contact items:** Cascade animation — each item slides in from the side with 8-frame stagger
  - Phones: slide in from LEFT (`translateX(-30px → 0)`)
  - Emails: slide in from RIGHT (`translateX(30px → 0)`)
- **Stats:** Scale up from 0.5× to 1× with spring, 10-frame stagger between each

### Typography
- Title: 52px, weight 800, white
- Column headers: 22px, weight 700, accent color
- Contact items: 18px, weight 600, slate-800 on white cards
- Stat values: 48px, weight 800, accent color
- Stat labels: 16px, weight 400, slate-400

### Background
- Same gradient as title card (`#0f172a → #1e1b4b → #0f172a`)

### Transition Out
- Global fade to black over final 30 frames

---

## Global Elements

### Vignette Overlay
Applied to all screenshot scenes (2–6):
```css
background: radial-gradient(
  ellipse at center,
  transparent 30%,
  rgba(0, 0, 0, 0.5) 100%
);
```
Creates focus on center content and masks rough edges of zoomed screenshots.

### Step Badge Component
Persistent UI element in bottom-left during screenshot scenes:
- Purple circle (48px) with step number
- Black pill with step description
- Spring entrance animation (damping: 20)
- Positioned: `bottom: 50px, left: 50px`

### Easing
All camera movements use: `Easing.inOut(Easing.cubic)`
All UI animations use: `spring({ damping: 18-25 })`

### Color Palette
| Use | Color | Hex |
|-----|-------|-----|
| Background dark | Slate 900 | `#0f172a` |
| Background accent | Indigo 950 | `#1e1b4b` |
| Primary | Indigo 500 | `#6366f1` |
| Secondary | Violet 500 | `#8b5cf6` |
| Success | Emerald 500 | `#10b981` |
| Warning | Amber 500 | `#f59e0b` |
| Accent | Pink 500 | `#ec4899` |
| Text primary | White | `#ffffff` |
| Text secondary | Slate 400 | `#94a3b8` |
| Text on cards | Slate 800 | `#1e293b` |

---

## Asset Checklist

### Screenshots Needed
- [x] `02-login-filled.png` — Login page with email filled
- [x] `04-search-results.png` — Search/home interface  
- [x] `05-property-detail.png` — Property with satellite map
- [x] `06-owner-tab.png` — Property showing owner tab
- [x] `09-contact-modal.png` — Contact list modal

### Generated Assets
- [ ] Intro background gradient (or use CSS gradient)
- [ ] Outro background gradient (same as intro)

### Audio (Optional Future)
- [ ] Background music (upbeat, corporate-friendly)
- [ ] Whoosh sounds on scene transitions
- [ ] "Pop" sounds on stat reveals

---

## Implementation Notes

### Canvas Viewport Technique
Each screenshot scene uses the `CanvasViewport` component which:
1. Renders the image at 2.5× the viewport size
2. Positions a clipping viewport over a portion of the image
3. Animates X, Y, and Zoom values to create camera movement
4. Creates the illusion of moving THROUGH the UI rather than just showing it

### Key Insight
The zoom values (1.4× to 2.5×) mean we're always cropped IN — never showing the whole screenshot. This:
- Hides any rough edges or UI inconsistencies
- Forces focus on the relevant area
- Creates cinematic "documentary" feel
- Allows lower-res source images to still look sharp

### Timing Philosophy
- **Scene 1 (Title):** 4 seconds — enough to read, not too long
- **Scenes 2-5 (UI flow):** ~5 seconds each — enough for camera to move meaningfully
- **Scene 6 (Contacts):** 6 seconds — the payoff, give it room
- **Scene 7 (Results):** 9 seconds — celebration, let animations complete, end strong