diff --git a/apps/www/app/(home)/layout.tsx b/apps/www/app/(home)/layout.tsx
index f6116a729..f5d7b4ce5 100644
--- a/apps/www/app/(home)/layout.tsx
+++ b/apps/www/app/(home)/layout.tsx
@@ -1,3 +1,4 @@
+import { SiGithub } from "@icons-pack/react-simple-icons";
 import { HomeLayout } from "fumadocs-ui/layouts/home";
 import type { ReactNode } from "react";
 import { baseOptions } from "~/app/layout.config";
@@ -12,6 +13,13 @@ export default function Layout({ children }: { children: ReactNode }) {
 					url: "/docs/arkenv",
 					active: "none",
 				},
+				{
+					text: "GitHub",
+					url: "https://github.com/yamcodes/arkenv",
+					active: "none",
+					type: "icon",
+					icon: <SiGithub aria-label="GitHub" />,
+				},
 			]}
 		>
 			{children}
diff --git a/apps/www/app/(home)/page.tsx b/apps/www/app/(home)/page.tsx
index 81eb14a25..31886de50 100644
--- a/apps/www/app/(home)/page.tsx
+++ b/apps/www/app/(home)/page.tsx
@@ -1,6 +1,6 @@
 import type { Metadata } from "next";
 import { Bricolage_Grotesque } from "next/font/google";
-import { HeroVideo } from "~/components/hero-video";
+import { HeroVisual } from "~/components/hero-visual";
 import { SailButton, StarUsButton, VideoDemo } from "~/components/page";
 
 const bricolageGrotesque = Bricolage_Grotesque({
@@ -21,7 +21,7 @@ export default function HomePage() {
 				viewBox="0 0 1440 181"
 				fill="none"
 				xmlns="http://www.w3.org/2000/svg"
-				className="pointer-events-none absolute w-full top-0 left-0 h-[160px] z-10 opacity-100 text-blue-50 dark:text-[#011537]"
+				className="pointer-events-none absolute w-full top-0 left-0 h-40 z-10 opacity-100 text-blue-50 dark:text-[#011537]"
 				preserveAspectRatio="none"
 				aria-hidden="true"
 				role="presentation"
@@ -96,11 +96,11 @@ export default function HomePage() {
 					</div>
 				</div>
 				<div className="hidden md:flex flex-1 w-full justify-center lg:justify-end">
-					<HeroVideo />
+					<HeroVisual />
 				</div>
 			</div>
 
-			<div className="sm:mt-8 max-w-[1024px] mx-auto w-full relative z-20 px-4">
+			<div className="sm:mt-8 max-w-5xl mx-auto w-full relative z-20 px-4">
 				<VideoDemo />
 			</div>
 		</main>
diff --git a/apps/www/app/docs/layout.tsx b/apps/www/app/docs/layout.tsx
index 9a836243a..62dd6025a 100644
--- a/apps/www/app/docs/layout.tsx
+++ b/apps/www/app/docs/layout.tsx
@@ -1,3 +1,4 @@
+import { SiGithub } from "@icons-pack/react-simple-icons";
 import { DocsLayout } from "fumadocs-ui/layouts/docs";
 import type { ReactNode } from "react";
 import { baseOptions } from "~/app/layout.config";
@@ -12,6 +13,15 @@ export default function Layout({ children }: { children: ReactNode }) {
 				banner: <InstallButton />,
 			}}
 			{...baseOptions}
+			links={[
+				{
+					text: "GitHub",
+					url: "https://github.com/yamcodes/arkenv",
+					active: "none",
+					type: "icon",
+					icon: <SiGithub aria-label="GitHub" />,
+				},
+			]}
 		>
 			{children}
 		</DocsLayout>
diff --git a/apps/www/app/globals.css b/apps/www/app/globals.css
index c1b9ae84e..a0921e594 100644
--- a/apps/www/app/globals.css
+++ b/apps/www/app/globals.css
@@ -27,3 +27,16 @@ button[data-search-full] {
 	background-color: var(--background);
 	background-image: none !important;
 }
+
+@keyframes spin-slow {
+	from {
+		transform: rotate(0deg);
+	}
+	to {
+		transform: rotate(360deg);
+	}
+}
+
+.animate-spin-slow {
+	animation: spin-slow 60s linear infinite;
+}
diff --git a/apps/www/app/layout.config.tsx b/apps/www/app/layout.config.tsx
index 55eebb8a1..d220c6e0f 100644
--- a/apps/www/app/layout.config.tsx
+++ b/apps/www/app/layout.config.tsx
@@ -12,5 +12,4 @@ export const baseOptions: BaseLayoutProps = {
 	nav: {
 		title: <Logo />,
 	},
-	githubUrl: process.env.NEXT_PUBLIC_GITHUB_URL,
 };
diff --git a/apps/www/components/hero-video.tsx b/apps/www/components/hero-video.tsx
deleted file mode 100644
index 3f4cc129b..000000000
--- a/apps/www/components/hero-video.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-"use client";
-
-import { useTheme } from "next-themes";
-import { useEffect, useState } from "react";
-
-export function HeroVideo() {
-	const { resolvedTheme } = useTheme();
-	const [mounted, setMounted] = useState(false);
-
-	useEffect(() => {
-		setMounted(true);
-	}, []);
-
-	if (!mounted) {
-		return <div className="w-full aspect-4/3" />;
-	}
-
-	return (
-		<div className="relative w-full max-w-[500px] mx-auto lg:ml-auto lg:-mr-22 lg:mt-8 aspect-4/3">
-			<video
-				src="/assets/3d-light.mp4"
-				autoPlay
-				loop
-				muted
-				playsInline
-				aria-hidden="true"
-				tabIndex={-1}
-				className={`absolute inset-0 w-full h-full object-contain ${
-					resolvedTheme === "dark" ? "opacity-0" : "opacity-100"
-				}`}
-			/>
-			<video
-				src="/assets/3d-dark.mp4"
-				autoPlay
-				loop
-				muted
-				playsInline
-				aria-hidden="true"
-				tabIndex={-1}
-				className={`absolute inset-0 w-full h-full object-contain ${
-					resolvedTheme === "dark" ? "opacity-100" : "opacity-0"
-				}`}
-			/>
-		</div>
-	);
-}
diff --git a/apps/www/components/hero-visual.tsx b/apps/www/components/hero-visual.tsx
new file mode 100644
index 000000000..4c28676d0
--- /dev/null
+++ b/apps/www/components/hero-visual.tsx
@@ -0,0 +1,178 @@
+"use client";
+
+import { useTheme } from "next-themes";
+import { useEffect, useRef, useState } from "react";
+
+/**
+ * HeroVisual component creates an interactive 2.5D visual using CSS transforms.
+ * It features a mouse-following tilt effect and theme-aware code highlights.
+ */
+export function HeroVisual() {
+	const { resolvedTheme } = useTheme();
+	const [mounted, setMounted] = useState(false);
+	const containerRef = useRef<HTMLDivElement>(null);
+	const [mousePos, setMousePos] = useState({ x: 0, y: 0 });
+
+	useEffect(() => {
+		setMounted(true);
+	}, []);
+
+	const handleMouseMove = (e: React.MouseEvent) => {
+		if (!containerRef.current) return;
+		const rect = containerRef.current.getBoundingClientRect();
+		const x = (e.clientX - rect.left) / rect.width - 0.5;
+		const y = (e.clientY - rect.top) / rect.height - 0.5;
+		setMousePos({ x, y });
+	};
+
+	const handleMouseLeave = () => {
+		setMousePos({ x: 0, y: 0 });
+	};
+
+	if (!mounted) {
+		return <div className="w-full aspect-square" />;
+	}
+
+	const syntaxColors = {
+		primary: resolvedTheme === "dark" ? "text-white" : "text-blue-950",
+		secondary: resolvedTheme === "dark" ? "text-white" : "text-blue-800",
+		punctuation:
+			resolvedTheme === "dark" ? "text-yellow-200" : "text-yellow-900",
+	};
+
+	return (
+		<div
+			ref={containerRef}
+			onMouseMove={handleMouseMove}
+			onMouseLeave={handleMouseLeave}
+			role="img"
+			aria-label="Interactive 2.5D visual representing ArkEnv's typesafe environment variables"
+			className="relative w-full max-w-125 mx-auto lg:ml-auto lg:mt-8 aspect-square flex items-center justify-center perspective-[1000px] group select-none"
+		>
+			{/* Ambient Glow Background */}
+			<div
+				className="absolute inset-0 bg-blue-500/10 dark:bg-blue-400/5 rounded-full blur-[80px] transform-gpu transition-transform duration-500"
+				style={{
+					transform: `translate3d(${mousePos.x * 40}px, ${mousePos.y * 40}px, 0)`,
+				}}
+			/>
+
+			{/* The 2.5D Platform / Card */}
+			<div
+				className="relative w-75 h-75 transition-transform duration-300 ease-out transform-gpu"
+				style={{
+					transformStyle: "preserve-3d",
+					transform: `rotateY(${mousePos.x * 20}deg) rotateX(${-mousePos.y * 20}deg)`,
+				}}
+			>
+				{/* Glass Base Layer */}
+				<div
+					className="absolute inset-0 bg-white/5 dark:bg-white/5 border border-white/20 dark:border-white/10 rounded-3xl backdrop-blur-md shadow-2xl"
+					style={{ transform: "translateZ(0px)" }}
+				/>
+
+				{/* Floating SVG Icon */}
+				<div
+					className="absolute inset-0 flex items-center justify-center transform-gpu"
+					style={{ transform: "translateZ(60px)" }}
+				>
+					<svg
+						width="160"
+						height="160"
+						viewBox="0 0 12 12"
+						className="drop-shadow-[0_20px_40px_rgba(59,130,246,0.3)] filter brightness-110 animate-spin-slow origin-center"
+						xmlns="http://www.w3.org/2000/svg"
+						role="img"
+						aria-labelledby="hero-icon-title"
+					>
+						<title id="hero-icon-title">ArkEnv Icon</title>
+						<path
+							className="stroke-blue-500 dark:stroke-blue-400"
+							style={{
+								fill: "none",
+								strokeWidth: ".9",
+								strokeLinecap: "round",
+								strokeLinejoin: "round",
+								strokeMiterlimit: "10",
+							}}
+							d="M8.5 6c0-1.379-1.121-2.5-2.5-2.5A2.502 2.502 0 0 0 3.5 6c0 1.379 1.121 2.5 2.5 2.5S8.5 7.379 8.5 6ZM6 11V8.5M1 6h2.5m5 0H11M6 3.5V1M2.464 2.464l1.768 1.768m3.536 3.536 1.768 1.768m-7.072 0 1.768-1.768m3.536-3.536 1.768-1.768"
+						/>
+						<circle
+							cx="6"
+							cy="6"
+							r="0.9"
+							className="fill-blue-500 dark:fill-blue-400 animate-pulse"
+						/>
+					</svg>
+				</div>
+
+				{/* Floating Accents (Code Samples / Particles) */}
+				<div
+					className="absolute -top-4 -right-4 bg-white/20 dark:bg-black/40 border border-white/20 dark:border-white/10 rounded-lg p-3 backdrop-blur-xl shadow-xl transform-gpu transition-all duration-300 group-hover:translate-x-4 opacity-80 group-hover:opacity-100"
+					style={{
+						transform: "translateZ(90px) rotate(-5deg)",
+					}}
+				>
+					<div className="text-[10px] font-mono leading-tight">
+						<span className="text-yellow-900 dark:text-yellow-200">const</span>{" "}
+						<span className="text-blue-900 dark:text-white">env</span>{" "}
+						<span className="text-yellow-900 dark:text-yellow-200">=</span>{" "}
+						<span className="text-blue-800 dark:text-blue-200 italic">
+							arkenv
+						</span>
+						<span className="text-yellow-900 dark:text-yellow-100">(</span>
+						<span className="text-yellow-900 dark:text-yellow-200">{"{"}</span>
+						<br />
+						&nbsp;&nbsp;
+						<span className="text-blue-950 dark:text-white">PORT:</span>{" "}
+						<span className="text-yellow-900 dark:text-yellow-200">"</span>
+						<span className="text-blue-900 dark:text-blue-300">number</span>
+						<span className="text-yellow-900 dark:text-yellow-200">"</span>
+						<br />
+						<span className="text-yellow-900 dark:text-yellow-200">{"}"}</span>
+						<span className="text-yellow-900 dark:text-yellow-100">)</span>
+					</div>
+				</div>
+
+				<div
+					className="absolute -bottom-10 -left-12 transform-gpu transition-all duration-300 group-hover:-translate-x-4 group-hover:-translate-y-2 opacity-90 group-hover:opacity-100"
+					style={{ transform: "translateZ(40px) rotate(4deg)" }}
+				>
+					{/* The 'Code' line */}
+					<div className="bg-white/20 dark:bg-black/40 border border-white/20 dark:border-white/10 rounded-md px-3 py-1.5 backdrop-blur-xl shadow-xl font-mono text-[11px]">
+						<span className="text-blue-950 dark:text-white">env</span>
+						<span className="text-yellow-900 dark:text-yellow-200">.</span>
+						<span className="text-yellow-900 dark:text-yellow-100">PORT</span>
+					</div>
+
+					{/* The Tooltip popover */}
+					<div
+						className="absolute bottom-full left-4 mb-2 border rounded-sm p-2 shadow-2xl transition-all duration-500 transform-gpu group-hover:scale-110 group-hover:-translate-y-1 bg-white dark:bg-[#0b1120] border-black/10 dark:border-white/10"
+						style={{
+							transform: "translateZ(30px)",
+						}}
+					>
+						<div className="flex flex-col gap-0.5 whitespace-nowrap">
+							<div className="text-[10px] font-mono leading-none">
+								<span className={syntaxColors.primary}>
+									(<span className={syntaxColors.secondary}>property</span>)
+								</span>{" "}
+								<span className={syntaxColors.primary}>PORT</span>
+								<span className={syntaxColors.punctuation}>:</span>{" "}
+								<span className={syntaxColors.secondary}>number</span>
+							</div>
+						</div>
+						{/* Small arrow */}
+						<div className="absolute top-full left-4 w-2 h-2 rotate-45 -translate-y-1 border-r border-b bg-white dark:bg-[#0b1120] border-black/10 dark:border-white/10" />
+					</div>
+				</div>
+			</div>
+
+			{/* Ground Reflection / Shadow */}
+			<div
+				className="absolute bottom-10 left-1/2 -translate-x-1/2 w-48 h-12 bg-black/20 dark:bg-black/60 blur-3xl opacity-50 rounded-full"
+				style={{ transform: "rotateX(90deg) translateZ(-150px)" }}
+			/>
+		</div>
+	);
+}
diff --git a/apps/www/components/page/video-demo.tsx b/apps/www/components/page/video-demo.tsx
index 8333cec71..9c81df05f 100644
--- a/apps/www/components/page/video-demo.tsx
+++ b/apps/www/components/page/video-demo.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { ArrowUpRight } from "lucide-react";
 import Image from "next/image";
 import BackgroundVideo from "next-video/background-video";
 import { useState } from "react";
@@ -12,6 +13,10 @@ const HEIGHT = 1672;
 const getAspectRatio = (width: number, height: number) =>
 	`${width} / ${height}`;
 
+/**
+ * VideoDemo component displays an interactive video demonstration with a browser-style frame.
+ * Clicking the video opens the demo in StackBlitz. Falls back to a GIF if video fails to load.
+ */
 export function VideoDemo() {
 	const [videoError, setVideoError] = useState(false);
 
@@ -26,36 +31,57 @@ export function VideoDemo() {
 	};
 
 	return (
-		<div className="relative mb-4 w-full mx-auto">
-			{/* Main video container with aspect ratio */}
+		<div className="relative mb-4 w-full mx-auto max-w-4xl pt-8">
 			<button
 				type="button"
-				className="relative rounded-lg overflow-hidden border border-fd-border bg-black/5 dark:bg-black/20 cursor-pointer m-0 p-0 w-full transition-all duration-200 shadow-[0_0_30px_rgba(96,165,250,0.3)] hover:shadow-[0_0_50px_rgba(96,165,250,0.6)] dark:shadow-[0_0_80px_rgba(96,165,250,0.15)] dark:hover:shadow-[0_0_120px_rgba(96,165,250,0.4)]"
+				className="relative rounded-xl overflow-hidden border border-fd-border/50 bg-black/10 dark:bg-black/40 shadow-2xl backdrop-blur-sm transition-all duration-300 hover:scale-[1.01] group w-full text-left outline-none cursor-pointer flex flex-col"
 				onClick={handleVideoClick}
 				aria-label="Open interactive demo in a new tab"
-				style={{ aspectRatio: getAspectRatio(WIDTH, HEIGHT) }}
+				style={{ aspectRatio: getAspectRatio(WIDTH, HEIGHT + 88) }} // +88 to account for header height approx
 			>
-				{videoError ? (
-					<Image
-						src="/assets/demo.gif"
-						alt="ArkEnv Demo"
-						fill
-						className="object-contain"
-						sizes="100vw"
-						unoptimized
-					/>
-				) : (
-					<BackgroundVideo
-						src={demo}
-						poster="/assets/demo.png"
-						onError={handleVideoError}
-						autoPlay
-						loop
-						muted
-						playsInline
-						className="absolute inset-0 w-full h-full object-contain"
-					/>
-				)}
+				{/* Header / Title Bar */}
+				<div className="flex items-center px-4 py-2 bg-white/5 border-b border-fd-border/50">
+					<div className="flex gap-1.5">
+						<div className="w-3 h-3 rounded-full bg-[#ff5f56]" />
+						<div className="w-3 h-3 rounded-full bg-[#ffbd2e]" />
+						<div className="w-3 h-3 rounded-full bg-[#27c93f]" />
+					</div>
+					<div className="mx-auto text-xs font-mono text-gray-600 dark:text-gray-300 select-none">
+						basic — index.ts
+					</div>
+				</div>
+
+				{/* Video Container */}
+				<div className="relative w-full flex-1">
+					{videoError ? (
+						<Image
+							src="/assets/demo.gif"
+							alt="ArkEnv Demo"
+							fill
+							className="absolute inset-0 w-full h-full object-contain"
+							sizes="100vw"
+							unoptimized
+						/>
+					) : (
+						<BackgroundVideo
+							src={demo}
+							poster="/assets/demo.png"
+							onError={handleVideoError}
+							autoPlay
+							loop
+							muted
+							playsInline
+							className="absolute inset-0 w-full h-full object-contain"
+						/>
+					)}
+					{/* Interactive Overlay Hint */}
+					<div className="absolute inset-0 bg-blue-500/0 group-hover:bg-blue-500/5 transition-colors duration-300 flex items-center justify-center">
+						<div className="bg-white/90 dark:bg-black/90 text-black dark:text-white px-4 py-2 rounded-full text-sm font-medium opacity-0 group-hover:opacity-100 transform translate-y-2 group-hover:translate-y-0 transition-all duration-300 shadow-lg flex items-center gap-2">
+							<span>Open Interactive Playground</span>
+							<ArrowUpRight className="w-4 h-4 opacity-70" />
+						</div>
+					</div>
+				</div>
 			</button>
 		</div>
 	);
diff --git a/apps/www/public/assets/3d-dark.mp4 b/apps/www/public/assets/3d-dark.mp4
deleted file mode 100644
index 348fe396c..000000000
Binary files a/apps/www/public/assets/3d-dark.mp4 and /dev/null differ
diff --git a/apps/www/public/assets/3d-light.mp4 b/apps/www/public/assets/3d-light.mp4
deleted file mode 100644
index 46b6402b0..000000000
Binary files a/apps/www/public/assets/3d-light.mp4 and /dev/null differ
diff --git a/examples/with-bun-react/bun.lock b/examples/with-bun-react/bun.lock
index 9d956549f..47047dc64 100644
--- a/examples/with-bun-react/bun.lock
+++ b/examples/with-bun-react/bun.lock
@@ -6,7 +6,7 @@
       "name": "bun-react-template",
       "dependencies": {
         "@arkenv/bun-plugin": "^0.0.5",
-        "arkenv": "^0.7.8",
+        "arkenv": "^0.8.0",
         "arktype": "^2.1.29",
         "react": "^19.2.3",
         "react-dom": "^19.2.3",
@@ -60,7 +60,7 @@
 
     "@types/react-dom": ["@types/react-dom@19.2.3", "", { "peerDependencies": { "@types/react": "^19.2.0" } }, "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ=="],
 
-    "arkenv": ["arkenv@0.7.8", "", { "peerDependencies": { "arktype": "^2.1.22" } }, "sha512-Scb3jaoUSUEcLYk3pR5Hy2G4fLXGzzTwCUPZcRbbGl5Yu60gDRRpOBPPPF+uG4WdeixTNUDIpxQp+QPpQdWuAQ=="],
+    "arkenv": ["arkenv@0.8.0", "", { "peerDependencies": { "arktype": "^2.1.22" } }, "sha512-bfbM0euGgoJW4SbuzfB3wCHZr6tsZXl89tECwlEk9S7qyniob6xr/Eic8PGgsT/RqWuXCmpZI6Z+iNqOhNM7RQ=="],
 
     "arkregex": ["arkregex@0.0.5", "", { "dependencies": { "@ark/util": "0.56.0" } }, "sha512-ncYjBdLlh5/QnVsAA8De16Tc9EqmYM7y/WU9j+236KcyYNUXogpz3sC4ATIZYzzLxwI+0sEOaQLEmLmRleaEXw=="],
 
diff --git a/examples/with-bun/bun.lock b/examples/with-bun/bun.lock
index 1d2f8f27d..c2c29b269 100644
--- a/examples/with-bun/bun.lock
+++ b/examples/with-bun/bun.lock
@@ -5,7 +5,7 @@
     "": {
       "name": "arkenv-example-with-bun",
       "dependencies": {
-        "arkenv": "^0.7.8",
+        "arkenv": "^0.8.0",
         "arktype": "^2.1.29",
       },
       "devDependencies": {
@@ -28,7 +28,7 @@
 
     "@types/node": ["@types/node@24.10.1", "", { "dependencies": { "undici-types": "~7.16.0" } }, "sha512-GNWcUTRBgIRJD5zj+Tq0fKOJ5XZajIiBroOF0yvj2bSU1WvNdYS/dn9UxwsujGW4JX06dnHyjV2y9rRaybH0iQ=="],
 
-    "arkenv": ["arkenv@0.7.8", "", { "peerDependencies": { "arktype": "^2.1.22" } }, "sha512-Scb3jaoUSUEcLYk3pR5Hy2G4fLXGzzTwCUPZcRbbGl5Yu60gDRRpOBPPPF+uG4WdeixTNUDIpxQp+QPpQdWuAQ=="],
+    "arkenv": ["arkenv@0.8.0", "", { "peerDependencies": { "arktype": "^2.1.22" } }, "sha512-bfbM0euGgoJW4SbuzfB3wCHZr6tsZXl89tECwlEk9S7qyniob6xr/Eic8PGgsT/RqWuXCmpZI6Z+iNqOhNM7RQ=="],
 
     "arkregex": ["arkregex@0.0.5", "", { "dependencies": { "@ark/util": "0.56.0" } }, "sha512-ncYjBdLlh5/QnVsAA8De16Tc9EqmYM7y/WU9j+236KcyYNUXogpz3sC4ATIZYzzLxwI+0sEOaQLEmLmRleaEXw=="],