Co-VibeDocs

Product

Marketing Landing Page (root /)#

The public marketing page is the root route (/): a signed-out visitor sees it, while a signed-in user is redirected to their console destination before it renders. /landing is kept as a redirect to / for old links. It was implemented from a claude.ai/design handoff bundle (Spotlight direction: big display type, console indigo, pixel flow-field) and follows DESIGN.md (dark-first, single indigo accent, Inter + JetBrains Mono, sentence case).

Where things live#

PathWhat it is
src/app/page.tsxRoot route — auth check, then renders LandingPage for signed-out visitors
src/features/landing/landing-page.tsxThe composed page (sections + CSS imports), shared by the root route
src/app/landing/page.tsxBack-compat redirect from /landing to /
src/app/landing/*.cssLanding styles, all scoped under .lp so console styles never clash
src/features/landing/Section components, canvas engine, logos
src/features/landing/pixel-field.tsShared canvas engine: Bayer-dithered flow field (hero, CTA, problem stage, how-it-works stages, console overview backdrop)
src/features/landing/demo/The overlap-detection animation inside the hero console window
src/features/landing/worktree-shot.tsx"The full console" section — one static overview window (sidebar + local graph with pulsing local heads + overlap warning card + tasks-shipped chart)

Animated pieces#

  • Hero / CTA fields — PixelField with mouse warp, scan sweep, and a ripple emitted from the primary CTA button. Pauses off-screen; honors prefers-reduced-motion (static frame).
  • Console demo (demo/) — a React timeline (no CSS keyframes): agents → MCP gateway → Co-Vibe console, overlap detected at 92%, covibe_warning returned to the agent, metrics logged inline with tasks. Scales the 1920x1080 stage to the window width; plays only while visible; reduced motion freezes on the resolved-console frame.
  • Tracking gap (problem.tsx) — the canvas wells and the DOM chips are driven by the same 14s timeline, so foreground and background move as one system; collision blooms amber + "Duplicate work" badge.
  • How it works (how-controller.ts) — three step cards, each playing its own independently looping scene over a dim pixel-field stage canvas (no rail, no sequential handoff): the typed covibe_task · check call (7.5s loop), the overlap scan + confidence meter + warning pill (9.5s), and the metrics rollup (8.5s). Plays only while visible; reduced motion shows the final frames.
  • The full console (worktree-shot.tsx) — static markup over a dim pixel-field backdrop; the only motion is the CSS pulse on local graph heads, the live dots, and the latest chart point.

Copy uses the real MCP tool names (covibe_task, covibe_team, covibe_warning) — not the old devsync_* placeholders from earlier design drafts.

Known follow-ups#

  • Footer social links point at the platform roots (no real org profiles yet).
View as .md