Monorepo for Aesthetic.Computer
aesthetic.computer
lacma-2026 demo: side-by-side laptop hero + narrated default + smaller subs
Three user-driven tweaks to the demo block:
1) Pair the video with the AC Blank product hero (Shopify CDN image
of the ThinkPad 11e Yoga Gen 6 running AC Native on grass). Two
columns on desktop (3:2 video:photo), stacked on mobile. Photo
links to shop.aesthetic.computer and has a short "this IS the
hardware in the video" tag underneath.
2) Flip the default tab from "ambient loop" to "narrated + captioned"
— and swap the videos' <source> and poster accordingly so the
narrated version is what loads on page open. Ambient loop is the
one-click alternate now.
3) Drop the subtitle size in tools/vo-pipeline.mjs from FontSize=26
to FontSize=16, tighten MarginV from 42 to 28, and darken the
subtitle background box (alpha c0 instead of 80). Much more
readable at 1280x800 — doesn't dominate the frame.
Also retuned demo-narration.md cues to better match what's on screen
at each timestamp (moved "32 voices" later, "chord tints the screen"
in the middle where the backgrounds actually shift, added an explicit
"Viennese waltz being played live" near the end).
Assets re-rendered and re-synced to the CDN:
ac-native-demo-narrated.mp4 2.3 MB
ac-native-demo-narrated.webm 2.9 MB
ac-native-demo-narrated-poster.jpg 70 KB
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
+93
-24
+6
-6
grants/lacma-2026/demo-narration.md
+6
-6
grants/lacma-2026/demo-narration.md
···
1
-
# title: AC Native — 23-second demo narration
1
+
# title: AC Native — 23-second demo narration (tuned to visuals)
2
2
# voice: Daniel
3
3
# rate: 170
4
4
5
5
[0:00] Aesthetic Computer boots from a USB stick straight into art software.
6
-
[0:04] No desktop, no app store, no browser — just a greeting, and an instrument.
7
-
[0:08] This is notepat, the default piece.
8
-
[0:11] Thirty-two voices of polyphony, synthesized at 192 kilohertz through ALSA.
9
-
[0:15] The background color shifts with every chord you play —
10
-
[0:18] a visual echo of the Viennese waltz you hear.
6
+
[0:04] No desktop, no browser — just a personal greeting.
7
+
[0:07] The default piece is notepat, a musical instrument.
8
+
[0:11] Thirty-two voices, synthesized at 192 kilohertz through ALSA.
9
+
[0:14] Every chord tints the screen.
10
+
[0:17] What you hear is a Viennese waltz being played live.
11
11
[0:21] --silence--
+82
-14
system/public/lacma-2026/index.html
+82
-14
system/public/lacma-2026/index.html
···
146
146
.demo {
147
147
margin: 2em 0 2.4em;
148
148
}
149
+
.demo-pair {
150
+
display: grid;
151
+
grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
152
+
gap: 0.8em;
153
+
align-items: stretch;
154
+
}
155
+
@media (max-width: 720px) {
156
+
.demo-pair { grid-template-columns: 1fr; }
157
+
}
149
158
.demo-frame {
150
159
position: relative;
151
160
width: 100%;
···
161
170
height: 100%;
162
171
object-fit: cover;
163
172
}
173
+
.demo-hardware {
174
+
position: relative;
175
+
display: flex;
176
+
flex-direction: column;
177
+
background: var(--box-bg);
178
+
border: 1px solid var(--box-border);
179
+
border-radius: 4px;
180
+
overflow: hidden;
181
+
min-height: 100%;
182
+
}
183
+
.demo-hardware a {
184
+
display: block;
185
+
flex: 1;
186
+
min-height: 160px;
187
+
overflow: hidden;
188
+
}
189
+
.demo-hardware img {
190
+
display: block;
191
+
width: 100%;
192
+
height: 100%;
193
+
object-fit: cover;
194
+
object-position: center 42%;
195
+
}
196
+
.demo-hardware .tag {
197
+
padding: 0.5em 0.8em;
198
+
border-top: 1px solid var(--box-border);
199
+
font-family: 'Berkeley Mono Variable', monospace;
200
+
font-size: 0.72em;
201
+
color: var(--dim);
202
+
letter-spacing: 0.06em;
203
+
line-height: 1.5;
204
+
}
205
+
.demo-hardware .tag b {
206
+
display: block;
207
+
color: var(--text);
208
+
font-weight: normal;
209
+
font-family: 'YWFT Processing', monospace;
210
+
font-size: 1.3em;
211
+
letter-spacing: 0;
212
+
text-transform: none;
213
+
margin-bottom: 0.15em;
214
+
}
215
+
.demo-hardware .tag a {
216
+
display: inline;
217
+
min-height: 0;
218
+
overflow: visible;
219
+
color: var(--cyan);
220
+
}
221
+
.demo-hardware .tag a:hover { color: var(--pink); }
164
222
.demo-tabs {
165
223
display: flex;
166
224
gap: 0.3em;
···
499
557
<!-- ── DEMO VIDEO ─────────────────────────── -->
500
558
<section class="demo" id="demo">
501
559
<div class="demo-tabs">
502
-
<div class="demo-tab active" data-src="ac-native-demo" data-poster="ac-native-demo-poster">ambient loop<span class="hint">23 s · muted</span></div>
503
-
<div class="demo-tab" data-src="ac-native-demo-narrated" data-poster="ac-native-demo-narrated-poster">narrated + captioned<span class="hint">23 s · click unmute</span></div>
560
+
<div class="demo-tab active" data-src="ac-native-demo-narrated" data-poster="ac-native-demo-narrated-poster">narrated + captioned<span class="hint">23 s · click unmute</span></div>
561
+
<div class="demo-tab" data-src="ac-native-demo" data-poster="ac-native-demo-poster">ambient loop<span class="hint">23 s · muted</span></div>
504
562
</div>
505
-
<div class="demo-frame">
506
-
<video id="demo-video"
507
-
poster="https://assets.aesthetic.computer/lacma-2026/ac-native-demo-poster.jpg"
508
-
autoplay muted loop playsinline controls preload="metadata">
509
-
<source src="https://assets.aesthetic.computer/lacma-2026/ac-native-demo.webm" type="video/webm">
510
-
<source src="https://assets.aesthetic.computer/lacma-2026/ac-native-demo.mp4" type="video/mp4">
511
-
Your browser doesn't support HTML5 video. <a href="https://assets.aesthetic.computer/lacma-2026/ac-native-demo.mp4">Download the MP4</a>.
512
-
</video>
563
+
<div class="demo-pair">
564
+
<div class="demo-frame">
565
+
<video id="demo-video"
566
+
poster="https://assets.aesthetic.computer/lacma-2026/ac-native-demo-narrated-poster.jpg"
567
+
autoplay muted loop playsinline controls preload="metadata">
568
+
<source src="https://assets.aesthetic.computer/lacma-2026/ac-native-demo-narrated.webm" type="video/webm">
569
+
<source src="https://assets.aesthetic.computer/lacma-2026/ac-native-demo-narrated.mp4" type="video/mp4">
570
+
Your browser doesn't support HTML5 video. <a href="https://assets.aesthetic.computer/lacma-2026/ac-native-demo-narrated.mp4">Download the MP4</a>.
571
+
</video>
572
+
</div>
573
+
<div class="demo-hardware">
574
+
<a href="https://shop.aesthetic.computer/products/laptops_ac-native-laptop_26-4-17-12-51" target="_blank" rel="noopener">
575
+
<img src="https://shop.aesthetic.computer/cdn/shop/files/ac-native-laptop-hero-final.png?v=1776841885&width=1445"
576
+
alt="AC Blank — ThinkPad 11e Yoga Gen 6 running AC Native OS on grass, showing 'hi @jeffrey · enjoy Los Angeles!'" loading="lazy">
577
+
</a>
578
+
<div class="tag">
579
+
<b>AC Blank</b>
580
+
ThinkPad 11e Yoga Gen 6, refurbished, preloaded with AC Native. The video's actual hardware — available now at <a href="https://shop.aesthetic.computer/products/laptops_ac-native-laptop_26-4-17-12-51" target="_blank" rel="noopener">shop.aesthetic.computer</a>.
581
+
</div>
582
+
</div>
513
583
</div>
514
584
<div class="demo-caption">
515
585
<div class="sequence">
516
586
<span class="step">boot</span><span class="arrow">→</span><span class="step">prompt</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">back</span><span class="arrow">→</span><span class="step">shutdown</span>
517
587
</div>
518
-
<div class="byline">captured live · no editing tricks · shutdown animation in progress</div>
588
+
<div class="byline">captured live on a real AC Blank · shutdown animation in progress</div>
519
589
</div>
520
590
<script>
521
591
(() => {
···
534
604
<source src="${ASSET_BASE}/${base}.webm" type="video/webm">
535
605
<source src="${ASSET_BASE}/${base}.mp4" type="video/mp4">`;
536
606
video.poster = `${ASSET_BASE}/${poster}.jpg`;
537
-
// If swapping to narrated version, unmute by default so VO plays.
607
+
// Narrated tab → prefer unmuted so VO plays (browser may block).
538
608
video.muted = base.includes("narrated") ? false : true;
539
609
video.load();
540
610
video.play().catch(() => {
541
-
// Autoplay blocked (browsers block autoplay w/ sound).
542
-
// Restore muted state and let user click play.
543
611
video.muted = wasMuted;
544
612
video.load();
545
613
});
+5
-4
tools/vo-pipeline.mjs
+5
-4
tools/vo-pipeline.mjs
···
234
234
// Video filter: burn subtitles if not narrate-only
235
235
const vfChain = [];
236
236
if (!args["narrate-only"]) {
237
-
// Inline ASS styling (sepia-ish to match AC palette)
238
-
const style = args.style ?? "FontName=Helvetica Neue,FontSize=26," +
239
-
"PrimaryColour=&H00e4d8bc,OutlineColour=&H001c1812,BackColour=&H801c1812," +
240
-
"BorderStyle=3,Outline=1,Shadow=0,Alignment=2,MarginV=42";
237
+
// Inline ASS styling (sepia-ish to match AC palette).
238
+
// FontSize is in ASS "play height" units — ~18 reads cleanly at 1280×800.
239
+
const style = args.style ?? "FontName=Helvetica Neue,FontSize=16," +
240
+
"PrimaryColour=&H00e4d8bc,OutlineColour=&H001c1812,BackColour=&Hc01c1812," +
241
+
"BorderStyle=3,Outline=1,Shadow=0,Alignment=2,MarginV=28";
241
242
vfChain.push(`subtitles='${srtPath.replace(/'/g, "\\'")}':force_style='${style}'`);
242
243
}
243
244
if (vfChain.length) args3.push("-vf", vfChain.join(","));