docs: rebuild landing page with brand system + objective copy#17
Merged
Conversation
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>
4 tasks
vitbokisch
added a commit
that referenced
this pull request
May 21, 2026
…ng, favicon bg (#18) * docs: polish landing — full-bleed hero, readable nav, fixed code highlighting + favicon bg Four follow-up fixes after #17: 1. **Hero is now full-bleed.** The previous 1440-wide container clipped the radial chartreuse glow at the right edge of the constrained box, leaving a hard cut on wide viewports. The hero now spans the viewport (`padding: 0 clamp(24px, 4vw, 64px)`), inner content stays centered at `max-width: 1480px`, and the glow + grid fade naturally to the viewport edges. Glow size also bumped to `clamp(600px, 60vw, 1100px)` so it scales with the new room. 2. **Nav logo is bigger and readable.** `Lockup` size in the fumadocs nav went 22 → 32, and the wordmark/mark ratio went 0.44 → 0.60 (text now ~60% of mark height instead of 44%). "vitus·labs" was 10px before — now ~19px and actually legible. 3. **Code-block syntax highlighting fixed.** The previous regex-based highlighter ran *after* HTML-escaping, so JSX angle brackets stopped keyword matches dead and quoted strings (already encoded as `'`) never matched the string regex. Replaced with explicit per-token JSX spans — same approach as the source design — with the original `.kw / .str / .fn / .ty / .cm` palette intact. 4. **Favicon has a solid background.** Both `icon.svg` and `apple-icon.svg` now use a dark ink (`#0a0b0d`) rounded background with a chartreuse mark. At 16/32px the previous transparent-bg chartreuse triangles disappeared on light tab backgrounds; with the dark plate they read consistently across any browser theme. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * docs: port new design iteration — aurora bg, verb rotator, hero variant switcher, syntax theme Pulls in the latest design package from Claude Design (J3lE5xxSeGBbwc_pj3bClg). Same brand system, more motion: **Hero background — aurora stack** Six layered effects replace the single radial glow: - `.conic` — slow-rotating chartreuse + cobalt conic-gradient, blurred 80px (60s rotation) - `.aurora` — large dual-radial bloom that drifts on `vl-aurora` (18s alternating) - `.glow-2` — bottom-left cobalt counter-note (22s alternate-reverse) - `.grid` — 72px dot grid with radial mask - `.noise` — SVG fractal-noise grain at 6%/4% opacity (light/dark) with multiply/overlay blend - `.vignette` — bottom fade so the hero meets the next section cleanly **Rotating verb in the headline** `VerbRotator` client component cycles through `ship → theme → test → animate → bundle` every 2.6s with a 420ms 3D flip (rotateX out → in). Respects `prefers-reduced-motion`. **Hero visual — three switchable variants** `HeroVisual` client component (state-driven) replaces the static orbit. Variant switcher pill (icons: orbital / stacked bars / radar circles) at the bottom of the visual fades between: - **Orbit** — the existing four rings + floating labels (`core · engine`, `styler · 4.82 KB`, `kinetic · 123 presets`, `elements · 5 primitives`) - **Stack** — animated bars assembling top-down (`vl-sbar` keyframes) plus a token row underneath - **Pulse** — radar sweep (conic + mask), three expanding rings (`vl-radar-ring`), four blips (`vl-blip`), Mark in the center **Syntax theme tokens** Brand css gained `--vl-code-{fg,kw,str,fn,ty,num,cm,punct}` with light + dark variants (chartreuse keywords / amber strings / cobalt fns in dark; olive / terracotta / true cobalt in light). The demo code block now uses those tokens including a new `<Num>` span for numeric literals. **hero-inner** Grid bumped 1.15fr 0.85fr → 1.1fr 0.9fr, gap 64 → 80, max-width 1480 → 1640 to match the new design. Hero `min-height` set to `calc(100vh - 64px)` so it fills the fold above other sections. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Rebuilds the docs home page using the "Composable Engine" brand identity (stacked-triangle mark, Geist + Geist Mono, electric chartreuse accent
#C8FF3A, warm ink/paper neutrals) — adapted to Fumadocs's existing.darkclass strategy so docs pages remain untouched.Every marketing-style claim from the original design was replaced with a verified measurement from the monorepo on 2026-05-21:
ls packages/grep -c 'export const' kinetic-presets/src/presets.tspropertyMap.ts(237 descriptor entries)packages/hooks/src/use*.tsdedupedImplementation
src/app/(home)/page.tsx— full rewrite: hero (mark + orbit visual + objective stats), package ticker, 6-feature grid (3×2), demo split (copy + code), 15-card ecosystem grid, install CTA with terminal mock, footer.src/app/global.css— brand tokens scoped to.vl-landingso docs UI is unaffected; light mode is the default (:root),.darkflips ink + accent.src/components/landing/Mark.tsx— Mark + Lockup React components (solid / outline / minimal variants).src/components/landing/Counter.tsx— renders the final value statically. The animated version was timing-fragile in headless and occasionally captured visitors mid-animation showing the wrong number — objectively worse than no animation.src/components/landing/Reveal.tsx— additive fade-in: SSR/no-JS renders content visible, only the client effect arms the hidden→reveal transition; respectsprefers-reduced-motion.src/components/landing/Ticker.tsx— marquee of all 15 published package slugs.src/lib/layout.shared.tsx— fumadocs nav title swapped from text "Vitus Labs" to the Lockup component.src/app/icon.svg+apple-icon.svg— new triangle mark as Next.js app-router favicon. Chartreuse fill for visibility on both light and dark tab backgrounds; the apple icon has a dark rounded background.Test plan
bun run build— clean (5.8s, 68 static pages, no warnings)/in default theme — hero, stats, features, demo, ecosystem, install, footer all render/docs/styler— fumadocs docs UI unchanged, new nav mark visible/and/docs/*with no console errors🤖 Generated with Claude Code