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
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>`:
```tsx
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 flowremotion-composer: Programmatic video generation with Remotionmotion-animation-patterns: Spring configs and easing functionsthumbnail-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