Video & Motion Design Rules¶

Reference for production-quality motion graphics, product videos, and animated presentations. All values are specific and actionable.

Animation Timing¶

Duration by element weight¶

Rule: UI animations stay under 300ms. 180ms feels more responsive than 400ms (empirical).

Material Design 3 duration tokens¶

Scene duration guidelines¶

60-second video rhythm:

[0-5s]   Hook: bold statement, dark bg        — FAST
[5-15s]  Problem: 2-3 quick cuts              — MEDIUM
[15-25s] Solution reveal: product appears     — SLOW
[25-40s] Features: 3-4 staggered              — MEDIUM
[40-50s] Social proof: stats/logos/quotes     — MEDIUM-FAST
[50-60s] CTA: logo + URL + action             — SLOW, decisive

Breathing rule: after every fast section (3+ quick cuts), include one slow shot (5-8s).

Easing¶

Cubic-bezier reference¶

Spring physics¶

NEVER linear for UI - looks mechanical. Linear is for progress bars only.

Stagger Patterns¶

Max staggered items: 8-10. Beyond that, last items wait too long.

Linear stagger: 30-80ms between items in a list.

Cascade (accelerating): each delay is shorter than previous - creates "pouring in" effect.

Grid diagonal: delay = (row + col) * baseDelay. Top-left animates first.

Ripple from center: delay proportional to distance from center point.

Disney's 12 Principles Applied to Product Video¶

Typography on Screen¶

Size scale for 1920x1080¶

Reading speed¶

Assume 150-180 WPM for mixed audience. Rule: 2.5-3.0s per short line (7-9 words).

Word limits per element¶

Typography animation¶

• DO: fade in + translate 20-40px from bottom
• DO: scale from 95% to 100% with opacity 0→1
• DO: stagger words 4-8 frames each
• DON'T: rotate text
• DON'T: bounce text (unless playful brand)
• DON'T: move text while viewer is reading it

Text must be readable for minimum 2s after animation completes. Never animate text AND expect reading simultaneously.

Color¶

Palette rules¶

• Max 3 colors per video (+ black/white/gray)
• 1 primary brand color + 1 accent + 1 CTA color
• Background:text contrast minimum 7:1 (WCAG AAA)
• Gradient colors: max 120° apart on color wheel

Gradient guidelines¶

Direction: top-left→bottom-right (natural light). DON'T bottom-to-top.

Noise gradients (2025-2026): gradient + 3-8% noise overlay = organic premium feel.

Dark vs light mode¶

Dark mode better for: product showcases (product pops), premium/luxury feel, dim viewing environments, photo/portfolio.

Light mode better for: dense text, corporate, conference rooms, print-adjacent.

Trending palettes (2026)¶

Tech/dark: - Deep navy #0D1117 + electric blue #58A6FF - Dark teal #0F2027 + cyan #00C9FF + soft white

Tech/light: - Off-white #F8F9FA + warm accents - Soft lavender #F3E8FF + deep purple #7C3AED

Composition¶

Safe zones by platform¶

16:9 YouTube (1920x1080): - Title-safe: inner 80% (10% padding each side) - Action-safe: inner 90% - Lower thirds zone: bottom 20-25%

9:16 Vertical (TikTok/Reels/Shorts, 1080x1920): - Bottom 20% occupied by platform UI - Right 10% occupied by platform UI - Subject/face: upper 20-30% of frame - Text safe zone: 15-75% height, centered width

1:1 Square (Instagram, 1080x1080): - Safe zone: inner 900x900px - Center composition works best

Visual hierarchy per scene¶

• Maximum 3 hierarchy levels per scene
• Primary element = 40-60% of visual weight
• Never two primary elements competing in one scene
• Use size + weight + color + position together (not just one)

Parallax depth¶

• Background layer: 0.2-0.4x scroll speed
• Midground: 0.6-0.8x
• Foreground: 1.0-1.3x

Scene Transitions¶

Default = hard cut. 80%+ of professional video transitions are cuts.

Max 2-3 transition types per video. DON'T: star wipes, checkerboard, dissolve >2s.

Audio crossfade: 100-300ms overlap for smooth audio transitions.

Audio Levels¶

dB reference¶

Rule: VO should be ~20 dB louder than background music.

BPM by mood¶

120 BPM = preferred human tempo (matches walking pace, DAW default).

Sound effect types¶

SFX should be 6-12 dB quieter than VO.

Free sound libraries¶

• Mixkit (mixkit.co) - royalty-free, no attribution, commercial OK
• Pixabay (pixabay.com/sound-effects) - royalty-free, no signup
• Freesound (freesound.org) - CC-licensed
• SFX Engine (sfxengine.com) - AI-generated UI sounds

Storytelling Frameworks¶

PAS (Problem-Agitation-Solution) - highest converting¶

Problem:    3s — one clear pain point
Agitation:  5s — vivid consequence
Solution:   4s — your product/answer
CTA:        3s — direct call to action
Total: ~15s. Scale proportionally for 30-60s.

Hook-Value-CTA¶

Hook:  2-5s  — pain point or question
Value: rest  — concise solution
CTA:   3-5s

Hook-Problem-Solution-Proof-CTA (short video optimized)¶

First seconds rule¶

• First 3 seconds determine retention (scroll-stop moment)
• First 8 seconds = everything for short-form
• DON'T: logo/intro first (nobody cares about your logo)
• DO: start with hook/problem/visual surprise

Platform Specs (2026)¶

Engagement sweet spots: TikTok 21-34s, YouTube Shorts 30-60s, Instagram Reels 15-30s.

Copywriting for Video¶

• Numbers > adjectives: "5x faster" not "much faster"
• Benefit > feature: "Save 10 hours/week" not "Has batch processing"
• You > We: "You'll love..." not "We built..."
• Max 8-10 words per line on screen
• Remove: Very, Really, Basically, Actually, Just

Hook formulas: - "What if you could [desired outcome]?" - "[Number] [noun] that [unexpected benefit]" - "Stop [common mistake]. Start [better approach]."

Thumbnail Design¶

Spec: 1280x720px, 72dpi, PNG/JPG <2MB.

60-30-10 color rule: 60% background, 30% subject, 10% accent/text.

• Max 3-5 words, readable at mobile size
• Faces with emotion = +20-30% CTR
• 1-2 hero elements max, no clutter

Gotchas¶

• Linear easing looks mechanical. Always use a curve. The only legitimate use for linear is progress bars and spinners where constant rate is expected.
• Staggering 20+ items breaks UX. The last item waits too long - viewer attention drifts. Max 8-10 staggered items; for longer lists, group them and stagger groups.
• Don't start with a logo. Viewers skip intros. The hook must earn attention before branding appears.
• Music BPM ≠ mood. Two tracks at 120 BPM can feel completely different. BPM sets energy floor, not emotional character.
• Bottom 20% of vertical video is covered by platform UI (TikTok Like/Comment/Share buttons). Never place text or CTAs there.
• Dissolve longer than 2 seconds looks like a mistake. Cross dissolve is for passage of time, not style. Keep it 0.5-2s max.

Production Checklists¶

Pre-production¶

• [ ] Story framework: PAS / 3-Act / Hook-Value
• [ ] Platform + aspect ratio defined
• [ ] Color palette: max 3-4 colors + neutrals
• [ ] Fonts: max 2 (heading + body)
• [ ] Music: BPM matched to mood
• [ ] Sound effects library ready

Animation¶

• [ ] Consistent easing: 1-2 curve types max
• [ ] Timing within bounds (micro <100ms, standard 200-350ms, complex 350-500ms)
• [ ] Stagger 30-80ms between grouped items
• [ ] Max 2 elements animated simultaneously
• [ ] Follow-through on stops (overshoot + settle)
• [ ] Anticipation before major transitions

Post-production¶

• [ ] Audio levels: VO -12 to -10 dB, music -32 to -24 dB under VO
• [ ] Text readable at target device size
• [ ] Safe zones respected for target platform
• [ ] Transitions consistent (max 2-3 types)
• [ ] Hook in first 3 seconds
• [ ] CTA clear and visible
• [ ] Thumbnail: 60-30-10 rule, max 5 words
• [ ] Captions/subtitles added
• [ ] Exported at correct platform specs

See Also¶

• css animation and transforms
• remotion programmatic video
• 3d browser libs for video