diff --git a/docs/.vitepress/config.mts b/docs/.vitepress/config.mts
index 2c04af3e..269c82ee 100644
--- a/docs/.vitepress/config.mts
+++ b/docs/.vitepress/config.mts
@@ -2,6 +2,10 @@ import { defineConfig } from 'vitepress'
 import fs from 'node:fs'
 import path from 'node:path'
 
+const llvmGrammar = JSON.parse(
+  fs.readFileSync(path.resolve(__dirname, 'llvm.tmLanguage.json'), 'utf-8')
+)
+
 export default defineConfig({
   title: 'ChadScript',
   description: 'Compile TypeScript to native binaries via LLVM',
@@ -9,6 +13,10 @@ export default defineConfig({
   base: '/ChadScript/',
   appearance: 'dark',
 
+  markdown: {
+    languages: [llvmGrammar],
+  },
+
   transformPageData(pageData) {
     const mdPath = path.resolve(__dirname, '..', pageData.relativePath)
     try {
diff --git a/docs/.vitepress/llvm.tmLanguage.json b/docs/.vitepress/llvm.tmLanguage.json
new file mode 100644
index 00000000..ce882a3a
--- /dev/null
+++ b/docs/.vitepress/llvm.tmLanguage.json
@@ -0,0 +1,18 @@
+{
+  "name": "llvm",
+  "scopeName": "source.llvm",
+  "patterns": [
+    { "match": ";.*$", "name": "comment.line.llvm" },
+    { "match": "\\b(define|declare|global|constant|private|internal|external|unnamed_addr|align|to|nuw|nsw|exact|inbounds|volatile|tail|musttail|notail)\\b", "name": "keyword.other.llvm" },
+    { "match": "\\b(ret|br|switch|invoke|resume|unreachable|call|alloca|load|store|getelementptr|extractvalue|insertvalue|extractelement|insertelement|shufflevector|phi|select|icmp|fcmp|add|sub|mul|udiv|sdiv|urem|srem|fadd|fsub|fmul|fdiv|frem|shl|lshr|ashr|and|or|xor|trunc|zext|sext|fptrunc|fpext|fptoui|fptosi|uitofp|sitofp|ptrtoint|inttoptr|bitcast|addrspacecast)\\b", "name": "keyword.control.llvm" },
+    { "match": "\\b(i1|i8|i16|i32|i64|i128|float|double|void|label|metadata|token|ptr)\\b", "name": "storage.type.llvm" },
+    { "match": "\\b(eq|ne|ugt|uge|ult|ule|sgt|sge|slt|sle|oeq|ogt|oge|olt|ole|one|ord|ueq|une|uno|true|false|null|zeroinitializer|undef|poison)\\b", "name": "constant.language.llvm" },
+    { "match": "@[a-zA-Z$._][a-zA-Z$._0-9]*", "name": "entity.name.function.llvm" },
+    { "match": "%[a-zA-Z$._][a-zA-Z$._0-9]*", "name": "variable.other.llvm" },
+    { "match": "%[0-9]+", "name": "variable.other.llvm" },
+    { "match": "\\b-?[0-9]+\\.?[0-9]*([eE][+-]?[0-9]+)?\\b", "name": "constant.numeric.llvm" },
+    { "match": "c\"[^\"]*\"", "name": "string.quoted.double.llvm" },
+    { "match": "\"[^\"]*\"", "name": "string.quoted.double.llvm" },
+    { "match": "^[a-zA-Z$._][a-zA-Z$._0-9]*:", "name": "entity.name.label.llvm" }
+  ]
+}
diff --git a/docs/.vitepress/theme/ExampleTabs.vue b/docs/.vitepress/theme/ExampleTabs.vue
index 7943be9f..4a21c97a 100644
--- a/docs/.vitepress/theme/ExampleTabs.vue
+++ b/docs/.vitepress/theme/ExampleTabs.vue
@@ -1,8 +1,12 @@
 <script setup lang="ts">
-import { ref, computed } from 'vue'
+import { ref, computed, watch, onMounted, onUnmounted, nextTick } from 'vue'
 
 const activeTab = ref(0)
 const copied = ref(false)
+const cmdText = ref('')
+const showOutput = ref(false)
+const containerRef = ref<HTMLElement | null>(null)
+let isVisible = false
 
 const examples = [
   {
@@ -99,6 +103,8 @@ function highlight(code: string): string {
 const highlightedCode = computed(() => highlight(examples[activeTab.value].code))
 
 let copyTimeout: ReturnType<typeof setTimeout> | null = null
+let typeTimeouts: ReturnType<typeof setTimeout>[] = []
+let observer: IntersectionObserver | null = null
 
 function copyCode() {
   const code = examples[activeTab.value].code
@@ -107,10 +113,59 @@ function copyCode() {
   if (copyTimeout) clearTimeout(copyTimeout)
   copyTimeout = setTimeout(() => { copied.value = false }, 1500)
 }
+
+function runTypewriter(text: string) {
+  typeTimeouts.forEach(t => clearTimeout(t))
+  typeTimeouts = []
+  cmdText.value = ''
+  showOutput.value = false
+
+  const cmdPart = text.slice(2)
+  let i = 0
+  function tick() {
+    if (i < cmdPart.length) {
+      cmdText.value = cmdPart.slice(0, i + 1)
+      i++
+      const t = setTimeout(tick, 40)
+      typeTimeouts.push(t)
+    } else {
+      const t = setTimeout(() => { showOutput.value = true }, 150)
+      typeTimeouts.push(t)
+    }
+  }
+  const t = setTimeout(tick, 300)
+  typeTimeouts.push(t)
+}
+
+watch(activeTab, () => {
+  runTypewriter(examples[activeTab.value].run)
+})
+
+onMounted(() => {
+  nextTick(() => {
+    if (!containerRef.value) return
+    observer = new IntersectionObserver(
+      (entries) => {
+        const wasVisible = isVisible
+        isVisible = entries[0].isIntersecting
+        if (isVisible && !wasVisible) {
+          runTypewriter(examples[activeTab.value].run)
+        }
+      },
+      { threshold: 0.3 }
+    )
+    observer.observe(containerRef.value)
+  })
+})
+
+onUnmounted(() => {
+  if (observer) observer.disconnect()
+  typeTimeouts.forEach(t => clearTimeout(t))
+})
 </script>
 
 <template>
-  <div class="example-tabs">
+  <div class="example-tabs" ref="containerRef">
     <h2 class="example-heading">Examples</h2>
     <div class="tab-bar">
       <button
@@ -129,8 +184,8 @@ function copyCode() {
       </div>
       <pre class="panel-code"><code v-html="highlightedCode"></code></pre>
       <div class="panel-terminal">
-        <div class="terminal-line terminal-cmd">{{ examples[activeTab].run }}</div>
-        <div class="terminal-line terminal-out">{{ examples[activeTab].output }}</div>
+        <div class="terminal-line terminal-cmd"><span class="terminal-prompt">$</span> {{ cmdText }}<span v-if="!showOutput" class="cursor">|</span></div>
+        <div v-if="showOutput" class="terminal-line terminal-out">{{ examples[activeTab].output }}</div>
       </div>
     </div>
   </div>
@@ -262,14 +317,28 @@ function copyCode() {
   line-height: 1.6;
 }
 
+.terminal-prompt {
+  color: var(--vp-c-brand-1);
+}
+
 .terminal-cmd {
-  color: var(--vp-c-text-2);
+  color: var(--vp-c-text-1);
 }
 
 .terminal-out {
   color: var(--vp-c-text-3);
 }
 
+.cursor {
+  color: var(--vp-c-brand-1);
+  animation: blink 0.6s step-end infinite;
+  font-weight: 300;
+}
+
+@keyframes blink {
+  50% { opacity: 0; }
+}
+
 @media (max-width: 768px) {
   .tab-bar {
     overflow-x: auto;
diff --git a/docs/.vitepress/theme/HeroBenchmarks.vue b/docs/.vitepress/theme/HeroBenchmarks.vue
index 1dadb628..d626a3a0 100644
--- a/docs/.vitepress/theme/HeroBenchmarks.vue
+++ b/docs/.vitepress/theme/HeroBenchmarks.vue
@@ -46,6 +46,7 @@ onMounted(() => {
 <style scoped>
 .hero-bench {
   width: 360px;
+  margin: 2.5rem auto 0;
   padding: 22px 24px;
   border-radius: 12px;
   border: 1px solid rgba(255, 255, 255, 0.1);
diff --git a/docs/.vitepress/theme/IRShowcase.vue b/docs/.vitepress/theme/IRShowcase.vue
index a32bab51..059a4c0d 100644
--- a/docs/.vitepress/theme/IRShowcase.vue
+++ b/docs/.vitepress/theme/IRShowcase.vue
@@ -1,124 +1,313 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted } from 'vue'
+import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue'
+
+const containerRef = ref<HTMLElement | null>(null)
+const phase = ref<'idle' | 'typing-source' | 'typing-build' | 'ready-compile' | 'compiling' | 'typing-run' | 'ready-run' | 'running' | 'done'>('idle')
+
+const sourceText = ref('')
+const buildCmd = ref('')
+const runCmd = ref('')
+const irVisibleCount = ref(0)
+const linkingState = ref<'idle' | 'linking' | 'done'>('idle')
+const execOutput = ref('')
+const execTime = ref('')
+
+const fullSource = 'console.log("Hello from ChadScript!");'
+const fullBuildCmd = 'chad build hello.ts'
+const fullRunCmd = './hello'
+
+const irLines = [
+  '@.str.0 = private constant [24 x i8] c"Hello from ChadScript!\\0A\\00"',
+  '',
+  'declare i32 @printf(i8*, ...)',
+  '',
+  'define i32 @main(i32 %argc, i8** %argv) {',
+  'entry:',
+  '  %0 = getelementptr [24 x i8], [24 x i8]* @.str.0, i64 0, i64 0',
+  '  call i32 @printf(i8* %0)',
+  '  ret i32 0',
+  '}',
+]
+
+const irKeywords = new Set([
+  'define', 'declare', 'global', 'constant', 'private', 'internal',
+  'external', 'unnamed_addr', 'align', 'to', 'nuw', 'nsw',
+])
+
+const irInstructions = new Set([
+  'ret', 'br', 'call', 'alloca', 'load', 'store', 'getelementptr',
+  'add', 'sub', 'mul', 'icmp', 'fcmp', 'phi', 'select',
+  'trunc', 'zext', 'sext', 'bitcast', 'ptrtoint', 'inttoptr',
+])
+
+const irTypes = new Set([
+  'i1', 'i8', 'i16', 'i32', 'i64', 'i128', 'float', 'double', 'void', 'ptr',
+])
+
+function highlightIR(line: string): string {
+  const esc = (s: string) => s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
+
+  if (line === '') return ''
+
+  if (/^[a-zA-Z_]\w*:$/.test(line.trim())) {
+    return `<span class="ir-label">${esc(line)}</span>`
+  }
+
+  return line.replace(
+    /(;[^\n]*)|(c"[^"]*"|"[^"]*")|(@[a-zA-Z$._][\w$.]*)|(%[a-zA-Z$._][\w$.]*|%\d+)|(\b-?\d+\b)|(\b[a-zA-Z_]\w*\b)/g,
+    (match, comment, str, global, local, num, word) => {
+      if (comment) return `<span class="ir-comment">${esc(comment)}</span>`
+      if (str) return `<span class="ir-string">${esc(str)}</span>`
+      if (global) return `<span class="ir-global">${esc(global)}</span>`
+      if (local) return `<span class="ir-local">${esc(local)}</span>`
+      if (num !== undefined && num !== '') return `<span class="ir-number">${esc(num)}</span>`
+      if (word) {
+        if (irKeywords.has(word)) return `<span class="ir-keyword">${esc(word)}</span>`
+        if (irInstructions.has(word)) return `<span class="ir-instr">${esc(word)}</span>`
+        if (irTypes.has(word)) return `<span class="ir-type">${esc(word)}</span>`
+      }
+      return esc(match)
+    }
+  )
+}
+
+const highlightedIR = computed(() => irLines.map(highlightIR))
+
+const hexVisible = computed(() =>
+  phase.value === 'ready-compile' || phase.value === 'compiling' ||
+  phase.value === 'ready-run' || phase.value === 'running' ||
+  (phase.value === 'typing-run')
+)
+
+const ctaVisible = computed(() => phase.value === 'done')
+
+const hexActive = computed(() =>
+  phase.value === 'ready-compile' || phase.value === 'ready-run'
+)
+
+const hexLabel = computed(() => {
+  switch (phase.value) {
+    case 'ready-compile': return 'Build'
+    case 'compiling': return '...'
+    case 'typing-run': return '✓'
+    case 'ready-run': return 'Run'
+    case 'running': return '...'
+    case 'done': return '✓'
+    default: return ''
+  }
+})
+
+const hexHint = computed(() => {
+  switch (phase.value) {
+    case 'ready-compile': return 'click to compile'
+    case 'compiling': return 'compiling'
+    case 'typing-run': return 'compiled'
+    case 'ready-run': return 'click to run'
+    case 'running': return 'running'
+    case 'done': return 'done'
+    default: return ''
+  }
+})
+
+let observer: IntersectionObserver | null = null
+let timeouts: ReturnType<typeof setTimeout>[] = []
+let started = false
+
+function delay(ms: number): Promise<void> {
+  return new Promise(resolve => {
+    const t = setTimeout(resolve, ms)
+    timeouts.push(t)
+  })
+}
 
-const activeHighlight = ref<string | null>(null)
-const steps = [null, 'log1', 'log2'] as const
-let stepIndex = 0
-let timer: ReturnType<typeof setInterval> | null = null
-let hovering = false
+function typewriter(target: { value: string }, text: string, speed: number): Promise<void> {
+  return new Promise(resolve => {
+    let i = 0
+    function tick() {
+      if (i < text.length) {
+        target.value = text.slice(0, i + 1)
+        i++
+        const t = setTimeout(tick, speed)
+        timeouts.push(t)
+      } else {
+        resolve()
+      }
+    }
+    tick()
+  })
+}
 
-function startTimer() {
-  if (timer) return
-  timer = setInterval(() => {
-    if (hovering) return
-    stepIndex = (stepIndex + 1) % steps.length
-    activeHighlight.value = steps[stepIndex]
-  }, 1800)
+async function startTyping() {
+  if (started) return
+  started = true
+  phase.value = 'typing-source'
+  await delay(300)
+  await typewriter(sourceText, fullSource, 35)
+  await delay(400)
+
+  phase.value = 'typing-build'
+  await delay(200)
+  await typewriter(buildCmd, fullBuildCmd, 40)
+  await delay(200)
+  phase.value = 'ready-compile'
 }
 
-function stopTimer() {
-  if (timer) { clearInterval(timer); timer = null }
+function hexClick() {
+  if (phase.value === 'ready-compile') compile()
+  else if (phase.value === 'ready-run') run()
 }
 
-function onHover(id: string) {
-  hovering = true
-  activeHighlight.value = id
+async function compile() {
+  phase.value = 'compiling'
+
+  await delay(400)
+  for (let i = 0; i < irLines.length; i++) {
+    irVisibleCount.value = i + 1
+    await delay(irLines[i] === '' ? 20 : 80)
+  }
+  await delay(300)
+
+  linkingState.value = 'linking'
+  await delay(1200)
+  linkingState.value = 'done'
+  await delay(500)
+
+  phase.value = 'typing-run'
+  await delay(300)
+  await typewriter(runCmd, fullRunCmd, 50)
+  await delay(200)
+  phase.value = 'ready-run'
 }
 
-function onLeave() {
-  hovering = false
-  stepIndex = steps.indexOf(activeHighlight.value as any)
-  if (stepIndex === -1) stepIndex = 0
+async function run() {
+  phase.value = 'running'
+
+  await delay(150)
+  execOutput.value = 'Hello from ChadScript!'
+  execTime.value = '1.9ms'
+  await delay(300)
+  phase.value = 'done'
 }
 
 onMounted(() => {
-  stepIndex = 1
-  activeHighlight.value = steps[stepIndex]
-  startTimer()
+  nextTick(() => {
+    if (!containerRef.value) return
+    observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0].isIntersecting && !started) {
+          startTyping()
+        }
+      },
+      { threshold: 0.3 }
+    )
+    observer.observe(containerRef.value)
+  })
 })
 
 onUnmounted(() => {
-  stopTimer()
+  if (observer) observer.disconnect()
+  timeouts.forEach(t => clearTimeout(t))
 })
 </script>
 
 <template>
-  <div class="ir-showcase">
+  <div class="ir-showcase" ref="containerRef">
     <h2 class="ir-heading">What's Under the Hood</h2>
     <p class="ir-subheading">Your TypeScript is parsed, type-checked, and lowered to LLVM IR — then compiled and linked into a standalone native binary. No interpreter. No JIT. Just native machine code.</p>
 
-    <div class="ir-columns">
-      <div class="ir-panel ir-panel-ts">
-        <div class="ir-panel-header">
-          <span class="ir-dot ir-dot-ts"></span>
-          <span class="ir-panel-label">hello.ts</span>
+    <div class="pipeline-panel" :class="{ visible: phase !== 'idle' }">
+
+      <div class="stage-source" v-if="phase !== 'idle'">
+        <div class="panel-header">
+          <span class="panel-label">hello.ts</span>
+        </div>
+        <pre class="panel-code"><code>console.log(<span class="hl-string">"Hello from ChadScript!"</span>)<span v-if="sourceText.length < fullSource.length && phase === 'typing-source'" class="cursor">|</span></code></pre>
+        <div
+          class="code-mask"
+          :style="{ width: (100 - (sourceText.length / fullSource.length) * 100) + '%' }"
+        ></div>
+      </div>
+
+      <div
+        class="terminal-section"
+        :class="{ visible: phase !== 'idle' && phase !== 'typing-source' }"
+      >
+        <div class="terminal-line">
+          <span class="terminal-prompt">$</span>
+          <span class="terminal-text">{{ buildCmd }}</span>
+          <span v-if="(phase === 'typing-build' || phase === 'ready-compile') && buildCmd.length <= fullBuildCmd.length" class="cursor">|</span>
+        </div>
+      </div>
+
+      <div class="stage-ir" :class="{ visible: irVisibleCount > 0 }">
+        <div class="panel-header">
+          <span class="panel-label">LLVM IR</span>
+          <span v-if="irVisibleCount >= irLines.length" class="ir-badge">generated</span>
+        </div>
+        <pre class="panel-code ir-code"><code><template v-for="(line, i) in irLines" :key="i"><span
+          v-if="i < irVisibleCount"
+          class="ir-line"
+          :class="{ 'ir-entering': i === irVisibleCount - 1 }"
+        ><template v-if="line === ''">
+</template><span v-else v-html="highlightedIR[i] + '\n'"></span></span></template></code></pre>
+      </div>
+
+      <div class="stage-link" :class="{ visible: linkingState !== 'idle' }">
+        <div class="terminal-line">
+          <span v-if="linkingState === 'linking'" class="link-row">
+            <span class="spinner"></span>
+            <span class="link-text">Linking...</span>
+          </span>
+          <span v-else-if="linkingState === 'done'" class="link-row">
+            <span class="checkmark">✓</span>
+            <span class="link-text">Compiled → hello (42 KB)</span>
+          </span>
         </div>
-        <pre class="ir-code"><code><span
-  class="ir-line"
-  :class="{ 'ir-active': activeHighlight === 'log1' }"
-  @mouseenter="onHover('log1')"
-  @mouseleave="onLeave"
-><span class="ir-builtin">console</span>.<span class="ir-fn">log</span>(<span class="ir-str">"Hello from ChadScript!"</span>);</span>
-<span
-  class="ir-line"
-  :class="{ 'ir-active': activeHighlight === 'log2' }"
-  @mouseenter="onHover('log2')"
-  @mouseleave="onLeave"
-><span class="ir-builtin">console</span>.<span class="ir-fn">log</span>(<span class="ir-str">"This is native code!"</span>);</span></code></pre>
       </div>
 
-      <div class="ir-arrow">
-        <svg width="40" height="40" viewBox="0 0 40 40" fill="none">
-          <path d="M8 20H32M32 20L24 12M32 20L24 28" stroke="var(--vp-c-brand-1)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
-        </svg>
-        <span class="ir-arrow-label">chad build -S</span>
+      <div
+        class="terminal-section"
+        :class="{ visible: phase === 'typing-run' || phase === 'ready-run' || phase === 'running' || phase === 'done' }"
+      >
+        <div class="terminal-line">
+          <span class="terminal-prompt">$</span>
+          <span class="terminal-text">{{ runCmd }}</span>
+          <span v-if="(phase === 'typing-run' || phase === 'ready-run') && runCmd.length <= fullRunCmd.length" class="cursor">|</span>
+        </div>
+        <div v-if="execOutput" class="terminal-line terminal-output">
+          {{ execOutput }}
+        </div>
+        <div v-if="execTime" class="timing-text">
+          completed in {{ execTime }}
+        </div>
       </div>
 
-      <div class="ir-panel ir-panel-ll">
-        <div class="ir-panel-header">
-          <span class="ir-dot ir-dot-ll"></span>
-          <span class="ir-panel-label">hello.ll — LLVM IR</span>
+      <div class="hex-section" :class="{ visible: hexVisible }">
+        <div class="hex-prompt" :class="{ active: hexActive, spinning: phase === 'compiling' || phase === 'running' }" @click="hexClick">
+          <div class="hex-container">
+            <svg class="hex-ring" viewBox="0 0 100 100">
+              <polygon points="50,3 93,25 93,75 50,97 7,75 7,25" fill="none" stroke="currentColor" stroke-width="1.5"/>
+            </svg>
+            <svg class="hex-icon" viewBox="0 0 100 100">
+              <polygon points="50,3 93,25 93,75 50,97 7,75 7,25" fill="rgba(245, 158, 11, 0.06)" stroke="currentColor" stroke-width="2"/>
+            </svg>
+            <span class="hex-label">{{ hexLabel }}</span>
+          </div>
+          <span class="hex-hint">{{ hexHint }}</span>
         </div>
-        <pre class="ir-code"><code><span class="ir-comment">; string constants compiled into the binary</span>
-<span
-  class="ir-line"
-  :class="{ 'ir-active': activeHighlight === 'log1' }"
-  @mouseenter="onHover('log1')"
-  @mouseleave="onLeave"
-><span class="ir-global">@.str.0</span> = private constant [24 x i8] c<span class="ir-str">"Hello from ChadScript!\0A\00"</span></span>
-<span
-  class="ir-line"
-  :class="{ 'ir-active': activeHighlight === 'log2' }"
-  @mouseenter="onHover('log2')"
-  @mouseleave="onLeave"
-><span class="ir-global">@.str.1</span> = private constant [22 x i8] c<span class="ir-str">"This is native code!\0A\00"</span></span>
-
-<span class="ir-kw">define</span> i32 <span class="ir-fn">@main</span>(i32 %argc, i8** %argv) {
-<span class="ir-label">entry:</span>
-<span
-  class="ir-line"
-  :class="{ 'ir-active': activeHighlight === 'log1' }"
-  @mouseenter="onHover('log1')"
-  @mouseleave="onLeave"
->  %0 = getelementptr [24 x i8], [24 x i8]* <span class="ir-global">@.str.0</span>, i64 0, i64 0
-  <span class="ir-kw">call</span> i32 @<span class="ir-fn">printf</span>(i8* %0)</span>
-<span
-  class="ir-line"
-  :class="{ 'ir-active': activeHighlight === 'log2' }"
-  @mouseenter="onHover('log2')"
-  @mouseleave="onLeave"
->  %2 = getelementptr [22 x i8], [22 x i8]* <span class="ir-global">@.str.1</span>, i64 0, i64 0
-  <span class="ir-kw">call</span> i32 @<span class="ir-fn">printf</span>(i8* %2)</span>
-  ret i32 0
-}</code></pre>
       </div>
+
+      <div class="cta-section" :class="{ visible: ctaVisible }">
+        <a href="/ChadScript/getting-started/installation" class="cta-link">Get Started with ChadScript</a>
+      </div>
+
     </div>
   </div>
 </template>
 
 <style scoped>
 .ir-showcase {
-  max-width: 960px;
+  max-width: 720px;
   margin: 2rem auto 0;
   padding: 0 24px;
 }
@@ -143,29 +332,22 @@ onUnmounted(() => {
   line-height: 1.5;
 }
 
-.ir-columns {
-  display: flex;
-  align-items: stretch;
-  gap: 0;
-}
-
-.ir-panel {
-  flex: 1;
+.pipeline-panel {
   border-radius: 12px;
   overflow: hidden;
   border: 1px solid rgba(255, 255, 255, 0.08);
   background: var(--vp-c-bg-soft);
+  opacity: 0;
+  transform: translateY(12px);
+  transition: opacity 0.4s ease, transform 0.4s ease;
 }
 
-.ir-panel-ts {
-  border-top: 3px solid #3b82f6;
-}
-
-.ir-panel-ll {
-  border-top: 3px solid #f59e0b;
+.pipeline-panel.visible {
+  opacity: 1;
+  transform: translateY(0);
 }
 
-.ir-panel-header {
+.panel-header {
   display: flex;
   align-items: center;
   gap: 8px;
@@ -174,107 +356,373 @@ onUnmounted(() => {
   border-bottom: 1px solid rgba(255, 255, 255, 0.06);
 }
 
-.ir-dot {
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-}
-
-.ir-dot-ts {
-  background: #3b82f6;
-  box-shadow: 0 0 8px rgba(59, 130, 246, 0.4);
-}
-
-.ir-dot-ll {
-  background: #f59e0b;
-  box-shadow: 0 0 8px rgba(245, 158, 11, 0.4);
-}
-
-.ir-panel-label {
+.panel-label {
   font-size: 0.8rem;
   font-weight: 600;
   color: var(--vp-c-text-2);
   font-family: var(--vp-font-family-mono);
 }
 
-.ir-code {
+.panel-code {
   margin: 0;
-  padding: 16px;
+  padding: 14px 16px;
   font-size: 0.82rem;
   line-height: 1.7;
   overflow-x: auto;
   background: transparent;
 }
 
-.ir-code code {
+.panel-code code {
   font-family: var(--vp-font-family-mono);
+  color: var(--vp-c-text-1);
   background: none;
 }
 
-.ir-line {
-  display: inline;
-  border-radius: 3px;
-  transition: box-shadow 0.3s ease;
-  background: transparent;
+.stage-source {
+  position: relative;
 }
 
-.ir-line.ir-active {
-  animation: ir-flash 0.8s ease-out forwards;
-  box-shadow: inset 3px 0 0 var(--vp-c-brand-1);
+.code-mask {
+  position: absolute;
+  top: 40px;
+  right: 0;
+  bottom: 0;
+  background: var(--vp-c-bg-soft);
+  pointer-events: none;
+  transition: width 0.02s linear;
 }
 
-@keyframes ir-flash {
-  0% {
-    background: rgba(245, 158, 11, 0.75);
-    box-shadow: inset 3px 0 0 var(--vp-c-brand-1), 0 0 12px rgba(245, 158, 11, 0.5);
-  }
-  30% {
-    background: rgba(245, 158, 11, 0.4);
-  }
-  100% {
-    background: rgba(245, 158, 11, 0.12);
-    box-shadow: inset 3px 0 0 var(--vp-c-brand-1);
-  }
+.hl-string { color: #a5d6a7; }
+
+.cursor {
+  color: var(--vp-c-brand-1);
+  animation: blink 0.6s step-end infinite;
+  font-weight: 300;
+}
+
+@keyframes blink {
+  50% { opacity: 0; }
+}
+
+.terminal-section {
+  padding: 10px 16px;
+  background: rgba(0, 0, 0, 0.15);
+  border-top: 1px solid rgba(255, 255, 255, 0.06);
+  opacity: 0;
+  max-height: 0;
+  overflow: hidden;
+  transition: opacity 0.3s ease, max-height 0.3s ease;
+}
+
+.terminal-section.visible {
+  opacity: 1;
+  max-height: 200px;
+}
+
+.terminal-line {
+  font-family: var(--vp-font-family-mono);
+  font-size: 0.8rem;
+  line-height: 1.6;
+  color: var(--vp-c-text-2);
 }
 
-.ir-str { color: #a5d6a7; }
-.ir-fn { color: #90caf9; }
-.ir-builtin { color: #ce93d8; }
-.ir-num { color: #ffcc80; }
-.ir-kw { color: #ef9a9a; font-weight: 600; }
-.ir-global { color: #80cbc4; }
-.ir-comment { color: var(--vp-c-text-3); font-style: italic; }
-.ir-label { color: #fff59d; }
+.terminal-prompt {
+  color: var(--vp-c-brand-1);
+  margin-right: 8px;
+}
+
+.terminal-text {
+  color: var(--vp-c-text-1);
+}
 
-.ir-arrow {
+.terminal-output {
+  color: var(--vp-c-text-3);
+}
+
+.hex-section {
+  border-top: 1px solid rgba(255, 255, 255, 0.06);
+  opacity: 0;
+  max-height: 0;
+  overflow: hidden;
+  transition: opacity 0.3s ease, max-height 0.3s ease;
+}
+
+.hex-section.visible {
+  opacity: 1;
+  max-height: 140px;
+}
+
+.hex-prompt {
   display: flex;
   flex-direction: column;
   align-items: center;
+  gap: 8px;
+  padding: 20px 16px;
+  transition: opacity 0.3s ease;
+}
+
+.hex-prompt.active {
+  cursor: pointer;
+}
+
+.hex-prompt.active:hover .hex-container {
+  transform: scale(1.12);
+}
+
+.hex-prompt.active:hover .hex-icon {
+  filter: drop-shadow(0 0 12px rgba(245, 158, 11, 0.6));
+}
+
+.hex-prompt.active:hover .hex-ring {
+  opacity: 0;
+}
+
+.hex-container {
+  position: relative;
+  width: 80px;
+  height: 80px;
+  display: flex;
+  align-items: center;
   justify-content: center;
-  padding: 0 12px;
-  flex-shrink: 0;
+  transition: transform 0.25s ease;
 }
 
-.ir-arrow-label {
-  font-size: 0.65rem;
+.hex-icon {
+  position: absolute;
+  inset: 0;
+  color: var(--vp-c-text-3);
+  transition: color 0.3s ease, filter 0.3s ease;
+}
+
+.hex-prompt.active .hex-icon {
+  color: var(--vp-c-brand-1);
+  filter: drop-shadow(0 0 6px rgba(245, 158, 11, 0.3));
+  animation: hex-rotate 8s linear infinite;
+}
+
+.hex-prompt.spinning .hex-icon {
+  animation: hex-rotate 2s linear infinite;
+}
+
+.hex-ring {
+  position: absolute;
+  inset: -8px;
+  color: var(--vp-c-text-3);
+  opacity: 0;
+  transition: opacity 0.3s ease, color 0.3s ease;
+}
+
+.hex-prompt.active .hex-ring {
+  color: var(--vp-c-brand-1);
+  opacity: 0.3;
+  animation: hex-pulse 2s ease-in-out infinite;
+}
+
+@keyframes hex-rotate {
+  to { transform: rotate(360deg); }
+}
+
+@keyframes hex-pulse {
+  0%, 100% {
+    opacity: 0.15;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.4;
+    transform: scale(1.12);
+  }
+}
+
+.hex-label {
+  position: relative;
+  font-family: var(--vp-font-family-mono);
+  font-size: 0.82rem;
+  font-weight: 700;
+  color: var(--vp-c-text-3);
+  transition: color 0.3s ease;
+}
+
+.hex-prompt.active .hex-label {
+  color: var(--vp-c-text-1);
+}
+
+.hex-hint {
+  font-family: var(--vp-font-family-mono);
+  font-size: 0.68rem;
+  color: var(--vp-c-text-3);
+  transition: color 0.3s ease;
+}
+
+.hex-prompt.active .hex-hint {
+  color: var(--vp-c-brand-1);
+}
+
+.cta-section {
+  border-top: 1px solid rgba(255, 255, 255, 0.06);
+  opacity: 0;
+  max-height: 0;
+  overflow: hidden;
+  transition: opacity 0.4s ease, max-height 0.3s ease;
+}
+
+.cta-section.visible {
+  opacity: 1;
+  max-height: 80px;
+}
+
+.cta-link {
+  display: inline-block;
+  margin: 14px auto;
+  padding: 10px 24px;
+  font-size: 0.9rem;
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+  background: rgba(255, 255, 255, 0.08);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 8px;
+  text-decoration: none;
+  transition: background 0.15s ease, border-color 0.15s ease;
+}
+
+.cta-link:hover {
+  background: rgba(255, 255, 255, 0.12);
+  border-color: rgba(255, 255, 255, 0.2);
+}
+
+.cta-section.visible {
+  opacity: 1;
+  max-height: 80px;
+  text-align: center;
+}
+
+.stage-ir {
+  border-top: 1px solid rgba(255, 255, 255, 0.06);
+  opacity: 0;
+  max-height: 0;
+  overflow: hidden;
+  transition: opacity 0.3s ease, max-height 0.5s ease;
+}
+
+.stage-ir.visible {
+  opacity: 1;
+  max-height: 500px;
+}
+
+.ir-code {
+  font-size: 0.75rem;
+  line-height: 1.6;
+  color: var(--vp-c-text-2);
+}
+
+.ir-code :deep(.ir-keyword) { color: #c678dd; }
+.ir-code :deep(.ir-instr) { color: #61afef; }
+.ir-code :deep(.ir-type) { color: #e5c07b; }
+.ir-code :deep(.ir-global) { color: #98c379; }
+.ir-code :deep(.ir-local) { color: #d19a66; }
+.ir-code :deep(.ir-string) { color: #98c379; }
+.ir-code :deep(.ir-number) { color: #d19a66; }
+.ir-code :deep(.ir-comment) { color: #5c6370; font-style: italic; }
+.ir-code :deep(.ir-label) { color: #e5c07b; }
+
+.ir-line {
+  display: block;
+  opacity: 1;
+}
+
+.ir-line.ir-entering {
+  animation: ir-slide-in 0.15s ease-out;
+}
+
+@keyframes ir-slide-in {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.ir-badge {
+  margin-left: auto;
+  font-size: 0.7rem;
+  color: var(--vp-c-text-3);
   font-family: var(--vp-font-family-mono);
+  animation: fade-in 0.3s ease;
+}
+
+.stage-link {
+  padding: 10px 16px;
+  background: rgba(0, 0, 0, 0.15);
+  border-top: 1px solid rgba(255, 255, 255, 0.06);
+  opacity: 0;
+  max-height: 0;
+  overflow: hidden;
+  transition: opacity 0.3s ease, max-height 0.3s ease;
+}
+
+.stage-link.visible {
+  opacity: 1;
+  max-height: 200px;
+}
+
+.link-row {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.spinner {
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  border: 2px solid rgba(255, 255, 255, 0.15);
+  border-top-color: var(--vp-c-brand-1);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+.link-text {
+  font-family: var(--vp-font-family-mono);
+  font-size: 0.8rem;
+  color: var(--vp-c-text-2);
+}
+
+.checkmark {
+  color: var(--vp-c-text-2);
+  font-size: 0.9rem;
+  font-weight: 700;
+}
+
+.timing-text {
+  margin-top: 6px;
+  font-family: var(--vp-font-family-mono);
+  font-size: 0.8rem;
   color: var(--vp-c-text-3);
-  white-space: nowrap;
-  margin-top: 4px;
+  animation: fade-in 0.4s ease;
+}
+
+@keyframes fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
 }
 
 @media (max-width: 768px) {
-  .ir-columns {
-    flex-direction: column;
-    gap: 8px;
+  .ir-showcase {
+    padding: 0 16px;
   }
 
-  .ir-arrow {
-    padding: 8px 0;
+  .panel-code {
+    font-size: 0.75rem;
   }
 
-  .ir-arrow svg {
-    transform: rotate(90deg);
+  .ir-code {
+    font-size: 0.68rem;
   }
 }
 </style>
diff --git a/docs/.vitepress/theme/index.mts b/docs/.vitepress/theme/index.mts
index dc114ead..c631f39e 100644
--- a/docs/.vitepress/theme/index.mts
+++ b/docs/.vitepress/theme/index.mts
@@ -16,7 +16,6 @@ export default {
   Layout() {
     return h(DefaultTheme.Layout, null, {
       'doc-before': () => h(CopyMarkdown),
-      'home-hero-image': () => h(HeroBenchmarks),
     })
   },
   enhanceApp({ app }) {
diff --git a/docs/index.md b/docs/index.md
index eb1bd572..501eb469 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -19,14 +19,18 @@ features:
     details: Write the TypeScript you already know. Classes, interfaces, async/await, generics - it all works.
   - title: Batteries Included
     details: HTTP servers, file I/O, JSON, crypto, SQLite, regex, async - all compiled to native code. No npm required.
+  - title: Zero-Cost C Interop
+    details: C libraries like SQLite and OpenSSL are called directly through LLVM IR — no FFI boundary, no marshaling, no overhead. Same cost as a native function call.
 ---
 
 <HeroRotator />
 
-<ExampleTabs />
+<HeroBenchmarks />
 
 <IRShowcase />
 
+<ExampleTabs />
+
 <div class="cta-section">
 
 ## Ready to try it?
@@ -37,7 +41,6 @@ curl -fsSL https://raw.githubusercontent.com/cs01/ChadScript/main/install.sh | s
 
 <div class="cta-buttons">
   <a href="/ChadScript/getting-started/installation" class="cta-button primary">Get Started →</a>
-  <a href="/ChadScript/benchmarks" class="cta-button secondary">See Benchmarks</a>
 </div>
 
 </div>
@@ -74,8 +77,14 @@ curl -fsSL https://raw.githubusercontent.com/cs01/ChadScript/main/install.sh | s
   opacity: 0.85;
 }
 .cta-button.primary {
-  background: var(--vp-c-brand-1);
-  color: var(--vp-c-white);
+  background: rgba(255, 255, 255, 0.08);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  color: var(--vp-c-text-1);
+}
+.cta-button.primary:hover {
+  background: rgba(255, 255, 255, 0.12);
+  border-color: rgba(255, 255, 255, 0.2);
+  opacity: 1;
 }
 .cta-button.secondary {
   border: 1px solid var(--vp-c-divider);
diff --git a/install.sh b/install.sh
index c8221591..a687efac 100755
--- a/install.sh
+++ b/install.sh
@@ -6,21 +6,22 @@ INSTALL_DIR="$HOME/.chadscript"
 VERSION="0.1.0"
 
 if [ -t 1 ]; then
-  BOLD='\033[1m'
-  DIM='\033[2m'
-  GREEN='\033[32m'
-  CYAN='\033[36m'
-  YELLOW='\033[33m'
-  RED='\033[31m'
-  RESET='\033[0m'
+  ESC=$(printf '\033')
+  BOLD="${ESC}[1m"
+  DIM="${ESC}[2m"
+  GREEN="${ESC}[32m"
+  CYAN="${ESC}[36m"
+  YELLOW="${ESC}[33m"
+  RED="${ESC}[31m"
+  RESET="${ESC}[0m"
 else
   BOLD='' DIM='' GREEN='' CYAN='' YELLOW='' RED='' RESET=''
 fi
 
-info()    { printf "${CYAN}info${RESET} %s\n" "$1"; }
-success() { printf "${GREEN}  ✓${RESET} %s\n" "$1"; }
-warn()    { printf "${YELLOW}warn${RESET} %s\n" "$1"; }
-err()     { printf "${RED}error${RESET} %s\n" "$1" >&2; exit 1; }
+info()    { printf "%s\n" "${CYAN}info${RESET} $1"; }
+success() { printf "%s\n" "${GREEN}  ✓${RESET} $1"; }
+warn()    { printf "%s\n" "${YELLOW}warn${RESET} $1"; }
+err()     { printf "%s\n" "${RED}error${RESET} $1" >&2; exit 1; }
 
 detect_libc() {
   if [ "$(uname -s)" != "Linux" ]; then
@@ -135,7 +136,9 @@ WRAPPER
   printf "\n"
   printf "  Then try:\n"
   printf "\n"
-  printf "    ${CYAN}chad run examples/hello.ts${RESET}\n"
+  printf "    ${CYAN}mkdir myproject && cd myproject${RESET}\n"
+  printf "    ${CYAN}chad init${RESET}\n"
+  printf "    ${CYAN}chad run hello.ts${RESET}\n"
   printf "\n"
 }
 
diff --git a/src/compiler.ts b/src/compiler.ts
index 51e37b89..967417b9 100644
--- a/src/compiler.ts
+++ b/src/compiler.ts
@@ -244,7 +244,7 @@ export function compile(inputFile: string, outputFile: string, logLevel: LogLeve
     if (generator.usesSqlite) { linkLibs = `-L${brewPrefix}/sqlite/lib ` + linkLibs; }
     if (generator.usesMongoose) { linkLibs = `-L${brewPrefix}/zstd/lib ` + linkLibs; }
     const sdkPath = execSync('xcrun --show-sdk-path', { stdio: 'pipe', encoding: 'utf8' }).trim();
-    linkLibs = `-isysroot ${sdkPath} -L/usr/local/lib ` + linkLibs;
+    linkLibs = `-Wl,-syslibroot,${sdkPath} -L/usr/local/lib ` + linkLibs;
   }
   const lwsBridgeObj = generator.usesMongoose ? `${LWS_BRIDGE_PATH}/lws-bridge.o` : '';
   const regexBridgeObj = generator.usesRegex ? `${LWS_BRIDGE_PATH}/regex-bridge.o` : '';
diff --git a/src/native-compiler-lib.ts b/src/native-compiler-lib.ts
index 9e93c58f..f1717b04 100644
--- a/src/native-compiler-lib.ts
+++ b/src/native-compiler-lib.ts
@@ -188,7 +188,7 @@ export function compileNative(inputFile: string, outputFile: string): void {
     if (generator.getUsesCrypto()) { linkLibs = '-L/opt/homebrew/opt/openssl/lib -L/usr/local/opt/openssl/lib ' + linkLibs; }
     if (generator.getUsesSqlite()) { linkLibs = '-L/opt/homebrew/opt/sqlite/lib -L/usr/local/opt/sqlite/lib ' + linkLibs; }
     if (generator.getUsesMongoose()) { linkLibs = '-L/opt/homebrew/opt/zstd/lib -L/usr/local/opt/zstd/lib ' + linkLibs; }
-    linkLibs = '-isysroot $(xcrun --show-sdk-path) -L/usr/local/lib ' + linkLibs;
+    linkLibs = '-Wl,-syslibroot,$(xcrun --show-sdk-path) -L/usr/local/lib ' + linkLibs;
   }
   const linkCmd = clangTool + ' ' + objFile + ' ' + lwsBridgeObj + ' ' + regexBridgeObj + ' ' + treeSitterObjs + ' -o ' + outputFile + noPie + ' ' + linkLibs;
   if (verbose) { console.log('Running: ' + linkCmd); }