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>
  );
};