267 lines
8.2 KiB
Markdown
267 lines
8.2 KiB
Markdown
# Feels Promo Video Storyboard
|
|
|
|
**Version**: V1 - App Store Feature Video
|
|
**Duration**: ~25 seconds (7 scenes + outro)
|
|
**Resolution**: 1080x1920 (9:16 Portrait)
|
|
**FPS**: 30
|
|
|
|
---
|
|
|
|
## Video Concept
|
|
|
|
**Tagline**: *Track your mood. Understand yourself.*
|
|
|
|
**Target Audience**: People seeking a simple, beautiful way to track their emotional wellbeing without the complexity of journaling apps.
|
|
|
|
**Key Differentiators to Highlight**:
|
|
1. One-tap simplicity (vs. complex journaling)
|
|
2. Beautiful widgets & Apple Watch integration
|
|
3. AI-powered insights (Apple Intelligence)
|
|
4. Deep customization (themes, icons, colors)
|
|
5. Privacy-first with iCloud sync
|
|
|
|
---
|
|
|
|
## Scene Breakdown
|
|
|
|
### Scene 1: Hero (0:00-3:30)
|
|
**Title**: "Your mood. Your journey. Your way."
|
|
|
|
| Element | Details |
|
|
|---------|---------|
|
|
| **Background** | Dark forest green gradient (#1a472a → #2d5a3d) with tiled app icons |
|
|
| **Animation** | Title springs in from top; phone slides in from right |
|
|
| **Phone Screen** | Day View showing mood list with colorful entries |
|
|
| **Layout** | Title top-left, phone large on right (extends off-screen) |
|
|
| **Emotion** | Empowering, personal, inviting |
|
|
|
|
**Screenshot Required**: `screen1-day.png` - Day view with several mood entries
|
|
|
|
---
|
|
|
|
### Scene 2: Widget & Watch (3:30-7:00)
|
|
**Title**: "Tap. Logged. Done."
|
|
**Subtitle**: "Never miss a day"
|
|
|
|
| Element | Details |
|
|
|---------|---------|
|
|
| **Background** | Golden yellow gradient (#c4a000 → #d4b400) |
|
|
| **Animation** | Title springs in; widget scales up; watch scales up with delay |
|
|
| **Widget** | Large square widget showing mood selection |
|
|
| **Watch** | Apple Watch with Feels complication |
|
|
| **Labels** | "One-tap widgets" under widget, "Wrist ready" under watch |
|
|
| **Emotion** | Quick, effortless, accessible |
|
|
|
|
**Screenshots Required**:
|
|
- `screen2-widget.png` - Large widget with 5 mood options
|
|
- `screen2-watch.png` - Watch face with Feels complication
|
|
|
|
---
|
|
|
|
### Scene 3: Journal (7:00-10:30)
|
|
**Title**: "Reflect & Record"
|
|
**Subtitle**: "Add notes & photos to remember why"
|
|
|
|
| Element | Details |
|
|
|---------|---------|
|
|
| **Background** | Medium green gradient (#3d7a4a → #4a8f5a) |
|
|
| **Animation** | Title springs in; phone scales up from center |
|
|
| **Phone Screen** | Note editor with text and photo attachment |
|
|
| **Layout** | Title top, phone centered with slight tilt |
|
|
| **Emotion** | Thoughtful, meaningful, personal |
|
|
|
|
**Screenshot Required**: `screen3-journal.png` - Note editor with example entry
|
|
|
|
---
|
|
|
|
### Scene 4: Insights (10:30-14:00)
|
|
**Title**: "Beautiful Insights"
|
|
**Badge**: "Powered by Apple AI"
|
|
|
|
| Element | Details |
|
|
|---------|---------|
|
|
| **Background** | Blue gradient (#2563eb → #3b82f6) |
|
|
| **Animation** | Title springs in centered; phone scales up; AI badge pops in |
|
|
| **Phone Screen** | Insights view showing month/year analysis |
|
|
| **Badge** | White pill with sparkle emoji, appears at bottom |
|
|
| **Emotion** | Intelligent, modern, trustworthy |
|
|
|
|
**Screenshot Required**: `screen4-insights.png` - Insights view with AI badge visible
|
|
|
|
---
|
|
|
|
### Scene 5: Privacy (14:00-17:30)
|
|
**Title**: "Private & Secure"
|
|
**Subtitle**: "Syncs with Apple Health - Locked to you"
|
|
|
|
| Element | Details |
|
|
|---------|---------|
|
|
| **Background** | Teal green gradient (#059669 → #10b981) |
|
|
| **Animation** | Title centered; shield emoji scales in; phone slides from right |
|
|
| **Phone Screen** | Settings or HealthKit integration screen |
|
|
| **Shield** | Large shield emoji (left side) |
|
|
| **Emotion** | Safe, trustworthy, Apple ecosystem |
|
|
|
|
**Screenshot Required**: `screen5-privacy.png` - Privacy/HealthKit settings
|
|
|
|
---
|
|
|
|
### Scene 6: Themes (17:30-21:00)
|
|
**Title**: "Complete Customization"
|
|
**Subtitle**: "Your Style"
|
|
**Detail**: "12 Thoughtful Themes"
|
|
|
|
| Element | Details |
|
|
|---------|---------|
|
|
| **Background** | Purple gradient (#7c3aed → #8b5cf6) |
|
|
| **Animation** | Title right-aligned springs in; phone slides from left |
|
|
| **Phone Screen** | Theme picker showing color palette options |
|
|
| **Layout** | Title on right, phone on left (extends off-screen) |
|
|
| **Emotion** | Personal, expressive, premium |
|
|
|
|
**Screenshot Required**: `screen6-themes.png` - Theme/customization picker
|
|
|
|
---
|
|
|
|
### Scene 7: Notifications (21:00-24:30)
|
|
**Title**: "Guidance that gets you"
|
|
|
|
| Element | Details |
|
|
|---------|---------|
|
|
| **Background** | Cyan gradient (#0891b2 → #06b6d4) |
|
|
| **Animation** | Title springs in; phone scales up from right |
|
|
| **Phone Screen** | Lock screen with Feels notification or Live Activity |
|
|
| **Layout** | Title top-left, phone large on right |
|
|
| **Emotion** | Supportive, timely, helpful |
|
|
|
|
**Screenshot Required**: `screen7-notifications.png` - Notification or Live Activity
|
|
|
|
---
|
|
|
|
### Outro (24:30-27:00)
|
|
**Text**: "Feels" + "Track your mood. Understand yourself."
|
|
|
|
| Element | Details |
|
|
|---------|---------|
|
|
| **Background** | Default purple gradient with tiled icons |
|
|
| **Animation** | App icon scales up with glow; text fades in |
|
|
| **Glow** | Pulsing white radial glow behind icon |
|
|
| **Emotion** | Memorable, brand moment, call to action |
|
|
|
|
**Asset Required**: `app-icon.png` - App icon (1024x1024)
|
|
|
|
---
|
|
|
|
## Required Assets Checklist
|
|
|
|
### Static Assets
|
|
- [ ] `app-icon.png` - App icon (1024x1024)
|
|
- [ ] `phone.png` - iPhone frame overlay
|
|
- [ ] `watch-frame.png` - Apple Watch frame overlay
|
|
|
|
### Screenshots (capture from app)
|
|
- [ ] `screen1-day.png` - Day view with mood entries
|
|
- [ ] `screen2-widget.png` - Large widget mockup
|
|
- [ ] `screen2-watch.png` - Watch face/complication
|
|
- [ ] `screen3-journal.png` - Note editor with photo
|
|
- [ ] `screen4-insights.png` - Insights view
|
|
- [ ] `screen5-privacy.png` - Privacy/HealthKit settings
|
|
- [ ] `screen6-themes.png` - Theme customization
|
|
- [ ] `screen7-notifications.png` - Notification/Live Activity
|
|
|
|
---
|
|
|
|
## Color Palette by Scene
|
|
|
|
| Scene | Primary Color | Hex |
|
|
|-------|--------------|-----|
|
|
| 1. Hero | Forest Green | #1a472a |
|
|
| 2. Widget | Golden Yellow | #c4a000 |
|
|
| 3. Journal | Medium Green | #3d7a4a |
|
|
| 4. Insights | Royal Blue | #2563eb |
|
|
| 5. Privacy | Teal | #059669 |
|
|
| 6. Themes | Purple | #7c3aed |
|
|
| 7. Notifications | Cyan | #0891b2 |
|
|
| Outro | Purple | #667eea |
|
|
|
|
---
|
|
|
|
## Animation Timing Reference
|
|
|
|
| Animation | Duration | Easing |
|
|
|-----------|----------|--------|
|
|
| Title entrance | ~0.5s | Spring (damping: 200) |
|
|
| Phone entrance | ~0.8s | Spring (damping: 12, stiffness: 80) |
|
|
| Badge/icon pop | ~0.4s | Spring (damping: 10-15, stiffness: 100) |
|
|
| Scene transition | 0.6s | Linear fade |
|
|
|
|
---
|
|
|
|
## Future Video Concepts
|
|
|
|
### V2: "Year in Pixels" Focus
|
|
Highlight the Year View heatmap visualization - emphasize seeing a full year of emotions at a glance.
|
|
|
|
**Key Scene**: Animated heatmap filling in with colors over time.
|
|
|
|
### V3: "Streak Challenge"
|
|
Gamification angle - show streak building, Live Activity on lock screen, celebrating milestones.
|
|
|
|
**Key Scene**: Streak counter incrementing with celebration animations.
|
|
|
|
### V4: "Personality Packs"
|
|
Customization deep-dive - showcase different icon packs, themes, and color combinations.
|
|
|
|
**Key Scene**: Rapid montage of different visual styles.
|
|
|
|
### V5: "Share Your Year"
|
|
Social sharing feature - show the shareable year review card being generated and shared.
|
|
|
|
**Key Scene**: Year card animation rendering, share sheet appearing.
|
|
|
|
---
|
|
|
|
## Technical Notes
|
|
|
|
### Remotion Commands
|
|
```bash
|
|
# Start preview
|
|
npm run dev
|
|
|
|
# Render video
|
|
npx remotion render FeelsPromoV1 out/feels-promo-v1.mp4
|
|
|
|
# Render specific frame range (for testing)
|
|
npx remotion render FeelsPromoV1 out/test.mp4 --frames=0-30
|
|
```
|
|
|
|
### Screenshot Capture Tips
|
|
1. Use iPhone 15 Pro Max simulator for highest quality
|
|
2. Enable "Show Touch" in simulator for interaction demos
|
|
3. Capture at 3x scale for maximum resolution
|
|
4. Remove status bar in post-processing if needed
|
|
|
|
---
|
|
|
|
## Messaging Framework
|
|
|
|
### Primary Message
|
|
"Track your mood in seconds, understand your patterns over time."
|
|
|
|
### Supporting Messages
|
|
1. **Simplicity**: "One tap. That's all it takes."
|
|
2. **Insight**: "See your emotional journey unfold."
|
|
3. **Privacy**: "Your feelings, your data, your control."
|
|
4. **Style**: "Make it yours with 12 beautiful themes."
|
|
5. **Ecosystem**: "Works seamlessly with Apple Watch and widgets."
|
|
|
|
### Emotional Arc
|
|
1. **Hook** (Scene 1): Personal, empowering
|
|
2. **Features** (Scenes 2-6): Practical, impressive
|
|
3. **Trust** (Scene 5-6): Secure, personalized
|
|
4. **CTA** (Outro): Memorable, action-driving
|
|
|
|
---
|
|
|
|
*Last Updated: January 2026*
|