Scene Intro Cards

Transitional intro cards that appear between video scenes to prepare viewers for upcoming content. These "Coming up next" style cards increase engagement by building anticipation and providing visual breathing room.

Core Principle

Intro Cards = Anticipation Builder + Cognitive Reset

Scene intro cards serve two purposes:

Build anticipation for the next segment
Provide cognitive reset between dense information sections

VIEWER JOURNEY
==============

[Dense Content A]
       |
       v
+------------------+
|  INTRO CARD      |  <-- 2-4 seconds
|  "Coming Up..."  |      Viewer anticipation peaks
+------------------+
       |
       v
[Dense Content B]     <-- Viewer re-engages with fresh attention

When to Use Intro Cards

Use Case	Card Duration	Style
Major topic change	3-4 seconds	Bold, high contrast
Section within topic	2-3 seconds	Minimal, subtle
Returning from tangent	2 seconds	Quick reminder
Before key reveal	3-4 seconds	Building tension
Tutorial steps	2 seconds	Numbered, clear

Card Anatomy

+------------------------------------------+
|                                          |
|     [ICON/EMOJI]                         |
|                                          |
|     PRIMARY TEXT                         |
|     "Coming Up Next"                     |
|                                          |
|     Secondary text (optional)            |
|     Brief description                    |
|                                          |
|     ---------=--------- (progress bar)   |
|                                          |
+------------------------------------------+

Required Elements

Primary text: 2-4 words maximum
Visual anchor: Icon, emoji, or simple graphic

Optional Elements

Secondary descriptive text
Progress indicator
Section number
Estimated time

Style Variations

1. Minimal

Clean and fast, ideal for short-form content.

+------------------------------------------+
|                                          |
|                                          |
|              NEXT UP                     |
|              --------                    |
|                                          |
|                                          |
+------------------------------------------+

Colors: Muted background, high-contrast text
Animation: Simple fade
Use: Professional, educational content, TikTok/Reels
Duration: 1.5-2 seconds

2. Bold

High impact, attention-grabbing for major transitions.

+------------------------------------------+
|  ////////////////////////////////////////|
|  //                                    //|
|  //       COMING UP                    //|
|  //       THE GOOD STUFF               //|
|  //                                    //|
|  ////////////////////////////////////////|
+------------------------------------------+

Colors: Vibrant, brand colors
Animation: Scale pop with motion blur
Use: Entertainment, high-energy content
Duration: 2-3 seconds

3. Branded

Consistent with brand identity, includes progress tracking.

+------------------------------------------+
|  [LOGO]                                  |
|                                          |
|        STEP 3 OF 5                       |
|        Setting Up Auth                   |
|                                          |
|        [Progress: ====>-----]            |
+------------------------------------------+

Colors: Brand palette
Animation: Consistent with brand motion
Use: Series, courses, branded content
Duration: 2-3 seconds

4. Numbered

Clear step indication for tutorials and listicles.

+------------------------------------------+
|                                          |
|            +-----+                       |
|            |  3  |                       |
|            +-----+                       |
|                                          |
|         CONFIGURATION                    |
|                                          |
+------------------------------------------+

Colors: High contrast number, subtle background
Animation: Number scales in first
Use: Step-by-step tutorials, lists
Duration: 2 seconds

Timing Recommendations (2-4 Seconds)

Duration by Platform

Platform	Recommended	Minimum	Maximum
TikTok/Reels	1.5-2s	1s	2.5s
YouTube Shorts	2-2.5s	1.5s	3s
YouTube Long	2.5-4s	2s	5s
LinkedIn	2-3s	2s	4s
Tutorial/Course	3-4s	2.5s	5s

Duration Formula

Card Duration = Base + Content Complexity Modifier

Base Duration:
- Short-form (<60s): 1.5 seconds
- Medium-form (1-5m): 2.5 seconds
- Long-form (>5m): 3 seconds

Complexity Modifier:
- Simple topic change: +0s
- Moderate shift: +0.5s
- Major section change: +1s

Transition Breakdown

TYPICAL 3-SECOND CARD
=====================

0.0s  |====| Fade/slide in (0.3-0.5s)
0.4s  |------------------------------------------|
      |    Hold for reading (2.2-2.5s)           |
2.6s  |------------------------------------------|
      |====| Fade/slide out (0.3-0.5s)
3.0s  Complete

Rule: Never hard cut to/from intro cards

Animation Patterns

Pattern 1: Fade Through

Simple, professional transition.

Frame 0:    Content A visible
Frame 15:   Content A fades out (0.5s at 30fps)
Frame 16:   Card fades in
Frame 75:   Card visible (2s hold)
Frame 90:   Card fades out (0.5s)
Frame 91:   Content B fades in

Pattern 2: Scale Pop

Energetic, attention-grabbing.

Frame 0:    Card at 0% scale, 0% opacity
Frame 10:   Card at 110% scale, 100% opacity (overshoot)
Frame 15:   Card at 100% scale (settle)
Frame 75:   Card visible (2s hold)
Frame 85:   Card scales to 95%, fades out
Frame 90:   Content B begins

Pattern 3: Slide + Reveal

Directional momentum.

Frame 0:    Card offscreen left, Content A visible
Frame 15:   Card slides in from left, Content A exits right
Frame 75:   Card centered (2s hold)
Frame 90:   Card slides out left, Content B enters right

Pattern 4: Icon First

Two-stage reveal for emphasis.

Frame 0:    Icon appears (scale from 0)
Frame 20:   Icon settles, text fades in below
Frame 30:   Full card visible
Frame 90:   Simultaneous fade out
Frame 105:  Content B begins

Integration with TransitionSeries

Intro cards integrate seamlessly with Remotion's <TransitionSeries>:

import { TransitionSeries, linearTiming } from "@remotion/transitions";
import { fade } from "@remotion/transitions/fade";

<TransitionSeries>
  <TransitionSeries.Sequence durationInFrames={180}>
    <ContentSceneA />
  </TransitionSeries.Sequence>

  <TransitionSeries.Transition
    presentation={fade()}
    timing={linearTiming({ durationInFrames: 15 })}
  />

  <TransitionSeries.Sequence durationInFrames={60}>
    <IntroCard
      title="Coming Up"
      subtitle="Advanced Patterns"
      icon="rocket"
    />
  </TransitionSeries.Sequence>

  <TransitionSeries.Transition
    presentation={fade()}
    timing={linearTiming({ durationInFrames: 15 })}
  />

  <TransitionSeries.Sequence durationInFrames={240}>
    <ContentSceneB />
  </TransitionSeries.Sequence>
</TransitionSeries>

Accessibility Considerations

Readable Timing

MINIMUM DISPLAY TIME FOR READABILITY
=====================================

Text Length        Minimum Duration
-----------------------------------------
2-3 words          1.5 seconds
4-5 words          2.0 seconds
6-7 words          2.5 seconds
8+ words           3.0+ seconds (avoid this many)

Formula: 250ms per word + 1 second base
         duration = (wordCount * 0.25) + 1.0

Color Contrast (WCAG AA)

CONTRAST REQUIREMENTS (minimum 4.5:1)
=====================================

Background    Text Color    Ratio    Status
-------------------------------------------------
#000000       #FFFFFF       21:1     Excellent
#1a1a2e       #FFFFFF       15.3:1   Excellent
#2d3748       #F7FAFC       12.2:1   Good
#4a5568       #FFFFFF       7.0:1    Acceptable
#718096       #FFFFFF       4.5:1    Minimum

Reduced Motion Support

// Respect user preferences for reduced motion
const { prefersReducedMotion } = useMediaQuery();

const animationConfig = prefersReducedMotion
  ? { durationInFrames: 1 } // Instant, minimal motion
  : { durationInFrames: 15 }; // Full animation

Screen Reader Considerations

// Ensure card content is announced
<div
  role="status"
  aria-live="polite"
  aria-label={`Coming up next: ${title}`}
>
  <IntroCard title={title} />
</div>

Anti-Patterns to Avoid

Anti-Pattern	Problem	Solution
Too long (>5s)	Viewers skip ahead	Keep 2-4s
Too short (<1.5s)	Unreadable	Minimum 1.5s
Too frequent	Disrupts flow	Max 1 per 90-120s
Too much text	Cognitive overload	4 words maximum
No visual anchor	Forgettable	Always include icon
Jarring colors	Breaks immersion	Match video palette
Inconsistent style	Unprofessional	Use same template
Hard cuts	Jarring transition	Always fade/transition

Quick Reference Checklist

INTRO CARD PRE-RENDER CHECKLIST
===============================

DESIGN
[ ] 2-4 words primary text
[ ] Visual anchor (icon/emoji)
[ ] Brand-consistent colors
[ ] High contrast (4.5:1+ ratio)
[ ] Clean, uncluttered layout

TIMING
[ ] 2-4 second total duration
[ ] Smooth transition in (0.3-0.5s)
[ ] Adequate hold time for reading
[ ] Smooth transition out (0.3-0.5s)
[ ] Appropriate for target platform

ANIMATION
[ ] Entry animation defined
[ ] Exit animation defined
[ ] Reduced motion fallback provided
[ ] Frame timing verified at target FPS

ACCESSIBILITY
[ ] Text readable at display time
[ ] Sufficient color contrast
[ ] Motion sensitivity handled
[ ] Screen reader friendly (if web)

Related Skills

video-pacing: Timing and rhythm patterns for overall video flow
remotion-composer: Programmatic video generation with Remotion
motion-animation-patterns: Spring configs and easing functions
thumbnail-first-frame: Visual design principles

References

Card Templates - React/Remotion component templates
Animation Presets - Spring configs for different styles
Timing Patterns - When and how long to show cards

scene-intro-cards