Square podcast thumbnail template with episode meta.
Edit these placeholders inline or pass --var NAME=value to hyperframes render.
| Variable | Type | Default | Range |
|---|---|---|---|
{{$SHOW}}Show name | text | Frame by Frame | — |
{{$EP_NUM}}Episode number | text | 042 | — |
{{$EP_TITLE}}Episode title | text | The Art of Determinism | — |
{{$GUEST}}Guest | text | Kira Tanaka | — |
{{$DATE}}Date | text | May 2026 | — |
{{$BG}}Background | color | #0a0a0a | — |
{{$ACCENT}}Episode # color | color | #ff3b1f | — |
<!doctype html>
<html data-duration="6" data-aspect="1:1"><head><style>
:root {
--cream:#f6f5f1; --cream-2:#efece4; --ink:#0a0a0a; --mute:#6b6862;
--line:#e3dfd3; --signal:#ff3b1f; --signal-2:#ff6a4a; --frame:#ffb800;
--green:#1f8a5b; --blue:#2b66ff;
}
* { box-sizing: border-box; }
body { margin:0; }
body { background: {{$BG}}; height: 100vh; margin: 0; overflow: hidden;
display: grid; grid-template-rows: auto 1fr auto; padding: 12% 10%; color: white;
font-family: ui-sans-serif, system-ui; }
header { display: flex; justify-content: space-between; align-items: center;
font-size: 36px; letter-spacing: .3em; text-transform: uppercase; opacity: .7; }
.ep { font-size: 320px; font-weight: 900; letter-spacing: -.06em; line-height: .85;
color: {{$ACCENT}}; }
.title { font-size: 96px; font-weight: 700; line-height: 1.05; letter-spacing: -.03em;
max-width: 80%; }
.guest { margin-top: 32px; font-size: 42px; opacity: .75; }
footer { font-size: 30px; letter-spacing: .25em; text-transform: uppercase; opacity: .55;
display: flex; justify-content: space-between; }
</style></head><body>
<header><span>{{$SHOW}}</span><span>Ep · {{$EP_NUM}}</span></header>
<div>
<div class="title">{{$EP_TITLE}}</div>
<div class="guest">with {{$GUEST}}</div>
</div>
<footer><span>{{$DATE}}</span><span>hyperframes.fm</span></footer>
</body></html>