@import url("/assets/md.css")feat: initial commit

@import url("/assets/md.css")

13 files changed, 1629 insertions, 0 deletions

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
new file mode 100644
index 0000000..53bd941
--- /dev/null
+++ b/src/routes/+layout.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+  import "../app.css";
+  import "$lib/fonts/all-local-after-woff2.css";
+  const { children } = $props();
+</script>
+
+<div
+  class="w-screen h-screen fixed top-0 left-0 bg-black text-white p-4 overflow-y-auto"
+>
+  {@render children()}
+</div>
diff --git a/src/routes/+layout.ts b/src/routes/+layout.ts
new file mode 100644
index 0000000..2c01569
--- /dev/null
+++ b/src/routes/+layout.ts
@@ -0,0 +1,11 @@
+/*
+  Copyright (C) 2024 memdmp
+
+  This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
+
+  This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details.
+
+  You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+export const prerender = true;
+export const trailingSlash = 'always';
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
new file mode 100644
index 0000000..701132b
--- /dev/null
+++ b/src/routes/+page.svelte
@@ -0,0 +1,414 @@
+<!--
+/**
+ * @license AGPL-3.0-OR-LATER
+ * @copyright 2024 memdmp
+ * 
+ * Copyright (C) 2024 memdmp
+ *
+ * This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+ -->
+<script lang="ts">
+  import logo from "./boot-logo.png";
+  import "./anim.css";
+  import { architecture, hostname, tty, versions } from "./distro-info";
+  import { login, ttyLines, type RenderBlock, type TTYText } from "./shared";
+  import { onDestroy, onMount } from "svelte";
+
+  const initTagLine = `line flex flex-row flex-wrap gap-3 justify-between`;
+
+  const fsckFileCount = Math.floor(Math.random() * 32768 + 6732);
+  const fsckTotalCount = Math.round(
+    (fsckFileCount / 6732) * 753664 + Math.random() * 10000,
+  );
+  const blocksTotal = Math.floor(Math.random() * 8000000 + 4000000);
+  const blocksCount = Math.floor(Math.random() * 600000 + 200000);
+
+  const lanLeastSignificantIPPart = Math.floor(Math.random() * 253 + 2);
+
+  let isScripted = false;
+  onMount(() => (isScripted = true));
+  onDestroy(() => (isScripted = false));
+</script>
+
+<svelte:head>
+  <title>mem.estrogen.zone</title>
+</svelte:head>
+
+{#snippet tagLeft(colour: string)}
+  <span class="text-[{colour}]">*</span>
+{/snippet}
+{#snippet okTagLeft()}
+  {@render tagLeft("#51f051")}
+{/snippet}
+{#snippet tagRight(innerText: string, innerColour: string)}
+  <span class="text-[#5f5fff]">[</span>
+  <span class="text-[{innerColour}]">{innerText}</span>
+  <span class="text-[#5f5fff]">]</span>
+{/snippet}
+{#snippet okTagRight()}
+  {@render tagRight("ok", "#51f051")}
+{/snippet}
+{#snippet okLine(text: string, classes?: string, rightClass?: string)}
+  <div class="{initTagLine}{classes ? ' ' + classes : ''}">
+    <div class="left">
+      {@render okTagLeft()}
+      {text}
+    </div>
+    <div class="right{rightClass ? ' ' + rightClass : ''}">
+      {@render okTagRight()}
+    </div>
+  </div>
+{/snippet}
+{#snippet ttyTextInnerRenderer(section: RenderBlock)}
+  <span
+    class="ttytext-block {section.colour
+      ? ` text-[${section.colour}]`
+      : ''}{section.bg ? ` bg-[${section.bg}]` : ''} {section.weight
+      ? ` ${['', 'font-thin', 'font-extralight', 'font-light', 'font-normal', 'font-medium', 'font-semibold', 'font-bold', 'font-extrabold', 'font-black'][section.weight / 100]}`
+      : ''}{typeof section.italic === 'undefined'
+      ? ''
+      : section.italic
+        ? ' italic'
+        : ' not-italic'}{typeof section.underlined === 'undefined'
+      ? ''
+      : section.underlined
+        ? ` underline`
+        : ' no-underline'} inline"
+    >{#if section.raw}{@html section.value}{:else}{#each section.value
+        .split("\n")
+        .map( (l, i, a) => (i === a.length - 1 ? [0, l] : [1, l]), ) as [nl, l]}{l}{#if nl}<br
+          />{/if}{/each}{/if}</span
+  >
+{/snippet}
+{#snippet ttyTextMiddleRenderer(
+  section: RenderBlock,
+  line: TTYText & { kind: "text" },
+)}
+  {#if section.url}
+    {#if typeof section.url === "string"}
+      {#if section.url.startsWith("newtab:")}
+        <a
+          href={section.url.substring(7)}
+          target="_blank"
+          rel="noopener noreferrer"
+          class="no-underline text-inherit"
+          download={section.dl}>{@render ttyTextInnerRenderer(section)}</a
+        >
+      {:else if section.url.startsWith("currenttab:")}
+        <a
+          href={section.url.substring(11)}
+          class="no-underline text-inherit"
+          download={section.dl}>{@render ttyTextInnerRenderer(section)}</a
+        >
+      {:else}
+        ERR: Unknown Link Format
+      {/if}
+    {:else}
+      <span
+        on:click={() =>
+          typeof section.url !== "function" ? void 0 : section.url(line)}
+        on:keypress={() =>
+          typeof section.url !== "function" ? void 0 : section.url(line)}
+        role="link"
+        tabindex="0">{@render ttyTextInnerRenderer(section)}</span
+      >
+    {/if}
+  {:else}
+    {@render ttyTextInnerRenderer(section)}
+  {/if}
+{/snippet}
+{#snippet ttyText(line: TTYText)}
+  {#if line.kind === "text"}
+    {#if (line.renderrestriction ?? "everywhere") === "everywhere" || line.renderrestriction === "noscript" || (line.renderrestriction === "js-only" && isScripted)}
+      {#if line.renderrestriction === "noscript"}
+        <noscript class="inline-block max-w-[100%] {line.classes.join(' ')}"
+          >{#each line.value as v}{@render ttyTextMiddleRenderer(
+              v,
+              line,
+            )}{/each}</noscript
+        >
+      {:else}
+        <span class="inline-block max-w-[100%] {line.classes.join(' ')}"
+          >{#each line.value as v}{@render ttyTextMiddleRenderer(
+              v,
+              line,
+            )}{/each}</span
+        >
+      {/if}
+    {/if}
+  {/if}
+{/snippet}
+
+<div class="hidden">
+  {#each ["inline-block", "block", "flex", "inline-flex", "max-w-full", "font-thin", "font-extralight", "font-light", "font-normal", "font-medium", "font-semibold", "font-bold", "font-extrabold", "font-black"] as c}
+    <span class={c}></span>
+  {/each}
+</div>
+
+<div class="fixed top-0 left-0 w-screen h-screen font-mono" id="app">
+  <div
+    id="bios"
+    class="flex flex-col items-center justify-between relative font-bios text-lg"
+  >
+    <div class="top flex items-center justify-center flex-col">
+      <div class="inner text-[#999999]">
+        <p class="leading-4 mt-8 -mb-8 max-w-[36rem]">
+          <span class="bdsdxe-load"
+            >BdsDxe: loading Boot0002 "UEFI Misc Device" from PciRoot
+            (0x0)/Pci(0x2,0x4)/Pci(0x0,0x0)</span
+          ><br />
+          <span class="bdsdxe-start"
+            >BdsDxe: starting Boot0002 "UEFI Misc Device" from PciRoot
+            (0x0)/Pci(0x2,0x4)/Pci(0x0,0x0)</span
+          >
+        </p>
+      </div>
+    </div>
+    <div class="middle">
+      <img
+        src={logo}
+        alt="Bootloader Logo"
+        class="w-32 h-32 flex items-center justify-center"
+      />
+    </div>
+    <div
+      class="bottom flex flex-col items-stretch justify-center text-center gap-0.5 w-full pb-4"
+    >
+      <div class="start-text">Start boot option</div>
+      <div
+        class="bar h-4"
+        style={`background-image: url("data:image/svg+xml,${encodeURIComponent(`<svg width="32" height="32" viewbox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+  <rect x="1" y="1" width="30" height="30" fill="white" stroke="black" stroke-width="2"/>
+</svg>
+`)}");background-size:contain;`}
+      ></div>
+    </div>
+  </div>
+  <div id="grub" class="font-grub text-sm">
+    <div
+      class="relative p-4 flex items-stretch justify-stretch flex-col w-screen h-screen"
+    >
+      <p class="title text-[#a2a2a2] mb-4 h-4 text-center">
+        GNU GRUB &nbsp;version 2.12
+      </p>
+      <div
+        class="outer-border border-2 border-[#a8a8a8] border-solid h-full px-1 py-2 flex flex-col items-stretch"
+      >
+        <div class="entry bg-[#a8a8a8] text-[#000] text-left">
+          *Alpine Linux {versions.alpine.number}, with {versions.kernel
+            .humanReadable}
+        </div>
+        <div class="entry text-[#a8a8a8] text-left">
+          &nbsp;UEFI Firmware Setup
+        </div>
+      </div>
+      <p class="footer text-[#a2a2a2] my-4 text-left pl-2">
+        <span class="block pl-6">
+          Use the ↑ and ↓ keys to select which entry is highlighted.<br />
+          Press enter to boot the selected OS, `e' to edit the commands before booting
+          or `c' for a command-line.<br />
+        </span>
+        The highlighted entry will be executed automatically in
+        <span class="grub-2s inline-block">2</span><span
+          class="grub-1s inline-block">1</span
+        >s.
+      </p>
+    </div>
+  </div>
+  <div id="grub-term" class="font-grub text-sm text-left text-[#a2a2a2]">
+    <p class="p-8">
+      &nbsp;&nbsp;Booting `Alpine Linux {versions.alpine.number}, with {versions
+        .kernel.humanReadable}'<br /><br /><span class="load-kernel"
+        >Loading {versions.kernel.humanReadable} ...</span
+      ><br /><span class="load-ramdisk">Loading initial ramdisk ...</span>
+    </p>
+  </div>
+  <!--
+    flex col reverse and mb auto are hacks for it to auto scroll to bottom(!)
+    flex col reverse only works due to nested inner (which would be at bottom of screen, if it wasnt for mb-auto div above it)
+   -->
+  <div id="openrc" class="overflow-y-auto flex flex-col-reverse">
+    <div class="mb-auto"></div>
+    <div class="font-mono leading-4 text-[#b9b9b9] flex flex-col p-4">
+      <div class="line">
+        &nbsp;&nbsp;<span class="text-[#51f051]">OpenRC</span>
+        <span class="text-[#4bdfdf]">{versions.openrc}</span>
+        is starting up Linux
+        <span class="text-[#5f5fff]">{versions.kernel.id} ({architecture})</span
+        >
+      </div>
+      <div class="line">&ZeroWidthSpace;</div>
+      {@render okLine("/proc/ is already mounted")}
+      {@render okLine("Mounting /run ...")}
+      {@render okLine("/run/openrc: creating directory")}
+      {@render okLine("/run/lock: creating directory", "openrc-boot-step-1")}
+      {@render okLine("/run/lock: correcting owner", "openrc-boot-step-1")}
+      {@render okLine("Caching service dependencies ...", "openrc-boot-step-1")}
+      {@render okLine("Remounting devtmpfs on /dev ...", "openrc-boot-step-2")}
+      {@render okLine("Mounting /dev/mqueue ...", "openrc-boot-step-3")}
+      {@render okLine("Mounting security filesystem ...", "openrc-boot-step-4")}
+      {@render okLine("Mounting debug filesystem ...", "openrc-boot-step-5")}
+      {@render okLine(
+        "Mounting persistent storage (pstore) filesystem ...",
+        "openrc-boot-step-5",
+      )}
+      {@render okLine("Mounting efivarfs filesystem ...", "openrc-boot-step-5")}
+      {@render okLine("Starting busybox mdev ...", "openrc-boot-step-6")}
+      {@render okLine("Scanning hardware for mdev ...", "openrc-boot-step-6")}
+      {@render okLine("Loading hardware drivers ...", "openrc-boot-step-7")}
+      {@render okLine("Loading modules ...", "openrc-boot-step-8")}
+      {@render okLine(
+        "Setting system clock using the hardware clock [UTC] ...",
+        "openrc-boot-step-9",
+      )}
+      {@render okLine("Checking local filesystems ...", "openrc-boot-step-10")}
+      <div class="line openrc-boot-step-11">
+        /dev/mapper/bepis: clean, {fsckFileCount}/{fsckTotalCount} files, {blocksCount}/{blocksTotal}
+        blocks
+      </div>
+      {@render okLine(
+        "Remounting root filesystem read/write ...",
+        "openrc-boot-step-12",
+      )}
+      {@render okLine("Remounting filesystems ...", "openrc-boot-step-13")}
+      {@render okLine("Activating swap devices ...", "openrc-boot-step-14")}
+      {@render okLine("Mounting local filesystems ...", "openrc-boot-step-15")}
+      {@render okLine(
+        "Configuring kernel parameters ...",
+        "openrc-boot-step-16",
+      )}
+      {@render okLine("Creating user login records ...", "openrc-boot-step-17")}
+      {@render okLine("Setting hostname ...", "openrc-boot-step-18")}
+      {@render okLine("Setting keymap ...", "openrc-boot-step-19")}
+      {@render okLine("Starting networking ...", "openrc-boot-step-20")}
+      {@render okLine("\xa0\xa0lo ...", "openrc-boot-step-21")}
+      {@render okLine("\xa0\xa0eth0 ...", "openrc-boot-step-22")}
+      <div class="line openrc-boot-step-22">udhcpd: started</div>
+      <div class="line openrc-boot-step-23">udhcpd: broadcasting discover</div>
+      <!-- TODO: configurable subnet uwu -->
+      <div class="line openrc-boot-step-24">
+        udhcpd: broadcasting select for 192.168.1.{lanLeastSignificantIPPart},
+        server 192.168.1.1
+      </div>
+      <div class="line openrc-boot-step-25">
+        udhcpd: lease of 192.168.1.{lanLeastSignificantIPPart} obtained from 192.168.1.1,
+        lease time 3600
+      </div>
+      {@render okLine(
+        "Seeding random number generator ...",
+        "openrc-boot-step-26",
+      )}
+      {@render okLine(
+        "Seeding 256 bits without crediting",
+        "openrc-boot-step-26",
+      )}
+      {@render okLine(
+        "Saving 256 bits of creditable seed for next boot",
+        "openrc-boot-step-26",
+      )}
+      {@render okLine("Starting logbookd ...", "openrc-boot-step-27")}
+      {@render okLine("Starting busybox acpid ...", "openrc-boot-step-28")}
+      {@render okLine("Starting busybox crond ...", "openrc-boot-step-29")}
+      {@render okLine("Starting busybox ntpd ...", "openrc-boot-step-29")}
+      <div class="line openrc-boot-step-30">&ZeroWidthSpace;</div>
+      <div class="line openrc-boot-step-30">
+        Welcome to Alpine Linux {versions.alpine
+          .number}{#if versions.alpine.isEdge}&nbsp;(edge){/if}
+      </div>
+      <div class="line openrc-boot-step-30">
+        Kernel {versions.kernel.humanReadable} on an {architecture} (/dev/{tty})
+      </div>
+      <div class="line openrc-boot-step-30">&ZeroWidthSpace;</div>
+      <div class="line openrc-boot-step-30">
+        {hostname} login:&nbsp;<span class="openrc-username"
+          >{#each login.username
+            .split("")
+            .map((v, i) => [v, i] as const) as [char, idx]}<span
+              class="openrc-username-char openrc-username-char-{idx} inline-block"
+              >{char}</span
+            >{/each}</span
+        ><span class="openrc-hide-at-login-prompt-username-done"
+          ><span class="openrc-username-anim"
+            ><code class="hidden-after-anim">_</code></span
+          ></span
+        ><span class="openrc-pw-line"
+          ><br />
+          Password:&nbsp;<span class="openrc-password-anim"
+            ><code class="hidden-after-anim">_</code></span
+          ></span
+        >
+      </div>
+      <!-- TODO: Animate login and launching a tui here (for js enjoyers) or a minimal terminal after clearing the screen, and a no js screen alongside a plaintext version of the thing (for schizo noscript lovers) -->
+      <div class="hidden-after-anim">
+        <span class="openrc-hide-at-last-boot-step inline-block">
+          <pre class="flashing-cursor">_</pre>
+        </span>
+      </div>
+      <div class="line ttylines-openrc font-mono text-[#070505] flex flex-col">
+        {#each ttyLines.filter(((maxidx) => (_, i) => i < (maxidx === -1 ? Infinity : maxidx))(ttyLines.findIndex((v) => v.kind === "clear"))) as line}
+          {@render ttyText(line)}
+        {/each}
+      </div>
+    </div>
+  </div>
+  {#if ttyLines.find((v) => v.kind === "clear")}
+    {#each ttyLines
+      .map((v, i) => [v, i] as const)
+      .filter(([v]) => v.kind === "clear")
+      .map((v, i, a) => [v[1], a[i + 1]?.[1], i]) as [idx, nextIdx, clearIdx]}
+      <div
+        id="tty-{clearIdx}"
+        class="overflow-y-auto max-h-screen flex flex-col-reverse"
+      >
+        <div class="mb-auto"></div>
+        <div class="font-mono leading-4 text-[#070505] flex flex-col p-4">
+          {#each ttyLines.filter((_, i) => i >= idx && i < (nextIdx ?? Infinity)) as line}
+            {@render ttyText(line)}
+          {/each}
+        </div>
+      </div>
+    {/each}
+  {/if}
+</div>
+
+<style>
+  @keyframes flashing-cursor {
+    0% {
+      opacity: 0;
+    }
+    49% {
+      opacity: 0;
+    }
+    50% {
+      opacity: 1;
+    }
+    99% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+  .flashing-cursor {
+    animation-name: flashing-cursor;
+    animation-duration: 0.4s;
+    animation-iteration-count: infinite;
+    animation-timing-function: linear;
+  }
+  .hidden-after-anim {
+    margin-top: -99999vh;
+    margin-bottom: 99999vh;
+    margin-left: -99999vw;
+    margin-right: 99999vw;
+    transform: scaleX(0);
+    opacity: 0;
+  }
+  .ttytext-block {
+    white-space-collapse: preserve-spaces;
+  }
+</style>
diff --git a/src/routes/anim-gen.ts b/src/routes/anim-gen.ts
new file mode 100644
index 0000000..9138ca9
--- /dev/null
+++ b/src/routes/anim-gen.ts
@@ -0,0 +1,504 @@
+/*
+  Copyright (C) 2024 memdmp
+
+  This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
+
+  This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details.
+
+  You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+import { Animation, MultiObjectKeyframe } from '@memdmp/keyframegen';
+import {
+  biosStepInterval,
+  biosSteps,
+  getDelay,
+  login,
+  ttyLines,
+} from './shared.ts';
+const anim = new Animation();
+let ttyCtr = 0;
+const stages = [
+  anim.selector('#bios'),
+  anim.selector('#grub'),
+  anim.selector('#grub-term'),
+  anim.selector('#openrc'),
+  ...(ttyLines.flatMap((v) =>
+    v.kind === 'clear'
+      ? [
+        anim.selector('#tty-' + ttyCtr++),
+      ]
+      : []
+  )),
+];
+const visibleStageStyles = `margin-top: 0;
+margin-bottom: 0;
+margin-left: 0;
+margin-right: 0;
+height: 100vh;
+width: 100vw;
+opacity: 1;`;
+const hiddenStageStyles = `margin-top: -99999vh;
+margin-bottom: 99999vh;
+margin-left: -99999vw;
+margin-right: 99999vw;
+height: 0px;
+width: 0px;
+opacity: 0;`;
+const visibleStyles = `margin-top: 0;
+margin-bottom: 0;
+margin-left: 0;
+margin-right: 0;
+transform: none;
+opacity: 1;`;
+const hiddenStyles = `margin-top: -99999vh;
+margin-bottom: 99999vh;
+margin-left: -99999vw;
+margin-right: 99999vw;
+transform: scaleX(0);
+opacity: 0;`;
+const altHiddenStyles = `opacity:0;
+transform:scaleX(0);
+width:0;
+height:0;
+margin-left:-100vw;
+margin-right:100vw;`;
+const altVisibleStyles = `opacity:1;
+transform:none;
+width:max-content;
+height:max-content;
+margin-left:0;
+margin-right:0;`;
+stages.forEach((v, i) =>
+  v.style(i === 0 ? visibleStageStyles : hiddenStageStyles)
+);
+let currentStage: typeof stages[number];
+const toStage = (stage: number) => {
+  const oldStage = currentStage;
+  currentStage = stages[stage];
+  if (typeof oldStage !== 'undefined') {
+    oldStage.style(
+      visibleStageStyles,
+    );
+    currentStage.style(
+      hiddenStageStyles,
+    );
+    anim._internal_timeline.now += 1;
+    oldStage.style(
+      hiddenStageStyles,
+    );
+  }
+  currentStage.style(
+    visibleStageStyles,
+  );
+};
+
+type Step = (next: () => void) => void;
+
+const biosStepHandlers: Step[] = [
+  // Show BIOS
+  (next) => {
+    toStage(0);
+    anim.in(1000 * 3 / 10, next);
+  },
+  // Show Start boot option
+  (next) => {
+    const s = anim.selector('#bios .start-text');
+    s.style(hiddenStyles);
+    anim._internal_timeline.now += 1;
+    s.style(visibleStyles);
+    anim.in(1000, next);
+  },
+  // Show bar parts
+  ...new Array(
+    biosSteps,
+  ).fill(
+    (quantity: number, lastQuantity: number, index: number) =>
+    (next: () => void) => {
+      const s = anim.selector(
+        `#bios .bar`,
+      );
+      s.style(`${index === 0 ? hiddenStyles : visibleStyles}
+width: ${lastQuantity * 100}vw;`);
+      anim._internal_timeline.now += 1;
+      s.style(`${visibleStyles}
+width: ${quantity * 100}vw;`);
+      anim.in(quantity === 1 ? 50 : biosStepInterval, next);
+    },
+  ).map((v, i, a) => v((i + 1) / a.length, i / a.length, i)),
+  // Show bdsdxe
+  (next) => {
+    const s1 = anim.selector('#bios .bdsdxe-load');
+    const s2 = anim.selector('#bios .bdsdxe-start');
+    s1.style(hiddenStyles);
+    s2.style(hiddenStyles);
+    anim._internal_timeline.now += 1;
+    s1.style(visibleStyles);
+    anim.in(75, () => {
+      s2.style(visibleStyles);
+      anim.in(50, next);
+    });
+  },
+];
+const grubStepHandlers: Step[] = [ // Show Grub
+  (next) => {
+    toStage(1);
+    anim.in(1000, next);
+  },
+  // Hide 2s, show 1s
+  (next) => {
+    const g2s = anim.selector('#grub .grub-2s');
+    const g1s = anim.selector('#grub .grub-1s');
+    g2s.style('width:max-content;opacity:1;');
+    g1s.style('width:0;opacity:0;');
+    anim._internal_timeline.now += 1;
+    g2s.style('width:0;opacity:0;');
+    g1s.style('width:max-content;opacity:1;');
+    anim.in(1000, next);
+  },
+  // Show Booting Alpine Grub
+  (next) => {
+    toStage(2);
+    anim.in(100, next);
+  },
+  (next) => {
+    const s = anim.selector('#grub-term .load-kernel');
+    s.style(hiddenStyles);
+    anim._internal_timeline.now += 1;
+    s.style(visibleStyles);
+    anim.in(200, next);
+  },
+  (next) => {
+    const s = anim.selector('#grub-term .load-ramdisk');
+    s.style(hiddenStyles);
+    anim._internal_timeline.now += 1;
+    s.style(visibleStyles);
+    anim.in(950, next);
+  },
+];
+const typingIndicatorFlashTime = 200;
+const typingIndicatorHidden = `
+opacity: 0;
+transform: scaleX(0);
+`;
+const typingIndicatorVisible = `
+opacity: 1;
+transform: none;
+`;
+/** Returns the last state it was in */
+const idleTypingBar = (
+  typingBarSelector: MultiObjectKeyframe,
+  idleFor: number,
+) => {
+  let flashingTimeCtr = 0;
+  let isHiddenInCycle = false;
+  typingBarSelector.style(typingIndicatorVisible);
+  const v = () =>
+    isHiddenInCycle ? typingIndicatorHidden : typingIndicatorVisible;
+  while ((flashingTimeCtr += typingIndicatorFlashTime) < idleFor) {
+    if (flashingTimeCtr === typingIndicatorFlashTime) flashingTimeCtr /= 2;
+    anim.in(flashingTimeCtr, () => {
+      isHiddenInCycle = !isHiddenInCycle;
+      typingBarSelector.style(
+        v(),
+      );
+    });
+    anim.in(flashingTimeCtr - 1, () => {
+      typingBarSelector.style(
+        v(),
+      );
+    });
+  }
+  return v();
+};
+const typeCharacter = (
+  typingBarSelector: MultiObjectKeyframe,
+  characterSelector: MultiObjectKeyframe | undefined | null,
+  next: () => void,
+  characterTime: number,
+) => {
+  const characterHidden = `
+  transform:scaleX(0);
+  width: 0;
+  opacity: 0;
+  `;
+  const characterVisible = `
+  transform:none;
+  width: max-content;
+  opacity: 1;
+  `;
+  typingBarSelector.style(typingIndicatorVisible);
+  if (characterSelector) {
+    characterSelector.style(characterHidden);
+    anim._internal_timeline.now += 1;
+    characterSelector.style(characterVisible);
+  }
+  if (characterTime > typingIndicatorFlashTime) {
+    const res = idleTypingBar(typingBarSelector, characterTime);
+    anim.in(characterTime - 1, () => {
+      typingBarSelector.style(res);
+    });
+    anim.in(characterTime, () => {
+      typingBarSelector.style(typingIndicatorHidden);
+    });
+    anim.in(characterTime + 1000 / 60, next);
+  } else {
+    anim.in(characterTime, () => {
+      typingBarSelector.style(typingIndicatorHidden);
+    });
+    anim.in(characterTime + 1000 / 60, next);
+  }
+};
+const openrcStepHandlers = (multi: number): Step[] => [
+  // Show OpenRC
+  (next) => {
+    toStage(3);
+    next();
+  },
+  ...[
+    // Steps 1-3
+    1000 / 60,
+    200,
+    1000 / 30,
+    // Steps 4-9
+    1000 / 60,
+    1000 / 60,
+    4000 / 60,
+    1000 / 40,
+    400,
+    75,
+    // Steps 10-15
+    150,
+    100,
+    85,
+    100,
+    3500 / 60,
+    125,
+    // Steps 16-20
+    3500 / 60,
+    100,
+    150,
+    1000 / 60,
+    1000 / 60,
+    1000 / 60,
+    // Steps 21-25
+    1000 / 85,
+    1000 / 45,
+    1000 / 60,
+    1000 / 60,
+    500,
+    // Steps 26-30
+    750,
+    400,
+    100,
+    100,
+    400,
+    // Time till typing:
+    1000,
+  ].map((v) => v / multi).map((time, idx, arr) => (next: () => void) => {
+    const s = anim.selector('#openrc .openrc-boot-step-' + idx);
+    s.style(`${hiddenStyles}
+max-height: 0;`);
+    if (idx === arr.length - 1) {
+      anim.selector('#openrc .openrc-hide-at-last-boot-step').style(
+        'opacity:1;max-height:90vh;max-width:100vw;',
+      );
+    }
+    anim._internal_timeline.now += 1;
+    if (idx === arr.length - 1) {
+      anim.selector('#openrc .openrc-hide-at-last-boot-step').style(
+        'opacity:0;max-height:0;max-width:0;',
+      );
+    }
+    s.style(`${visibleStyles}
+max-height: max-content;`);
+    if (idx === arr.length - 1) {
+      idleTypingBar(anim.selector('#openrc .openrc-username-anim'), time);
+    }
+    anim.in(time, next);
+  }),
+  // Typing Username
+  ...((() => {
+    const typingBar = anim.selector('#openrc .openrc-username-anim');
+    return login.username.split('').map((_, i) => {
+      const character = anim.selector(
+        `#openrc .openrc-username .openrc-username-char.openrc-username-char-${i}`,
+      );
+      return (next: () => void) =>
+        typeCharacter(typingBar, character, next, getDelay(login));
+    });
+  })()),
+  // Hide Username Cursor
+  (next) => {
+    const s = anim.selector(
+      '#openrc .openrc-hide-at-login-prompt-username-done',
+    );
+    s.style(`transform:none;width:max-content;opacity:1;`);
+    anim._internal_timeline.now += 1;
+    s.style(`transform:scaleX(0);width:0;opacity:0;`);
+    next();
+  },
+  // Show Password
+  (next) => {
+    const s = anim.selector('#openrc .openrc-pw-line');
+    s.style(`transform:scaleX(0);width:0;opacity:0;`);
+    anim._internal_timeline.now += 1;
+    s.style(`transform:none;width:max-content;opacity:1;`);
+    next();
+  },
+  // Password Typing
+  ...(new Array(login.passwordLength).fill(
+    (_idx: number) => (next: () => void) => {
+      const s = anim.selector('#openrc .openrc-password-anim');
+      const characterTime = getDelay(login);
+      typeCharacter(s, null, next, characterTime);
+    },
+  ).map((v, i) => v(i))),
+  (next) => {
+    const s = anim.selector('#openrc .openrc-password-anim');
+    s.style('opacity:0;transform:scaleX(0);');
+    anim.in(1, next);
+  },
+];
+const ttyStepHandlers: Step[] = [
+  (next) => anim.in(100, next),
+  (next) => {
+    const s = anim.selector(
+      `#openrc .ttylines-openrc`,
+    );
+    s.style(altHiddenStyles);
+    anim.in(1, () => {
+      s.style(altVisibleStyles);
+      next();
+    });
+  },
+  ...(() => {
+    let isBeforeFirstClear = true;
+    let ttyIdx = 0;
+    return ttyLines.map((step) => (next: () => void) => {
+      switch (step.kind) {
+        case 'text': {
+          const s = anim.selector(
+            `${isBeforeFirstClear ? '#openrc' : '#tty-' + (ttyIdx - 1)} ${
+              step.classes.map((v) => `.${v}`).join('')
+            }`,
+          );
+          s.style(altHiddenStyles);
+          anim.in(1, () => {
+            s.style(altVisibleStyles);
+            next();
+          });
+          break;
+        }
+        case 'removeNode': {
+          const s = anim.selector(
+            `${isBeforeFirstClear ? '#openrc' : '#tty-' + (ttyIdx - 1)} ${
+              step.removedItemClassList.map((v) => `.${v}`).join('')
+            }`,
+          );
+          s.style(altVisibleStyles);
+          anim.in(1, () => {
+            s.style(altHiddenStyles);
+            next();
+          });
+          break;
+        }
+        case 'time': {
+          anim.in(step.delay, next);
+          break;
+        }
+        case 'cursorVisibility': {
+          next();
+          break;
+        }
+        case 'clear': {
+          if (isBeforeFirstClear) {
+            isBeforeFirstClear = false;
+          }
+          toStage(3 + (++ttyIdx));
+          next();
+          break;
+        }
+      }
+    });
+  })(),
+];
+
+const handleSteps: Step[] = [
+  // (n) => {
+  //   toStage(0);
+  //   anim.in(500, n);
+  // },
+  ...biosStepHandlers,
+  ...grubStepHandlers,
+  ...openrcStepHandlers(1),
+  ...ttyStepHandlers,
+  (n) => {
+    const s = anim.selector('#app .hidden-after-anim');
+    s.style(visibleStyles);
+    anim._internal_timeline.now += 1;
+    s.style(hiddenStyles);
+    anim.in(1000, n);
+  },
+];
+const nextStep = () => handleSteps.shift()!(nextStep);
+handleS