wuwiandClaude Opus 5.5
806a739c6f
cut.py --cut ad: a plummy announcer (one gpt-audio read per line, ad.sh) sells St. Mordred's over the creepiest takes with yellow 80s supers, a PLAY/STOP VCR read-out, two testimonials from the real lines and the small print read at speed, until the game's umpire says "Quiet." and the jingle dies. A VHS grade (chroma smear, scanlines, tape wobble) is the cut's own. gen.py learns a voice command; one new silent Doris take. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
153 lines
12 KiB
HTML
153 lines
12 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">
|
||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT@1,9..144,900,100&family=VT323&display=block">
|
||
<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 88px/1.18 Baskerville, serif; letter-spacing: .005em; padding: 0 80px; text-wrap: balance; }
|
||
.q { font: italic 400 96px/1.15 Baskerville, serif; padding: 0 80px; text-wrap: balance; }
|
||
.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; }
|
||
|
||
/* FIFTEEN–LOVE: a broadcast score bug, the club serving, the viewer receiving */
|
||
.sb { position: absolute; left: 64px; top: 250px; min-width: 470px; padding: 18px 26px 18px 22px;
|
||
background: linear-gradient(90deg, rgba(10,26,17,.9), rgba(10,26,17,.78)); border-left: 4px solid var(--gold);
|
||
box-shadow: 0 6px 30px rgba(0,0,0,.45); font-family: 'Gill Sans', sans-serif; color: var(--paper); }
|
||
.sb .row { display: grid; grid-template-columns: 22px 1fr 96px; align-items: center; height: 54px; }
|
||
.sb .row + .row { border-top: 1px solid rgba(201,164,90,.28); }
|
||
.sb .who { font: 600 27px/1 'Gill Sans', sans-serif; letter-spacing: .16em; text-transform: uppercase; }
|
||
.sb .pts { font: 400 44px/1 'Gill Sans', sans-serif; text-align: right; font-variant-numeric: tabular-nums; color: var(--gold); }
|
||
.sb .you .who, .sb .you .pts { color: rgba(236,230,214,.62); }
|
||
.sb i { width: 12px; height: 12px; border-radius: 50%; background: #d8e04a; box-shadow: 0 0 8px rgba(216,224,74,.6); }
|
||
.sb .game { font: 600 34px/1 'Gill Sans', sans-serif; letter-spacing: .2em; }
|
||
|
||
/* MEMBERSHIP: the club's own 1980s advert — supers, VCR read-out, testimonials, the end frame */
|
||
.osd { position: absolute; left: 78px; top: 214px; font: 400 80px/1 VT323, monospace; color: #f4f4f0;
|
||
letter-spacing: .06em; text-shadow: 0 0 8px rgba(255,255,255,.55), 3px 3px 0 rgba(0,0,0,.55); }
|
||
.su { position: absolute; left: 64px; right: 64px; top: 1170px; transform: rotate(-3deg); transform-origin: left center;
|
||
font: italic 900 96px/.98 Fraunces, serif; font-variation-settings: 'SOFT' 100, 'opsz' 144; text-transform: uppercase;
|
||
color: #ffe14a; -webkit-text-stroke: 12px #3b1300; paint-order: stroke fill; letter-spacing: -.005em;
|
||
text-shadow: 0 10px 0 #2a0d00, 0 16px 34px rgba(0,0,0,.55); text-wrap: balance; }
|
||
.su.s { font-size: 80px; }
|
||
.su small { display: block; margin-top: 14px; font: italic 900 40px/1 Fraunces, serif; color: #fff;
|
||
-webkit-text-stroke: 7px #3b1300; text-transform: none; }
|
||
.adbg { position: absolute; inset: 0; background: radial-gradient(120% 80% at 50% 40%, #1f5a37 0%, #0c2b19 55%, #04120a 100%); }
|
||
.adbg::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 60px, transparent 60px 120px); }
|
||
.tm { position: absolute; left: 64px; top: 1250px; font: italic 900 70px/1 Fraunces, serif; font-variation-settings: 'SOFT' 100;
|
||
color: #fff; -webkit-text-stroke: 9px #3b1300; paint-order: stroke fill; text-shadow: 0 8px 0 #2a0d00; }
|
||
.tm em { display: block; margin-top: 10px; font-size: 44px; font-style: italic; color: #ffe14a; }
|
||
.burst { position: absolute; width: 520px; height: 520px; left: 50%; top: 1020px; margin-left: -260px; transform: rotate(-9deg);
|
||
background: #e3262b; clip-path: polygon(50% 0%,57% 13%,71% 4%,72% 19%,88% 15%,83% 30%,98% 33%,88% 45%,100% 55%,86% 62%,94% 77%,78% 78%,79% 94%,65% 87%,57% 100%,49% 88%,37% 98%,34% 83%,19% 90%,20% 74%,4% 72%,14% 59%,0% 49%,13% 40%,4% 26%,20% 25%,17% 9%,33% 14%,40% 1%);
|
||
display: flex; align-items: center; justify-content: center; text-align: center; }
|
||
.burst span { font: italic 900 58px/1 Fraunces, serif; color: #ffe14a; text-transform: uppercase; -webkit-text-stroke: 6px #5a0b0b; paint-order: stroke fill; padding: 0 70px; }
|
||
.fine { position: absolute; left: 70px; right: 70px; top: 1560px; font: 400 23px/1.3 Helvetica, Arial, sans-serif; color: rgba(255,255,255,.85); text-align: center; }
|
||
</style></head><body>
|
||
|
||
<section id="t_a"><div class="c say" style="top:700px">Every old club has its traditions.</div></section>
|
||
<section id="t_b"><div class="c say" style="top:1010px">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:850px">How did it start?</div></section>
|
||
<section id="q_chall"><div class="c q" style="top:790px">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:62px">Lifetime membership now open.</div>
|
||
</section>
|
||
<section id="sb_15"><div class="sb">
|
||
<div class="row"><i></i><span class="who">St. Mordred's</span><span class="pts">15</span></div>
|
||
<div class="row you"><span></span><span class="who">You</span><span class="pts">0</span></div>
|
||
</div></section>
|
||
<section id="sb_30"><div class="sb">
|
||
<div class="row"><i></i><span class="who">St. Mordred's</span><span class="pts">30</span></div>
|
||
<div class="row you"><span></span><span class="who">You</span><span class="pts">0</span></div>
|
||
</div></section>
|
||
<section id="sb_40"><div class="sb">
|
||
<div class="row"><i></i><span class="who">St. Mordred's</span><span class="pts">40</span></div>
|
||
<div class="row you"><span></span><span class="who">You</span><span class="pts">0</span></div>
|
||
</div></section>
|
||
<section id="sb_game"><div class="sb">
|
||
<div class="row"><i></i><span class="who">St. Mordred's</span><span class="pts game">GAME</span></div>
|
||
<div class="row you"><span></span><span class="who">You</span><span class="pts">0</span></div>
|
||
</div></section>
|
||
<section id="osd_play"><div class="osd">PLAY ▶</div></section>
|
||
<section id="osd_stop"><div class="osd">STOP ■</div></section>
|
||
<section id="su_grass"><div class="su s">The finest grass in the county</div></section>
|
||
<section id="su_staff"><div class="su ">Dedicated ground staff</div></section>
|
||
<section id="su_tonic"><div class="su ">Our own lawn tonic!</div></section>
|
||
<section id="su_berries"><div class="su ">Strawberries & cream</div></section>
|
||
<section id="su_fresh"><div class="su ">Served fresh daily!*<small>*fresh-ish</small></div></section>
|
||
<section id="su_welcome"><div class="su ">A warm welcome</div></section>
|
||
<section id="su_officials"><div class="su s">Officials who never miss a thing</div></section>
|
||
<section id="su_since"><div class="su ">Umpiring since 1908</div></section>
|
||
<section id="su_fixture"><div class="su s">Our longest-running fixture</div></section>
|
||
<section id="ad_members"><div class="adbg"></div><div class="c su" style="top:820px; left:80px; right:80px; transform:rotate(-3deg)">What our members say</div></section>
|
||
<section id="tm_doris"><div class="tm">“Doris”<em>Member since 1971</em></div></section>
|
||
<section id="tm_reg"><div class="tm">“Reg”<em>Member since 1962</em></div></section>
|
||
<section id="ad_club"><div class="adbg"></div>
|
||
<svg class="crest" style="top:300px" width="190" height="240" viewBox="0 0 150 190" fill="none" stroke="#e8c46a" stroke-width="3.6">
|
||
<g transform="rotate(-32 75 112)"><ellipse cx="75" cy="66" rx="30" ry="40"/><path d="M75 106v64M66 106l9 14 9-14"/></g>
|
||
<g transform="rotate(32 75 112)"><ellipse cx="75" cy="66" rx="30" ry="40"/><path d="M75 106v64M66 106l9 14 9-14"/></g>
|
||
<circle cx="75" cy="16" r="11" fill="#e8c46a" stroke="none"/></svg>
|
||
<div class="c su" style="top:600px; left:40px; right:40px; transform:rotate(-3deg); font-size:128px">St. Mordred's</div>
|
||
<div class="c club" style="top:790px; font-size:34px; color:#f4ecd6">LAWN TENNIS CLUB · EST. 1877</div>
|
||
<div class="burst"><span>Lifetime membership now open!</span></div>
|
||
</section>
|
||
<section id="ad_fine"><div class="fine">Membership is for life. Membership does not end with life. Members may not leave the grounds.
|
||
Strawberries are not fresh. Lawn tonic is not for human consumption. Line calls are final. Terms and conditions apply.</div></section>
|
||
</body></html>
|