Module 2.8 — Intro & Outro

Detailed content

🗺️ Overview — intros, outros, and lower thirds

Intros and outros are the first and last frames the viewer sees. A weak intro loses views in the first 5 seconds. An outro without a call to action loses subscriptions and clicks. These templates solve both sides.

🎯 Core concept

All these templates use the same pattern: spring() for entrances with natural physics + interpolate() for smooth exits. The difference is in the what animates — text, underlines, rings, particles.

Opening hook

The first 5s determine retention

Lower-third

Overlay over content during the video

Final CTA

Other = conversion: sign up / click

Chapter title

Splits long content into chapters

🎞️ cinematic-title-intro — spring + underline

O cinematic-title-intro is the most widely used opening template: the title rises with spring physics (spring()), an underline expands from left to right, and the subtitle fades in with a delay. Cinematic result with ~50 lines of code.

Three animations in sequence cinematic-title-intro.tsx

const titleY = spring({
  frame, fps, from: 50, to: 0, durationInFrames: 40,
  config: { damping: 14, mass: 0.8 },
});

const underlineWidth = interpolate(
  frame, [20, 50], [0, 100],
  { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
);

const subtitleOpacity = interpolate(
  frame, [40, 60], [0, 1],
  { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
);

💡 Practical tip

Change the color of the underline for your brand color. With one change to the gradient you get a completely customized intro. Combine with fade-through-black before it for a cinematic fade-in from black.

spring translateY

Title rises with natural physics

width interpolate

Underline expands 0→100%

delay via frame offset

Subtitle starts at frame 40

damping 14

Low damping = soft bounce

⏱️ countdown-intro — 3-2-1-GO! ring

O countdown-intro uses an SVG ring with strokeDasharray animated to show the progress of each second, while the number in the center changes from 3 → 2 → 1 → GO with a scale spring.

Ring + number + GO countdown-intro.tsx

const circumference = 2 * Math.PI * 70;
const ringProgress = (frame % fps) / fps;
const dashOffset = circumference * ringProgress;

// GO! com spring de escala
const goScale = spring({
  frame: Math.max(0, frame - totalCountdownFrames),
  fps, config: { damping: 8, stiffness: 100 },
});

// SVG: anel gira -90deg (topo = início)
<svg style={{ transform: "rotate(-90deg)" }}>
  <circle stroke="#3b82f6"
    strokeDasharray={circumference}
    strokeDashoffset={dashOffset} />
</svg>

✓ Ideal contexts

•Live streams (interval before start)
•Technical tutorials with an energetic intro
•Sports, gaming, and timed challenge videos

✗ Avoid in

•Serious / formal corporate content
•Emotional or narrative videos
•When the content itself already has a strong introduction

strokeDashoffset

Ring progress per second

frame % fps

Resets every second

rotate(-90deg)

Start at the top of the circle

spring scale GO!

Energetic bounce at the end

📋 lower-third — name/title bar

O lower-third is the classic TV overlay: a bar appears in the lower third of the frame with a name and title/role. It’s standard in journalism and interviews; on YouTube, it adds a touch of professionalism.

Bar slides in from the left

An element translateX(-100% → 0) with spring enters from the left edge of the frame.

Text appears with a delay

Name and title make opacity fade in after the bar is visible — prevents text from appearing before the container.

Bar exits to the left

Near the end of the composition, the bar retraces its path with smooth interpolation.

💡 Practical tip

Use lower-third with <Sequence from={fps * 3} durationInFrames={fps * 4}> to show the bar only during a specific section of the video. The useCurrentFrame() inside the Sequence starts from zero — no manual offset calculations.

position absolute

Overlay over the main video

bottom: 15%

Bottom third of the screen

Sequence

Controls when it appears/disappears

semi-transparent

rgba bg so it doesn't cover the background

🔔 end-card + subscribe-reminder — conversion

O end-card displays a call-to-action card at the end of the video with subscribe buttons. The subscribe-reminder is a floating overlay that can appear at any moment—both are conversion tools for YouTube channels.

subscribe-reminder as overlay subscribe-reminder.tsx

// Aparece no frame 90, fica 3s, some
const showAt = fps * 3;
const hideAt = fps * 6;

const opacity = interpolate(
  frame,
  [showAt, showAt + 10, hideAt - 10, hideAt],
  [0, 1, 1, 0],
  { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
);

const translateY = spring({
  frame: Math.max(0, frame - showAt),
  fps, config: { damping: 12 },
  from: 60, to: 0,
});

✓ Best practices

•Showing the subscribe-reminder halfway through the video
•20-second end card (YouTube standard)
•Keep the visual cloche short and to the point

✗ Common mistakes

•Showing the subscribe-reminder too early (before 30s)
•End card with more than 4 elements — confusing
•Colors that conflict with the content behind them

keyframes 4pts

Fade in → hold → fade out

entrance spring

Bounce from the bottom

end-card 20s

YouTube pattern for end cards

Sequence wrapper

Controls timing without manual math

💬 quote-card + title-split — visual impact

O quote-card displays a quote with the author highlighted — great for motivational videos, interviews, and lesson highlights. The title-split splits the title into two blocks that meet in the center—a dramatic effect for openings.

💡 title-split in practice

The trick of title-split is simple: two spans, one with translateX(-80 → 0) and another one with translateX(80 → 0), both animated with spring in the same frame. Their meeting in the center creates visual tension that viewers feel even without noticing the mechanics.

title-split — two sides come together title-split.tsx

const progress = spring({ frame, fps,
  config: { damping: 18, stiffness: 90 }
});

// Metade esquerda vem da esquerda
const leftX = interpolate(progress, [0, 1], [-80, 0]);
// Metade direita vem da direita
const rightX = interpolate(progress, [0, 1], [80, 0]);

two spans

Each independently animated half

overflow hidden

Hides the halves before they enter

quote-card

Quote + author with sequential fade

damping 18

Higher = more direct encounter

📚 Complete Intro & Outro Library

The 9 templates in this category — quick reference:

chapter-title

templates/chapter-title.tsx

Chapter number with decorative lines

hook: interpolate line width

cinematic-title-intro

templates/cinematic-title-intro.tsx

Spring title + underline + fading subtitle

hook: spring translateY + interpolate

countdown-intro

templates/countdown-intro.tsx

SVG 3-2-1-GO ring with scale spring

hook: strokeDashoffset + spring scale

credits-roll

templates/credits-roll.tsx

Credits rolling from bottom to top

hook: continuous translateY interpolate

end-card

templates/end-card.tsx

Subscribe CTA card at the end

hook: spring scale + opacity fade in

lower-third

templates/lower-third.tsx

Name/title bar in the lower third

hook: spring translateX + text delay

quote-card

templates/quote-card.tsx

Quote with author — sequential fade

hook: interpolate opacity per element

subscribe-reminder

templates/subscribe-reminder.tsx

Floating overlay — appears and disappears

hook: interpolate 4 keyframes

title-split

templates/title-split.tsx

Two halves of text come together

hook: spring ±80px → 0

9 templates

From opening to closing

dominant spring

Natural physics in all intros

overlay vs full

lower-third and subscribe are overlays

Sequence timing

Use Sequence to position it in time

📌 Module summary

✓

cinematic-title-intro — spring + underline + subtitle, the cinematic opening pattern

✓

countdown-intro — strokeDashoffset animated for an SVG 3-2-1-GO ring

✓

lower-third — TV/journalism overlay for name and title

✓

end-card + subscribe-reminder — conversion tools for YouTube

✓

title-split — two blocks meet in the center with a spring

Next Module:

2.9 — Logo & Branding: 9 logo animations for visual identity

← Module 2.7 Next Module →