jake/clawdbot-workspace
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
clawdbot-workspace/reonomy-demo-video/STORYBOARD.md

11 KiB
Raw Blame History

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):

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

  • 02-login-filled.png — Login page with email filled
  • 04-search-results.png — Search/home interface
  • 05-property-detail.png — Property with satellite map
  • 06-owner-tab.png — Property showing owner tab
  • 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