From 635670dd3eebf2c81c24f2d727e60060e4afc3b8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?V=C3=ADt=20Bokisch?= <vit@bokisch.cz>
Date: Thu, 21 May 2026 13:58:46 +0200
Subject: [PATCH] docs: rebuild landing page with brand system + objective copy
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replaces the home page with a new "Composable Engine" design — stacked-triangle mark, Geist + Geist Mono, electric chartreuse accent (#C8FF3A), warm ink/paper neutrals — adapted for Fumadocs's existing dark/light class strategy.

All marketing claims swapped for verified measurements from the monorepo on 2026-05-21:

- "26 packages" → 15 packages (actual `packages/*` count)
- "3 KB CSS engine" → 4.82 KB gzipped (actual styler bundle, also used in /docs/styler)
- "122 motion presets" → 123 (actual exported consts in kinetic-presets)
- 28 hooks, 170+ CSS prop descriptors, 5 element primitives — verified against source
- Dropped "★ 1.2k on GitHub" (unverified), "Ship in a day", "up and running in minutes"

Implementation:

- `src/app/(home)/page.tsx` — full rewrite: hero (mark + orbit visual + objective stats), package ticker, 6-feature grid (3×2), demo split (copy + code), 16-card ecosystem grid, install CTA with terminal mock, footer
- `src/app/global.css` — brand tokens scoped to `.vl-landing` so docs UI is unaffected; light mode is the default (`:root`), `.dark` flips ink + accent
- `src/components/landing/Mark.tsx` — Mark + Lockup React components (solid / outline / minimal variants)
- `src/components/landing/Counter.tsx` — renders final value statically (animated version was timing-fragile in headless environments and occasionally captured visitors mid-animation showing wrong numbers)
- `src/components/landing/Reveal.tsx` — additive fade-in; SSR/no-JS renders content visible, only the client effect arms the hidden→reveal transition; respects prefers-reduced-motion
- `src/components/landing/Ticker.tsx` — marquee of all 15 published package slugs
- `src/lib/layout.shared.tsx` — fumadocs nav title now uses the Lockup component
- `src/app/icon.svg` + `apple-icon.svg` — new triangle mark as Next.js app-router favicon (chartreuse for visibility on both light and dark tab backgrounds; apple icon has dark rounded background)

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 src/app/(home)/page.tsx            | 779 +++++++++++++----------
 src/app/apple-icon.svg             |   8 +
 src/app/global.css                 | 971 +++++++++++++++++++++++++++--
 src/app/icon.svg                   |   5 +
 src/components/landing/Counter.tsx |  19 +
 src/components/landing/Mark.tsx    | 100 +++
 src/components/landing/Reveal.tsx  |  74 +++
 src/components/landing/Ticker.tsx  |  36 ++
 src/lib/layout.shared.tsx          |   3 +-
 9 files changed, 1610 insertions(+), 385 deletions(-)
 create mode 100644 src/app/apple-icon.svg
 create mode 100644 src/app/icon.svg
 create mode 100644 src/components/landing/Counter.tsx
 create mode 100644 src/components/landing/Mark.tsx
 create mode 100644 src/components/landing/Reveal.tsx
 create mode 100644 src/components/landing/Ticker.tsx

diff --git a/src/app/(home)/page.tsx b/src/app/(home)/page.tsx
index a7d7b91..44d4bf5 100644
--- a/src/app/(home)/page.tsx
+++ b/src/app/(home)/page.tsx
@@ -1,409 +1,532 @@
 import Link from 'next/link'
-import { Card, Cards } from 'fumadocs-ui/components/card'
+import { Counter } from '@/components/landing/Counter'
+import { Lockup, Mark } from '@/components/landing/Mark'
+import { Reveal } from '@/components/landing/Reveal'
+import { Ticker } from '@/components/landing/Ticker'
 
-const uiPackages = [
-  {
-    title: 'Core',
-    description:
-      'Configuration singleton, CSS engine connector, and utility functions.',
-    href: '/docs/core',
-  },
-  {
-    title: 'Styler',
-    description:
-      'Lightweight CSS-in-JS engine (~3KB gzipped) with static/dynamic splitting.',
-    href: '/docs/styler',
-  },
-  {
-    title: 'Attrs',
-    description:
-      'Immutable chainable default-props factory for React components.',
-    href: '/docs/attrs',
-  },
-  {
-    title: 'Elements',
-    description: 'Core UI primitives — Element, Text, List, Overlay, Portal.',
-    href: '/docs/elements',
-  },
-  {
-    title: 'Rocketstyle',
-    description:
-      'Dimension-based styling with theming, pseudo-states, and light/dark mode.',
-    href: '/docs/rocketstyle',
-  },
-  {
-    title: 'Unistyle',
-    description:
-      '170+ CSS property mappings with responsive breakpoints and unit conversion.',
-    href: '/docs/unistyle',
-  },
+// Objective inventory — verified against the monorepo on 2026-05-21:
+//   15 packages (packages/* count)
+//   styler bundle: 4.82 KB gzipped (size-limit budget 12 KB; actual measured)
+//   28 React hooks (packages/hooks/src/use*.ts, deduped against .native variants)
+//   123 kinetic presets (exported consts in kinetic-presets/src/presets.ts)
+//   170+ CSS prop descriptors (packages/unistyle/src/styles/styles/propertyMap.ts)
+//   5 element primitives: Element, Text, List, Overlay, Portal
+const STATS = [
+  { n: 15, lbl: 'Packages', suffix: '' },
+  { n: 4.82, lbl: 'KB Styler (gzip)', suffix: '', float: true },
+  { n: 170, lbl: 'CSS props', suffix: '+' },
+  { n: 123, lbl: 'Motion presets', suffix: '' },
+]
+
+const FEATURES = [
   {
-    title: 'Coolgrid',
-    description:
-      'Flexible responsive grid system with Container, Row, and Col.',
-    href: '/docs/coolgrid',
+    glyph: '{ }',
+    title: 'Type-safe end to end',
+    meta: '01 · core',
+    body: 'Generic inference on dimensions, themes, and prop shapes. Iterator/List narrow per call-site mode; rocketstyle preserves dimension types through chain methods.',
   },
   {
-    title: 'Hooks',
-    description:
-      '28 React hooks for state, DOM, events, timing, theming, and accessibility.',
-    href: '/docs/hooks',
+    glyph: '▽▽▽',
+    title: 'Composable by design',
+    meta: '02 · attrs',
+    body: 'Chainable factories — .attrs(), .theme(), .styles(), .compose(). priorityAttrs → attrs → explicit props (last wins). Marker-based detection (IS_ATTRS).',
   },
   {
-    title: 'Connectors',
-    description:
-      'CSS engine adapters — switch between Styler, styled-components, or Emotion.',
-    href: '/docs/connectors',
+    glyph: '⇌',
+    title: 'Swap the engine',
+    meta: '03 · connectors',
+    body: 'Same component code runs on built-in Styler (4.82 KB), styled-components, or Emotion via a single connector swap. RN target via connector-native.',
   },
   {
-    title: 'Kinetic',
-    description:
-      'Declarative enter/leave animations — Transition, Collapse, Stagger, and TransitionGroup.',
-    href: '/docs/kinetic',
+    glyph: '[ ]',
+    title: 'Responsive built-in',
+    meta: '04 · coolgrid',
+    body: 'Layout props accept scalars, arrays, or breakpoint objects. Mobile-first via the unistyle responsive resolver — no media-query boilerplate.',
   },
   {
-    title: 'Kinetic Presets',
-    description:
-      '122 animation presets, 5 factories, and composition utilities for Kinetic.',
-    href: '/docs/kinetic-presets',
+    glyph: '( )',
+    title: 'Batteries included',
+    meta: '05 · tools-*',
+    body: 'Shared rolldown bundler, vitest config (90% coverage default), biome lint, and storybook 10 preset — published as separate @vitus-labs/tools-* packages.',
   },
   {
-    title: 'Rocketstories',
-    description:
-      'Auto-generated Storybook stories from rocketstyle components.',
-    href: '/docs/rocketstories',
+    glyph: '//',
+    title: '4.82 KB CSS engine',
+    meta: '06 · styler',
+    body: 'Static/dynamic split, React 19 <style precedence> SSR, useInsertionEffect injection, FNV-1a class hash, CI-gated competitive perf bench against Emotion + styled-components.',
   },
 ]
 
-const toolsPackages = [
+const ECO = [
   {
-    title: 'Tools Core',
-    description:
-      'Cascading config loader, file discovery, and package metadata.',
-    href: '/docs/tools-core',
+    n: 'core',
+    t: 'Core',
+    d: 'Configuration singleton, CSS engine connector, utilities.',
   },
   {
-    title: 'Tools Rolldown',
-    description:
-      'Rust-based bundler for library packages with DTS generation.',
-    href: '/docs/tools-rolldown',
+    n: 'styler',
+    t: 'Styler',
+    d: '4.82 KB gzipped CSS-in-JS engine, SSR via React 19 <style precedence>.',
   },
+  { n: 'attrs', t: 'Attrs', d: 'Immutable chainable default-props factory.' },
   {
-    title: 'Tools Rollup',
-    description: 'Rollup-based build tool — legacy alternative to Rolldown.',
-    href: '/docs/tools-rollup',
+    n: 'elements',
+    t: 'Elements',
+    d: 'Five UI primitives — Element, Text, List, Overlay, Portal.',
   },
   {
-    title: 'Tools Vitest',
-    description:
-      'Shared Vitest config factory with sensible defaults and 90% coverage.',
-    href: '/docs/tools-vitest',
+    n: 'rocketstyle',
+    t: 'Rocketstyle',
+    d: 'Dimension-based styling with theming and per-mode narrowing.',
   },
   {
-    title: 'Tools Storybook',
-    description:
-      'Preconfigured Storybook 10 with auto-discovery and rocketstories.',
-    href: '/docs/tools-storybook',
+    n: 'unistyle',
+    t: 'Unistyle',
+    d: '170+ CSS prop descriptors with responsive breakpoints.',
   },
   {
-    title: 'Tools TypeScript',
-    description: 'Shared tsconfig presets for libraries and Next.js apps.',
-    href: '/docs/tools-typescript',
+    n: 'coolgrid',
+    t: 'Coolgrid',
+    d: 'Responsive grid — Container, Row, Col (web + native).',
   },
+  { n: 'hooks', t: 'Hooks', d: '28 React hooks; .native overrides where DOM-bound.' },
   {
-    title: 'Tools Lint',
-    description: 'Shared Biome config for formatting and linting.',
-    href: '/docs/tools-lint',
+    n: 'connector-styler',
+    t: 'Connector · Styler',
+    d: 'Adapter (~300 B) for the built-in engine.',
   },
   {
-    title: 'Tools Next.js',
-    description: 'Next.js config wrapper with security headers.',
-    href: '/docs/tools-nextjs',
+    n: 'connector-emotion',
+    t: 'Connector · Emotion',
+    d: 'Adapter for Emotion if you prefer their engine.',
   },
   {
-    title: 'Tools Next.js Images',
-    description:
-      'Image optimization plugin — WebP, LQIP, responsive, SVG sprites.',
-    href: '/docs/tools-nextjs-images',
+    n: 'connector-styled-components',
+    t: 'Connector · SC',
+    d: 'Adapter for styled-components.',
   },
   {
-    title: 'Tools Atlas',
-    description:
-      'Dependency graph visualizer and monorepo health analyzer.',
-    href: '/docs/tools-atlas',
+    n: 'connector-native',
+    t: 'Connector · Native',
+    d: 'React Native styled() + CSS-string → RN style parser.',
   },
   {
-    title: 'Tools Favicon',
-    description: 'Multi-platform favicon and PWA manifest generator.',
-    href: '/docs/tools-favicon',
-  },
-]
-
-const features = [
-  {
-    icon: '{}',
-    title: 'Type-Safe End to End',
-    description:
-      'Generic inference, dimension types, strict prop validation. TypeScript is a first-class citizen, not an afterthought.',
-  },
-  {
-    icon: '<>',
-    title: 'Composable by Design',
-    description:
-      'Chainable APIs everywhere — .attrs(), .theme(), .styles(). Build complex components from small, reusable pieces.',
-  },
-  {
-    icon: '><',
-    title: 'Swap Your Engine',
-    description:
-      'Write components once, run with Styler, styled-components, or Emotion. Switch CSS engines without touching component code.',
-  },
-  {
-    icon: '[]',
-    title: 'Responsive Built In',
-    description:
-      'Every layout prop accepts scalars, arrays, or breakpoint objects. Mobile-first responsive design without media query boilerplate.',
+    n: 'kinetic',
+    t: 'Kinetic',
+    d: 'Declarative enter/leave + TransitionGroup; GPU-composited.',
   },
   {
-    icon: '()',
-    title: 'Batteries Included',
-    description:
-      'Build, test, lint, bundle, analyze — shared configs and tooling so every package in your monorepo stays consistent.',
+    n: 'kinetic-presets',
+    t: 'Kinetic Presets',
+    d: '123 animation presets, 5 factories, composition utilities.',
   },
   {
-    icon: '//',
-    title: '3KB CSS Engine',
-    description:
-      'Custom Styler engine with static/dynamic splitting, concurrent-mode safe injection, and deterministic class hashing.',
+    n: 'rocketstories',
+    t: 'Rocketstories',
+    d: 'Auto-generated Storybook stories from rocketstyle components.',
   },
 ]
 
-const codeExample = `import { init } from '@vitus-labs/core'
-import connector from '@vitus-labs/connector-styler'
+const SAMPLE = `import { init } from '@vitus-labs/core'
+import * as connector from '@vitus-labs/connector-styler'
 import { Element, Text, List } from '@vitus-labs/elements'
 
 // One-line setup
 init({ ...connector, component: 'div', textComponent: 'span' })
 
-// Start building
 function FeatureCard({ icon, title, items }) {
   return (
     <Element tag="article" direction="rows" gap={16} padding={24}>
       <Element beforeContent={icon} gap={8} alignY="center">
         <Text tag="h3">{title}</Text>
       </Element>
-      <List
-        component={({ children }) => <Text>{children}</Text>}
-        data={items}
-        valueName="children"
-        gap={4}
-        direction="rows"
-      />
+      <List data={items} gap={4} direction="rows" />
     </Element>
   )
 }`
 
+function CodeBlock() {
+  return (
+    <pre>
+      <code
+        // eslint-disable-next-line react/no-danger
+        dangerouslySetInnerHTML={{
+          __html: SAMPLE.replace(/&/g, '&amp;')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;')
+            .replace(/\b(import|from|function|return|const)\b/g, '<span class="kw">$1</span>')
+            .replace(/(&#39;[^&]*&#39;|&apos;[^&]*&apos;|'[^']*')/g, '<span class="str">$1</span>')
+            .replace(/(\/\/[^\n]*)/g, '<span class="cm">$1</span>'),
+        }}
+      />
+    </pre>
+  )
+}
+
 export default function HomePage() {
   return (
-    <main className="flex flex-col items-center">
-      {/* Hero */}
-      <section className="relative flex flex-col items-center justify-center gap-8 px-6 pb-20 pt-28 text-center md:pb-28 md:pt-36">
-        <div className="hero-glow" aria-hidden="true" />
+    <main className="vl-landing">
+      <div
+        style={{
+          maxWidth: 1440,
+          margin: '0 auto',
+          padding: '0 clamp(24px, 4vw, 64px)',
+        }}
+      >
+        {/* HERO */}
+        <section className="vl-hero">
+          <div className="vl-hero-bg" aria-hidden>
+            <div className="grid" />
+            <div className="glow" />
+          </div>
 
-        <div className="flex items-center gap-2 rounded-full border border-fd-border bg-fd-card/60 px-4 py-1.5 text-sm backdrop-blur-sm">
-          <span className="inline-block h-2 w-2 rounded-full bg-emerald-500" />
-          <span className="text-fd-muted-foreground">
-            actively developed
-          </span>
-        </div>
+          <div className="vl-hero-inner">
+            <div>
+              <Reveal>
+                <div className="vl-hero-tag">
+                  <span className="vl-dot-pulse" />
+                  <span>15 packages · MIT · TypeScript-first</span>
+                </div>
+              </Reveal>
 
-        <h1 className="max-w-3xl text-5xl font-extrabold tracking-tight md:text-6xl lg:text-7xl">
-          Build, style &amp; ship{' '}
-          <span className="bg-gradient-to-r from-blue-600 via-violet-600 to-fuchsia-600 bg-clip-text text-transparent dark:from-blue-400 dark:via-violet-400 dark:to-fuchsia-400">
-            React apps
-          </span>{' '}
-          faster
-        </h1>
+              <Reveal delay={50}>
+                <h1 className="vl-hero-title">
+                  Build, style
+                  <br />
+                  &amp; ship React
+                  <br />
+                  apps <em>composable.</em>
+                </h1>
+              </Reveal>
 
-        <p className="max-w-2xl text-lg leading-relaxed text-fd-muted-foreground md:text-xl">
-          A modular ecosystem of 26 packages — composable UI primitives,
-          a 3KB CSS-in-JS engine, animations, responsive layouts, and
-          developer tools that keep your whole monorepo in sync.
-        </p>
+              <Reveal delay={100}>
+                <p className="vl-hero-sub">
+                  A modular React ecosystem — UI primitives, a{' '}
+                  <strong>4.82&nbsp;KB</strong> CSS-in-JS engine (gzipped),
+                  declarative animations, responsive layouts, and developer
+                  tooling. Shared <strong>workspace:*</strong> deps so every
+                  package in your monorepo stays in sync.
+                </p>
+              </Reveal>
 
-        <div className="flex flex-wrap justify-center gap-3">
-          <Link
-            href="/docs/getting-started"
-            className="rounded-xl bg-fd-primary px-7 py-3 text-base font-semibold text-fd-primary-foreground shadow-lg shadow-fd-primary/20 transition-all hover:-translate-y-0.5 hover:shadow-xl hover:shadow-fd-primary/25"
-          >
-            Get Started
-          </Link>
-          <Link
-            href="/docs"
-            className="rounded-xl border border-fd-border bg-fd-background px-7 py-3 text-base font-semibold transition-all hover:-translate-y-0.5 hover:bg-fd-accent"
-          >
-            Browse Docs
-          </Link>
-          <Link
-            href="https://github.com/vitus-labs"
-            className="rounded-xl border border-fd-border bg-fd-background px-7 py-3 text-base font-semibold transition-all hover:-translate-y-0.5 hover:bg-fd-accent"
-          >
-            GitHub
-          </Link>
-        </div>
+              <Reveal delay={150}>
+                <div className="vl-hero-ctas">
+                  <Link
+                    className="vl-btn vl-btn--primary"
+                    href="/docs/getting-started"
+                  >
+                    Get started <span>→</span>
+                  </Link>
+                  <Link className="vl-btn" href="/docs">
+                    Browse docs
+                  </Link>
+                  <a
+                    className="vl-btn vl-btn--ghost vl-mono"
+                    href="https://github.com/vitus-labs/ui-system"
+                  >
+                    GitHub ↗
+                  </a>
+                </div>
+              </Reveal>
 
-        {/* Stats */}
-        <div className="mt-4 flex flex-wrap justify-center gap-10">
-          <div className="stat-pill">
-            <span className="stat-value">26</span>
-            <span className="stat-label">Packages</span>
-          </div>
-          <div className="stat-pill">
-            <span className="stat-value">3KB</span>
-            <span className="stat-label">CSS Engine</span>
-          </div>
-          <div className="stat-pill">
-            <span className="stat-value">170+</span>
-            <span className="stat-label">CSS Props</span>
+              <Reveal delay={200}>
+                <div className="vl-hero-stats">
+                  {STATS.map((s) => (
+                    <div className="vl-hero-stat" key={s.lbl}>
+                      <div className="n">
+                        {s.float ? (
+                          // 4.82 is rendered as-is — counting fractional ints adds noise
+                          <span>{s.n}</span>
+                        ) : (
+                          <Counter target={s.n as number} suffix={s.suffix} />
+                        )}
+                      </div>
+                      <div className="lbl">{s.lbl}</div>
+                    </div>
+                  ))}
+                </div>
+              </Reveal>
+            </div>
+
+            {/* Visual */}
+            <Reveal delay={120}>
+              <div className="vl-hero-visual">
+                <div className="vl-orbit">
+                  <div className="ring ring-1">
+                    <span className="node" />
+                  </div>
+                  <div className="ring ring-2">
+                    <span className="node n2" />
+                  </div>
+                  <div className="ring ring-3">
+                    <span className="node n3" />
+                  </div>
+                  <div className="ring ring-4">
+                    <span className="node" />
+                  </div>
+                </div>
+
+                <span className="vl-hv-label l1">
+                  <span className="acc">core</span> · engine
+                </span>
+                <span className="vl-hv-label l2">
+                  <span className="acc">styler</span> · 4.82 KB
+                </span>
+                <span className="vl-hv-label l3">
+                  <span className="acc">kinetic</span> · 123 presets
+                </span>
+                <span className="vl-hv-label l4">
+                  <span className="acc">elements</span> · 5 primitives
+                </span>
+
+                <div className="vl-hv-center">
+                  <Mark size={96} />
+                </div>
+              </div>
+            </Reveal>
           </div>
-          <div className="stat-pill">
-            <span className="stat-value">28</span>
-            <span className="stat-label">React Hooks</span>
+        </section>
+
+        {/* TICKER */}
+        <Ticker />
+
+        {/* FEATURES */}
+        <section className="vl-section" id="features">
+          <div className="vl-section-head">
+            <Reveal>
+              <div>
+                <div className="eyebrow">— Why Vitus Labs</div>
+                <h2>
+                  One ecosystem,
+                  <br />
+                  <em>15 packages.</em>
+                </h2>
+              </div>
+            </Reveal>
+            <Reveal delay={80}>
+              <div className="right">
+                Every package works standalone but they interlock. Type-safe end
+                to end. Swap engines (Styler/Emotion/styled-components) without
+                touching component code.
+              </div>
+            </Reveal>
           </div>
-          <div className="stat-pill">
-            <span className="stat-value">122</span>
-            <span className="stat-label">Animation Presets</span>
+
+          <Reveal>
+            <div className="vl-features">
+              {FEATURES.map((f, i) => (
+                <div className="vl-feature vl-f-span-4" key={f.meta}>
+                  <div className="glyph">{f.glyph}</div>
+                  <h3>{f.title}</h3>
+                  <p>{f.body}</p>
+                  <div className="meta">
+                    <span>{f.meta}</span>
+                    <span>0{i + 1}/06</span>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </Reveal>
+        </section>
+
+        {/* DEMO */}
+        <section className="vl-section">
+          <div className="vl-section-head">
+            <Reveal>
+              <div>
+                <div className="eyebrow">— Developer experience</div>
+                <h2>
+                  Init in one line.
+                  <br />
+                  <em>Compose primitives.</em>
+                </h2>
+              </div>
+            </Reveal>
+            <Reveal delay={80}>
+              <div className="right">
+                Wire the engine, register a connector, build with type-safe
+                primitives. Styler computes static styles once at module-eval
+                and only re-runs dynamic interpolations per render.
+              </div>
+            </Reveal>
           </div>
-        </div>
-      </section>
 
-      {/* Code showcase */}
-      <section className="w-full max-w-4xl px-6 py-12">
-        <div className="code-showcase overflow-hidden rounded-2xl border border-fd-border bg-fd-card">
-          <div className="flex items-center gap-2 border-b border-fd-border px-5 py-3">
-            <span className="h-3 w-3 rounded-full bg-red-400/60" />
-            <span className="h-3 w-3 rounded-full bg-yellow-400/60" />
-            <span className="h-3 w-3 rounded-full bg-green-400/60" />
-            <span className="ml-3 text-xs text-fd-muted-foreground">
-              app.tsx
-            </span>
+          <div className="vl-demo">
+            <Reveal>
+              <div className="vl-demo-copy">
+                <div className="vl-uppercase-tag">— app.tsx</div>
+                <h2>The whole stack in three imports.</h2>
+                <p>
+                  Wire <span className="vl-mono">@vitus-labs/core</span> with
+                  any connector, then compose primitives. The Styler engine
+                  caches static templates on a single-entry hot path with a
+                  WeakMap fallback.
+                </p>
+                <ul>
+                  <li>
+                    <b>Element</b>
+                    <span className="dim"> — base primitive · 170+ CSS props</span>
+                  </li>
+                  <li>
+                    <b>Text</b>
+                    <span className="dim"> — typography, polymorphic tag</span>
+                  </li>
+                  <li>
+                    <b>List</b>
+                    <span className="dim"> — Iterator with simple/object/children modes</span>
+                  </li>
+                  <li>
+                    <b>Rocketstyle</b>
+                    <span className="dim"> — dimensions, theming, light/dark</span>
+                  </li>
+                  <li>
+                    <b>Kinetic</b>
+                    <span className="dim"> — Transition · Stagger · TransitionGroup · 123 presets</span>
+                  </li>
+                </ul>
+              </div>
+            </Reveal>
+
+            <Reveal delay={80}>
+              <div className="vl-demo-code">
+                <div className="vl-demo-code-head">
+                  <div className="dots">
+                    <span />
+                    <span />
+                    <span />
+                  </div>
+                  <div className="file">app.tsx</div>
+                  <div className="blink">live</div>
+                </div>
+                <CodeBlock />
+              </div>
+            </Reveal>
           </div>
-          <pre className="overflow-x-auto p-5 text-[13px] leading-relaxed">
-            <code>{codeExample}</code>
-          </pre>
-        </div>
-      </section>
+        </section>
 
-      {/* Features */}
-      <section className="w-full max-w-6xl px-6 py-20">
-        <h2 className="mb-3 text-center text-3xl font-bold tracking-tight md:text-4xl">
-          Why Vitus Labs?
-        </h2>
-        <p className="mx-auto mb-12 max-w-xl text-center text-fd-muted-foreground">
-          One ecosystem, zero glue code. Every package is designed to work
-          together — or standalone.
-        </p>
-        <div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
-          {features.map((feature) => (
-            <div
-              key={feature.title}
-              className="feature-card rounded-2xl border border-fd-border bg-fd-card p-6"
-            >
-              <div className="mb-3 inline-flex h-10 w-10 items-center justify-center rounded-lg bg-fd-accent font-mono text-sm font-bold text-fd-muted-foreground">
-                {feature.icon}
+        {/* ECOSYSTEM */}
+        <section className="vl-section" id="ecosystem">
+          <div className="vl-section-head">
+            <Reveal>
+              <div>
+                <div className="eyebrow">— @vitus-labs/*</div>
+                <h2>
+                  15 packages,
+                  <br />
+                  <em>built to compose.</em>
+                </h2>
               </div>
-              <h3 className="mb-2 text-base font-semibold">{feature.title}</h3>
-              <p className="text-sm leading-relaxed text-fd-muted-foreground">
-                {feature.description}
-              </p>
-            </div>
-          ))}
-        </div>
-      </section>
+            </Reveal>
+            <Reveal delay={80}>
+              <div className="right">
+                Pick what you need. Every package is independently versioned
+                with Changesets in a fixed group. Click to open the doc.
+              </div>
+            </Reveal>
+          </div>
 
-      {/* UI System */}
-      <section className="w-full max-w-6xl px-6 py-20">
-        <div className="mb-10 flex flex-col items-center gap-3">
-          <span className="rounded-full bg-blue-500/10 px-4 py-1 text-sm font-medium text-blue-600 dark:text-blue-400">
-            @vitus-labs/*
-          </span>
-          <h2 className="text-3xl font-bold tracking-tight md:text-4xl">
-            UI System
-          </h2>
-          <p className="max-w-lg text-center text-fd-muted-foreground">
-            Components, styling, layout, hooks, and theming — everything you
-            need to build React interfaces.
-          </p>
-        </div>
-        <Cards>
-          {uiPackages.map((pkg) => (
-            <Card
-              key={pkg.title}
-              title={pkg.title}
-              description={pkg.description}
-              href={pkg.href}
-            />
-          ))}
-        </Cards>
-      </section>
+          <Reveal>
+            <div className="vl-eco">
+              {ECO.map((p) => (
+                <Link
+                  key={p.n}
+                  className="vl-pkg"
+                  href={`/docs/${p.n.replace(/^connector-/, 'connectors')}`}
+                >
+                  <div className="nm">@vitus-labs/{p.n}</div>
+                  <div className="ttl">{p.t}</div>
+                  <div className="desc">{p.d}</div>
+                </Link>
+              ))}
+            </div>
+          </Reveal>
+        </section>
 
-      {/* Developer Tools */}
-      <section className="w-full max-w-6xl px-6 py-20">
-        <div className="mb-10 flex flex-col items-center gap-3">
-          <span className="rounded-full bg-violet-500/10 px-4 py-1 text-sm font-medium text-violet-600 dark:text-violet-400">
-            @vitus-labs/tools-*
-          </span>
-          <h2 className="text-3xl font-bold tracking-tight md:text-4xl">
-            Developer Tools
-          </h2>
-          <p className="max-w-lg text-center text-fd-muted-foreground">
-            Build, test, lint, bundle, and analyze — shared configs for the
-            full development lifecycle.
-          </p>
-        </div>
-        <Cards>
-          {toolsPackages.map((pkg) => (
-            <Card
-              key={pkg.title}
-              title={pkg.title}
-              description={pkg.description}
-              href={pkg.href}
-            />
-          ))}
-        </Cards>
-      </section>
+        {/* INSTALL */}
+        <section className="vl-section" id="install">
+          <Reveal>
+            <div className="vl-install">
+              <div className="vl-install-grid">
+                <div>
+                  <div className="vl-uppercase-tag">— Three imports to ship</div>
+                  <h2>
+                    Install the engine.
+                    <br />
+                    Compose the rest.
+                  </h2>
+                  <p>
+                    Three packages are enough to render: core, a connector, and
+                    elements. Add styler-backed adapters and you have a typed
+                    component layer on top of a 4.82 KB CSS-in-JS runtime. MIT
+                    licensed.
+                  </p>
+                  <div style={{ marginTop: 24, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
+                    <Link
+                      className="vl-btn vl-btn--primary"
+                      href="/docs/getting-started"
+                    >
+                      Read the guide →
+                    </Link>
+                    <a
+                      className="vl-btn"
+                      href="https://github.com/vitus-labs/ui-system"
+                    >
+                      GitHub ↗
+                    </a>
+                  </div>
+                </div>
 
-      {/* CTA */}
-      <section className="w-full max-w-3xl px-6 py-20">
-        <div className="flex flex-col items-center gap-6 rounded-2xl border border-fd-border bg-fd-card p-10 text-center">
-          <h2 className="text-2xl font-bold md:text-3xl">Ready to start?</h2>
-          <p className="max-w-md text-fd-muted-foreground">
-            Get up and running in minutes. Install the core packages, init the
-            engine, and build your first component.
-          </p>
-          <div className="w-full max-w-lg">
-            <div className="code-showcase overflow-hidden rounded-xl border border-fd-border bg-fd-secondary/30">
-              <pre className="overflow-x-auto px-5 py-4 text-sm">
-                <code>
-                  npm i @vitus-labs/core @vitus-labs/styler
-                  @vitus-labs/connector-styler @vitus-labs/elements
-                </code>
-              </pre>
+                <div className="vl-terminal">
+                  <div className="vl-terminal-head">
+                    <div className="dots">
+                      <span />
+                      <span />
+                      <span />
+                    </div>
+                    <span>~/my-app</span>
+                  </div>
+                  <pre>
+                    <span className="info"># core + engine + primitives</span>
+                    {'\n'}
+                    <span className="prompt">$</span>{' '}
+                    <span className="cmd">npm i @vitus-labs/core \</span>
+                    {'\n   '}
+                    <span className="cmd">@vitus-labs/connector-styler \</span>
+                    {'\n   '}
+                    <span className="cmd">@vitus-labs/elements</span>
+                    {'\n\n'}
+                    <span className="info"># peer: react ^19</span>
+                    {'\n'}
+                    <span className="ok">✓ resolved 15 workspace packages</span>
+                    <span className="cursor" />
+                  </pre>
+                </div>
+              </div>
             </div>
-          </div>
-          <Link
-            href="/docs/getting-started"
-            className="rounded-xl bg-fd-primary px-7 py-3 font-semibold text-fd-primary-foreground shadow-lg shadow-fd-primary/20 transition-all hover:-translate-y-0.5 hover:shadow-xl hover:shadow-fd-primary/25"
-          >
-            Read the Guide
-          </Link>
-        </div>
-      </section>
+          </Reveal>
+        </section>
 
-      {/* Footer */}
-      <footer className="w-full border-t border-fd-border px-6 py-8 text-center text-sm text-fd-muted-foreground">
-        <p>MIT License · Vitus Labs</p>
-      </footer>
+        {/* FOOTER */}
+        <footer
+          style={{
+            marginTop: 80,
+            borderTop: '1px solid var(--vl-border)',
+            padding: '40px 0',
+            display: 'flex',
+            flexWrap: 'wrap',
+            gap: 16,
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            fontFamily: 'var(--vl-font-mono)',
+            fontSize: 12,
+            color: 'var(--vl-fg-muted)',
+            letterSpacing: '0.05em',
+          }}
+        >
+          <Lockup size={28} />
+          <span>© {new Date().getFullYear()} VITUS·LABS — MIT LICENSE</span>
+        </footer>
+      </div>
     </main>
   )
 }
diff --git a/src/app/apple-icon.svg b/src/app/apple-icon.svg
new file mode 100644
index 0000000..7ef5632
--- /dev/null
+++ b/src/app/apple-icon.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 180 180">
+  <rect width="180" height="180" rx="40" fill="#0a0b0d"/>
+  <g transform="translate(40 40) scale(1)">
+    <path d="M8 18 L92 18 L74 44 L26 44 Z" fill="#f1efe7"/>
+    <path d="M26 50 L74 50 L60 72 L40 72 Z" fill="#f1efe7"/>
+    <path d="M40 78 L60 78 L50 94 Z" fill="#c8ff3a"/>
+  </g>
+</svg>
diff --git a/src/app/global.css b/src/app/global.css
index 0c34dab..9ee5a05 100644
--- a/src/app/global.css
+++ b/src/app/global.css
@@ -1,96 +1,955 @@
+/* Brand fonts — must precede tailwind/fumadocs to satisfy CSS @import ordering */
+@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap');
 @import 'tailwindcss';
 @import 'fumadocs-ui/css/neutral.css';
 @import 'fumadocs-ui/css/preset.css';
 
 @source '../node_modules/fumadocs-ui/dist/**/*.js';
 
-/* Hero gradient backdrop */
-.hero-glow {
+:root {
+  /* Core ink + paper */
+  --vl-ink-0: #0a0b0d;
+  --vl-ink-1: #14161a;
+  --vl-ink-2: #1e2025;
+  --vl-ink-3: #2a2d33;
+
+  --vl-paper-0: #f6f4ee;
+  --vl-paper-1: #fdfbf5;
+  --vl-paper-2: #ffffff;
+  --vl-paper-3: #ece9e0;
+
+  /* Brand accents */
+  --vl-acid: #c8ff3a;
+  --vl-acid-2: #e8ff8a;
+  --vl-acid-d: #8fb81e;
+  --vl-signal: #ff5630;
+  --vl-cobalt: #2f4dff;
+
+  /* Light mode is the default for :root */
+  --vl-bg: var(--vl-paper-0);
+  --vl-surface: var(--vl-paper-1);
+  --vl-surface-2: var(--vl-paper-2);
+  --vl-fg: var(--vl-ink-0);
+  --vl-fg-muted: #4a4740;
+  --vl-border: #d9d5c8;
+  --vl-accent: var(--vl-acid-d);
+
+  /* Type */
+  --vl-font-display: 'Geist', ui-sans-serif, system-ui, -apple-system,
+    'Helvetica Neue', sans-serif;
+  --vl-font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
+
+  /* Radii */
+  --vl-r-sm: 4px;
+  --vl-r-md: 8px;
+  --vl-r-lg: 14px;
+  --vl-r-xl: 24px;
+}
+
+.dark {
+  --vl-bg: var(--vl-ink-0);
+  --vl-surface: var(--vl-ink-1);
+  --vl-surface-2: var(--vl-ink-2);
+  --vl-fg: #f1efe7;
+  --vl-fg-muted: #a8a69c;
+  --vl-border: #2e3138;
+  --vl-accent: var(--vl-acid);
+}
+
+/* ============================================
+   LANDING — only applied inside .vl-landing
+   so we don't clobber Fumadocs's docs UI.
+   ============================================ */
+.vl-landing {
+  font-family: var(--vl-font-display);
+  background: var(--vl-bg);
+  color: var(--vl-fg);
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+
+.vl-landing .vl-mono {
+  font-family: var(--vl-font-mono);
+}
+.vl-landing .vl-uppercase-tag {
+  font-family: var(--vl-font-mono);
+  font-size: 11px;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--vl-fg-muted);
+}
+
+.vl-landing .vl-wordmark {
+  font-family: var(--vl-font-mono);
+  font-weight: 500;
+  letter-spacing: -0.02em;
+}
+.vl-landing .vl-wordmark .dot {
+  color: var(--vl-accent);
+}
+
+/* ============= BUTTON ============= */
+.vl-landing .vl-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 14px 22px;
+  border-radius: 999px;
+  font-family: var(--vl-font-display);
+  font-weight: 500;
+  font-size: 15px;
+  border: 1px solid var(--vl-border);
+  background: transparent;
+  color: var(--vl-fg);
+  cursor: pointer;
+  text-decoration: none;
+  transition: all 0.18s ease;
+}
+.vl-landing .vl-btn:hover {
+  background: var(--vl-surface-2);
+  transform: translateY(-1px);
+}
+.vl-landing .vl-btn--primary {
+  background: var(--vl-accent);
+  color: var(--vl-ink-0);
+  border-color: var(--vl-accent);
+}
+.vl-landing .vl-btn--primary:hover {
+  background: var(--vl-acid-2);
+}
+.dark .vl-landing .vl-btn--primary:hover {
+  background: var(--vl-acid-2);
+}
+.vl-landing .vl-btn--ghost {
+  border-color: transparent;
+}
+.vl-landing .vl-btn--ghost:hover {
+  background: var(--vl-surface);
+}
+
+/* ============= HERO ============= */
+.vl-landing .vl-hero {
+  padding: 80px 0 80px;
+  position: relative;
+}
+.vl-landing .vl-hero-bg {
   position: absolute;
   inset: 0;
-  overflow: hidden;
   pointer-events: none;
-  z-index: -1;
+  overflow: hidden;
 }
-
-.hero-glow::before {
-  content: '';
+.vl-landing .vl-hero-bg .grid {
   position: absolute;
-  top: -40%;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 800px;
-  height: 600px;
-  border-radius: 50%;
-  background: radial-gradient(
-    ellipse at center,
-    oklch(0.65 0.18 250 / 0.12) 0%,
-    oklch(0.6 0.15 280 / 0.06) 40%,
+  inset: -20% -20% 0 -20%;
+  background-image:
+    linear-gradient(to right, var(--vl-border) 1px, transparent 1px),
+    linear-gradient(to bottom, var(--vl-border) 1px, transparent 1px);
+  background-size: 56px 56px;
+  opacity: 0.35;
+  mask-image: radial-gradient(
+    ellipse 80% 60% at 70% 20%,
+    black 0%,
     transparent 70%
   );
-  filter: blur(60px);
-}
-
-:is(.dark) .hero-glow::before {
-  background: radial-gradient(
-    ellipse at center,
-    oklch(0.55 0.2 250 / 0.18) 0%,
-    oklch(0.45 0.15 280 / 0.08) 40%,
+  -webkit-mask-image: radial-gradient(
+    ellipse 80% 60% at 70% 20%,
+    black 0%,
     transparent 70%
   );
 }
+.vl-landing .vl-hero-bg .glow {
+  position: absolute;
+  top: -10%;
+  right: -10%;
+  width: 700px;
+  height: 700px;
+  background: radial-gradient(circle, var(--vl-accent) 0%, transparent 60%);
+  opacity: 0.4;
+  filter: blur(40px);
+}
+.dark .vl-landing .vl-hero-bg .glow {
+  opacity: 0.15;
+}
 
-/* Stat pill */
-.stat-pill {
+.vl-landing .vl-hero-inner {
+  display: grid;
+  grid-template-columns: 1.15fr 0.85fr;
+  gap: 64px;
+  align-items: center;
+  position: relative;
+}
+@media (max-width: 1100px) {
+  .vl-landing .vl-hero-inner {
+    grid-template-columns: 1fr;
+  }
+}
+
+.vl-landing .vl-hero-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 12px;
+  padding: 6px 14px 6px 6px;
+  border: 1px solid var(--vl-border);
+  border-radius: 999px;
+  font-family: var(--vl-font-mono);
+  font-size: 12px;
+  color: var(--vl-fg-muted);
+  margin-bottom: 32px;
+  background: var(--vl-surface);
+}
+.vl-landing .vl-dot-pulse {
+  width: 8px;
+  height: 8px;
+  background: var(--vl-accent);
+  border-radius: 50%;
+  margin-left: 8px;
+  box-shadow: 0 0 0 0 var(--vl-accent);
+  animation: vl-dotpulse 2s ease-out infinite;
+}
+@keyframes vl-dotpulse {
+  0% {
+    box-shadow: 0 0 0 0 color-mix(in srgb, var(--vl-accent) 60%, transparent);
+  }
+  70% {
+    box-shadow: 0 0 0 10px transparent;
+  }
+  100% {
+    box-shadow: 0 0 0 0 transparent;
+  }
+}
+@keyframes vl-blink {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.3;
+  }
+}
+
+.vl-landing .vl-hero-title {
+  font-size: clamp(48px, 6.5vw, 96px);
+  font-weight: 500;
+  letter-spacing: -0.04em;
+  line-height: 0.94;
+  margin: 0 0 32px;
+}
+.vl-landing .vl-hero-title em {
+  font-style: italic;
+  font-weight: 300;
+  color: var(--vl-accent);
+}
+
+.vl-landing .vl-hero-sub {
+  font-size: 20px;
+  line-height: 1.5;
+  color: var(--vl-fg-muted);
+  max-width: 580px;
+  margin: 0 0 40px;
+}
+.vl-landing .vl-hero-sub strong {
+  color: var(--vl-fg);
+  font-weight: 500;
+}
+
+.vl-landing .vl-hero-ctas {
   display: flex;
-  flex-direction: column;
+  gap: 12px;
   align-items: center;
-  gap: 2px;
+  flex-wrap: wrap;
 }
 
-.stat-pill .stat-value {
-  font-size: 1.5rem;
-  font-weight: 700;
+.vl-landing .vl-hero-stats {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 32px;
+  margin-top: 64px;
+  padding-top: 32px;
+  border-top: 1px solid var(--vl-border);
+}
+.vl-landing .vl-hero-stat .n {
+  font-family: var(--vl-font-display);
+  font-size: 40px;
+  font-weight: 500;
   letter-spacing: -0.025em;
-  background: linear-gradient(135deg, var(--color-fd-foreground), var(--color-fd-muted-foreground));
-  background-clip: text;
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
+  line-height: 1;
+}
+.vl-landing .vl-hero-stat .n em {
+  font-style: normal;
+  color: var(--vl-accent);
+}
+.vl-landing .vl-hero-stat .lbl {
+  margin-top: 8px;
+  font-family: var(--vl-font-mono);
+  font-size: 11px;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--vl-fg-muted);
 }
 
-.stat-pill .stat-label {
-  font-size: 0.75rem;
+/* Hero visual — orbit */
+.vl-landing .vl-hero-visual {
+  position: relative;
+  aspect-ratio: 1 / 1;
+  width: 100%;
+  max-width: 480px;
+  margin: 0 auto;
+}
+.vl-landing .vl-orbit {
+  position: absolute;
+  inset: 0;
+}
+.vl-landing .vl-orbit .ring {
+  position: absolute;
+  border: 1px dashed var(--vl-border);
+  border-radius: 50%;
+}
+.vl-landing .vl-orbit .ring-1 {
+  inset: 0;
+  animation: vl-orbit 30s linear infinite;
+}
+.vl-landing .vl-orbit .ring-2 {
+  inset: 12%;
+  animation: vl-orbit 22s linear infinite reverse;
+  border-style: solid;
+  opacity: 0.5;
+}
+.vl-landing .vl-orbit .ring-3 {
+  inset: 24%;
+  animation: vl-orbit 18s linear infinite;
+}
+.vl-landing .vl-orbit .ring-4 {
+  inset: 36%;
+  animation: vl-orbit 14s linear infinite reverse;
+  border-style: solid;
+  opacity: 0.5;
+}
+@keyframes vl-orbit {
+  from {
+    transform: rotate(0);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+.vl-landing .vl-orbit .ring > .node {
+  position: absolute;
+  top: 50%;
+  right: 0;
+  width: 10px;
+  height: 10px;
+  background: var(--vl-accent);
+  border-radius: 50%;
+  transform: translate(50%, -50%);
+  box-shadow: 0 0 16px var(--vl-accent);
+}
+.vl-landing .vl-orbit .ring > .node.n2 {
+  background: var(--vl-fg);
+  box-shadow: none;
+}
+.vl-landing .vl-orbit .ring > .node.n3 {
+  background: var(--vl-signal);
+  box-shadow: 0 0 16px var(--vl-signal);
+}
+.vl-landing .vl-hv-center {
+  position: absolute;
+  inset: 0;
+  margin: auto;
+  width: 36%;
+  height: 36%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--vl-bg);
+  border-radius: 50%;
+  border: 1px solid var(--vl-border);
+}
+.vl-landing .vl-hv-center::before {
+  content: '';
+  position: absolute;
+  inset: -1px;
+  border-radius: 50%;
+  background: conic-gradient(
+    from 0deg,
+    transparent 70%,
+    var(--vl-accent),
+    transparent
+  );
+  -webkit-mask: radial-gradient(circle, transparent 64%, black 65%);
+  mask: radial-gradient(circle, transparent 64%, black 65%);
+  animation: vl-orbit 4s linear infinite;
+}
+.vl-landing .vl-hv-label {
+  position: absolute;
+  font-family: var(--vl-font-mono);
+  font-size: 10px;
+  letter-spacing: 0.1em;
   text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: var(--color-fd-muted-foreground);
+  color: var(--vl-fg-muted);
+  background: var(--vl-bg);
+  border: 1px solid var(--vl-border);
+  padding: 4px 8px;
+  border-radius: 4px;
+  white-space: nowrap;
+  animation: vl-float 4s ease-in-out infinite;
+}
+@keyframes vl-float {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-4px);
+  }
+}
+.vl-landing .vl-hv-label .acc {
+  color: var(--vl-accent);
+}
+.vl-landing .vl-hv-label.l1 {
+  top: 6%;
+  left: 2%;
+}
+.vl-landing .vl-hv-label.l2 {
+  top: 12%;
+  right: 0;
+  animation-delay: -1s;
+}
+.vl-landing .vl-hv-label.l3 {
+  bottom: 18%;
+  left: -2%;
+  animation-delay: -2s;
+}
+.vl-landing .vl-hv-label.l4 {
+  bottom: 4%;
+  right: 6%;
+  animation-delay: -3s;
 }
 
-/* Feature card hover lift */
-.feature-card {
-  transition: transform 0.2s ease, box-shadow 0.2s ease;
+/* ============= TICKER ============= */
+.vl-landing .vl-ticker {
+  margin: 60px 0;
+  padding: 24px 0;
+  border-top: 1px solid var(--vl-border);
+  border-bottom: 1px solid var(--vl-border);
+  overflow: hidden;
+  background: var(--vl-surface);
+  position: relative;
+}
+.vl-landing .vl-ticker::before,
+.vl-landing .vl-ticker::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 120px;
+  z-index: 2;
+  pointer-events: none;
+}
+.vl-landing .vl-ticker::before {
+  left: 0;
+  background: linear-gradient(to right, var(--vl-surface), transparent);
+}
+.vl-landing .vl-ticker::after {
+  right: 0;
+  background: linear-gradient(to left, var(--vl-surface), transparent);
+}
+.vl-landing .vl-ticker-track {
+  display: inline-flex;
+  gap: 48px;
+  font-family: var(--vl-font-mono);
+  font-size: 20px;
+  color: var(--vl-fg-muted);
+  white-space: nowrap;
+  animation: vl-scroll 60s linear infinite;
+}
+.vl-landing .vl-ticker-track:hover {
+  animation-play-state: paused;
+}
+.vl-landing .vl-ticker-track span.acc {
+  color: var(--vl-accent);
+}
+.vl-landing .vl-ticker-track span.pkg {
+  color: var(--vl-fg);
+}
+@keyframes vl-scroll {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-50%);
+  }
 }
 
-.feature-card:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 8px 24px -8px oklch(0.3 0 0 / 0.08);
+/* ============= SECTION ============= */
+.vl-landing .vl-section {
+  padding: 80px 0;
+  position: relative;
+}
+.vl-landing .vl-section-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: end;
+  margin-bottom: 56px;
+  gap: 48px;
+}
+@media (max-width: 800px) {
+  .vl-landing .vl-section-head {
+    flex-direction: column;
+    align-items: start;
+  }
+}
+.vl-landing .vl-section-head .eyebrow {
+  font-family: var(--vl-font-mono);
+  font-size: 12px;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: var(--vl-accent);
+  margin-bottom: 16px;
+}
+.vl-landing .vl-section-head h2 {
+  font-size: clamp(36px, 4.5vw, 64px);
+  font-weight: 500;
+  letter-spacing: -0.035em;
+  line-height: 1;
+  margin: 0;
+  max-width: 14ch;
+}
+.vl-landing .vl-section-head h2 em {
+  font-style: italic;
+  font-weight: 300;
+  color: var(--vl-accent);
+}
+.vl-landing .vl-section-head .right {
+  text-align: right;
+  color: var(--vl-fg-muted);
+  font-size: 16px;
+  line-height: 1.5;
+  max-width: 360px;
+}
+@media (max-width: 800px) {
+  .vl-landing .vl-section-head .right {
+    text-align: left;
+  }
 }
 
-:is(.dark) .feature-card:hover {
-  box-shadow: 0 8px 24px -8px oklch(0.1 0 0 / 0.4);
+/* ============= FEATURES ============= */
+.vl-landing .vl-features {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  gap: 1px;
+  background: var(--vl-border);
+  border: 1px solid var(--vl-border);
+  border-radius: var(--vl-r-xl);
+  overflow: hidden;
+}
+.vl-landing .vl-feature {
+  background: var(--vl-bg);
+  padding: 40px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  position: relative;
+  overflow: hidden;
+  transition: background 0.3s;
+}
+.vl-landing .vl-feature:hover {
+  background: var(--vl-surface);
+}
+.vl-landing .vl-feature .glyph {
+  font-family: var(--vl-font-mono);
+  font-size: 24px;
+  color: var(--vl-accent);
+  line-height: 1;
+}
+.vl-landing .vl-feature h3 {
+  font-size: 22px;
+  font-weight: 500;
+  letter-spacing: -0.015em;
+  margin: 8px 0 0;
+}
+.vl-landing .vl-feature p {
+  color: var(--vl-fg-muted);
+  font-size: 15px;
+  line-height: 1.55;
+  margin: 0;
+}
+.vl-landing .vl-feature .meta {
+  margin-top: auto;
+  padding-top: 24px;
+  font-family: var(--vl-font-mono);
+  font-size: 11px;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--vl-fg-muted);
+  display: flex;
+  justify-content: space-between;
+}
+.vl-landing .vl-f-span-4 {
+  grid-column: span 4;
+}
+@media (max-width: 900px) {
+  .vl-landing .vl-f-span-4 {
+    grid-column: span 12;
+  }
 }
 
-/* Code block with accent border */
-.code-showcase {
+/* ============= DEMO ============= */
+.vl-landing .vl-demo {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 48px;
+  align-items: center;
+}
+@media (max-width: 1000px) {
+  .vl-landing .vl-demo {
+    grid-template-columns: 1fr;
+  }
+}
+.vl-landing .vl-demo-copy h2 {
+  font-size: clamp(32px, 4vw, 48px);
+  font-weight: 500;
+  letter-spacing: -0.03em;
+  line-height: 1.05;
+  margin: 16px 0 24px;
+}
+.vl-landing .vl-demo-copy p {
+  font-size: 17px;
+  line-height: 1.6;
+  color: var(--vl-fg-muted);
+  margin: 0 0 24px;
+}
+.vl-landing .vl-demo-copy ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  font-family: var(--vl-font-mono);
+  font-size: 14px;
+}
+.vl-landing .vl-demo-copy ul li {
+  padding: 12px 0;
+  border-bottom: 1px solid var(--vl-border);
+  display: flex;
+  gap: 14px;
+  align-items: baseline;
+}
+.vl-landing .vl-demo-copy ul li::before {
+  content: '▽';
+  color: var(--vl-accent);
+  font-size: 10px;
+}
+.vl-landing .vl-demo-copy ul li b {
+  color: var(--vl-fg);
+  font-weight: 600;
+}
+.vl-landing .vl-demo-copy ul li .dim {
+  color: var(--vl-fg-muted);
+}
+
+.vl-landing .vl-demo-code {
+  background: var(--vl-surface);
+  border: 1px solid var(--vl-border);
+  border-radius: var(--vl-r-lg);
+  overflow: hidden;
+  position: relative;
+}
+.vl-landing .vl-demo-code-head {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 14px 18px;
+  border-bottom: 1px solid var(--vl-border);
+  font-family: var(--vl-font-mono);
+  font-size: 12px;
+  color: var(--vl-fg-muted);
+  background: var(--vl-surface-2);
+}
+.vl-landing .vl-demo-code-head .dots {
+  display: flex;
+  gap: 6px;
+}
+.vl-landing .vl-demo-code-head .dots span {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: var(--vl-border);
+}
+.vl-landing .vl-demo-code-head .file::before {
+  content: '';
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  background: var(--vl-accent);
+  margin-right: 8px;
+  vertical-align: -1px;
+  border-radius: 2px;
+}
+.vl-landing .vl-demo-code-head .blink {
+  margin-left: auto;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+.vl-landing .vl-demo-code-head .blink::before {
+  content: '';
+  width: 6px;
+  height: 6px;
+  background: var(--vl-accent);
+  border-radius: 50%;
+  animation: vl-blink 1.6s ease-in-out infinite;
+}
+.vl-landing .vl-demo-code pre {
+  margin: 0;
+  padding: 24px;
+  font-family: var(--vl-font-mono);
+  font-size: 13px;
+  line-height: 1.7;
+  color: var(--vl-fg);
+  overflow: auto;
+}
+.vl-landing .vl-demo-code .kw {
+  color: var(--vl-accent);
+}
+.vl-landing .vl-demo-code .str {
+  color: var(--vl-signal);
+}
+.vl-landing .vl-demo-code .fn {
+  color: var(--vl-cobalt);
+}
+.vl-landing .vl-demo-code .cm {
+  color: var(--vl-fg-muted);
+  font-style: italic;
+}
+.vl-landing .vl-demo-code .ty {
+  color: var(--vl-fg-muted);
+}
+
+/* ============= ECOSYSTEM ============= */
+.vl-landing .vl-eco {
+  margin-top: 16px;
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 12px;
+}
+@media (max-width: 900px) {
+  .vl-landing .vl-eco {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+@media (max-width: 540px) {
+  .vl-landing .vl-eco {
+    grid-template-columns: 1fr;
+  }
+}
+.vl-landing .vl-pkg {
+  background: var(--vl-surface);
+  border: 1px solid var(--vl-border);
+  border-radius: var(--vl-r-md);
+  padding: 20px;
+  transition: all 0.2s;
+  cursor: pointer;
+  text-decoration: none;
+  color: inherit;
+  display: block;
   position: relative;
   overflow: hidden;
 }
+.vl-landing .vl-pkg:hover {
+  border-color: var(--vl-accent);
+  transform: translateY(-2px);
+  background: var(--vl-surface-2);
+}
+.vl-landing .vl-pkg::after {
+  content: '↗';
+  position: absolute;
+  top: 14px;
+  right: 14px;
+  font-size: 12px;
+  color: var(--vl-fg-muted);
+  transition: all 0.2s;
+}
+.vl-landing .vl-pkg:hover::after {
+  color: var(--vl-accent);
+  transform: translate(2px, -2px);
+}
+.vl-landing .vl-pkg .nm {
+  font-family: var(--vl-font-mono);
+  font-size: 14px;
+  color: var(--vl-accent);
+  margin-bottom: 6px;
+}
+.vl-landing .vl-pkg .ttl {
+  font-size: 15px;
+  font-weight: 500;
+  margin: 0 0 6px;
+}
+.vl-landing .vl-pkg .desc {
+  font-size: 13px;
+  color: var(--vl-fg-muted);
+  line-height: 1.45;
+  margin: 0;
+}
 
-.code-showcase::before {
+/* ============= INSTALL ============= */
+.vl-landing .vl-install {
+  margin: 80px 0 0;
+  padding: 64px;
+  background: var(--vl-surface);
+  border: 1px solid var(--vl-border);
+  border-radius: var(--vl-r-xl);
+  position: relative;
+  overflow: hidden;
+}
+@media (max-width: 800px) {
+  .vl-landing .vl-install {
+    padding: 40px;
+  }
+}
+.vl-landing .vl-install::before {
   content: '';
   position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 2px;
-  background: linear-gradient(90deg, oklch(0.6 0.18 250), oklch(0.65 0.15 310), oklch(0.6 0.18 250));
+  top: -50%;
+  right: -10%;
+  width: 600px;
+  height: 600px;
+  background: radial-gradient(circle, var(--vl-accent) 0%, transparent 60%);
+  opacity: 0.1;
+  filter: blur(40px);
+  pointer-events: none;
+}
+.vl-landing .vl-install-grid {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: 64px;
+  align-items: center;
+  position: relative;
+}
+@media (max-width: 900px) {
+  .vl-landing .vl-install-grid {
+    grid-template-columns: 1fr;
+  }
+}
+.vl-landing .vl-install h2 {
+  font-size: clamp(32px, 3.5vw, 48px);
+  font-weight: 500;
+  letter-spacing: -0.03em;
+  line-height: 1.05;
+  margin: 8px 0 16px;
+}
+.vl-landing .vl-install p {
+  color: var(--vl-fg-muted);
+  margin: 0;
+  max-width: 480px;
+  line-height: 1.55;
+  font-size: 17px;
+}
+
+.vl-landing .vl-terminal {
+  background: var(--vl-bg);
+  border: 1px solid var(--vl-border);
+  border-radius: var(--vl-r-md);
+  min-width: 380px;
+  max-width: 100%;
+  overflow: hidden;
+}
+@media (max-width: 900px) {
+  .vl-landing .vl-terminal {
+    min-width: 0;
+  }
+}
+.vl-landing .vl-terminal-head {
+  padding: 10px 14px;
+  border-bottom: 1px solid var(--vl-border);
+  font-family: var(--vl-font-mono);
+  font-size: 11px;
+  color: var(--vl-fg-muted);
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+.vl-landing .vl-terminal-head .dots {
+  display: flex;
+  gap: 5px;
+}
+.vl-landing .vl-terminal-head .dots span {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--vl-border);
+}
+.vl-landing .vl-terminal pre {
+  margin: 0;
+  padding: 18px;
+  font-family: var(--vl-font-mono);
+  font-size: 13px;
+  line-height: 1.7;
+  overflow: auto;
+}
+.vl-landing .vl-terminal pre .prompt {
+  color: var(--vl-accent);
+}
+.vl-landing .vl-terminal pre .cmd {
+  color: var(--vl-fg);
+}
+.vl-landing .vl-terminal pre .ok {
+  color: var(--vl-accent);
+}
+.vl-landing .vl-terminal pre .info {
+  color: var(--vl-fg-muted);
+}
+.vl-landing .vl-terminal pre .cursor {
+  display: inline-block;
+  width: 8px;
+  height: 16px;
+  background: var(--vl-accent);
+  vertical-align: -3px;
+  animation: vl-blink 1s steps(2) infinite;
+}
+
+/* ============= REVEAL =============
+   Default visible — SSR + no-JS works. Only hide once .vl-reveal--armed
+   is added by the client effect, then bring it back via .in.
+*/
+.vl-landing .vl-reveal {
+  transition:
+    opacity 0.8s cubic-bezier(0.2, 0.7, 0.2, 1),
+    transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
+}
+.vl-landing .vl-reveal--armed {
+  opacity: 0;
+  transform: translateY(20px);
+}
+.vl-landing .vl-reveal--armed.in {
+  opacity: 1;
+  transform: translateY(0);
+}
+@media (prefers-reduced-motion: reduce) {
+  .vl-landing .vl-reveal--armed {
+    opacity: 1;
+    transform: none;
+    transition: none;
+  }
+}
+
+/* ============= LEGACY (kept for any /docs pages that still use these) ============= */
+.hero-glow {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  pointer-events: none;
+  z-index: -1;
+}
+.stat-pill {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+}
+.feature-card {
+  transition:
+    transform 0.2s ease,
+    box-shadow 0.2s ease;
+}
+.code-showcase {
+  position: relative;
+  overflow: hidden;
 }
diff --git a/src/app/icon.svg b/src/app/icon.svg
new file mode 100644
index 0000000..ef6a0e0
--- /dev/null
+++ b/src/app/icon.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+  <path d="M8 18 L92 18 L74 44 L26 44 Z" fill="#c8ff3a"/>
+  <path d="M26 50 L74 50 L60 72 L40 72 Z" fill="#c8ff3a"/>
+  <path d="M40 78 L60 78 L50 94 Z" fill="#c8ff3a"/>
+</svg>
diff --git a/src/components/landing/Counter.tsx b/src/components/landing/Counter.tsx
new file mode 100644
index 0000000..b39180f
--- /dev/null
+++ b/src/components/landing/Counter.tsx
@@ -0,0 +1,19 @@
+type Props = {
+  target: number
+  suffix?: string
+}
+
+/**
+ * Static counter — renders the final value directly. Previously this ran a
+ * roll-up animation, but it was timing-fragile in headless environments and
+ * occasionally captured visitors mid-animation showing the wrong number,
+ * which is objectively worse for a stats panel.
+ */
+export function Counter({ target, suffix = '' }: Props) {
+  return (
+    <span>
+      {target}
+      {suffix}
+    </span>
+  )
+}
diff --git a/src/components/landing/Mark.tsx b/src/components/landing/Mark.tsx
new file mode 100644
index 0000000..bc9c052
--- /dev/null
+++ b/src/components/landing/Mark.tsx
@@ -0,0 +1,100 @@
+type MarkVariant = 'solid' | 'outline' | 'minimal'
+
+type Props = {
+  size?: number
+  color?: string
+  accent?: string
+  variant?: MarkVariant
+  className?: string
+}
+
+export function Mark({
+  size = 96,
+  color = 'currentColor',
+  accent = 'var(--vl-accent)',
+  variant = 'solid',
+  className,
+}: Props) {
+  if (variant === 'outline') {
+    return (
+      <svg
+        viewBox="0 0 100 100"
+        width={size}
+        height={size}
+        fill="none"
+        stroke={color}
+        strokeWidth={6}
+        strokeLinejoin="miter"
+        className={className}
+        aria-hidden
+      >
+        <path d="M8 18 L92 18 L74 44 L26 44 Z" />
+        <path d="M26 50 L74 50 L60 72 L40 72 Z" />
+        <path d="M40 78 L60 78 L50 94 Z" stroke={accent} />
+      </svg>
+    )
+  }
+
+  if (variant === 'minimal') {
+    return (
+      <svg
+        viewBox="0 0 100 100"
+        width={size}
+        height={size}
+        fill="none"
+        stroke={color}
+        strokeWidth={14}
+        strokeLinecap="square"
+        strokeLinejoin="miter"
+        className={className}
+        aria-hidden
+      >
+        <path d="M14 22 L50 86 L86 22" />
+      </svg>
+    )
+  }
+
+  return (
+    <svg
+      viewBox="0 0 100 100"
+      width={size}
+      height={size}
+      fill="none"
+      className={className}
+      aria-hidden
+    >
+      <path d="M8 18 L92 18 L74 44 L26 44 Z" fill={color} />
+      <path d="M26 50 L74 50 L60 72 L40 72 Z" fill={color} />
+      <path d="M40 78 L60 78 L50 94 Z" fill={accent} />
+    </svg>
+  )
+}
+
+type LockupProps = {
+  size?: number
+  gap?: number
+  variant?: MarkVariant
+  className?: string
+}
+
+export function Lockup({
+  size = 36,
+  gap = 14,
+  variant = 'solid',
+  className,
+}: LockupProps) {
+  return (
+    <span
+      className={`vl-lockup ${className ?? ''}`}
+      style={{ display: 'inline-flex', alignItems: 'center', gap }}
+    >
+      <Mark size={size} variant={variant} />
+      <span
+        className="vl-wordmark"
+        style={{ fontSize: Math.round(size * 0.44) }}
+      >
+        vitus<span className="dot">·</span>labs
+      </span>
+    </span>
+  )
+}
diff --git a/src/components/landing/Reveal.tsx b/src/components/landing/Reveal.tsx
new file mode 100644
index 0000000..0b2a1e0
--- /dev/null
+++ b/src/components/landing/Reveal.tsx
@@ -0,0 +1,74 @@
+'use client'
+
+import { useEffect, useRef } from 'react'
+import type { ReactNode } from 'react'
+
+type Props = {
+  children: ReactNode
+  delay?: number
+  className?: string
+  as?: 'div' | 'section' | 'span' | 'header'
+}
+
+export function Reveal({
+  children,
+  delay = 0,
+  className = '',
+  as = 'div',
+}: Props) {
+  const ref = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (typeof document === 'undefined') return
+    const el = ref.current
+    if (!el) return
+
+    // Skip animation entirely if the user prefers reduced motion or the
+    // document was rendered in a hidden iframe (preview thumbnails).
+    const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches
+    if (reduced || document.visibilityState === 'hidden') return
+
+    // Arm the animation: hide first, then reveal. SSR/no-JS renders visible.
+    el.classList.add('vl-reveal--armed')
+
+    const reveal = () => {
+      window.setTimeout(() => el.classList.add('in'), delay)
+    }
+
+    const rect = el.getBoundingClientRect()
+    const inView = rect.top < window.innerHeight && rect.bottom > 0
+    if (inView) {
+      reveal()
+      return
+    }
+
+    const io = new IntersectionObserver(
+      (entries) => {
+        for (const e of entries) {
+          if (e.isIntersecting) {
+            reveal()
+            io.unobserve(e.target)
+          }
+        }
+      },
+      { threshold: 0.05, rootMargin: '0px 0px -40px 0px' },
+    )
+    io.observe(el)
+
+    const fallback = window.setTimeout(() => el.classList.add('in'), 2500)
+    return () => {
+      io.disconnect()
+      window.clearTimeout(fallback)
+    }
+  }, [delay])
+
+  const Tag = as as 'div'
+  return (
+    <Tag
+      ref={ref as React.RefObject<HTMLDivElement>}
+      className={`vl-reveal ${className}`}
+    >
+      {children}
+    </Tag>
+  )
+}
diff --git a/src/components/landing/Ticker.tsx b/src/components/landing/Ticker.tsx
new file mode 100644
index 0000000..44a861e
--- /dev/null
+++ b/src/components/landing/Ticker.tsx
@@ -0,0 +1,36 @@
+const PKGS = [
+  'core',
+  'styler',
+  'attrs',
+  'elements',
+  'rocketstyle',
+  'unistyle',
+  'coolgrid',
+  'hooks',
+  'connector-styler',
+  'connector-emotion',
+  'connector-styled-components',
+  'connector-native',
+  'kinetic',
+  'kinetic-presets',
+  'rocketstories',
+]
+
+export function Ticker() {
+  const items = PKGS.flatMap((p, i) => [
+    <span key={`p-${p}-${i}`} className="pkg">
+      @vitus-labs/{p}
+    </span>,
+    <span key={`s-${p}-${i}`} className="acc">
+      ▽
+    </span>,
+  ])
+  return (
+    <div className="vl-ticker">
+      <div className="vl-ticker-track">
+        {items}
+        {items}
+      </div>
+    </div>
+  )
+}
diff --git a/src/lib/layout.shared.tsx b/src/lib/layout.shared.tsx
index 35fec13..e19966a 100644
--- a/src/lib/layout.shared.tsx
+++ b/src/lib/layout.shared.tsx
@@ -1,9 +1,10 @@
 import type { BaseLayoutProps } from 'fumadocs-ui/layouts/shared'
+import { Lockup } from '@/components/landing/Mark'
 
 export function baseOptions(): BaseLayoutProps {
   return {
     nav: {
-      title: 'Vitus Labs',
+      title: <Lockup size={22} />,
     },
     links: [
       {