Render with Remotion CLI

npx remotion render remotion/index.tsx EndScreen output.mp4

Composition code

import { AbsoluteFill, useCurrentFrame, interpolate, Easing } from "remotion";

export const EndScreen: React.FC = () => {
  const frame = useCurrentFrame();

  const subScale = interpolate(frame, [30, 60], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp", easing: Easing.out(Easing.back(1.6)) });
  const card1X = interpolate(frame, [20, 55], [-500, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp", easing: Easing.out(Easing.cubic) });
  const card2X = interpolate(frame, [35, 70], [500, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp", easing: Easing.out(Easing.cubic) });
  const bellAngle = Math.sin((frame - 80) * 0.5) * 12;

  return (
    <AbsoluteFill style={{ background: "#0f0f0f", fontFamily: "Inter, sans-serif" }}>

End Screen

YouTube-style end screen with subscribe button bounce, bell ring, and sliding video cards.

YouTube Broadcast

Duration7s

Resolution1920 × 1080

Frame rate30 fps

Frames210

Browse all templates

Copy the code snippet into your Remotion project and run the render command to generate this template locally.

Related templates

View

End Screen

Related templates

Tutorial Intro

Lower Third

Countdown Timer