{"id":"06aaf549-a160-44f6-809e-c13938c2d475","name":"Episode Countdown Banner","slug":"episode-countdown-banner","category":"recurring-event-banners","description":"A vibrant recurring-event banner with an oversized episode number, series name and air date — perfect for podcasts, livestreams and weekly meetups. Change one query param and next week's banner is done.","sample_params":{"brand":"media0.studio","date":"Thursday, Aug 14 · 5 PM CET","episode":"42","hue":"210","kicker":"Live every Thursday","series":"Design Systems Office Hours"},"spec":{"name":"episode-countdown-banner","width":1200,"height":630,"scale":2,"html":"\u003c!doctype html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n\u003cmeta charset='utf-8'\u003e\n\u003clink rel='stylesheet' href='/lib/og.css'\u003e\n\u003cstyle\u003e\n  .ep-ghost {\n    position: absolute;\n    z-index: 0;\n    right: 48px;\n    bottom: -72px;\n    font-size: 460px;\n    font-weight: 800;\n    line-height: 1;\n    letter-spacing: -0.05em;\n    color: rgba(255, 255, 255, 0.1);\n    -webkit-text-stroke: 2px rgba(255, 255, 255, 0.22);\n    white-space: nowrap;\n    pointer-events: none;\n  }\n  .ep-pill {\n    display: inline-flex;\n    align-items: baseline;\n    align-self: flex-start;\n    gap: 12px;\n    padding: 12px 26px;\n    border-radius: 16px;\n    background: rgba(255, 255, 255, 0.92);\n    color: hsl(var(--h, 250) 70% 18%);\n    font-weight: 800;\n    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);\n  }\n  .ep-pill .ep-label {\n    font-size: 24px;\n    letter-spacing: 0.18em;\n    text-transform: uppercase;\n    opacity: 0.65;\n  }\n  .ep-pill .ep-num { font-size: 44px; letter-spacing: -0.02em; }\n  .ep-title {\n    font-size: 72px;\n    font-weight: 800;\n    line-height: 1.08;\n    letter-spacing: -0.025em;\n    max-width: 12em;\n    overflow-wrap: break-word;\n    display: -webkit-box;\n    -webkit-line-clamp: 3;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n  }\n  .ep-date {\n    display: inline-flex;\n    align-items: center;\n    align-self: flex-start;\n    gap: 14px;\n    font-size: 30px;\n    font-weight: 600;\n    padding: 12px 26px;\n    border-radius: 999px;\n    background: rgba(0, 0, 0, 0.28);\n    border: 2px solid rgba(255, 255, 255, 0.3);\n  }\n  .ep-dot {\n    width: 14px;\n    height: 14px;\n    border-radius: 50%;\n    background: #4ade80;\n    box-shadow: 0 0 0 6px rgba(74, 222, 128, 0.25);\n  }\n\u003c/style\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n\u003cdiv class='og-canvas og-grad-hue og-bg-grid' style='--h: {{.hue}}'\u003e\n  \u003cimg class='og-blob' src='/lib/blob.svg' alt='' style='width: 820px; top: -260px; left: -280px; opacity: 0.55;'\u003e\n  \u003cdiv class='ep-ghost'\u003e{{.episode}}\u003c/div\u003e\n  \u003cdiv class='og-content' style='gap: 28px;'\u003e\n    \u003cspan class='og-kicker'\u003e{{.kicker}}\u003c/span\u003e\n    \u003cspan class='ep-pill'\u003e\u003cspan class='ep-label'\u003eEpisode\u003c/span\u003e\u003cspan class='ep-num'\u003e{{.episode}}\u003c/span\u003e\u003c/span\u003e\n    \u003ch1 class='ep-title'\u003e{{.series}}\u003c/h1\u003e\n    \u003cspan class='ep-date'\u003e\u003cspan class='ep-dot'\u003e\u003c/span\u003e{{.date}}\u003c/span\u003e\n  \u003c/div\u003e\n  \u003cdiv class='og-footer'\u003e\n    \u003cspan\u003e{{.brand}}\u003c/span\u003e\n    \u003chr class='og-rule'\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n","params":{"brand":{"type":"string","maxLen":60,"description":"Show or channel handle shown in the footer."},"date":{"type":"string","required":true,"maxLen":60,"description":"When it airs, e.g. 'Thursday, Aug 14 · 5 PM CET'."},"episode":{"type":"number","required":true,"maxLen":4,"description":"Episode number, shown in the pill and as the oversized backdrop numeral."},"hue":{"type":"number","default":"250","maxLen":3,"description":"Accent hue for the gradient, 0-360 (210 blue, 250 indigo, 330 pink)."},"kicker":{"type":"string","default":"New episode","maxLen":40,"description":"Small uppercase line above the episode pill, e.g. the cadence ('Live every Thursday')."},"series":{"type":"string","required":true,"maxLen":90,"description":"Name of the recurring series or show."}}}}