wuwiandClaude Opus 5.5
d388004eac
A vertical live-action mockumentary trailer: the dead staff of St. Mordred's (the game's bosses) each tell a different origin story, and the film ends on "Quiet, please." / "Play." / splat. tools/trailer/ holds the whole pipeline: stills and takes through the OpenRouter key (gen.py, stills.sh, clips.sh), the frame graphics in HTML/CSS (frame.html), a QA listener (qa.py), the music sectioner (segment.py) and the edit (cut.py). Media lands in the gitignored promo/trailer/. SCRIPT.md is the screenplay and the cut notes. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
78 lines
5.0 KiB
HTML
78 lines
5.0 KiB
HTML
<!doctype html>
|
||
<!-- The trailer's frame: every card, title and lower third, one <section> each, shown by :target.
|
||
render: chrome --headless=new --window-size=1080,1920 --default-background-color=00000000
|
||
--screenshot=<out>.png file://.../frame.html#<id> (cut.py does this)
|
||
Everything is drawn on transparent; cut.py lays it over picture or black. -->
|
||
<html><head><meta charset="utf-8">
|
||
<style>
|
||
@font-face { font-family: Silkscreen; src: url(../../assets/fonts/Silkscreen-Regular.ttf); }
|
||
:root { --paper: #ece6d6; --gold: #c9a45a; --shade: 0 2px 22px rgba(0,0,0,.8), 0 0 4px rgba(0,0,0,.6); }
|
||
html, body { margin: 0; width: 1080px; height: 1920px; background: transparent; overflow: hidden; }
|
||
section { display: none; position: absolute; inset: 0; color: var(--paper); }
|
||
section:target { display: block; }
|
||
.c { position: absolute; left: 0; right: 0; text-align: center; }
|
||
|
||
/* black cards: one line of quiet Baskerville, the documentary's voice */
|
||
.say { font: italic 400 62px/1.25 Baskerville, serif; letter-spacing: .005em; padding: 0 110px; }
|
||
.q { font: italic 400 66px/1.2 Baskerville, serif; }
|
||
.q::before, .q::after { content: ''; display: block; width: 46px; height: 2px; background: var(--gold);
|
||
margin: 0 auto 34px; opacity: .8; }
|
||
.q::after { margin: 34px auto 0; }
|
||
|
||
/* the film's own title */
|
||
.crest { position: absolute; left: 50%; top: 610px; transform: translateX(-50%); }
|
||
.t1 { top: 860px; font: 400 128px/1 'Bodoni 72', Didot, serif; letter-spacing: .16em; margin-left: .16em; }
|
||
.t2 { top: 1000px; font: 400 128px/1 'Bodoni 72', Didot, serif; letter-spacing: .16em; margin-left: .16em; }
|
||
.rule { position: absolute; left: 50%; width: 420px; height: 1px; margin-left: -210px; background: var(--gold); opacity: .7; }
|
||
.club { top: 1196px; font: 400 27px/1 'Gill Sans', sans-serif; letter-spacing: .42em; margin-left: .42em; }
|
||
.est { top: 1246px; font: 400 22px/1 'Gill Sans', sans-serif; letter-spacing: .5em; margin-left: .5em; color: var(--gold); }
|
||
|
||
/* lower thirds — type only, no box; sits above the social-app UI band */
|
||
.lt { position: absolute; left: 84px; top: 1236px; text-shadow: var(--shade); }
|
||
.lt i { display: block; width: 64px; height: 3px; background: var(--gold); margin-bottom: 26px; box-shadow: 0 1px 8px rgba(0,0,0,.6); }
|
||
.lt b { display: block; font: 600 50px/1.05 'Gill Sans', sans-serif; letter-spacing: .13em; text-transform: uppercase; }
|
||
.lt span { display: block; margin-top: 14px; font: italic 300 34px/1.2 'Gill Sans', sans-serif; letter-spacing: .02em; }
|
||
.lt em { display: block; margin-top: 10px; font: 400 25px/1 'Gill Sans', sans-serif; font-style: normal; letter-spacing: .32em; color: var(--gold); }
|
||
|
||
/* the game's own voice at the end: its logo and its pixel face */
|
||
.logo { position: absolute; left: 50%; transform: translateX(-50%); }
|
||
.px { font: 400 34px/1.5 Silkscreen, monospace; letter-spacing: .18em; margin-left: .18em; }
|
||
</style></head><body>
|
||
|
||
<section id="t_a"><div class="c say" style="top:820px">Every old club has its traditions.</div></section>
|
||
<section id="t_b"><div class="c say" style="top:960px">Some of them refuse to die.</div></section>
|
||
|
||
<section id="title">
|
||
<svg class="crest" width="150" height="190" viewBox="0 0 150 190" fill="none" stroke="#c9a45a" stroke-width="3.2">
|
||
<g transform="rotate(-32 75 112)"><ellipse cx="75" cy="66" rx="30" ry="40"/><path d="M75 106v64M66 106l9 14 9-14"/>
|
||
<path d="M57 50h36M54 66h42M57 82h36M65 30v72M75 26v80M85 30v72" stroke-width="1.2" opacity=".75"/></g>
|
||
<g transform="rotate(32 75 112)"><ellipse cx="75" cy="66" rx="30" ry="40"/><path d="M75 106v64M66 106l9 14 9-14"/>
|
||
<path d="M57 50h36M54 66h42M57 82h36M65 30v72M75 26v80M85 30v72" stroke-width="1.2" opacity=".75"/></g>
|
||
<circle cx="75" cy="16" r="11" fill="#c9a45a" stroke="none"/>
|
||
</svg>
|
||
<div class="c t1">LIFETIME</div>
|
||
<div class="c t2">MEMBERS</div>
|
||
<div class="rule" style="top:1160px"></div>
|
||
<div class="c club">ST. MORDRED'S LAWN TENNIS CLUB</div>
|
||
<div class="c est">EST. 1877</div>
|
||
</section>
|
||
|
||
<section id="q_start"><div class="c q" style="top:880px">How did it start?</div></section>
|
||
<section id="q_chall"><div class="c q" style="top:880px">And the challengers?</div></section>
|
||
|
||
<section id="lt_reg"><div class="lt"><i></i><b>Reginald Moss</b><span>Head Groundskeeper</span><em>1962 –</em></div></section>
|
||
<section id="lt_doris"><div class="lt"><i></i><b>Doris Penny</b><span>Strawberries & Cream</span><em>1971 –</em></div></section>
|
||
<section id="lt_clive"><div class="lt"><i></i><b>Clive Barrow</b><span>Line Judge</span><em>1974 –</em></div></section>
|
||
<section id="lt_ambrose"><div class="lt"><i></i><b>Ambrose Pike</b><span>Chair Umpire</span><em>1908 –</em></div></section>
|
||
|
||
<section id="logo">
|
||
<img class="logo" src="../../assets/logo-v2.png" style="width:940px; top:640px">
|
||
<div class="c px" style="top:1196px; color:#c9a45a">MATCH IN PROGRESS</div>
|
||
</section>
|
||
|
||
<section id="end">
|
||
<img class="logo" src="../../assets/logo-v2.png" style="width:700px; top:700px">
|
||
<div class="c say" style="top:1170px; font-size:50px">Lifetime membership now open.</div>
|
||
</section>
|
||
</body></html>
|