Make a YouTube intro from code (and render every episode's)
A 5-second channel intro template that re-renders per episode. One HTML file, infinite variants.
Most YouTube channels have one intro that has not changed since episode 3. There is a reason: re-doing it in After Effects is a half-day, and "the intro is fine" beats "I am rebuilding the intro." Until the rebrand. Then it is a week.
Here is the version where the intro is an HTML template, the episode number is a variable, and re-rendering for a new season takes thirty seconds.
What a 5-second intro needs
The list, in order of priority:
- Brand mark or wordmark. The single most important element.
- A pacing beat. Something that lands at ~1.5s so the eye does not get bored.
- A tagline or category. Optional but loved by viewers who skip the first second.
- An exit cue. A small motion at 4-5s that signals "content starts now."
That is it. More than that is too much for a 5-second window.
The template
The whole thing in 30 lines:
<!doctype html>
<html data-duration="5" data-aspect="16:9">
<head><style>
body { margin: 0; background: {{$BG}}; height: 100vh;
display: grid; place-items: center; color: white;
font-family: ui-sans-serif, system-ui; }
.stage { text-align: center; }
.bar { width: 0; height: 6px; background: {{$ACCENT}}; margin: 24px auto; border-radius: 4px; }
.chan { font-size: 132px; font-weight: 900; letter-spacing: -.05em;
opacity: 0; transform: translateY(20px); }
.tag { font-size: 18px; letter-spacing: .5em; text-transform: uppercase;
margin-top: 18px; opacity: 0; }
</style></head>
<body>
<div class="stage">
<div class="bar" id="bar1"></div>
<div class="chan" id="chan">{{$CHANNEL}}</div>
<div class="bar" id="bar2"></div>
<div class="tag" id="tag">{{$TAGLINE}}</div>
</div>
<script>
function ease(t){ return 1 - Math.pow(1-t, 3); }
function clamp(x){ return Math.max(0, Math.min(1, x)); }
function render(t) {
document.getElementById('bar1').style.width = (ease(clamp((t-0.1)/0.6)) * 60) + '%';
var c = ease(clamp((t-0.8)/0.8));
document.getElementById('chan').style.opacity = c;
document.getElementById('chan').style.transform = 'translateY(' + (1-c)*20 + 'px)';
document.getElementById('bar2').style.width = (ease(clamp((t-1.6)/0.5)) * 30) + '%';
document.getElementById('tag').style.opacity = ease(clamp((t-2.0)/0.6));
}
addEventListener('hf-seek', e => render(e.detail.time));
render(0);
</script>
</body></html>Four variables: BG, ACCENT, CHANNEL, TAGLINE. Everything else is a design decision frozen in the template.
Make it yours
Per-episode variants
The whole point of doing this in code: every episode can have its own intro. Episode-specific knobs to consider:
- Episode number overlaid in the corner (small, monospaced).
- Season tagline replacing the static one.
- Color shift for thematic episodes (a darker accent for the finale).
A weekly show with 52 episodes gets 52 unique intros for the cost of running the render 52 times. The first one took an hour; the next 51 take twelve minutes total.
Render specs that matter for YouTube
YouTube's encoder is forgiving but punishes a few specific choices:
- Resolution. 1920×1080, even if you plan a 4K master. The intro will be re-encoded; you do not need the extra detail.
- FPS. 30 or 60. Avoid 25/24 unless your full content runs at those rates — the mismatch causes a stutter at the intro/content boundary.
- Bitrate. Render at 8-12 Mbps. YouTube will re-encode, but if the source is too low, the re-encode amplifies artifacts.
- No audio. Keep the intro silent or pair it with a single short stinger. The viewer's audio sources for the rest of the video will not match a busy intro track.
Wire it into your publishing flow
If you publish on a schedule, wire this into your CI. A GitHub Actions matrix renders the intro for each episode in your queue. Outputs land in S3; your publishing tool grabs them. The intro is now a build artifact, not a craft asset.
The variant economy
The interesting thing about code-driven intros is not that the first one is cheaper — it is not. The interesting thing is that the second through hundredth are free. Most channels operate under "we can afford one intro." Once you can afford a hundred, the editorial choices change.
The marketing use cases page has examples from teams that ship per-episode intros at scale. The HyperFrames render API is the underlying infrastructure.
The pattern, repeated until it stops being novel: video template + variable input = build artifact. Same idea as the static-site generator did for the web. We are running the same play, for video.
Cite this postBibTeX · APA · Markdown
@misc{team2026make,
author = {HyperFrames Team},
title = {Make a YouTube intro from code (and render every episode's)},
year = {2026},
url = {https://hyperframes.video/blog/youtube-intro-from-code},
note = {HyperFrames blog}
}HyperFrames Team. (2026, May 10). Make a YouTube intro from code (and render every episode's). HyperFrames. https://hyperframes.video/blog/youtube-intro-from-code
[Make a YouTube intro from code (and render every episode's)](https://hyperframes.video/blog/youtube-intro-from-code) — HyperFrames Team, 2026
We build the deterministic HTML-to-video pipeline at HyperFrames. We write here when we have something concrete to say.
YouTube Shorts generator: programmatic Shorts from a template
Build a YouTube Shorts generator with HTML templates. 9:16, 60-second cap, on-screen captions, MP4 export, batch render from JSON or CSV.
Animated flight itinerary cards in HTML
Build an animated boarding pass video: a plane traces an arc from origin to destination, gate and time settle in, the pass folds out — rendered as MP4.
Animated fitness summary cards (Strava-style recaps)
Build a fitness recap video generator: distance, pace, and elevation tick up, a route map traces itself, and weekly streak dots fill in — exported as MP4.
Building with HyperFrames? Come hang out.
We're on GitHub, in Discord, and the playground is one click away. Bring weird ideas — we collect them.