# Visual Inspiration & Techniques

Ideas and techniques for creating premium promo videos. **These are suggestions, not templates.** Let your creative instincts lead.

---

## Animation Toolkit

### Spring Physics
Play with these parameters for different feels:
- `damping: 8-12` → bouncy, playful
- `damping: 15-20` → smooth, professional
- `damping: 25+` → snappy, minimal overshoot
- `mass: 0.5` → lighter, faster
- `mass: 1.5` → heavier, more momentum

### Timing Curves
- **Staggered reveals**: Delay each element by 10-20 frames for cascading effect
- **Anticipation**: Small backward motion before forward (scale 0.95 → 1.1 → 1)
- **Overshoot**: Go past target, settle back (translateY: 50 → -10 → 0)
- **Ease-out emphasis**: Quick start, slow finish draws attention

### 3D Transforms
```
transform: `perspective(1000px) rotateY(${angle}deg) rotateX(${tilt}deg)`
```
- Perspective 800-1200px for subtle depth
- Perspective 400-600px for dramatic angles
- Combine with translateZ for parallax layers

---

## Transition Ideas

**Metallic Swoosh Wipe**
- Diagonal gradient mask that moves across screen
- Add metallic sheen with animated gradient position
- Motion blur on the leading edge

**3D Flip Reveal**
- Element rotates on Y-axis to reveal new content
- Add backface-visibility for clean flip
- Slight scale increase during rotation adds impact

**Particle Dissolve**
- Break content into grid, animate each cell
- Random delays create organic dissolve
- Scale down + fade for dust effect

**Zoom Through**
- Camera pushes through current scene
- Scale up rapidly (1 → 3) with fade
- New scene scales down from large (3 → 1)

**Directional Slide**
- Content slides out, new content slides in
- Add subtle blur during motion
- Offset timing for overlap transition

**Morph Transform**
- Shape morphs into next shape
- Use clipPath animations
- Smooth color transitions during morph

---

## Visual Elements

### Browser Mockups
- **Floating**: Dramatic shadow, slight rotation (2-5deg)
- **Perspective**: rotateX(5deg) rotateY(-10deg) for 3D tilt
- **Device frame**: Wrap in laptop/phone bezel
- **Animated cursor**: Show interactions, clicks
- **Screen glow**: Soft light emanating from display

### Stat Presentations
- Counter animation (0 → final value)
- Circle/ring fill animation
- Bar chart that grows
- Number with pulsing glow on reveal

### Text Reveals
- Word-by-word fade-in
- Character stagger (typewriter+)
- Clip-path reveal (text slides out from behind mask)
- Blur-to-sharp focus transition
- Scale up from baseline

### Background Effects
- Subtle gradient animation (hue shift)
- Floating particles or dots
- Grid pattern with perspective
- Mesh gradient with smooth movement
- Noise texture overlay (very subtle, 2-5% opacity)

---

## Scene Concepts

### Opening Hook
- Start with the pain, not the product
- Big stat that stops scrolling
- Question that hits home
- Dark/urgent colors for problems

### Product Reveal
- Build anticipation with pause
- Logo animation with impact
- Sound design moment (sync to visual)
- Color shift from problem (red) to solution (blue)

### Feature Showcase
- Show the UI, not just describe it
- Highlight interactions with cursor/focus
- Before/after comparisons
- Split screen demonstrations

### Closing CTA
- Clear single action
- Urgency without desperation
- Reinforce brand identity
- Leave contact/URL visible

---

## Color Psychology

**Problems/Pain**: Red (#dc2626), Orange (#ea580c), Dark grays
**Solutions/Benefits**: Blue (#3b82f6), Green (#22c55e), Purple (#8b5cf6)
**Urgency**: Amber (#f59e0b), Red accents
**Trust**: Blue (#3b82f6), Navy (#1e3a5a)
**Premium**: Deep purple (#7c3aed), Gold accents (#fbbf24)

---

## Things That Pop

- Unexpected motion direction
- Pause before big reveal (2-3 seconds of buildup)
- Scale changes (tiny to big, big to tiny)
- Depth through layered parallax
- Consistent motion language throughout
- One "hero moment" per scene, not everything moving at once

---

## Technical Notes

**Performance**
- Keep transforms on GPU (transform, opacity)
- Avoid animating width/height (use scale)
- Pre-compose complex scenes

**Readability**
- 60-100px minimum for headlines at 1080p
- High contrast text/background
- Don't animate text people need to read

**Timing**
- 4-6 seconds per major scene
- 1-2 seconds for transitions
- Match voiceover rhythm, not just timestamps