Fifteen seconds. Two video slots, one Subscribe circle. And a pixel pug who climbs on top of all of them.
This post shows you how to build your own animated end screen with Claude: a blurred background from your own video, frames that sit exactly where YouTube’s buttons go, and any animation you like on top. You only ever paste into Claude. It measures YouTube’s layout, builds the animation as a web page, renders it and joins it to the end of your video.
Here’s the end screen running on my video, with my thumbnails and profile photo where YouTube’s buttons land.
The pug is just my example. Glowing lines that trace each slot, arrows pointing at the next video, a sprite of your own mascot. If you can describe it, Claude can animate it.
The steps
How each tool is used
Claude
Plans the layout, writes the animation, renders the frames and edits the video file.
Give it a screenshot, not a description: it measures the allowed area in pixels from YouTube’s own editor, so nothing lands off the edge.
Preview before you render: the web page plays instantly, a render takes minutes.
Keep the slot numbers in one place: the same numbers draw the frames and tell you where to drag the buttons.
YouTube Studio
Holds the real, clickable buttons. Your video only draws the frames around them.
Subscribe plus two videos: the classic layout, and what the frames here are drawn for.
Start every element when your 15 seconds start: frames and buttons appear together.
Step 0: Give Claude your video folder
Claude needs your finished export to add the end screen to it.
1. Install the Claude desktop app: download it from claude.ai/download and sign in.
2. Add your folder: in a new chat, click + beside the message box, choose Add folder and pick the folder with your final export.
3. Check the tools: Claude renders the animation with a headless browser and edits video with ffmpeg. Paste this once so nothing is missing later.
Check you can open my video folder [folder name]. Then make sure ffmpeg, Node and Playwright with Chromium are installed in your workspace, install anything missing, and render a 1920x1080 test frame of a plain web page to confirm it all works. Tell me in one line when everything is ready.
Step 1: Map YouTube’s end screen area with Claude
YouTube only lets end screen buttons sit inside one box, so your frames have to sit inside it too. Get this wrong and the frames end up under the player controls, where the buttons can’t follow.
End screens run in the last 5 to 20 seconds of a video, the video has to be at least 25 seconds long, and a 16:9 video can have up to four elements.
1. Open the end screen editor: in YouTube Studio, open any uploaded video, then Editor, then End screen.
2. Add three elements and screenshot the player: add a Subscribe element and two video elements, then screenshot the whole player with the white outline showing.
The white outline is the allowed area. On a 1920x1080 frame it runs from about x 40 to 1880 and y 137 to 921. The strip underneath is kept clear for the player controls.
3. Ask Claude for the layout: drop the screenshot into the chat and paste this.
This is YouTube Studio’s end screen editor. Measure the white box (the area end screen elements are allowed in) and convert it to pixels on a 1920x1080 frame. Then plan a 15-second end screen layout inside it: one Subscribe circle centred at the top and two 16:9 video slots side by side underneath, with [space for my animation, e.g. a gap under the circle for a sprite to walk through]. Leave a 12px border around every slot for an animated frame, and keep those frames inside the box too. Give me the slot positions as a table (x, y, size) and draw the layout as a 1920x1080 image with the white box on top so I can check it.
Everything yellow sits inside the white line. Then place the real elements in YouTube Studio, screen record the end screen playing, and give Claude the recording so it can move the frames onto the elements exactly as YouTube placed them. Reuse that end screen on every video with Import from latest video, and the frames always line up. Mine: Subscribe at x 812, y 141 as a 296 circle, and two 621x348 videos at x 308 and x 986, both at y 565.
Step 2: Make the blurred background with Claude
A blurred frame of your own video keeps the end screen on brand and makes the buttons stand out.
1. Pick a frame: any calm moment works, usually your talking head.
From [video file], grab the frame at [timestamp] and turn it into a 1920x1080 end screen background: scale it to fill, add a heavy Gaussian blur (sigma 150), bring brightness down to about a third and lift saturation slightly. Save it as a JPEG next to the video and show it to me.
Step 3: Animate it with Claude
This is the fun part. Describe what moves, and Claude builds it as one web page that plays at exactly 1920x1080.
1. Describe your idea: start with frames that draw in around each slot, then add one thing that moves. My pug runs in, jumps onto video 1, trots across, hops to video 2, leaps onto the Subscribe circle, bursts red hearts, then curls up and sleeps on top.
2. Keep the slots empty: YouTube’s buttons cover the inside of every slot, so anything in there is hidden. Animate around and on top of the frames.
Build my YouTube end screen as one HTML page at 1920x1080, 15 seconds long, with a scrubber so I can preview any moment. Use [background JPEG] as the background. Draw [frame style, e.g. 4px rounded frames in a bright accent colour] around these slots, drawing in one by one in the first 2 seconds: [paste the slot table from step 1]. Then animate [your idea, e.g. a pixel sprite from my sprite sheet that climbs onto each slot, glowing lines that trace each frame, or arrows that point at video 1]. Nothing may sit inside a slot, because YouTube’s buttons cover it, and every frame stays inside the allowed area. Make the animation a pure function of time so any frame can be rendered exactly.
“A pure function of time” means every frame comes out the same, however fast the computer renders it. No stutter in the final video.
3. Tweak it in plain words: watch the preview and ask for changes like “the pug lands too late” or “make the hearts bigger”.
Step 4: Render and join it with Claude
Claude saves the page as 450 frames (15 seconds at 30fps), fades in from your video’s last frame and adds the clip to the end without re-encoding the rest of your video.
Render the end screen page to 450 PNG frames at 1920x1080 and 30fps. Encode them as a 15-second clip with silent stereo audio, matching my video’s codec, frame rate and timescale, with a 0.6-second fade from my video’s last frame. Then cut [video file] by exact frame count and join the clip to the end without re-encoding the main video. Show me the frames either side of the join and save the result as [new file name] in the same folder.
Your video gets 15 seconds longer. Chapters and subtitles stay the same, because nothing before the join moves.
Step 5: Add the buttons in YouTube Studio
Upload the new video, then put each element on its frame.
1. Open End screen: in YouTube Studio, open the video, then Editor, then End screen.
2. Add the elements: click + Element and add Subscribe, then Video twice. Best for viewer and a playlist both work for the video slots.
3. Set the timing: start every element when your end screen starts (1:32 on my 1:47 video) and run them to the end.
4. Line them up and check: drag and resize each element onto its frame, then play the last 15 seconds in the editor. Every button should sit on its frame, and every frame inside the white box.
Mine ends with a sleeping pug. Yours can end with whatever keeps people watching for 15 more seconds.
