Build website-redesign app: remix-clone-inspired WebJs marketing site

[vivek7405]

Problem

The Remix 3 website clone experiment (#958, worktree branch experiment/remix-website-clone, app remix-website/) proved WebJs can carry a "futuristic" scroll-driven marketing site (particle background, section-nav, glowing headlines, code panels) with no build step and progressive enhancement intact. We want to capitalize on that by building a NEW, first-class marketing site for WebJs that borrows the remix clone's structure and energy but has a fully distinct WebJs identity, as a candidate replacement for the current website/ home.

This is a design/build task, not a framework change.

Design / approach

New monorepo app website-redesign/ (added to root package.json workspaces). Plain-CSS, unbundled, served static (no Tailwind build step), so it boots instantly for live iteration.

Identity (per the agreed redesign direction, memory project-website-redesign-direction):

• Positioning: "Build on the platform, not against it." Pillars: no build step, web components (not React), works without JS (progressive enhancement), batteries included, Node or Bun. AI-friendliness demoted to one quiet line, never the thesis.
• Visual: dark-first (near-black canvas), warm-orange signature accent (OKLCH hue ~54), off-white text. Light theme a first-class later pass.
• Type: Inter Tight (display) + Inter (body) + JetBrains Mono (code), reusing the woff2 files already in website/public/fonts/.
• Signature background: a live "web" constellation rendered on a native <canvas> (glowing warm-orange nodes joined by lines, mouse/scroll reactive), built with plain platform APIs and NO Three.js. On-brand (it is literally a web) and distinct from remix's racecar particles.
• Structure borrowed from the clone: SSR page that never hydrates, a <section-nav> scroll-spy dot rail, scroll-driven kicker/title/body sections, syntax-highlighted REAL WebJs code panels. No loading screen (anti-PE).

Implementation notes (for the implementing agent)

• New app dir website-redesign/ modeled on website/package.json + website/tsconfig.json, but plain CSS (no css:build). Register it in root package.json workspaces (the glob list does not cover a bare website-redesign).
• Reference structure (do NOT copy content/visuals): ../webjs-remix-clone/remix-website/ (app/page.ts, app/layout.ts, public/global.css, components/section-nav.ts, components/particle-bg.ts). All interactivity lives in light-DOM components; the page/layout never hydrate.
• Reuse website/lib/highlight.ts for code panels and website/public/fonts/*.woff2.
• Landmines: no em-dashes / pause-hyphens / pause-semicolons anywhere (repo prose hook, AGENTS.md invariant 11); brand is WebJs in prose, webjs only as a code token. Never interpolate into a component <style>/<script> body (invariant 9). Signature canvas must boot client-only (guard browser globals; SSR renders the static shell). Running from a git worktree needs node_modules resolvable (whole-dir symlink to the primary checkout).
• Invariants: PE-safe first paint (content readable with JS off), webjs check clean, light-DOM custom CSS tag-prefixed (invariant 7) or Tailwind-free plain global CSS scoped by class.

Acceptance criteria

• website-redesign/ boots via webjs dev and serves / with status 200
• Distinct WebJs identity (warm-orange on near-black, own copy, own signature background), not visually a Remix copy
• SSR content readable with JS disabled (progressive enhancement)
• webjs check passes
• Added to root workspaces; app-level README documents it as a redesign candidate