Youtube Intro Outro

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.

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.

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").

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" }

# 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.

# 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:

1. npx remotion still renders cleanly at windup/impact/settle (intro) and the held plate (outro) — no errors, no missing logo/sting assets.
2. On the impact frame the logo is full-scale and legible; intro ≤5s, outro ≥20s held (video ≥25s total).
3. Frame-driven only — sting impact baked to a frame; no Date.now() / Math.random() / timers.
4. 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.
5. 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.