feat(docs): redesign home page as an animated dark landing page

CLAUDE.md

@@ -842,22 +842,31 @@ bun run build
 
 ### @getvision/server
 
-**Purpose:** Meta-framework built on Hono with built-in observability
+**Purpose:** Meta-framework built on Elysia with built-in observability
 
 **Key features:**
-- Service builder pattern
-- Event bus (BullMQ)
-- Cron jobs (BullMQ repeatable jobs)
-- Built-in Vision integration
+- Module pattern: `createVision()` + `createModule({ prefix }).use(defineEvents(...)).get(...)`
+- Per-request context helpers: `span`, `addContext`, `emit`, `traceId`
+- Standard Schema validation (Zod / Valibot / TypeBox via re-exported `t`)
+- Type-safe pub/sub events (`defineEvents`) with trace context propagation
+- Cron jobs via BullMQ repeatable jobs (`defineCrons`)
+- Per-endpoint rate limiting (`rateLimit`)
+- OTLP trace export (`OtlpTraceExporter`)
+- Eden Treaty ready — `export type AppType = typeof app`
+- Graceful shutdown — `ready(app)` / `close(app)` (also `app.close()`, auto-registered with `bun --hot`)
+
+**Public exports** (from `src/vision-app.ts`):
+`createVision`, `createModule`, `defineEvents`, `defineCrons`, `rateLimit`, `onEvent`, `onEvents`, `MemoryRateLimitStore`, `getVisionContext`, `ready`, `close`, `EventBus`, `t` (Elysia/TypeBox).
 
 **Dependencies:**
-- `hono` - Base framework
-- `@hono/node-server` - Node.js adapter
+- `elysia` - Base framework (Bun-first)
 - `bullmq` - Job queue and event bus
 - `ioredis` - Redis client
-- `zod` - Validation (required for server)
+- `zod` - Validation (commonly used; also supports Valibot and TypeBox via Standard Schema)
 
-**Note:** Exports TypeScript source (`exports: "./src/index.ts"`), not compiled
+**Note:** Exports TypeScript source (`exports: "./src/index.ts"`), not compiled.
+
+**Migration:** The pre-1.0 Hono-based `Vision` class and `app.service(...).endpoint(...)` ServiceBuilder pattern are gone. See `apps/docs/content/docs/server/migration.mdx` for the old → new mapping.
 
 ### @getvision/adapter-express
 

README.md

@@ -1,4 +1,7 @@
-# Vision 🔮
+<div align="center">
+  <img src="apps/docs/public/logo.svg" width="76" alt="Vision logo" />
+  <h1>Vision</h1>
+</div>
 
 [![npm version](https://img.shields.io/npm/v/@getvision/server.svg)](https://www.npmjs.com/package/@getvision/server)
 [![npm downloads](https://img.shields.io/npm/dm/@getvision/server.svg)](https://www.npmjs.com/package/@getvision/server)

apps/docs/app/(home)/_components/beams-bg.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import dynamic from "next/dynamic";
+import { useEffect, useState } from "react";
+
+// Heavy WebGL (three.js) — load it lazily and only on the client.
+const Beams = dynamic(() => import("./beams/Beams"), { ssr: false });
+
+/**
+ * Renders the animated Beams background, unless the user has asked to reduce
+ * motion — in which case the hero's static background shows through instead.
+ */
+export function BeamsBg() {
+  const [show, setShow] = useState(false);
+  const [ready, setReady] = useState(false);
+
+  useEffect(() => {
+    const motionOk = window.matchMedia("(prefers-reduced-motion: reduce)");
+    const update = () => setShow(!motionOk.matches);
+    update();
+    motionOk.addEventListener("change", update);
+    return () => motionOk.removeEventListener("change", update);
+  }, []);
+
+  useEffect(() => {
+    if (!show) {
+      setReady(false);
+      return;
+    }
+    // let the WebGL canvas paint before we fade it in over the static bg
+    const t = setTimeout(() => setReady(true), 350);
+    return () => clearTimeout(t);
+  }, [show]);
+
+  if (!show) return null;
+
+  return (
+    <div
+      className={`absolute inset-0 -z-10 block transition-opacity duration-1000 ease-out ${
+        ready ? "opacity-100" : "opacity-0"
+      }`}
+    >
+      <Beams
+        beamWidth={2}
+        beamHeight={18}
+        beamNumber={14}
+        lightColor="#34d399"
+        speed={2}
+        noiseIntensity={1.6}
+        scale={0.2}
+        rotation={28}
+      />
+      {/* fade the beams into the page background at the bottom */}
+      <div className="absolute inset-x-0 bottom-0 h-48 bg-gradient-to-b from-transparent to-fd-background" />
+    </div>
+  );
+}

apps/docs/app/(home)/_components/beams/Beams.css

@@ -0,0 +1,5 @@
+.beams-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}