87 lines
3.6 KiB
Markdown
87 lines
3.6 KiB
Markdown
# Storyboard
|
|
|
|
**Format:** 1920x1080 landscape
|
|
**Audio:** Voiceover-first promo. Light organic underscore can be added later.
|
|
**VO direction:** Calm, warm, confident, premium app-store register.
|
|
**Style basis:** DESIGN.md from the GreenLens landing page.
|
|
|
|
## Asset Audit
|
|
|
|
| Asset | Type | Assign to Beat | Role |
|
|
| --- | --- | --- | --- |
|
|
| `favicon.svg` | Logo | 1, 5 | Brand mark in opener and closer |
|
|
| `hero-plant.png` | Hero image | 1 | Full-bleed botanical hook |
|
|
| `greenlens.mp4` | Product video | 2 | Framed moving app/demo visual |
|
|
| `scan-feature.png` | Feature image | 2, 4 | Scan action and how-it-works panel |
|
|
| `ai-analysis.png` | Product image | 3 | Botanical intelligence / analysis |
|
|
| `track-feature.png` | Feature image | 4 | Tracking and reminders |
|
|
| `plant-collection.png` | Feature image | 4, 5 | Collection and CTA visual |
|
|
|
|
## Beat 1 - Hook, 0.0-4.0s
|
|
|
|
**Concept:** The viewer enters a calm botanical world. The plant photo breathes in the background while the question lands like a premium app-store promise.
|
|
|
|
**VO cue:** "What if every plant came with instructions?"
|
|
|
|
**Visual description:** Full-frame `hero-plant.png` slowly pushes forward. A dark forest overlay gives contrast. The GreenLens wordmark and favicon settle near the top. Large Playfair Display type fills the left-center. A thin scan line travels across the image and small leaf particles drift in the foreground.
|
|
|
|
**Transition:** Velocity-matched blur upward into the product demo.
|
|
|
|
## Beat 2 - Scan, 4.0-8.5s
|
|
|
|
**Concept:** The abstract promise becomes a concrete action: open, scan, identify. This beat should feel like the app is actively seeing the plant.
|
|
|
|
**VO cue:** "Open GreenLens. Scan a leaf. Get the name..."
|
|
|
|
**Visual description:** A tilted phone-like frame plays `greenlens.mp4`. `scan-feature.png` sits behind it as a botanical plate. Green scan brackets draw around the phone, a pulsing "AI Scan" badge appears, and compact result chips cascade in.
|
|
|
|
**Transition:** Whip-pan left into the care intelligence scene.
|
|
|
|
## Beat 3 - Care Plan, 8.5-13.0s
|
|
|
|
**Concept:** Identification becomes guidance. The frame shifts from seeing to understanding.
|
|
|
|
**VO cue:** "...the care plan, and the next step in seconds."
|
|
|
|
**Visual description:** `ai-analysis.png` becomes a large analysis panel. Three care cards slide in: Watering, Light, Health. The coral CTA accent draws a route from "scan" to "next step." Botanical labels count up and settle.
|
|
|
|
**Transition:** Blur-through into a wider tracking system.
|
|
|
|
## Beat 4 - Track, 13.0-17.0s
|
|
|
|
**Concept:** GreenLens is not a one-off scanner; it is the plant owner's quiet operating system.
|
|
|
|
**VO cue:** "Track watering, growth, notes, and plant health in one calm place."
|
|
|
|
**Visual description:** Three bento cards form a clean grid using `track-feature.png`, `plant-collection.png`, and `scan-feature.png`. Timeline ticks animate across the bottom. Four labels appear in rhythm: Watering, Growth, Notes, Health.
|
|
|
|
**Transition:** Soft zoom out into final CTA.
|
|
|
|
## Beat 5 - CTA, 17.0-20.0s
|
|
|
|
**Concept:** End on the product name and the landing page's tagline rhythm.
|
|
|
|
**VO cue:** "GreenLens. Scan it. Track it. Grow it."
|
|
|
|
**Visual description:** Cream background lightens the frame. The favicon and GreenLens wordmark center up. A coral button appears below with the final action line. `plant-collection.png` drifts as a soft rounded card in the background.
|
|
|
|
**Transition:** Hold to end.
|
|
|
|
## Production Architecture
|
|
|
|
```
|
|
greenlens-promo/
|
|
|-- index.html
|
|
|-- DESIGN.md
|
|
|-- SCRIPT.md
|
|
|-- STORYBOARD.md
|
|
|-- assets/
|
|
| |-- favicon.svg
|
|
| |-- hero-plant.png
|
|
| |-- greenlens.mp4
|
|
| |-- scan-feature.png
|
|
| |-- ai-analysis.png
|
|
| |-- track-feature.png
|
|
| |-- plant-collection.png
|
|
```
|