youtube-intro-outro

The saved excerpt is a snapshot from review. The external source remains the complete and most current version.

---
name: youtube-intro-outro
description: This skill should be used when the user asks to "make a YouTube intro", "create a channel intro", "build a logo sting/bumper", "design an outro / end screen / end card", "add subscribe and next-video cards", "make an intro animation", "build a reusable intro template", or "sync the logo reveal to an audio sting". Covers the 3-5s branded intro, the last-20s end-screen outro inside YouTube's element safe zones, timing conventions, audio-sting sync, and a swap-the-brand template.
version: 0.1.0
---

# YouTube Intro & Outro

Build the two pieces of motion that bracket every video on a channel: a 3-5s branded **intro** (logo sting that says "this is my channel") and an **outro** whose last ~20s host YouTube's clickable end-screen elements (subscribe + next video). Both must respect hard platform constraints — intro length affects retention; outro layout must dodge YouTube's overlaid UI — and both should be one reusable template where only the brand changes.

## When to use

- Channel intro / bumper / logo sting (a 3-5s identity hit before content).
- Outro / end screen / end card (the last ~20s with subscribe + next-video cards).
- A reusable brand template: swap name, logo, colors, sting, and re-export.

## Two hard rules (platform, not taste)

1. **Keep the intro 3-5s, the logo hit 1-2s.** Anything longer than 5s causes measurable viewer drop-off, which hurts the video in the algorithm. The intro confirms the channel and gets out of the way.
2. **The outro must be ≥20s of held, quiet layout, and the video ≥25s total.** YouTube only allows end-screen elements in the final 5-20s, and the video must be at least 25 seconds long. Design the outro plate around where those elements land — never put your own content under them.

## Intro: the logo sting

A sting is three beats in ~3.5s: a **windup** (motion building tension), an **impact** (logo snaps to full on the audio hit), and a **settle** (micro-overshoot relaxing to rest). The brand mark must land exactly on the sound's impact frame, not near it.

| Beat | Window | Job |
|---|---|---|
| Windup | 0-0.8s | whoosh / build; logo not yet readable |
| Impact | ~0.8s | logo snaps to full on the audio hit + a white flash |
| Settle | 0.8-1.2s | overshoot relaxes to rest; tagline fades in |
| Hold | 1.2-3.5s | brand legible, then cut to content |

```jsx
import {useCurrentFrame, useVideoConfig, spring, interpolate, Img, Audio, staticFile} from "remotion";

export const LogoSting = ({brand}) => {
  const frame = useCurrentFrame();
  const {fps} = useVideoConfig();
  const IMPACT = Math.round(0.8 * fps);            // logo lands here, on the sting hit

  // overshoot scale: springs up past 1, settles to 1 (the "snap")
  const scale = spring({frame: frame - IMPACT, fps, config: {damping: 9, mass: 0.5}, from: 1.18, to: 1});
  const logoOpacity = frame < IMPACT ? 0 : 1;
  const flash = interpolate(frame - IMPACT, [0, 6], [0.9, 0], {extrapolateLeft: "clamp", extrapolateRight: "clamp"});

  return (
    <div style={{flex: 1, background: brand.bg, display: "flex", alignItems: "center", justifyContent: "center"}}>
      <Audio src={staticFile(brand.sting)} />        {/* impact of this file must sit at 0.8s */}
      <Img src={staticFile(brand.logo)} style={{width: 420, opacity: logoOpacity, transform: `scale(${scale})`}} />
      <div style={{position: "absolute", inset: 0, background: "#fff", opacity: flash}} />
    </div>
  );
};
```

`spring` overshooting from 1.18→1 *is* the snap; the white `flash` decaying over 6 frames sells the impact. Align the audio so its loudest transient sits on frame `IMPACT`. See `references/intro-outro.md` for the full composition, a CSS/GSAP variant, and how to find the impact frame in any sting.

## Outro: end-screen layout that respects YouTube's element zones

This is where most outros fail: creators put a logo or text exactly where YouTube will stamp a subscribe button. Treat the frame as **two thirds**. YouTube's click