diff --git a/docs/.vitepress/theme/Hero.vue b/docs/.vitepress/theme/Hero.vue
index 09b3d0415..68a22bdbf 100644
--- a/docs/.vitepress/theme/Hero.vue
+++ b/docs/.vitepress/theme/Hero.vue
@@ -1,10 +1,16 @@
 <script setup lang="ts">
-import { Icon } from '@iconify/vue';
+import RiveAnimation from '@components/shared/RiveAnimation.vue';
 import { useData } from 'vitepress';
+import heroAnimation from './assets/animations/640_x_630_vite_to_void_box_vertical_v3.riv';
 
-const props = defineProps<{
-  background?: string;
-}>();
+if (typeof document !== 'undefined') {
+  const preload = document.createElement('link');
+  preload.rel = 'preload';
+  preload.href = heroAnimation;
+  preload.as = 'fetch';
+  preload.crossOrigin = 'anonymous';
+  document.head.appendChild(preload);
+}
 
 const { frontmatter } = useData();
 </script>
@@ -45,50 +51,20 @@ const { frontmatter } = useData();
     </div>
     <div class="flex flex-col min-h-[22rem] sm:min-h-[30rem]">
       <div
-        class="flex flex-col bg-cover bg-center"
-        :style="props.background ? { backgroundImage: `url(${props.background})` } : undefined"
+        class="relative px-10 pb-10 md:pt-10 h-full flex flex-col justify-center overflow-clip"
+        role="img"
+        aria-label="Animation showing a Vite app becoming a Void app"
       >
-        <div
-          class="relative px-10 pb-10 md:pt-10 h-full flex flex-col justify-center overflow-clip"
-        >
-          <slot name="hero-image">
-            <img
-              v-if="frontmatter.hero.image?.src"
-              :src="frontmatter.hero.image.src"
-              :alt="frontmatter.hero.image.alt"
-              class="max-h-[20rem]"
-            />
-          </slot>
-        </div>
+        <RiveAnimation
+          :desktop-src="heroAnimation"
+          :mobile-src="heroAnimation"
+          :desktop-width="640"
+          :desktop-height="630"
+          :mobile-width="640"
+          :mobile-height="630"
+          canvas-class="w-full"
+        />
       </div>
-      <a
-        href="https://www.youtube.com/watch?v=Bp86buftbX8"
-        target="_blank"
-        class="p-5 flex gap-5 items-center relative group"
-      >
-        <div class="relative h-16 aspect-244/144 shrink-0 overflow-hidden">
-          <img
-            src="./void-thumb.jpg"
-            alt="Video thumbnail"
-            class="h-16 aspect-244/144 group-hover:opacity-75 group-hover:scale-105 transition-[scale,opacity]"
-          />
-          <div class="pointer-events-none absolute inset-0 flex items-center justify-center">
-            <div
-              class="flex h-10 w-10 items-center justify-center rounded-full bg-black/55 shadow-[0_6px_24px_rgba(0,0,0,0.35)] transition-transform duration-200 group-hover:scale-110"
-            >
-              <Icon icon="simple-icons:youtube" class="h-5 w-5 text-[#ff0033]" />
-            </div>
-          </div>
-        </div>
-        <div>
-          <h5 class="text-white">What is Void?</h5>
-          <p class="text-base">Evan You announces Void</p>
-        </div>
-        <span
-          class="absolute top-5 right-5 text-electric bg-slate rounded px-3 py-1 text-xs font-mono"
-          >15:33</span
-        >
-      </a>
     </div>
   </div>
 </template>
diff --git a/docs/.vitepress/theme/Home.vue b/docs/.vitepress/theme/Home.vue
index 99666e54e..a5f23242b 100644
--- a/docs/.vitepress/theme/Home.vue
+++ b/docs/.vitepress/theme/Home.vue
@@ -1,28 +1,62 @@
 <script setup>
-import FeatureGrid from '@components/oss/FeatureGrid.vue';
 import Footer from '@components/oss/Footer.vue';
 import Spacer from '@components/shared/Spacer.vue';
 import { useData } from 'vitepress';
-import bg from './hero-bg.jpg';
 import Hero from './Hero.vue';
+import HomeCli from './HomeCli.vue';
+import HomeFeatures from './HomeFeatures.vue';
+import HomePlatform from './HomePlatform.vue';
 
 const { frontmatter } = useData();
 </script>
 
 <template>
-  <Hero :background="bg">
-    <template #hero-image>
-      <div class="hero-file-tree">
-        <VoidAppFileTree />
-      </div>
-    </template>
-  </Hero>
+  <Hero />
 
   <Spacer />
 
-  <FeatureGrid />
+  <HomeCli />
 
-  <Spacer />
+  <Spacer class="bg-primary" />
+
+  <div class="platform-surface bg-white text-primary">
+    <section
+      class="wrapper border-t border-stroke px-5 sm:px-10 h-70 sm:h-80 flex flex-col justify-center items-center gap-5 text-center"
+      aria-labelledby="full-stack-heading"
+    >
+      <a
+        href="/guide/self-hosted-platform"
+        class="section-label-link"
+        aria-label="Self-host Void Platform guide"
+      >
+        <img src="/void-platform-dark.svg" alt="" class="section-label" />
+      </a>
+      <h2 id="full-stack-heading" class="text-primary text-2xl md:text-[2.5rem]">
+        Deploy with your Security Built-In
+      </h2>
+      <p class="max-w-md text-pretty text-primary/70">
+        Self-host your team's Void Platform & customize it to fit your security needs.
+      </p>
+    </section>
+
+    <HomePlatform />
+    <Spacer />
+  </div>
+
+  <section
+    class="wrapper border-t border-nickel px-5 sm:px-10 h-70 sm:h-[22rem] flex flex-col justify-center gap-6 text-center items-center"
+    aria-labelledby="features-heading"
+  >
+    <a href="/guide/" class="section-label-link" aria-label="Void SDK guide">
+      <img src="/void-sdk.svg" alt="" class="section-label section-label--sdk" />
+    </a>
+    <h2 id="features-heading" class="text-white">Turn Vite Apps Full-Stack</h2>
+    <p class="max-w-md text-white/70 text-balance sm:text-pretty">
+      Use your favorite Vite framework, add the backend features you need, and infer your resources.
+    </p>
+  </section>
+
+  <HomeFeatures />
 
   <Footer
     :heading="frontmatter.footer_heading"
@@ -33,50 +67,38 @@ const { frontmatter } = useData();
 </template>
 
 <style scoped>
-.hero-file-tree {
-  margin-top: 2rem;
-  max-width: calc(100vw - 80px);
-}
-
-@media (min-width: 768px) {
-  .hero-file-tree {
-    margin-top: 0;
-    max-width: none;
-  }
+.section-label {
+  height: 0.9rem;
+  width: auto;
 }
 
-@media (min-width: 1024px) {
-  .hero-file-tree :deep(.file-tree) {
-    max-height: 362px;
-    overflow-y: auto;
-    scrollbar-width: thin;
-    scrollbar-color: rgba(255, 255, 255, 0.42) rgba(255, 255, 255, 0.08);
-  }
+.section-label--sdk {
+  width: 6rem;
+  height: auto;
 }
 
-.hero-file-tree :deep(.file-tree),
-.hero-file-tree :deep(.adapter-tabs) {
-  background-color: rgba(0, 0, 0, 0.75);
-  backdrop-filter: blur(10px);
-  border-color: rgba(255, 255, 255, 0.1);
+.section-label-link {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 0.9rem;
+  line-height: 0;
 }
 
-.hero-file-tree :deep(.file-tree::-webkit-scrollbar) {
-  width: 10px;
+.section-label-link:focus-visible {
+  outline: 2px solid var(--color-electric);
+  outline-offset: 4px;
 }
 
-.hero-file-tree :deep(.file-tree::-webkit-scrollbar-track) {
-  background: rgba(255, 255, 255, 0.08);
-  border-radius: 999px;
+.platform-surface :deep(.wrapper) {
+  border-color: var(--color-stroke);
 }
 
-.hero-file-tree :deep(.file-tree::-webkit-scrollbar-thumb) {
-  background: rgba(255, 255, 255, 0.42);
-  border: 2px solid rgba(0, 0, 0, 0.35);
-  border-radius: 999px;
+.platform-surface :deep(.wrapper--ticks::before) {
+  border-left-color: var(--color-stroke);
 }
 
-.hero-file-tree :deep(.file-tree::-webkit-scrollbar-thumb:hover) {
-  background: rgba(255, 255, 255, 0.58);
+.platform-surface :deep(.wrapper--ticks::after) {
+  border-right-color: var(--color-stroke);
 }
 </style>
diff --git a/docs/.vitepress/theme/HomeCli.vue b/docs/.vitepress/theme/HomeCli.vue
new file mode 100644
index 000000000..54072f8a6
--- /dev/null
+++ b/docs/.vitepress/theme/HomeCli.vue
@@ -0,0 +1,302 @@
+<script setup lang="ts">
+import { Icon } from '@iconify/vue';
+import { TabsContent, TabsList, TabsRoot, TabsTrigger } from 'reka-ui';
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
+import { terminalDemos } from './terminal/demos.ts';
+import TerminalPlayer from './terminal/TerminalPlayer.vue';
+import { terminalFrame } from './terminal/timeline.ts';
+
+const selected = ref('deploy');
+const reducedMotion = ref(false);
+const autoAdvance = ref(true);
+const stage = ref<HTMLElement | null>(null);
+const player = ref<InstanceType<typeof TerminalPlayer> | null>(null);
+const state = ref({ time: 0, playing: false });
+const demo = computed(() => terminalDemos.find((item) => item.id === selected.value)!);
+const tabs = [
+  { id: 'deploy', label: 'deploy' },
+  { id: 'install', label: 'platform' },
+  { id: 'recover', label: 'logs' },
+];
+const transcript = computed(() =>
+  terminalFrame(demo.value, demo.value.duration)
+    .map((line) => line.segments.map((segment) => segment.text).join(''))
+    .join('\n'),
+);
+const playbackLabel = computed(() =>
+  state.value.playing || autoAdvance.value
+    ? 'Pause demo'
+    : state.value.time >= demo.value.duration
+      ? 'Replay demo'
+      : 'Play demo',
+);
+let advanceTimer: ReturnType<typeof setTimeout> | undefined;
+let motionQuery: MediaQueryList | undefined;
+let observer: IntersectionObserver | undefined;
+let visible = false;
+
+function clearAdvance() {
+  clearTimeout(advanceTimer);
+  advanceTimer = undefined;
+}
+
+function choose(value: string | number) {
+  clearAdvance();
+  autoAdvance.value = false;
+  selected.value = String(value);
+}
+
+function completed() {
+  clearAdvance();
+  if (!autoAdvance.value || reducedMotion.value) {
+    return;
+  }
+  advanceTimer = setTimeout(() => {
+    if (document.hidden || !visible) {
+      return;
+    }
+    const index = terminalDemos.findIndex((item) => item.id === selected.value);
+    selected.value = terminalDemos[(index + 1) % terminalDemos.length].id;
+  }, 3000);
+}
+
+function resumeAdvance() {
+  if (visible && !document.hidden && state.value.time >= demo.value.duration) {
+    completed();
+  }
+}
+
+function togglePlayback() {
+  const waiting = autoAdvance.value && state.value.time >= demo.value.duration;
+  autoAdvance.value = false;
+  clearAdvance();
+  if (!waiting) {
+    player.value?.toggle();
+  }
+}
+
+function syncMotion() {
+  reducedMotion.value = motionQuery?.matches ?? false;
+  if (reducedMotion.value) {
+    autoAdvance.value = false;
+    clearAdvance();
+  }
+}
+
+onMounted(() => {
+  motionQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
+  syncMotion();
+  motionQuery.addEventListener('change', syncMotion);
+  observer = new IntersectionObserver(([entry]) => {
+    visible = entry.isIntersecting;
+    if (visible) {
+      resumeAdvance();
+    } else {
+      clearAdvance();
+    }
+  });
+  if (stage.value) {
+    observer.observe(stage.value);
+  }
+  document.addEventListener('visibilitychange', resumeAdvance);
+});
+
+onBeforeUnmount(() => {
+  clearAdvance();
+  motionQuery?.removeEventListener('change', syncMotion);
+  observer?.disconnect();
+  document.removeEventListener('visibilitychange', resumeAdvance);
+});
+</script>
+
+<template>
+  <section id="cli" class="cli-section" data-theme="dark" aria-labelledby="cli-heading">
+    <div class="wrapper border-t border-nickel cli-heading">
+      <a href="/reference/cli" class="cli-wordmark" aria-label="Void CLI reference">
+        <img src="/void-cli.svg" alt="" width="536" height="113" />
+      </a>
+      <h2 id="cli-heading" class="text-white">Deploy with One Command</h2>
+      <p>
+        Handle the full lifecycle of your project: building, deploying and managing your resources
+      </p>
+    </div>
+
+    <div ref="stage" class="wrapper border-t border-nickel terminal-background cli-stage">
+      <TabsRoot :model-value="selected" class="cli-terminal" @update:model-value="choose">
+        <TabsContent :key="demo.id" :value="demo.id" class="cli-panel">
+          <TerminalPlayer
+            ref="player"
+            :demo="demo"
+            :reduced-motion="reducedMotion"
+            appearance="home"
+            @progress="state = $event"
+            @complete="completed"
+          />
+          <div class="cli-sr-only">
+            <p>{{ demo.context }}</p>
+            <pre>{{ transcript }}</pre>
+          </div>
+        </TabsContent>
+
+        <div class="cli-controls">
+          <TabsList aria-label="Void CLI commands" class="cli-tabs">
+            <TabsTrigger v-for="tab in tabs" :key="tab.id" :value="tab.id">
+              {{ tab.label }}
+            </TabsTrigger>
+          </TabsList>
+          <button
+            type="button"
+            class="cli-playback"
+            :aria-label="playbackLabel"
+            :title="playbackLabel"
+            @click="togglePlayback"
+          >
+            <Icon
+              :icon="
+                state.playing || autoAdvance
+                  ? 'lucide:pause'
+                  : state.time >= demo.duration
+                    ? 'lucide:rotate-ccw'
+                    : 'lucide:play'
+              "
+              width="15"
+              height="15"
+              aria-hidden="true"
+            />
+          </button>
+        </div>
+      </TabsRoot>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.cli-section {
+  background: var(--color-primary);
+  color: var(--color-white);
+}
+.cli-heading {
+  display: flex;
+  min-height: 320px;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 24px;
+  padding: 64px 24px;
+  text-align: center;
+}
+.cli-wordmark {
+  display: inline-flex;
+  width: 100px;
+}
+.cli-wordmark img {
+  width: 100%;
+  height: auto;
+}
+.cli-heading p {
+  max-width: 450px;
+  color: #ffffffb3;
+  text-wrap: pretty;
+}
+.cli-stage {
+  display: flex;
+  justify-content: center;
+  height: 640px;
+  padding: 112px 40px 0;
+  background-color: var(--color-wine);
+  overflow: clip;
+}
+.cli-terminal {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: 992px;
+  min-width: 0;
+  border-radius: 8px 8px 0 0;
+  background: #111111;
+  outline: 1px solid #ffffff4d;
+  outline-offset: 3px;
+  overflow: hidden;
+}
+.cli-panel {
+  flex: 1;
+  min-height: 0;
+}
+.cli-controls {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  gap: 12px;
+  padding: 16px 24px 24px;
+}
+.cli-tabs {
+  display: flex;
+  align-items: center;
+  padding: 4px;
+  border: 1px solid #ffffff1a;
+  border-radius: 6px;
+  white-space: nowrap;
+}
+.cli-tabs :deep([role='tab']) {
+  color: #aaa6b2;
+}
+.cli-tabs :deep([data-state='active']) {
+  color: #111111;
+}
+.cli-playback {
+  position: absolute;
+  right: 28px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border: 1px solid #ffffff1a;
+  border-radius: 5px;
+  color: #aaa6b2;
+  cursor: pointer;
+}
+.cli-playback:hover {
+  color: #ffffff;
+  border-color: #ffffff4d;
+}
+.cli-section :is(a, button, [role='tabpanel']):focus-visible {
+  outline: 2px solid #8c9fff;
+  outline-offset: 4px;
+}
+.cli-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+@media (max-width: 767px) {
+  .cli-heading {
+    min-height: 280px;
+    padding: 56px 24px;
+    gap: 20px;
+  }
+  .cli-stage {
+    height: 528px;
+    padding: 40px 16px 0;
+  }
+  .cli-controls {
+    gap: 8px;
+    padding: 16px 8px 20px;
+  }
+  .cli-tabs :deep([role='tab']) {
+    padding: 6px;
+    font-size: 11px;
+  }
+  .cli-playback {
+    position: static;
+    flex-shrink: 0;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/HomeFeatureVisual.vue b/docs/.vitepress/theme/HomeFeatureVisual.vue
new file mode 100644
index 000000000..1b5deb609
--- /dev/null
+++ b/docs/.vitepress/theme/HomeFeatureVisual.vue
@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import RiveAnimation from '@components/shared/RiveAnimation.vue';
+import frameworksAnimation from './assets/animations/640_x_320_vite_frameworks_diamond.riv';
+import connectorsAnimation from './assets/animations/640_x_320_void_connectors.riv';
+
+defineProps<{
+  kind: 'stack' | 'frameworks';
+}>();
+
+const descriptions = {
+  stack: 'Animated illustration of Void connectors.',
+  frameworks: 'Animated illustration of Void framework integrations.',
+};
+</script>
+
+<template>
+  <div
+    class="feature-visual"
+    :class="`feature-visual--${kind}`"
+    role="img"
+    :aria-label="descriptions[kind]"
+  >
+    <div v-if="kind === 'stack'" class="feature-animation">
+      <RiveAnimation
+        :desktop-src="connectorsAnimation"
+        :desktop-width="640"
+        :desktop-height="320"
+        canvas-class="w-full h-auto"
+      />
+    </div>
+
+    <div v-else-if="kind === 'frameworks'" class="feature-animation">
+      <RiveAnimation
+        :desktop-src="frameworksAnimation"
+        :desktop-width="640"
+        :desktop-height="320"
+        state-machines="State Machine 1"
+        canvas-class="w-full h-auto"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.feature-visual {
+  display: grid;
+  place-items: center;
+  width: 100%;
+  height: 17rem;
+  overflow: hidden;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 8px;
+}
+
+.feature-visual--stack,
+.feature-visual--frameworks {
+  border: 0;
+  background: transparent;
+}
+
+.feature-animation {
+  width: 100%;
+  max-width: 40rem;
+}
+
+@media (min-width: 768px) {
+  .feature-visual {
+    height: 20rem;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/HomeFeatures.vue b/docs/.vitepress/theme/HomeFeatures.vue
new file mode 100644
index 000000000..eea771c65
--- /dev/null
+++ b/docs/.vitepress/theme/HomeFeatures.vue
@@ -0,0 +1,60 @@
+<script setup>
+import { Icon } from '@iconify/vue';
+import { useData } from 'vitepress';
+import HomeFeatureVisual from './HomeFeatureVisual.vue';
+import HomeResourceCode from './HomeResourceCode.vue';
+
+const { frontmatter } = useData();
+</script>
+
+<template>
+  <div v-if="frontmatter.features">
+    <section
+      v-for="feature in frontmatter.features"
+      :key="feature.title"
+      class="wrapper border-t border-nickel grid md:grid-cols-2 md:divide-x divide-nickel"
+    >
+      <div class="px-5 py-6 md:p-10 flex flex-col justify-between gap-15">
+        <div class="flex flex-col gap-5">
+          <Icon
+            v-if="feature.iconify"
+            :icon="feature.iconify"
+            class="size-5 text-vite"
+            aria-hidden="true"
+          />
+          <h3 class="text-white text-xl md:text-3xl">{{ feature.title }}</h3>
+          <p class="max-w-[25rem] text-white/70 text-base text-pretty">
+            <code v-if="feature.command" class="mr-1 outline-none bg-nickel/50 text-vite">{{
+              feature.command
+            }}</code>
+            {{ feature.details }}
+          </p>
+          <ul v-if="feature.highlights" class="checkmark-list">
+            <li v-for="highlight in feature.highlights" :key="highlight">{{ highlight }}</li>
+          </ul>
+        </div>
+        <a
+          v-if="feature.guide"
+          :href="feature.guide.link"
+          class="px-3 py-1.5 bg-slate rounded w-fit inline-flex items-center gap-2 text-white text-sm font-mono hover:bg-nickel focus-visible:outline-2 focus-visible:outline-vite"
+        >
+          {{ feature.guide.text }}
+          <Icon icon="lucide:arrow-up-right" class="size-4" aria-hidden="true" />
+        </a>
+      </div>
+      <div
+        class="border-t border-nickel md:border-t-0 min-h-[22rem] sm:min-h-[30rem] min-w-0 flex items-center justify-center"
+        :class="feature.visual === 'resources' ? 'resources-background' : 'bg-primary p-5 sm:p-10'"
+      >
+        <HomeResourceCode v-if="feature.visual === 'resources'" />
+        <HomeFeatureVisual v-else-if="feature.visual" :kind="feature.visual" />
+      </div>
+    </section>
+  </div>
+</template>
+
+<style scoped>
+.resources-background {
+  background: var(--color-wine) url('./assets/backgrounds/viteplus.jpg') center / cover;
+}
+</style>
diff --git a/docs/.vitepress/theme/HomePlatform.vue b/docs/.vitepress/theme/HomePlatform.vue
new file mode 100644
index 000000000..cfc7918da
--- /dev/null
+++ b/docs/.vitepress/theme/HomePlatform.vue
@@ -0,0 +1,107 @@
+<script setup>
+import RiveAnimation from '@components/shared/RiveAnimation.vue';
+import { Icon } from '@iconify/vue';
+import { useData } from 'vitepress';
+import appsFieldAnimation from './assets/animations/640_x_320_apps_field_light.riv';
+import platformSecurityAnimation from './assets/animations/640_x_320_void_platform_light.riv';
+import HomePlatformResourceCode from './HomePlatformResourceCode.vue';
+
+const { frontmatter } = useData();
+const featureAnimations = {
+  'platform-ai-coding': appsFieldAnimation,
+  'platform-security': platformSecurityAnimation,
+};
+</script>
+
+<template>
+  <div class="platform-features" data-theme="light">
+    <section
+      v-for="feature in frontmatter.platform_features"
+      :key="feature.id"
+      :aria-labelledby="feature.id"
+      class="wrapper border-t border-stroke grid md:grid-cols-2 md:divide-x divide-stroke"
+    >
+      <div class="px-5 py-6 md:p-10 flex flex-col justify-between gap-15">
+        <div class="flex flex-col gap-5">
+          <Icon :icon="feature.iconify" class="size-5 text-electric" aria-hidden="true" />
+          <h3 :id="feature.id" class="text-primary text-xl md:text-3xl">{{ feature.title }}</h3>
+          <p class="max-w-[25rem] text-primary/70 text-base text-pretty">{{ feature.details }}</p>
+          <ul class="checkmark-list">
+            <li v-for="highlight in feature.highlights" :key="highlight">{{ highlight }}</li>
+          </ul>
+        </div>
+        <a
+          :href="feature.guide.link"
+          class="platform-feature-link px-3 py-1.5 rounded w-fit inline-flex items-center gap-2 text-primary text-sm font-mono focus-visible:outline-2 focus-visible:outline-electric"
+        >
+          {{ feature.guide.text }}
+          <Icon icon="lucide:arrow-up-right" class="size-4" aria-hidden="true" />
+        </a>
+      </div>
+      <div
+        class="border-t border-stroke md:border-t-0 min-h-[22rem] sm:min-h-[30rem] min-w-0 flex items-center justify-center"
+        :class="
+          feature.visual === 'resources' ? 'platform-resources-background' : 'bg-white p-5 sm:p-10'
+        "
+      >
+        <HomePlatformResourceCode v-if="feature.visual === 'resources'" />
+        <div
+          v-else-if="feature.visual === 'rive'"
+          class="platform-feature-animation"
+          role="img"
+          :aria-label="feature.image_alt"
+        >
+          <RiveAnimation
+            :desktop-src="featureAnimations[feature.id]"
+            :desktop-width="640"
+            :desktop-height="320"
+            canvas-class="w-full h-auto"
+          />
+        </div>
+        <img
+          v-else
+          :src="feature.image"
+          :alt="feature.image_alt"
+          width="640"
+          height="320"
+          loading="lazy"
+          class="w-full max-w-[40rem] h-auto"
+        />
+      </div>
+    </section>
+  </div>
+</template>
+
+<style scoped>
+.platform-features {
+  background: var(--color-white);
+  color: var(--color-primary);
+}
+
+.platform-feature-animation {
+  width: 100%;
+  max-width: 40rem;
+}
+
+.platform-resources-background {
+  background: var(--color-wine) url('./assets/backgrounds/viteplus.jpg') center / cover;
+  overflow: hidden;
+}
+
+.platform-features .checkmark-list li {
+  color: var(--color-primary);
+}
+
+.platform-features .checkmark-list li::before {
+  filter: invert(1);
+  mix-blend-mode: multiply;
+}
+
+.platform-feature-link {
+  background: #f2f1f4;
+}
+
+.platform-feature-link:hover {
+  background: var(--color-stroke);
+}
+</style>
diff --git a/docs/.vitepress/theme/HomePlatformResourceCode.vue b/docs/.vitepress/theme/HomePlatformResourceCode.vue
new file mode 100644
index 000000000..f2b7248b3
--- /dev/null
+++ b/docs/.vitepress/theme/HomePlatformResourceCode.vue
@@ -0,0 +1,170 @@
+<script setup lang="ts">
+const commandColumns = [
+  [
+    'auth',
+    'build',
+    'invitation',
+    'user',
+    'project',
+    'deployment',
+    'signup',
+    'system',
+    'email',
+    'worker',
+    'config auth',
+    'list',
+  ],
+  [
+    'use',
+    'status',
+    'discover',
+    'domain set',
+    'install',
+    'upgrade',
+    'rollback',
+    'repair',
+    'disable',
+    'enable',
+    'uninstall',
+  ],
+];
+</script>
+
+<template>
+  <div class="platform-command-stage">
+    <div class="platform-command-window" role="group" aria-label="Void platform commands">
+      <div class="platform-command-header">
+        <span class="platform-command-heading">void platform</span>
+      </div>
+      <div class="platform-command-columns">
+        <ul v-for="(column, index) in commandColumns" :key="index" class="platform-command-list">
+          <li v-for="command in column" :key="command">
+            <svg class="platform-command-check" viewBox="0 0 16 16" aria-hidden="true">
+              <rect width="16" height="16" rx="3" fill="currentColor" />
+              <path d="m4 8 2.5 2.5L12 5" fill="none" stroke="#111111" stroke-width="1.5" />
+            </svg>
+            <code>{{ command }}</code>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.platform-command-stage {
+  width: 100%;
+  height: 30rem;
+  min-width: 0;
+  padding: 128px 32px 0;
+}
+
+.platform-command-window {
+  width: 100%;
+  max-width: 30rem;
+  min-width: 0;
+  margin: 0 auto;
+  overflow: hidden;
+  border: 1px solid #ffffff40;
+  border-radius: 8px 8px 0 0;
+  background: #111111;
+  box-shadow: 0 16px 48px #14003340;
+  color: #e9e5f2;
+  font-family: var(--font-mono);
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 26px;
+  font-variant-ligatures: none;
+  -webkit-font-smoothing: antialiased;
+}
+
+.platform-command-header {
+  padding: 8px 10px;
+  border-bottom: 1px solid #ffffff1a;
+  background: #ffffff05;
+}
+
+.platform-command-heading {
+  display: block;
+  padding: 8px 12px;
+  color: #aaa4b6;
+  font: inherit;
+  font-size: 12px;
+  line-height: 18px;
+}
+
+.platform-command-columns {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 20px;
+  padding: 28px 24px 36px;
+}
+
+.platform-command-list {
+  display: grid;
+  align-content: start;
+  gap: 10px;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.platform-command-list li {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+  color: inherit;
+  font: inherit;
+  white-space: nowrap;
+}
+
+.platform-command-check {
+  flex: none;
+  width: 12px;
+  height: 12px;
+  color: #777280;
+}
+
+.platform-command-list code {
+  display: block;
+  min-width: 0;
+  overflow: hidden;
+  padding: 1px 6px;
+  border: 0;
+  border-radius: 4px;
+  outline: none;
+  background: #ffffff0d;
+  color: inherit;
+  font: inherit;
+  text-overflow: clip;
+}
+
+@media (max-width: 1100px) {
+  .platform-command-stage {
+    padding: 112px 20px 0;
+  }
+
+  .platform-command-window {
+    font-size: 11px;
+    line-height: 23px;
+  }
+
+  .platform-command-columns {
+    gap: 10px;
+    padding: 24px 18px 32px;
+  }
+
+  .platform-command-list li {
+    gap: 7px;
+  }
+}
+
+@media (max-width: 640px) {
+  .platform-command-stage {
+    height: 22rem;
+    padding-top: 96px;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/HomeResourceCode.vue b/docs/.vitepress/theme/HomeResourceCode.vue
new file mode 100644
index 000000000..7a27f2dcb
--- /dev/null
+++ b/docs/.vitepress/theme/HomeResourceCode.vue
@@ -0,0 +1,224 @@
+<script setup lang="ts">
+import { TabsContent, TabsList, TabsRoot, TabsTrigger } from 'reka-ui';
+
+// These fixed examples share their source text with the rendered, selectable code.
+const files = [
+  {
+    name: 'blog.server.ts',
+    source: `import { defineHandler, type InferProps } from 'void';
+import { db } from 'void/db';
+import { posts } from '@schema';
+
+export const loader = defineHandler(async () => ({
+  posts: await db.select().from(posts),
+}));
+
+export type Props = InferProps<typeof loader>;`,
+  },
+  {
+    name: 'blog.tsx',
+    source: `import type { Props } from './blog.server';
+
+export default function Blog({ posts }: Props) {
+  return (
+    <ul>
+      {posts.map((post) => <li key={post.id}>{post.title}</li>)}
+    </ul>
+  );
+}`,
+  },
+  {
+    name: 'api/decide.ts',
+    source: `import { defineHandler } from 'void';
+import { ai } from 'void/ai';
+
+export const POST = defineHandler(async (c) => {
+  const { question } = await c.req.json();
+  return ai
+    .run('@cf/cloudflare/clef', {
+      model: 'clef',
+      state: {},
+      questions: {
+        decision: { type: 'noul', instructions: question },
+      },
+    })
+    .match({
+      ok: (result) => {
+        const probability = result.answers.decision.noul;
+        return c.json({
+          answer: probability >= 0.5 ? 'yes' : 'no',
+          probability,
+        });
+      },
+      limited: (limit) => limit.response(),
+    });
+});`,
+  },
+].map((file) => ({ ...file, tokens: highlight(file.source) }));
+
+// A small display-only palette for these two snippets keeps a code highlighter
+// and its language grammars out of the homepage bundle.
+function highlight(source: string) {
+  const pattern =
+    /(?<comment>\/\/[^\n]*)|(?<string>'[^'\n]*')|(?<keyword>\b(?:import|from|type|typeof|export|const|async|await|default|function|return)\b)|(?<type>\b(?:Props|InferProps)\b)|(?<function>\b(?:defineHandler|select|map|Blog|run|match|json)\b)/g;
+  const tokens: Array<{ text: string; tone?: string }> = [];
+  let position = 0;
+  for (const match of source.matchAll(pattern)) {
+    tokens.push({ text: source.slice(position, match.index) });
+    tokens.push({
+      text: match[0],
+      tone: Object.keys(match.groups!).find((group) => match.groups![group] !== undefined),
+    });
+    position = match.index + match[0].length;
+  }
+  tokens.push({ text: source.slice(position) });
+  return tokens;
+}
+</script>
+
+<template>
+  <div class="resource-code-stage">
+    <TabsRoot default-value="blog.server.ts" class="resource-code-window">
+      <TabsList aria-label="Resource example files" class="resource-code-tabs">
+        <TabsTrigger v-for="file in files" :key="file.name" :value="file.name">
+          {{ file.name }}
+        </TabsTrigger>
+      </TabsList>
+      <TabsContent
+        v-for="file in files"
+        :key="file.name"
+        :value="file.name"
+        class="resource-code-panel"
+      >
+        <pre class="resource-code"><code><span
+          v-for="(token, index) in file.tokens"
+          :key="index"
+          :class="token.tone && `syntax-${token.tone}`"
+        >{{ token.text }}</span></code></pre>
+      </TabsContent>
+    </TabsRoot>
+  </div>
+</template>
+
+<style scoped>
+.resource-code-stage {
+  display: grid;
+  place-items: center;
+  width: 100%;
+  min-width: 0;
+  padding: 48px 32px;
+}
+
+.resource-code-window {
+  width: 100%;
+  min-width: 0;
+  overflow: hidden;
+  border: 1px solid #ffffff40;
+  border-radius: 8px;
+  background: #111111;
+  box-shadow: 0 16px 48px #14003340;
+  color: #e9e5f2;
+  font-family: var(--font-mono);
+}
+
+.resource-code-tabs {
+  display: flex;
+  gap: 4px;
+  padding: 8px 10px;
+  border-bottom: 1px solid #ffffff1a;
+  background: #ffffff05;
+}
+
+.resource-code-tabs :deep([role='tab']) {
+  padding: 8px 12px;
+  border-radius: 4px;
+  color: #aaa4b6;
+  font-size: 12px;
+  line-height: 18px;
+}
+
+.resource-code-tabs :deep([role='tab'][data-state='active']) {
+  background: #ffffff0d;
+  color: #ffffff;
+}
+
+.resource-code-tabs :deep([role='tab']:hover) {
+  color: #ffffff;
+}
+
+.resource-code-tabs :deep([role='tab']:focus-visible),
+.resource-code-panel:focus-visible {
+  outline: 2px solid #8c9fff;
+  outline-offset: -2px;
+}
+
+.resource-code-panel {
+  height: 18rem;
+  overflow: auto;
+  scrollbar-width: thin;
+  scrollbar-color: #51475f #111111;
+}
+
+.resource-code {
+  margin: 0;
+  padding: 28px 24px 36px;
+  font-family: inherit;
+  font-size: 13px;
+  line-height: 26px;
+  font-variant-ligatures: none;
+  tab-size: 2;
+  text-align: left;
+}
+
+.resource-code code {
+  padding: 0;
+  border-radius: 0;
+  outline: none;
+  background: none;
+  color: inherit;
+  font: inherit;
+}
+
+.syntax-keyword {
+  color: #b39aff;
+}
+
+.syntax-comment {
+  color: #777280;
+}
+
+.syntax-string {
+  color: #a8c98b;
+}
+
+.syntax-type {
+  color: #e8c480;
+}
+
+.syntax-function {
+  color: #8c9fff;
+}
+
+@media (max-width: 1100px) {
+  .resource-code-stage {
+    padding: 40px 20px;
+  }
+
+  .resource-code {
+    padding: 24px 18px 32px;
+    font-size: 11px;
+    line-height: 23px;
+  }
+}
+
+@media (max-width: 380px) {
+  .resource-code-stage {
+    padding: 32px 16px;
+  }
+
+  .resource-code-tabs :deep([role='tab']) {
+    padding: 8px;
+    font-size: 11px;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/assets/animations/640_x_320_apps_field_light.riv b/docs/.vitepress/theme/assets/animations/640_x_320_apps_field_light.riv
new file mode 100644
index 000000000..71d878074
Binary files /dev/null and b/docs/.vitepress/theme/assets/animations/640_x_320_apps_field_light.riv differ
diff --git a/docs/.vitepress/theme/assets/animations/640_x_320_vite_frameworks_diamond.riv b/docs/.vitepress/theme/assets/animations/640_x_320_vite_frameworks_diamond.riv
new file mode 100644
index 000000000..9e1b73740
Binary files /dev/null and b/docs/.vitepress/theme/assets/animations/640_x_320_vite_frameworks_diamond.riv differ
diff --git a/docs/.vitepress/theme/assets/animations/640_x_320_void_connectors.riv b/docs/.vitepress/theme/assets/animations/640_x_320_void_connectors.riv
new file mode 100644
index 000000000..6a08eba3c
Binary files /dev/null and b/docs/.vitepress/theme/assets/animations/640_x_320_void_connectors.riv differ
diff --git a/docs/.vitepress/theme/assets/animations/640_x_320_void_platform_light.riv b/docs/.vitepress/theme/assets/animations/640_x_320_void_platform_light.riv
new file mode 100644
index 000000000..22a507017
Binary files /dev/null and b/docs/.vitepress/theme/assets/animations/640_x_320_void_platform_light.riv differ
diff --git a/docs/.vitepress/theme/assets/animations/640_x_630_vite_to_void_box_vertical_v3.riv b/docs/.vitepress/theme/assets/animations/640_x_630_vite_to_void_box_vertical_v3.riv
new file mode 100644
index 000000000..f0fec5715
Binary files /dev/null and b/docs/.vitepress/theme/assets/animations/640_x_630_vite_to_void_box_vertical_v3.riv differ
diff --git a/docs/.vitepress/theme/assets/backgrounds/viteplus.jpg b/docs/.vitepress/theme/assets/backgrounds/viteplus.jpg
new file mode 100644
index 000000000..867210ce3
Binary files /dev/null and b/docs/.vitepress/theme/assets/backgrounds/viteplus.jpg differ
diff --git a/docs/.vitepress/theme/assets/security/README.md b/docs/.vitepress/theme/assets/security/README.md
new file mode 100644
index 000000000..29bd076f9
--- /dev/null
+++ b/docs/.vitepress/theme/assets/security/README.md
@@ -0,0 +1,8 @@
+# Security integration logos
+
+- `cloudflare.svg`: the monochrome Cloudflare wordmark used by the Vite+ site (`docs/.vitepress/theme/assets/platforms/cloudflare.svg` in the Vite+ repository).
+- `google.svg`: [Iconify Logos — Google](https://api.iconify.design/logos/google.svg).
+- `github.svg`: [Iconify Logos — GitHub](https://api.iconify.design/logos/github.svg).
+- `openid.svg`: [Simple Icons — OpenID](https://api.iconify.design/simple-icons/openid.svg), paired with the OIDC label.
+
+The homepage displays these assets in monochrome to match the Vite+ logo strip.
diff --git a/docs/.vitepress/theme/assets/security/cloudflare.svg b/docs/.vitepress/theme/assets/security/cloudflare.svg
new file mode 100644
index 000000000..f9b00e9d5
--- /dev/null
+++ b/docs/.vitepress/theme/assets/security/cloudflare.svg
@@ -0,0 +1,5 @@
+<svg width="83" height="28" viewBox="0 0 83 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M68.5508 16.9196C68.6801 16.5789 68.7257 16.2123 68.6837 15.8505C68.6418 15.4887 68.5135 15.1421 68.3097 14.8396C68.1002 14.5897 67.8434 14.3834 67.5537 14.2324C67.2641 14.0814 66.9474 13.9887 66.6218 13.9596L52.6365 13.7996C52.5562 13.7996 52.4758 13.7196 52.3954 13.7196C52.3767 13.7056 52.3615 13.6875 52.351 13.6667C52.3406 13.6459 52.3351 13.6229 52.3351 13.5996C52.3351 13.5763 52.3406 13.5534 52.351 13.5325C52.3615 13.5117 52.3767 13.4936 52.3954 13.4796C52.4758 13.3196 52.5562 13.2396 52.7169 13.2396L66.7825 13.0796C67.6755 12.981 68.5259 12.6474 69.2464 12.1131C69.9668 11.5788 70.5313 10.8631 70.8817 10.0396L71.6854 7.95962C71.6854 7.87962 71.7658 7.79962 71.6854 7.71962C71.2484 5.78236 70.188 4.04002 68.6654 2.75738C67.1427 1.47474 65.2409 0.721902 63.2491 0.613271C61.2573 0.50464 59.2843 1.04615 57.63 2.15552C55.9756 3.26489 54.7303 4.88148 54.0833 6.75962C53.2433 6.16253 52.2188 5.87926 51.1898 5.95962C50.2454 6.06443 49.365 6.48583 48.6931 7.15458C48.0212 7.82334 47.5978 8.69968 47.4925 9.63962C47.439 10.1207 47.4662 10.6074 47.5729 11.0796C46.0449 11.1217 44.5937 11.7554 43.528 12.8461C42.4622 13.9367 41.8661 15.3982 41.8663 16.9196C41.8531 17.2152 41.8801 17.5112 41.9467 17.7996C41.9503 17.8621 41.9769 17.921 42.0214 17.9652C42.0658 18.0095 42.125 18.0359 42.1878 18.0396H67.9882C68.1489 18.0396 68.3097 17.9596 68.3097 17.7996L68.5508 16.9196Z" fill="black"/>
+<path d="M72.9712 7.95898H72.5693C72.489 7.95898 72.4086 8.03898 72.3282 8.11898L71.7656 10.039C71.6363 10.3797 71.5907 10.7463 71.6326 11.1081C71.6746 11.4699 71.8028 11.8165 72.0067 12.119C72.2161 12.3689 72.473 12.5753 72.7626 12.7263C73.0522 12.8773 73.3689 12.9699 73.6946 12.999L76.6685 13.159C76.7488 13.159 76.8292 13.239 76.9096 13.239C76.9283 13.253 76.9435 13.2711 76.954 13.2919C76.9644 13.3127 76.9699 13.3357 76.9699 13.359C76.9699 13.3823 76.9644 13.4052 76.954 13.4261C76.9435 13.4469 76.9283 13.465 76.9096 13.479C76.8292 13.639 76.7488 13.719 76.5881 13.719L73.5338 13.879C72.6409 13.9776 71.7904 14.3112 71.07 14.8455C70.3495 15.3798 69.7851 16.0955 69.4347 16.919L69.274 17.639C69.1936 17.719 69.274 17.879 69.4347 17.879H80.0442C80.077 17.8836 80.1104 17.8806 80.1418 17.8702C80.1731 17.8598 80.2017 17.8423 80.2251 17.819C80.2485 17.7957 80.2661 17.7673 80.2765 17.7361C80.287 17.7048 80.29 17.6716 80.2853 17.639C80.4767 16.9612 80.5846 16.2627 80.6068 15.559C80.5941 13.5473 79.7855 11.6215 78.3563 10.199C76.9271 8.77645 74.9924 7.97166 72.9712 7.95898Z" fill="black"/>
+<path d="M81.6517 22.3596C81.5086 22.3596 81.3688 22.3173 81.2498 22.2382C81.1308 22.1591 81.0381 22.0467 80.9834 21.9151C80.9286 21.7835 80.9143 21.6388 80.9422 21.4991C80.9701 21.3594 81.039 21.2311 81.1402 21.1305C81.2413 21.0298 81.3702 20.9612 81.5106 20.9334C81.6509 20.9056 81.7963 20.9199 81.9285 20.9744C82.0607 21.0289 82.1737 21.1212 82.2531 21.2396C82.3326 21.358 82.3751 21.4972 82.3751 21.6396C82.3755 21.7342 82.357 21.828 82.3208 21.9156C82.2846 22.0031 82.2313 22.0826 82.1641 22.1496C82.0968 22.2165 82.0169 22.2695 81.929 22.3056C81.841 22.3416 81.7468 22.36 81.6517 22.3596ZM81.6517 21.0796C81.5404 21.0796 81.4316 21.1124 81.3391 21.1739C81.2466 21.2355 81.1745 21.3229 81.1319 21.4253C81.0893 21.5276 81.0782 21.6402 81.0999 21.7488C81.1216 21.8575 81.1752 21.9572 81.2538 22.0355C81.3325 22.1139 81.4328 22.1672 81.5419 22.1888C81.6511 22.2104 81.7642 22.1993 81.867 22.1569C81.9698 22.1146 82.0577 22.0428 82.1195 21.9507C82.1813 21.8586 82.2143 21.7503 82.2143 21.6396C82.2161 21.5655 82.2028 21.4919 82.1752 21.4231C82.1475 21.3544 82.1062 21.2919 82.0536 21.2396C82.0009 21.1872 81.9382 21.146 81.8691 21.1185C81.8 21.091 81.7261 21.0778 81.6517 21.0796ZM81.9732 22.0396H81.8124L81.6517 21.7996H81.4909V22.0396H81.3302V21.3196H81.732C81.7648 21.3149 81.7982 21.3179 81.8296 21.3283C81.861 21.3387 81.8895 21.3563 81.9129 21.3796C81.9363 21.4029 81.9539 21.4312 81.9644 21.4625C81.9748 21.4937 81.9779 21.527 81.9732 21.5596C81.9732 21.6396 81.8928 21.7196 81.8124 21.7996L81.9732 22.0396ZM81.732 21.6396C81.8124 21.6396 81.8124 21.6396 81.8124 21.5596C81.8127 21.549 81.8107 21.5385 81.8068 21.5287C81.8028 21.5189 81.7969 21.51 81.7894 21.5025C81.7819 21.495 81.7729 21.4891 81.7631 21.4852C81.7532 21.4813 81.7427 21.4793 81.732 21.4796H81.4909V21.7196H81.732V21.6396ZM9.63568 20.9196H11.4039V25.7196H14.4582V27.2396H9.63568V20.9196ZM16.3068 24.0396C16.3068 23.5952 16.3975 23.1554 16.5732 22.747C16.749 22.3385 17.0062 21.9697 17.3293 21.6631C17.6525 21.3564 18.0348 21.1182 18.4531 20.9629C18.8714 20.8076 19.317 20.7385 19.7629 20.7596C20.2047 20.7398 20.6459 20.8104 21.0591 20.9672C21.4724 21.124 21.8489 21.3635 22.1653 21.671C22.4818 21.9785 22.7315 22.3474 22.8989 22.7548C23.0663 23.1622 23.1479 23.5995 23.1387 24.0396C23.1387 24.4839 23.048 24.9237 22.8722 25.3322C22.6965 25.7407 22.4393 26.1094 22.1161 26.4161C21.793 26.7227 21.4107 26.9609 20.9924 27.1162C20.5741 27.2715 20.1285 27.3407 19.6826 27.3196C19.2425 27.3326 18.8043 27.2572 18.3941 27.098C17.9839 26.9388 17.6101 26.699 17.2951 26.3929C16.98 26.0868 16.7302 25.7206 16.5604 25.3163C16.3906 24.912 16.3043 24.4778 16.3068 24.0396ZM21.3704 24.0396C21.3862 23.8178 21.3566 23.5951 21.2834 23.3851C21.2103 23.175 21.0951 22.9819 20.9449 22.8174C20.7946 22.6529 20.6124 22.5204 20.4093 22.4279C20.2061 22.3355 19.9862 22.285 19.7629 22.2796C19.3295 22.3006 18.9209 22.4868 18.6216 22.7996C18.3223 23.1123 18.1554 23.5277 18.1554 23.9596C18.1554 24.3915 18.3223 24.8068 18.6216 25.1196C18.9209 25.4323 19.3295 25.6185 19.7629 25.6396C20.7274 25.7996 21.3704 24.9996 21.3704 24.0396ZM25.3088 24.4396V20.9196H27.0771V24.4396C27.0771 25.3196 27.5593 25.7996 28.2827 25.7996C28.4516 25.8135 28.6216 25.7893 28.7798 25.7287C28.938 25.6681 29.0804 25.5727 29.1963 25.4496C29.3123 25.3265 29.3988 25.1789 29.4493 25.0179C29.4999 24.8568 29.5132 24.6865 29.4883 24.5196V20.9196H31.2566V24.4396C31.2566 26.5196 30.0509 27.3996 28.2827 27.3996C26.4341 27.3196 25.3088 26.4396 25.3088 24.4396ZM33.9089 20.9196H36.4006C38.6511 20.9196 40.0174 22.1996 40.0174 24.0396C40.0174 25.8796 38.6511 27.2396 36.4006 27.2396H33.9893V20.9196H33.9089ZM36.4006 25.6396C36.6245 25.6608 36.8505 25.6353 37.064 25.5646C37.2775 25.4938 37.4737 25.3795 37.6402 25.2289C37.8067 25.0782 37.9397 24.8946 38.0308 24.6898C38.1218 24.485 38.1688 24.2635 38.1688 24.0396C38.1688 23.8156 38.1218 23.5941 38.0308 23.3893C37.9397 23.1845 37.8067 23.0009 37.6402 22.8503C37.4737 22.6996 37.2775 22.5853 37.064 22.5146C36.8505 22.4438 36.6245 22.4183 36.4006 22.4396H35.6772V25.6396H36.4006ZM42.5091 20.9196H47.5727V22.4396H44.2773V23.4796H47.2512V24.9196H44.2773V27.2396H42.5091V20.9196ZM50.0643 20.9196H51.8326V25.7196H54.8868V27.2396H50.0643V20.9196ZM59.4682 20.8396H61.2364L63.9692 27.2396H62.0402L61.5579 26.1196H59.0663L58.5841 27.2396H56.7354L59.4682 20.8396ZM61.0757 24.7596L60.3523 22.9996L59.6289 24.7596H61.0757ZM66.2197 20.9196H69.1936C69.573 20.8889 69.9547 20.9371 70.3144 21.0611C70.6742 21.185 71.0041 21.382 71.2833 21.6396C71.5136 21.8867 71.6807 22.1854 71.7705 22.5104C71.8603 22.8354 71.8701 23.1772 71.7992 23.5067C71.7282 23.8363 71.5785 24.1441 71.3628 24.4039C71.1471 24.6637 70.8717 24.8681 70.5599 24.9996L72.0871 27.2396H70.0777L68.7917 25.3196H67.9879V27.2396H66.2197V20.9196ZM69.1132 23.9596C69.6758 23.9596 70.0777 23.6396 70.0777 23.2396C70.0777 22.7596 69.6758 22.5196 69.1132 22.5196H67.9879V24.0396H69.1132V23.9596ZM74.3376 20.9196H79.4816V22.3596H76.1058V23.3196H79.1601V24.7596H76.1058V25.7196H79.5619V27.2396H74.3376V20.9196ZM5.77768 24.8396C5.65646 25.1223 5.45503 25.3637 5.19807 25.5342C4.9411 25.7047 4.63976 25.7969 4.33093 25.7996C3.89753 25.7785 3.48886 25.5923 3.18961 25.2796C2.89035 24.9668 2.72343 24.5515 2.72343 24.1196C2.72343 23.6877 2.89035 23.2723 3.18961 22.9596C3.48886 22.6468 3.89753 22.4606 4.33093 22.4396C4.65963 22.4459 4.97931 22.5476 5.25064 22.7324C5.52197 22.9172 5.7331 23.1769 5.85806 23.4796H7.70668C7.54854 22.7132 7.12263 22.0275 6.50459 21.5442C5.88656 21.0608 5.1164 20.8112 4.33093 20.8396C3.88664 20.8252 3.44391 20.899 3.0286 21.0568C2.61328 21.2145 2.23368 21.453 1.91196 21.7583C1.59024 22.0637 1.33283 22.4297 1.15476 22.8351C0.976689 23.2405 0.881521 23.6772 0.874808 24.1196C0.872334 24.5578 0.958565 24.992 1.12836 25.3963C1.29815 25.8006 1.54802 26.1668 1.86307 26.4729C2.17812 26.779 2.55189 27.0188 2.96208 27.178C3.37227 27.3372 3.81048 27.4126 4.25056 27.3996C5.01851 27.4047 5.76649 27.1562 6.37736 26.693C6.98822 26.2297 7.42747 25.5779 7.62631 24.8396H5.77768Z" fill="black"/>
+</svg>
diff --git a/docs/.vitepress/theme/assets/security/github.svg b/docs/.vitepress/theme/assets/security/github.svg
new file mode 100644
index 000000000..0cc9abc2e
--- /dev/null
+++ b/docs/.vitepress/theme/assets/security/github.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="3.69em" height="1em" viewBox="0 0 512 139"><path fill="#11110f" d="M98.696 59.312h-43.06a2.015 2.015 0 0 0-2.013 2.014v21.053c0 1.111.902 2.015 2.012 2.015h16.799v26.157s-3.772 1.286-14.2 1.286c-12.303 0-29.49-4.496-29.49-42.288c0-37.8 17.897-42.773 34.698-42.773c14.543 0 20.809 2.56 24.795 3.794c1.253.384 2.412-.863 2.412-1.975l4.803-20.342c0-.52-.176-1.146-.769-1.571C93.064 5.527 83.187 0 58.233 0C29.488 0 0 12.23 0 71.023c0 58.795 33.76 67.556 62.21 67.556c23.555 0 37.844-10.066 37.844-10.066c.59-.325.653-1.148.653-1.526V61.326c0-1.11-.9-2.014-2.01-2.014m221.8-51.953c0-1.12-.888-2.024-1.999-2.024h-24.246a2.016 2.016 0 0 0-2.008 2.024l.006 46.856h-37.792V7.36c0-1.12-.892-2.024-2.001-2.024H228.21a2.014 2.014 0 0 0-2.003 2.024v126.872c0 1.12.9 2.03 2.003 2.03h24.245c1.109 0 2-.91 2-2.03V79.964h37.793l-.066 54.267c0 1.12.9 2.03 2.008 2.03h24.304c1.11 0 1.998-.91 2-2.03zM144.37 24.322c0-8.73-7-15.786-15.635-15.786c-8.627 0-15.632 7.055-15.632 15.786c0 8.72 7.005 15.795 15.632 15.795c8.635 0 15.635-7.075 15.635-15.795m-1.924 83.212V48.97a2.015 2.015 0 0 0-2.006-2.021h-24.169c-1.109 0-2.1 1.144-2.1 2.256v83.905c0 2.466 1.536 3.199 3.525 3.199h21.775c2.39 0 2.975-1.173 2.975-3.239zM413.162 46.95h-24.06c-1.104 0-2.002.909-2.002 2.028v62.21s-6.112 4.472-14.788 4.472s-10.977-3.937-10.977-12.431v-54.25c0-1.12-.897-2.03-2.001-2.03h-24.419c-1.102 0-2.005.91-2.005 2.03v58.358c0 25.23 14.063 31.403 33.408 31.403c15.87 0 28.665-8.767 28.665-8.767s.61 4.62.885 5.168c.276.547.994 1.098 1.77 1.098l15.535-.068c1.102 0 2.005-.911 2.005-2.025l-.008-85.168a2.02 2.02 0 0 0-2.008-2.028m55.435 68.758c-8.345-.254-14.006-4.041-14.006-4.041V71.488s5.585-3.423 12.436-4.035c8.664-.776 17.013 1.841 17.013 22.51c0 21.795-3.768 26.096-15.443 25.744m9.49-71.483c-13.665 0-22.96 6.097-22.96 6.097V7.359a2.01 2.01 0 0 0-2-2.024h-24.315a2.013 2.013 0 0 0-2.004 2.024v126.872c0 1.12.898 2.03 2.007 2.03h16.87c.76 0 1.335-.39 1.76-1.077c.419-.682 1.024-5.85 1.024-5.85s9.942 9.422 28.763 9.422c22.096 0 34.768-11.208 34.768-50.315s-20.238-44.217-33.913-44.217M212.229 46.73h-18.187l-.028-24.027c0-.909-.468-1.364-1.52-1.364H167.71c-.964 0-1.481.424-1.481 1.35v24.83s-12.42 2.998-13.26 3.24a2.01 2.01 0 0 0-1.452 1.934v15.603c0 1.122.896 2.027 2.005 2.027h12.707v37.536c0 27.88 19.556 30.619 32.753 30.619c6.03 0 13.243-1.937 14.434-2.376c.72-.265 1.138-1.01 1.138-1.82l.02-17.164c0-1.119-.945-2.025-2.01-2.025c-1.06 0-3.77.431-6.562.431c-8.933 0-11.96-4.154-11.96-9.53l-.001-35.67h18.188a2.014 2.014 0 0 0 2.006-2.028V48.753c0-1.12-.897-2.022-2.006-2.022"/></svg>
\ No newline at end of file
diff --git a/docs/.vitepress/theme/assets/security/google.svg b/docs/.vitepress/theme/assets/security/google.svg
new file mode 100644
index 000000000..1af5dd11d
--- /dev/null
+++ b/docs/.vitepress/theme/assets/security/google.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="3.05em" height="1em" viewBox="0 0 512 168"><path fill="#ff302f" d="m496.052 102.672l14.204 9.469c-4.61 6.79-15.636 18.44-34.699 18.44c-23.672 0-41.301-18.315-41.301-41.614c0-24.793 17.816-41.613 39.308-41.613c21.616 0 32.206 17.193 35.633 26.475l1.869 4.735l-55.692 23.049c4.236 8.348 10.84 12.584 20.183 12.584c9.345 0 15.823-4.61 20.495-11.525M452.384 87.66l37.19-15.45c-2.056-5.17-8.16-8.845-15.45-8.845c-9.281 0-22.176 8.223-21.74 24.295"/><path fill="#20b15a" d="M407.407 4.931h17.94v121.85h-17.94z"/><path fill="#3686f7" d="M379.125 50.593h17.318V124.6c0 30.711-18.128 43.357-39.558 43.357c-20.183 0-32.33-13.58-36.878-24.606l15.885-6.604c2.865 6.79 9.78 14.827 20.993 14.827c13.767 0 22.24-8.535 22.24-24.482v-5.98h-.623c-4.112 4.983-11.961 9.468-21.928 9.468c-20.807 0-39.87-18.128-39.87-41.488c0-23.486 19.063-41.8 39.87-41.8c9.905 0 17.816 4.423 21.928 9.282h.623zm1.245 38.499c0-14.702-9.78-25.417-22.239-25.417c-12.584 0-23.174 10.715-23.174 25.417c0 14.514 10.59 25.042 23.174 25.042c12.46.063 22.24-10.528 22.24-25.042"/><path fill="#ff302f" d="M218.216 88.78c0 23.984-18.688 41.613-41.613 41.613c-22.924 0-41.613-17.691-41.613-41.613c0-24.108 18.689-41.675 41.613-41.675c22.925 0 41.613 17.567 41.613 41.675m-18.19 0c0-14.95-10.84-25.23-23.423-25.23S153.18 73.83 153.18 88.78c0 14.826 10.84 25.23 23.423 25.23c12.584 0 23.423-10.404 23.423-25.23"/><path fill="#ffba40" d="M309.105 88.967c0 23.984-18.689 41.613-41.613 41.613c-22.925 0-41.613-17.63-41.613-41.613c0-24.108 18.688-41.613 41.613-41.613c22.924 0 41.613 17.443 41.613 41.613m-18.253 0c0-14.95-10.839-25.23-23.423-25.23s-23.423 10.28-23.423 25.23c0 14.826 10.84 25.23 23.423 25.23c12.646 0 23.423-10.466 23.423-25.23"/><path fill="#3686f7" d="M66.59 112.328c-26.102 0-46.534-21.056-46.534-47.158c0-26.101 20.432-47.157 46.534-47.157c14.079 0 24.357 5.544 31.957 12.646l12.522-12.521C100.479 7.984 86.338.258 66.59.258C30.833.259.744 29.414.744 65.17s30.089 64.912 65.846 64.912c19.312 0 33.889-6.354 45.289-18.19c11.711-11.712 15.324-28.158 15.324-41.489c0-4.174-.498-8.472-1.059-11.649H66.59v17.318h42.423c-1.246 10.84-4.672 18.253-9.718 23.298c-6.105 6.168-15.76 12.958-32.705 12.958"/></svg>
\ No newline at end of file
diff --git a/docs/.vitepress/theme/assets/security/openid.svg b/docs/.vitepress/theme/assets/security/openid.svg
new file mode 100644
index 000000000..45409c264
--- /dev/null
+++ b/docs/.vitepress/theme/assets/security/openid.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="m14.54.889l-3.63 1.773v18.17c-4.15-.52-7.27-2.78-7.27-5.5c0-2.58 2.8-4.75 6.63-5.41v-2.31C4.42 8.322 0 11.502 0 15.332c0 3.96 4.74 7.24 10.91 7.78l3.63-1.71zm.64 6.724v2.31c1.43.25 2.71.7 3.76 1.31l-1.97 1.11l7.03 1.53l-.5-5.21l-1.87 1.06c-1.74-1.06-3.96-1.81-6.45-2.11"/></svg>
\ No newline at end of file
diff --git a/docs/.vitepress/theme/terminal/README.md b/docs/.vitepress/theme/terminal/README.md
new file mode 100644
index 000000000..436c4c92c
--- /dev/null
+++ b/docs/.vitepress/theme/terminal/README.md
@@ -0,0 +1,9 @@
+# Shared terminal demos
+
+`HomeCli.vue` and the local [capture studio](../../../../test/terminal-demos/README.md) use this player, timeline, and transcript data. The three workflows originate in commit `7eea677271f5bbabd5123112bbfeb74640d9fd4f`, with subsequent transcript corrections retained.
+
+`TerminalPlayer.vue` defaults to studio chrome. The homepage uses `appearance="home"` with the theme's Vite+ background and command tabs. It provides pause/replay, stops automatic tab changes after a visitor selects a command, and supplies a static transcript for assistive technology. Reduced motion shows the final frame until playback is explicitly requested.
+
+Update transcript wording in `demos.ts` for both surfaces together. Keep the sample values, prepared setup, and condensed timings described in the capture studio README; these examples do not execute CLI commands.
+
+Run `node --test test/terminal-demos/timeline.test.ts`, `vp run build:docs`, and `vp build --config test/terminal-demos/vite.config.ts`. Check all three flows in the browser, including keyboard selection, pause/replay, narrow screens, and reduced motion.
diff --git a/test/terminal-demos/TerminalPlayer.vue b/docs/.vitepress/theme/terminal/TerminalPlayer.vue
similarity index 89%
rename from test/terminal-demos/TerminalPlayer.vue
rename to docs/.vitepress/theme/terminal/TerminalPlayer.vue
index c2250f539..042ea63e8 100644
--- a/test/terminal-demos/TerminalPlayer.vue
+++ b/docs/.vitepress/theme/terminal/TerminalPlayer.vue
@@ -8,8 +8,9 @@ const props = withDefaults(
     speed?: number;
     autoplay?: boolean;
     reducedMotion?: boolean;
+    appearance?: 'studio' | 'home';
   }>(),
-  { speed: 1, autoplay: true, reducedMotion: false },
+  { speed: 1, autoplay: true, reducedMotion: false, appearance: 'studio' },
 );
 const emit = defineEmits<{
   progress: [state: { time: number; playing: boolean; countdown: number }];
@@ -206,8 +207,13 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <div ref="terminal" class="void-terminal" :data-demo="demo.id">
-    <div class="void-terminal-bar" aria-hidden="true">
+  <div
+    ref="terminal"
+    class="void-terminal"
+    :class="{ 'void-terminal--home': appearance === 'home' }"
+    :data-demo="demo.id"
+  >
+    <div v-if="appearance === 'studio'" class="void-terminal-bar" aria-hidden="true">
       <span class="void-terminal-dots"><i /><i /><i /></span>
       <span class="void-terminal-directory">{{ demo.directory }}</span>
       <span class="void-terminal-wordmark">void</span>
@@ -408,4 +414,42 @@ onBeforeUnmount(() => {
     height: 460px;
   }
 }
+
+.void-terminal--home {
+  --terminal-base: #ffffff;
+  --terminal-muted: #aaa6b2;
+  --terminal-green: #22ff73;
+  height: 100%;
+  border: 0;
+  border-radius: 0;
+  background: #111111;
+  box-shadow: none;
+  font-family: var(--font-mono);
+}
+.void-terminal--home .void-terminal-viewport {
+  height: 100%;
+  overflow: hidden;
+  overscroll-behavior: auto;
+}
+.void-terminal--home .void-terminal-output {
+  padding: 24px 32px;
+}
+.void-terminal--home .void-terminal-line {
+  font-size: 14px;
+  line-height: 22px;
+  min-height: 22px;
+}
+.void-terminal--home .void-terminal-box-top .void-terminal-content {
+  background: #111111;
+}
+@media (max-width: 640px) {
+  .void-terminal--home .void-terminal-output {
+    padding: 20px 16px;
+  }
+  .void-terminal--home .void-terminal-line {
+    font-size: 11px;
+    line-height: 19px;
+    min-height: 19px;
+  }
+}
 </style>
diff --git a/test/terminal-demos/demos.ts b/docs/.vitepress/theme/terminal/demos.ts
similarity index 100%
rename from test/terminal-demos/demos.ts
rename to docs/.vitepress/theme/terminal/demos.ts
diff --git a/test/terminal-demos/timeline.ts b/docs/.vitepress/theme/terminal/timeline.ts
similarity index 100%
rename from test/terminal-demos/timeline.ts
rename to docs/.vitepress/theme/terminal/timeline.ts
diff --git a/docs/.vitepress/theme/void-thumb.jpg b/docs/.vitepress/theme/void-thumb.jpg
deleted file mode 100644
index 327b6c0a3..000000000
Binary files a/docs/.vitepress/theme/void-thumb.jpg and /dev/null differ
diff --git a/docs/index.md b/docs/index.md
index f544b8256..da713065f 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -4,36 +4,89 @@ theme: dark
 
 hero:
   name: Void
-  text: Full-stack apps with Vite
-  tagline: Add server routes, data, and Cloudflare resources to your app. Deploy with one command.
+  text: Build with Vite. Deploy with Void.
+  tagline: Void is a CLI, platform, and full-stack SDK that unifies building & deploying apps
   actions:
     - theme: brand
       text: Get Started
       link: ./guide/
-  image:
-    src: /hero.svg
-    alt: Void deployment platform
-
+    - theme: alt
+      text: View on Github
+      link: https://github.com/voidzero-dev/void
 features:
-  - iconify: lucide:terminal
-    title: Deploy with One Command
-    details: '`void deploy` builds your app, provisions resources, applies migrations, and deploys it.'
   - iconify: lucide:layers
+    visual: stack
     title: Full-Stack Features
-    details: Use a database, KV, object storage, AI, authentication, queues, and cron jobs as your app needs them.
+    details: Add full-stack features to your app as you need them without having to wire it all together yourself.
+    highlights:
+      - Server routes, edge routing and pages
+      - Authentication
+      - AI, queues, and scheduled jobs
+    guide:
+      text: Explore app types
+      link: /guide/app-types
   - iconify: lucide:wand-sparkles
+    visual: resources
     title: Resources from Your Code
     details: Void detects supported resources from your imports and provisions them on deploy. Configure existing resources explicitly.
-  - iconify: lucide:shield-check
-    title: Deploy with Confidence
-    details: Run on Cloudflare Workers with checked migrations, versioned deployments, logs, and rollback.
+    highlights:
+      - Database, KV, and storage inferred from imports
+      - Local resources for development
+      - Types shared between server loaders and pages
+    guide:
+      text: Resource inference guide
+      link: /reference/resource-inference
   - iconify: lucide:blocks
+    visual: frameworks
     title: Choose Your Framework
-    details: Use React, Vue, Svelte, Solid, or a supported Vite framework with SSR, SSG, ISR, and islands.
-  - iconify: lucide:bot
-    title: Work with Coding Agents
-    details: Void provides project instructions and skills to help coding agents build and deploy your app.
-
+    details: 'Scale your apps based on what you need: API-only, SPA + API, or full-stack.'
+    highlights:
+      - Native pages with React, Vue, Svelte, or Solid
+      - Supports TanStack Start, React Router, SvelteKit, Nuxt, Analog, and Astro v6+
+      - Rendering options including SSR, SSG, ISR, and islands
+    guide:
+      text: Framework integrations
+      link: /integrations/frameworks/overview
+platform_features:
+  - id: platform-ai-coding
+    iconify: lucide:bot
+    title: Secure Vibe Coding for Your Team
+    details: Let your team build and deploy with coding agents while admins retain control of Cloudflare access.
+    highlights:
+      - Keep Cloudflare credentials with your admin team
+      - Enable non-technical teammates to build their own apps
+      - Deploy prototypes fast and share apps for feedback
+    guide:
+      text: Explore team deployments
+      link: /guide/self-hosted-platform
+    visual: rive
+    image_alt: Animated illustration of apps being built for a team
+  - id: platform-control-plane
+    iconify: lucide:panels-top-left
+    visual: resources
+    title: Control Plane for Managing Apps
+    details: Manage users, projects, deployments, and platform health from the admin UI or CLI.
+    highlights:
+      - Manage users and project access & resources
+      - Inspect deployments, logs, and rollbacks
+      - Monitor platform health and usage
+    guide:
+      text: Platform administration
+      link: /guide/platform-administration
+    image_alt: List of Void platform commands for access, builds, invitations, and administration
+  - id: platform-security
+    iconify: lucide:shield-check
+    title: Bring your Own Security
+    details: Fork and customize your own Void platform based on your team's security standards.
+    highlights:
+      - Manage access through Cloudflare Access, Google, GitHub, or OIDC
+      - Control who can sign in and deploy
+      - Protect projects with your access policies
+    guide:
+      text: Configure platform access
+      link: /guide/platform/administration/access
+    visual: rive
+    image_alt: Animated illustration of self-hosted platform security
 footer_heading: Build with Vite. Deploy with Void.
 footer_subheading: Server code, resources, and deployment in one workflow.
 ---
diff --git a/docs/public/platform-feature-placeholder.svg b/docs/public/platform-feature-placeholder.svg
new file mode 100644
index 000000000..1289600bb
--- /dev/null
+++ b/docs/public/platform-feature-placeholder.svg
@@ -0,0 +1,9 @@
+<svg width="640" height="320" viewBox="0 0 640 320" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect x="0.5" y="0.5" width="639" height="319" rx="8" fill="#F8F8FA" stroke="#E5E4E7"/>
+  <g stroke="#AAA5B2" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+    <rect x="296" y="118" width="48" height="40" rx="4"/>
+    <circle cx="309" cy="130" r="4"/>
+    <path d="M297 151L311 139L320 146L330 133L343 148"/>
+  </g>
+  <text x="320" y="194" text-anchor="middle" font-family="ui-monospace, SFMono-Regular, Menlo, Consolas, monospace" font-size="13" fill="#867E8E">Image placeholder</text>
+</svg>
diff --git a/docs/public/void-cli.svg b/docs/public/void-cli.svg
new file mode 100644
index 000000000..3c493bf25
--- /dev/null
+++ b/docs/public/void-cli.svg
@@ -0,0 +1,13 @@
+<svg width="536" height="113" viewBox="0 0 536 113" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_31_122)">
+<path d="M24.087 24.9L41.292 71.772L58.218 24.9H81.375L55.707 90H25.947L0.279 24.9H24.087ZM123.855 91.116C96.4199 91.116 82.0979 79.584 82.0979 57.45C82.0979 35.316 96.4199 23.784 123.855 23.784C151.29 23.784 165.705 35.316 165.705 57.45C165.705 79.584 151.29 91.116 123.855 91.116ZM123.855 75.027C136.782 75.027 142.827 69.54 142.827 57.45C142.827 45.267 136.782 39.78 123.855 39.78C110.928 39.78 104.883 45.267 104.883 57.45C104.883 69.54 110.928 75.027 123.855 75.027ZM177.008 90V24.9H199.328V90H177.008ZM214.698 90V24.9H255.618C278.217 24.9 291.144 35.223 291.144 57.45C291.144 79.77 278.124 90 255.525 90H214.698ZM268.266 57.45C268.266 45.267 263.058 40.71 252.456 40.71H237.018V74.19H252.456C263.058 74.19 268.266 69.633 268.266 57.45Z" fill="white"/>
+<path d="M313.09 22C299.438 41.6978 299.358 72.2308 313.09 91.9996H322.313C308.585 72.2308 308.665 41.6978 322.313 22H313.09Z" fill="white"/>
+<path d="M525.224 22H516C529.652 41.6978 529.732 72.2308 516 91.9996H525.224C538.952 72.2308 538.872 41.6978 525.224 22Z" fill="white"/>
+<path d="M367.532 90.116C340.562 90.116 326.519 78.491 326.519 56.45C326.519 34.409 340.562 22.784 367.532 22.784C392.084 22.784 406.964 32.456 406.964 50.963V51.149H383.342V50.963C383.342 42.965 378.413 38.78 367.532 38.78C355.163 38.78 349.304 44.36 349.304 56.45C349.304 68.447 355.163 74.027 367.532 74.027C378.413 74.027 383.342 69.842 383.342 61.937V61.844H406.964V61.937C406.964 80.258 392.549 90.116 367.532 90.116ZM416.343 89V23.9H438.663V72.725H477.63V89H416.343ZM485.366 89V23.9H507.686V89H485.366Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_31_122">
+<rect width="536" height="113" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/docs/public/void-platform-dark.svg b/docs/public/void-platform-dark.svg
new file mode 100644
index 000000000..09a912ff5
--- /dev/null
+++ b/docs/public/void-platform-dark.svg
@@ -0,0 +1,13 @@
+<svg width="1002" height="89" viewBox="0 0 1002 89" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_24_15)">
+<path d="M328.518 76V10.9H376.32C391.851 10.9 400.5 20.386 400.5 34.057C400.5 47.449 391.479 56.656 375.762 56.656H350.838V76H328.518ZM377.622 33.871C377.622 28.942 375.111 26.245 370.089 26.245H350.838V41.311H370.089C375.111 41.311 377.622 38.614 377.622 33.871ZM409.257 76V10.9H431.577V59.725H470.544V76H409.257ZM473.747 76L502.205 10.9H533.267L561.725 76H538.103L533.732 65.305H500.438L496.067 76H473.747ZM507.041 49.216H527.129L517.178 24.664L507.041 49.216ZM578.803 76V26.896H553.786V10.9H626.14V26.896H601.123V76H578.803ZM634.31 76V10.9H695.318V26.896H656.63V38.242H694.202V54.331H656.63V76H634.31ZM743.634 77.116C716.199 77.116 701.877 65.584 701.877 43.45C701.877 21.316 716.199 9.784 743.634 9.784C771.069 9.784 785.484 21.316 785.484 43.45C785.484 65.584 771.069 77.116 743.634 77.116ZM743.634 61.027C756.561 61.027 762.606 55.54 762.606 43.45C762.606 31.267 756.561 25.78 743.634 25.78C730.707 25.78 724.662 31.267 724.662 43.45C724.662 55.54 730.707 61.027 743.634 61.027ZM796.787 76V10.9H847.658C862.538 10.9 871.001 18.619 871.001 32.197C871.001 40.009 867.281 45.775 861.515 49.123L871.28 76H847.565L840.776 54.889H819.107V76H796.787ZM848.123 32.848C848.123 28.57 845.891 26.245 841.334 26.245H819.107V39.544H841.334C845.891 39.544 848.123 37.219 848.123 32.848ZM882.885 76V10.9H914.97L929.013 45.496L942.684 10.9H974.676V76H953.472V29.221L939.522 62.608H918.225L903.996 29.221V76H882.885Z" fill="black"/>
+<path d="M24.087 10.9L41.292 57.772L58.218 10.9H81.375L55.707 76H25.947L0.279 10.9H24.087ZM123.855 77.116C96.4199 77.116 82.0979 65.584 82.0979 43.45C82.0979 21.316 96.4199 9.784 123.855 9.784C151.29 9.784 165.705 21.316 165.705 43.45C165.705 65.584 151.29 77.116 123.855 77.116ZM123.855 61.027C136.782 61.027 142.827 55.54 142.827 43.45C142.827 31.267 136.782 25.78 123.855 25.78C110.928 25.78 104.883 31.267 104.883 43.45C104.883 55.54 110.928 61.027 123.855 61.027ZM177.008 76V10.9H199.328V76H177.008ZM214.698 76V10.9H255.618C278.217 10.9 291.144 21.223 291.144 43.45C291.144 65.77 278.124 76 255.525 76H214.698ZM268.266 43.45C268.266 31.267 263.058 26.71 252.456 26.71H237.018V60.19H252.456C263.058 60.19 268.266 55.633 268.266 43.45Z" fill="black"/>
+<path d="M313.09 8C299.438 27.6978 299.358 58.2308 313.09 77.9996H322.313C308.585 58.2308 308.665 27.6978 322.313 8H313.09Z" fill="black"/>
+<path d="M989.224 8H980C993.652 27.6978 993.732 58.2308 980 77.9996H989.224C1002.95 58.2308 1002.87 27.6978 989.224 8Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_24_15">
+<rect width="1001.18" height="89" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/docs/public/void-sdk.svg b/docs/public/void-sdk.svg
new file mode 100644
index 000000000..60e59fe2d
--- /dev/null
+++ b/docs/public/void-sdk.svg
@@ -0,0 +1,13 @@
+<svg width="601" height="113" viewBox="0 0 601 113" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_31_175)">
+<path d="M24.087 24.9L41.292 71.772L58.218 24.9H81.375L55.707 90H25.947L0.279 24.9H24.087ZM123.855 91.116C96.4199 91.116 82.0979 79.584 82.0979 57.45C82.0979 35.316 96.4199 23.784 123.855 23.784C151.29 23.784 165.705 35.316 165.705 57.45C165.705 79.584 151.29 91.116 123.855 91.116ZM123.855 75.027C136.782 75.027 142.827 69.54 142.827 57.45C142.827 45.267 136.782 39.78 123.855 39.78C110.928 39.78 104.883 45.267 104.883 57.45C104.883 69.54 110.928 75.027 123.855 75.027ZM177.008 90V24.9H199.328V90H177.008ZM214.698 90V24.9H255.618C278.217 24.9 291.144 35.223 291.144 57.45C291.144 79.77 278.124 90 255.525 90H214.698ZM268.266 57.45C268.266 45.267 263.058 40.71 252.456 40.71H237.018V74.19H252.456C263.058 74.19 268.266 69.633 268.266 57.45Z" fill="white"/>
+<path d="M313.09 22C299.438 41.6978 299.358 72.2308 313.09 91.9996H322.313C308.585 72.2308 308.665 41.6978 322.313 22H313.09Z" fill="white"/>
+<path d="M590.224 22H581C594.652 41.6978 594.732 72.2308 581 91.9996H590.224C603.952 72.2308 603.872 41.6978 590.224 22Z" fill="white"/>
+<path d="M363.44 90.116C336.842 90.116 325.589 83.234 325.589 67.238V67.145H348.188V67.238C348.188 72.632 351.815 75.515 363.44 75.515C375.437 75.515 378.227 73.283 378.227 69.842C378.227 66.773 376.181 65.378 371.717 65.006L352.745 63.518C332.657 61.937 326.519 55.799 326.519 44.081C326.519 29.945 338.795 22.784 363.812 22.784C389.387 22.784 399.71 29.387 399.71 44.639V44.825H377.483V44.639C377.483 39.245 374.135 37.199 363.44 37.199C352.187 37.199 348.746 39.245 348.746 42.872C348.746 46.034 351.257 47.243 357.116 47.708L375.902 49.103C393.572 50.405 400.826 56.078 400.826 68.261C400.826 82.304 390.317 90.116 363.44 90.116ZM411.802 89V23.9H452.722C475.321 23.9 488.248 34.223 488.248 56.45C488.248 78.77 475.228 89 452.629 89H411.802ZM465.37 56.45C465.37 44.267 460.162 39.71 449.56 39.71H434.122V73.19H449.56C460.162 73.19 465.37 68.633 465.37 56.45ZM499.625 89V23.9H521.666V48.173L547.706 23.9H575.792L555.332 42.407L575.978 89H551.984L538.499 57.752L521.666 73.376V89H499.625Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_31_175">
+<rect width="601" height="113" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/test/terminal-demos/README.md b/test/terminal-demos/README.md
index 55a808fa5..c2429d203 100644
--- a/test/terminal-demos/README.md
+++ b/test/terminal-demos/README.md
@@ -1,10 +1,10 @@
 # Void terminal demos
 
-This is a standalone local test app. It is not imported into the docs site, included in the docs build, or published by the docs deployment. Any future website integration requires user approval.
+This is a standalone local capture studio. The homepage CLI section and this studio share the player, transcripts, and playback clock in `docs/.vitepress/theme/terminal/`. The studio controls and recording app are not included in the docs build or deployment.
 
 Run `vp dev --config test/terminal-demos/vite.config.ts` from the repository root, then open `http://127.0.0.1:41742`. It reuses the installed Vue and Iconify dependencies from the docs package. No new dependency or workspace is needed.
 
-`TerminalDemos.vue` provides the recording controls. `TerminalPlayer.vue` can play one `TerminalDemo` directly. The player uses a single animation clock, pauses offscreen or in a hidden tab, and shows a static final frame for reduced motion. Explicit Play still allows a visitor to run a demo.
+`TerminalDemos.vue` provides the recording controls. The shared `TerminalPlayer.vue` can play one `TerminalDemo` directly, with studio chrome or the homepage's Vite+ terminal appearance. The player uses a single animation clock, pauses offscreen or in a hidden tab, and shows a static final frame for reduced motion. Explicit Play still allows a visitor to run a demo.
 
 The studio includes pause, replay, scrubbing, a final-frame button, 0.75×–2× speed, and an optional cycle through all three flows. Each animation lasts 7.5 seconds at 1× and at most ten seconds at the slowest setting. Clean capture hides the controls and starts the selected demo after three seconds. Use CleanShot's area recording on the terminal. `R` replays with the same lead-in, `Space` pauses/resumes, and `Esc` exits clean capture. Controls are outside the recording area.
 
@@ -25,4 +25,4 @@ When updating transcripts, compare wording and phases to:
 
 Keep transient spinner updates on the same line ID and remove prompt options after selection. Do not invent resource guarantees or hide required credentials in the surrounding explanatory copy. The deploy sample targets Cloudflare directly; installation and recovery demonstrate the Orange Cloud Void platform.
 
-Verify with `node --test test/terminal-demos/timeline.test.ts`, `vp build --config test/terminal-demos/vite.config.ts`, and browser playback of all three flows. The local app build goes to ignored `playground-local/terminal-demos-build`. The unit tests cover pause/speed continuity, replay, backward seeking, Unicode typing, and aligned box edges. After changes to docs integration, run `vp run build:docs` and check that no demo route or content is emitted.
+Verify with `node --test test/terminal-demos/timeline.test.ts`, `vp build --config test/terminal-demos/vite.config.ts`, and browser playback of all three flows. The local app build goes to ignored `playground-local/terminal-demos-build`. The unit tests cover pause/speed continuity, replay, backward seeking, Unicode typing, and aligned box edges. For homepage changes, also run `vp run build:docs` and check desktop/mobile playback, keyboard tabs, and reduced motion. The capture studio remains a local app without a published route.
diff --git a/test/terminal-demos/TerminalDemos.vue b/test/terminal-demos/TerminalDemos.vue
index e04f4b520..e7a9b1df3 100644
--- a/test/terminal-demos/TerminalDemos.vue
+++ b/test/terminal-demos/TerminalDemos.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { Icon } from '@iconify/vue';
 import { computed, nextTick, onBeforeUnmount, onMounted, ref } from 'vue';
-import { terminalDemos } from './demos.ts';
-import TerminalPlayer from './TerminalPlayer.vue';
-import { playbackSpeeds, terminalFrame } from './timeline.ts';
+import { terminalDemos } from '../../docs/.vitepress/theme/terminal/demos.ts';
+import TerminalPlayer from '../../docs/.vitepress/theme/terminal/TerminalPlayer.vue';
+import { playbackSpeeds, terminalFrame } from '../../docs/.vitepress/theme/terminal/timeline.ts';
 
 const props = withDefaults(defineProps<{ studio?: boolean }>(), { studio: false });
 const selected = ref('deploy');
diff --git a/test/terminal-demos/timeline.test.ts b/test/terminal-demos/timeline.test.ts
index 8879f09e1..2e97de572 100644
--- a/test/terminal-demos/timeline.test.ts
+++ b/test/terminal-demos/timeline.test.ts
@@ -1,7 +1,12 @@
 import assert from 'node:assert/strict';
 import { test } from 'node:test';
-import { terminalDemos } from './demos.ts';
-import { PlaybackClock, playbackSpeeds, terminalFrame, type TerminalDemo } from './timeline.ts';
+import { terminalDemos } from '../../docs/.vitepress/theme/terminal/demos.ts';
+import {
+  PlaybackClock,
+  playbackSpeeds,
+  terminalFrame,
+  type TerminalDemo,
+} from '../../docs/.vitepress/theme/terminal/timeline.ts';
 
 test('pause and speed changes preserve playback position without counting paused time', () => {
   const clock = new PlaybackClock(20000);