105 lines
5.8 KiB
HTML
105 lines
5.8 KiB
HTML
|
<!doctype html>
|
||
|
|
<html><head>
|
||
|
|
<meta name="description" content="OUTLOOK · TEAMS — ARM SURFACE — 09:41 THE ARM WALL why Thursday worked and Friday didn't One chip doesn't speak the other's language. Windows runs Office…"><meta charset="UTF-8"/>
|
||
|
|
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||
|
|
<style>
|
||
|
|
body{margin:0;background:#0a0e0a;color:#e7f6e0;font-family:'Courier New',monospace}
|
||
|
|
#root{position:relative;width:1920px;height:1080px;overflow:hidden;background:#0a120c}
|
||
|
|
.clip{position:absolute;inset:0;display:grid;place-items:center}
|
||
|
|
/* schematic grid backdrop */
|
||
|
|
.grid{position:absolute;inset:0;background:
|
||
|
|
repeating-linear-gradient(0deg, rgba(64,160,90,.06) 0 1px, transparent 1px 60px),
|
||
|
|
repeating-linear-gradient(90deg, rgba(64,160,90,.06) 0 1px, transparent 1px 60px)}
|
||
|
|
.raster{position:absolute;inset:0;background:radial-gradient(circle at 50% 45%, rgba(20,60,35,.35), rgba(5,10,7,.92))}
|
||
|
|
/* styled like signal-trace oscilloscope text */
|
||
|
|
.sig{font-size:110px;font-weight:700;letter-spacing:2px;color:#9ef3b0;
|
||
|
|
text-shadow:0 0 30px rgba(90,230,140,.55)}
|
||
|
|
.subl{font-size:40px;color:#6fb78a;margin-top:8px;letter-spacing:1px}
|
||
|
|
.op{font-size:52px;line-height:1.5;color:#dff5dc;max-width:1500px;text-align:center;text-shadow:0 0 18px rgba(90,230,140,.25)}
|
||
|
|
.op .hl{color:#7be69a;font-weight:700}
|
||
|
|
/* timestamp / oscilloscope corner readout */
|
||
|
|
.tv{position:absolute;top:40px;left:46px;font-size:30px;color:#3f7a55;letter-spacing:3px}
|
||
|
|
.bar{position:absolute;bottom:70px;left:50%;transform:translateX(-50%);
|
||
|
|
font-size:30px;color:#3f7a55;letter-spacing:4px}
|
||
|
|
.block{margin:0 26px;padding:26px 40px;border:3px solid #5aa06f;background:rgba(20,50,32,.5);
|
||
|
|
font-size:46px;color:#b7f0c4;display:inline-block}
|
||
|
|
.cursor{width:8px;height:70px;background:#7be69a;position:absolute;display:inline-block;opacity:.9}
|
||
|
|
</style> <script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id="root" data-composition-id="main" data-start="0" data-width="1920" data-height="1080" data-duration="80">
|
||
|
|
<div id="bg" style="position:absolute;inset:0">
|
||
|
|
<div class="raster"></div><div class="grid"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- scene 1 : the outage -->
|
||
|
|
<section id="s1" class="clip" data-start="0" data-duration="20" data-track-index="1">
|
||
|
|
<div style="text-align:center">
|
||
|
|
<div class="tv">OUTLOOK · TEAMS — ARM SURFACE — 09:41</div>
|
||
|
|
<div class="sig">THE ARM WALL</div>
|
||
|
|
<div class="subl">why Thursday worked and Friday didn't</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- scene 2 : emulation layer -->
|
||
|
|
<section id="s2" class="clip" data-start="20" data-duration="20" data-track-index="1">
|
||
|
|
<div style="text-align:center">
|
||
|
|
<div class="op">One chip doesn't speak the other's language.<br/>
|
||
|
|
Windows runs Office through an <span class="hl">emulation layer</span> — a translator on a different stage.</div>
|
||
|
|
<div style="margin-top:60px">
|
||
|
|
<span class="block">x86 APP</span>
|
||
|
|
<span style="font-size:56px;color:#5aa06f">→</span>
|
||
|
|
<span class="block">TRANSLATOR</span>
|
||
|
|
<span style="font-size:56px;color:#5aa06f">→</span>
|
||
|
|
<span class="block">ARM SILICON</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- scene 3 : trace the path -->
|
||
|
|
<section id="s3" class="clip" data-start="40" data-duration="20" data-track-index="1">
|
||
|
|
<div style="text-align:center">
|
||
|
|
<div class="op">The error says nothing. So <span class="hl">trace the signal path</span>:</div>
|
||
|
|
<div style="margin-top:56px">
|
||
|
|
<div class="block">native ARM64 or emulated?</div>
|
||
|
|
</div>
|
||
|
|
<div style="margin-top:28px">
|
||
|
|
<span class="block">update app</span>
|
||
|
|
<span class="block">clear layer</span>
|
||
|
|
<span class="block">check firmware</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- scene 4 : the lesson -->
|
||
|
|
<section id="s4" class="clip" data-start="60" data-duration="20" data-track-index="1">
|
||
|
|
<div style="text-align:center">
|
||
|
|
<div class="op"><span class="hl">The platform changed, not the user.</span><br/>
|
||
|
|
A machine fine last Friday, broken this one —<br/>look at what updated. The signal path always tells.</div>
|
||
|
|
<div class="bar">— alexander riobe, killeen tx —</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- audio: narration per scene -->
|
||
|
|
<audio id="voice-s1" src="audio/s1.wav" data-start="0"></audio>
|
||
|
|
<audio id="voice-s2" src="audio/s2.wav" data-start="20"></audio>
|
||
|
|
<audio id="voice-s3" src="audio/s3.wav" data-start="40"></audio>
|
||
|
|
<audio id="voice-s4" src="audio/s4.wav" data-start="60"></audio>
|
||
|
|
<audio id="bgm" src="audio/music.mp3" data-start="0" data-volume="0.14"></audio>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
window.__timelines = window.__timelines || {};
|
||
|
|
const tl = gsap.timeline({ paused: true });
|
||
|
|
tl.fromTo("#s1 .sig", {opacity:0, y:40}, {opacity:1, y:0, duration:.7, ease:"power3.out"}, .4);
|
||
|
|
tl.fromTo("#s1 .subl", {opacity:0}, {opacity:1, duration:.6}, 1.4);
|
||
|
|
tl.fromTo("#s1 .tv", {opacity:0, letterSpacing:"20px"}, {opacity:1, letterSpacing:"3px", duration:1.8}, 0);
|
||
|
|
tl.fromTo("#s2 .op", {opacity:0, x:-40}, {opacity:1, x:0, duration:.7, ease:"power2.out"}, 20.6);
|
||
|
|
tl.fromTo("#s2 .block", {opacity:0, scale:.8}, {opacity:1, scale:1, stagger:.18, duration:.4}, 22.5);
|
||
|
|
tl.fromTo("#s3 .op", {opacity:0, y:-24}, {opacity:1, y:0, duration:.6}, 40.6);
|
||
|
|
tl.fromTo("#s3 .block", {opacity:0, y:16}, {opacity:1, y:0, stagger:.16, duration:.4}, 43.0);
|
||
|
|
tl.fromTo("#s4 .op", {opacity:0, y:24}, {opacity:1, y:0, duration:.7, ease:"power3.out"}, 60.8);
|
||
|
|
tl.fromTo("#s4 .bar", {opacity:0}, {opacity:1, duration:.7}, 75.0);
|
||
|
|
window.__timelines["main"] = tl;
|
||
|
|
</script>
|
||
|
|
</div>
|
||
|
|
</body></html>
|