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)

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.
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 clickable elements live on the right two thirds; keep your own branding, channel name, and any face-cam in the left third. Stay away from corners and the bottom — the mobile progress bar and UI overlap there.

Element	Native size	Where to leave room (1920×1080)
Subscribe / channel circle	294×294	right side, vertically centered-ish, off the edge
Next-video card (thumbnail)	615×345	upper-right or center-right
Playlist / link card	294×294	pair beside the video card
Your branding (logo, name)	—	left third only, top-aligned

Render placeholders in your outro plate where the live elements will sit, so you compose around them — then position the real elements over them in YouTube Studio (use its grid + "snap to element").

jsx

import {useCurrentFrame, interpolate, Img, staticFile} from "remotion";

// 1920×1080 outro plate. Left third = brand; right two-thirds = YouTube element zones (drawn as guides).
export const EndScreen = ({brand}) => {
  const frame = useCurrentFrame();
  const fade = interpolate(frame, [0, 18], [0, 1], {extrapolateRight: "clamp"});
  const zone = {position: "absolute", border: "2px dashed rgba(255,255,255,.25)", borderRadius: 12};

  return (
    <div style={{flex: 1, background: brand.bg, opacity: fade}}>
      {/* LEFT THIRD: your brand — safe from YouTube's overlays */}
      <div style={{position: "absolute", left: 80, top: 90, width: 560}}>
        <Img src={staticFile(brand.logo)} style={{width: 220}} />
        <div style={{color: brand.fg, font: "700 56px Inter", marginTop: 24}}>{brand.name}</div>
        <div style={{color: brand.accent, font: "500 30px Inter", marginTop: 8}}>Subscribe for more →</div>
      </div>

      {/* RIGHT TWO-THIRDS: leave these empty; YouTube draws the live elements here */}
      <div style={{...zone, width: 615, height: 345, right: 90, top: 110}} />        {/* next-video card */}
      <div style={{...zone, width: 294, height: 294, right: 250, bottom: 150, borderRadius: 999}} /> {/* subscribe circle */}
    </div>
  );
};

Ship the dashed guides only in a preview build; the final render drops them, leaving a clean plate whose right side is intentionally quiet. The outro itself can hold a static brand or loop a subtle motion for the full 20s — but nothing that competes for attention with the cards.

Reusable brand template

Both compositions read a single

brand

prop — no hardcoded names, colors, logos, or audio. Swap the object (or pass

--props

) to re-skin every channel intro/outro from one codebase.

// brand.json — the only thing that changes per channel
{ "name": "PixelForge", "logo": "logo.png", "sting": "sting.mp3",
  "bg": "#0B0B14", "fg": "#FFFFFF", "accent": "#7C5CFF" }

bash

# render intro + outro for every brand file in /brands
for f in brands/*.json; do
  name=$(basename "$f" .json)
  npx remotion render Intro  "out/${name}-intro.mp4"  --props="$f"
  npx remotion render Outro  "out/${name}-outro.mp4"  --props="$f"
done

Keep fonts, layout, and timing fixed in the template so 20 channels stay structurally consistent and only the brand identity differs.

Output checklist

Intro ≤5s; logo readable by ~2s; logo hit lands exactly on the audio impact frame.
Outro is ≥20s of held layout; total video ≥25s so end-screen elements are allowed.
Right two-thirds of the outro left quiet for YouTube's elements; own branding in the left third only.
Nothing important within ~10% of any edge or in the bottom UI band.
Up to 4 end-screen elements planned (1 video + subscribe is the highest-CTR layout).
Every text/color/logo/audio comes from the
```
brand
```
prop — one template, many channels.

Deliver & verify (rendered stills → MP4)

Packaged helper (
scripts/
): tile your stills with
scripts/contact-sheet.sh sheet.png f-hook.png f-mid.png f-end.png
, then assert the encode with
scripts/probe-mp4.sh out.mp4 [WxH] [fps]
. See
scripts/README.md
.

This is HEAVY tier: the deliverables are real MP4 plates (intro + outro). Verify the logo hit and the end-screen safe zones as stills before encoding — a sting that lands a frame off, or a logo stamped where YouTube draws its subscribe button, is expensive to discover after a full render.

Output contract:

A Remotion project with both compositions registered (
```
<Composition>
```
+ zod
```
schema
```
+
```
defaultProps
```
), all motion frame-driven — no
```
Date.now()
```
/
```
Math.random()
```
/ timers.
Sting impact baked to the frame (
```
IMPACT = Math.round(0.8 * fps)
```
), not detected at runtime; audio via
```
<Audio src={staticFile()}>
```
so the export carries the sting.
Deliverable = the rendered
```
out/*-intro.mp4
```
+
```
out/*-outro.mp4
```
plus the project, so the user can re-skin via the
```
brand
```
prop and re-export.

Verify loop — render stills → inspect → encode.

bash

# 1. Frame-exact stills WITH SHIPPED brand props (not just defaultProps).
#    Intro: windup / impact / settle.  Outro: fade-in / held end-screen plate.
npx remotion still Intro out/i-windup.png --frame=12 --props=./brand.json
npx remotion still Intro out/i-impact.png --frame=24 --props=./brand.json   # = round(0.8*fps)
npx remotion still Intro out/i-settle.png --frame=40 --props=./brand.json
npx remotion still Outro out/o-end.png    --frame=N  --props=./brand.json

# 2. Inspect each PNG — fidelity (logo readable + captions/tagline correct; on the impact
#    frame the logo is full-scale and the flash fires) AND artifacts (end-screen elements
#    inside YouTube safe zones — branding in the LEFT third only, right two-thirds quiet,
#    nothing within ~10% of any edge or in the bottom UI band; no off-canvas text/overflow).

# 3. Only once the stills check out, encode both plates:
npx remotion render Intro out/intro.mp4 --props=./brand.json
npx remotion render Outro out/outro.mp4 --props=./brand.json

Verify the impact frame explicitly (logo snapped to full, white flash decaying) — the sting must land on it, not near it.
Drop the dashed end-screen guides for the final render; verify the right two-thirds is intentionally quiet.

README demo:

npx remotion render Intro out/demo.gif --codec=gif

Before you finish:

```
npx remotion still
```
renders cleanly at windup/impact/settle (intro) and the held plate (outro) — no errors, no missing logo/sting assets.
On the impact frame the logo is full-scale and legible; intro ≤5s, outro ≥20s held (video ≥25s total).
Frame-driven only — sting impact baked to a frame; no
```
Date.now()
```
/
```
Math.random()
```
/ timers.
End-screen elements land inside YouTube safe zones — branding in the left third, right two-thirds quiet, nothing in the bottom UI band or within ~10% of an edge.
Both MP4s encoded with the sting muxed in and play; every text/color/logo/audio comes from the
```
brand
```
prop; (optional) GIF rendered for the README.

Reference files

```
references/intro-outro.md
```
— the full runnable Remotion compositions for both intro and outro, a CSS/GSAP logo-sting variant, an exact end-screen coordinate map for 16:9 and notes for 1080×1920, the method for finding an audio sting's impact frame and syncing the reveal to it, and the brand-prop schema with the batch render pipeline.

youtube-intro-outro

NPX Install

Tags

SKILL.md Content