Monorepo for Aesthetic.Computer aesthetic.computer
4
fork

Configure Feed

Select the types of activity you want to include in your feed.

lacma-2026 page: add 23s demo video (boot → notepat → waltz → fade)

Embed a looping demo video right after the masthead so reviewers see
the instrument in action immediately, above everything else. Captured
natively from AC Native hardware (not a screen recording of a browser):

- 0:00–0:05 Boot animation — "hi @jeffrey" rainbow text on cream
matrix-rain, no BIOS in between, runs straight from USB
- 0:05–0:22 notepat default piece playing a Viennese waltz. HUD
shows 32-voice synthesizer state: fx sliders, chord
color shifts tracking the played key, drum kit
labels (HAT-C, kick, snare), polyphonic voice meters
- 0:22–0:23 1-second fade-out

Stitched from /Desktop/ac-boot-shots/boot-jeffrey.mp4 +
demo-viennese.mkv via ffmpeg concat with 300ms fade-in and 1s fade-out.
Dual encoding: mp4 (h264/aac, 1.8 MB) primary, webm (vp9/opus, 2.8 MB)
fallback. JPG poster for the preload state.

New section markup uses a 1280:800 aspect-ratio frame with an
autoplay/muted/loop/playsinline video and a caption strip below the
frame: sequence chain ("boot → notepat → waltz → fade") on the left
and "bye @jeffrey ♡" in YWFT Processing on the right — the farewell
the user asked for, in the page rather than baked into the video.

Also updated the Video row in § Application at a Glance: no longer
says "filming tomorrow" — now points to the embedded player and
downloads, with word-count-style chip showing "under 5 min · ours: 23 s".

Assets:
ac-native-demo.mp4 1.8 MB
ac-native-demo.webm 2.8 MB
ac-native-demo-poster.jpg 25 KB

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

+71 -2
system/public/lacma-2026/ac-native-demo-poster.jpg

This is a binary file and will not be displayed.

system/public/lacma-2026/ac-native-demo.mp4

This is a binary file and will not be displayed.

system/public/lacma-2026/ac-native-demo.webm

This is a binary file and will not be displayed.

+71 -2
system/public/lacma-2026/index.html
··· 142 142 h2 .ord { color: var(--pink); margin-right: 0.4em; } 143 143 h2 .count { float: right; color: var(--dim); font-size: 0.7em; letter-spacing: 0.1em; text-transform: uppercase; padding-top: 0.6em; font-family: 'Berkeley Mono Variable', monospace; } 144 144 145 + /* ── DEMO VIDEO ─────────────────────────── */ 146 + .demo { 147 + margin: 2em 0 2.4em; 148 + } 149 + .demo-frame { 150 + position: relative; 151 + width: 100%; 152 + aspect-ratio: 1280 / 800; 153 + background: var(--box-bg); 154 + border: 1px solid var(--box-border); 155 + border-radius: 4px; 156 + overflow: hidden; 157 + } 158 + .demo video { 159 + display: block; 160 + width: 100%; 161 + height: 100%; 162 + object-fit: cover; 163 + } 164 + .demo-caption { 165 + display: flex; 166 + justify-content: space-between; 167 + align-items: baseline; 168 + gap: 1em; 169 + margin-top: 0.7em; 170 + font-family: 'Berkeley Mono Variable', monospace; 171 + font-size: 0.78em; 172 + color: var(--dim); 173 + letter-spacing: 0.06em; 174 + flex-wrap: wrap; 175 + } 176 + .demo-caption .sequence { 177 + color: var(--dim); 178 + } 179 + .demo-caption .sequence .step { 180 + color: var(--text); 181 + } 182 + .demo-caption .sequence .arrow { 183 + color: var(--pink); 184 + margin: 0 0.4em; 185 + } 186 + .demo-caption .byline { 187 + color: var(--pink); 188 + font-family: 'YWFT Processing', monospace; 189 + font-size: 1.4em; 190 + letter-spacing: 0; 191 + text-transform: none; 192 + } 193 + 145 194 /* ── APPLICATION AT A GLANCE (form mirror) ─────── */ 146 195 .glance { 147 196 margin: 1.4em 0 2.2em; ··· 428 477 </dl> 429 478 </header> 430 479 480 + <!-- ── DEMO VIDEO ─────────────────────────── --> 481 + <section class="demo" id="demo"> 482 + <div class="demo-frame"> 483 + <video 484 + src="/lacma-2026/ac-native-demo.mp4" 485 + poster="/lacma-2026/ac-native-demo-poster.jpg" 486 + autoplay muted loop playsinline controls preload="metadata"> 487 + <source src="/lacma-2026/ac-native-demo.webm" type="video/webm"> 488 + <source src="/lacma-2026/ac-native-demo.mp4" type="video/mp4"> 489 + Your browser doesn't support HTML5 video. <a href="/lacma-2026/ac-native-demo.mp4">Download the MP4</a>. 490 + </video> 491 + </div> 492 + <div class="demo-caption"> 493 + <div class="sequence"> 494 + <span class="step">boot</span><span class="arrow">→</span><span class="step">notepat</span><span class="arrow">→</span><span class="step">waltz</span><span class="arrow">→</span><span class="step">fade</span> 495 + </div> 496 + <div class="byline">bye <em>@jeffrey</em> ♡</div> 497 + </div> 498 + </section> 499 + 431 500 <!-- ── APPLICATION AT A GLANCE (form mirror) ─────── --> 432 501 <section class="glance" id="glance"> 433 502 <h2><span class="ord">§</span>Application at a Glance<span class="count">submittable preview</span></h2> ··· 494 563 </ol> 495 564 </dd> 496 565 497 - <dt>Video<span class="cap">under 5 min · optional</span></dt> 498 - <dd>Filming Wed Apr 22; unlisted YouTube/Vimeo upload before submission. Shot-by-shot script at <a class="jump" href="https://github.com/whistlegraph/aesthetic-computer/blob/main/grants/lacma-2026/video-script.md">grants/lacma-2026/video-script.md</a>.</dd> 566 + <dt>Video<span class="cap">under 5 min · optional · ours: 23 s</span></dt> 567 + <dd>Looping 23-second demo captured natively from AC Native: <em>boot sequence → notepat → Viennese waltz → fade-out</em>. <a class="jump" href="#demo">Watch above ↑</a> · <a class="jump" href="/lacma-2026/ac-native-demo.mp4">MP4</a> · <a class="jump" href="/lacma-2026/ac-native-demo.webm">WebM</a>. Longer shot-by-shot script for an optional voiceover cut: <a class="jump" href="https://github.com/whistlegraph/aesthetic-computer/blob/main/grants/lacma-2026/video-script.md">video-script.md</a>.</dd> 499 568 500 569 <dt>Lineage check<span class="cap">past Lab cohort</span></dt> 501 570 <dd>Two recent Lab recipients co-teach UCLA's Social Software course where Jeffrey is Author in Residence: <strong>Casey Reas</strong> (2023, <em>METAVASARELY and An Empty Room</em>) and <strong>Lauren Lee McCarthy</strong> (2022, <em>Auto</em>). <a class="jump" href="#this-lab">Lineage below ↓</a> · <a class="jump" href="https://github.com/whistlegraph/aesthetic-computer/blob/main/grants/lacma-2026/art-tech-lab-recipients.md">All 45 recipients</a></dd>