Level up landing: dark mode, live hero demo, depth + trust polish

[FuJacob]

Takes the landing page "to the next level" while keeping the cozy neobrutalist cat vibe. One PR, grouped below.

🎨 Design

• Live hero demo — a looping faux text field that types → shows a coral ghost suggestion → presses Tab → commits to ink, cycling Gmail / Slack / Notes / iMessage. Shows the product above the fold instead of just describing it.
• Dark mode — full token-flipped palette (cream→charcoal, coral stays) driven by [data-theme] + prefers-color-scheme, a pre-paint no-flash init script, and a sun/moon toggle in the header (persisted, follows system until you choose).
• Depth / cursor-reactivity — TiltCard (subtle pointer tilt on the stats + customization cards) and SpotlightCard (coral glow following the cursor) on the privacy panel and final CTA.
• Section rhythm — the privacy/permissions section is now a scoped dark panel ("lights off, your data's safe") that holds up in both light and dark.
• Closing flourish — a parallax sign-off cat sitting on the giant cotabby wordmark.

⚙️ Engineering

• @layer base fix — element resets (incl. the a {} reset) moved into @layer base so Tailwind utilities win on links. Root-cause fix for the long-standing link-override gotcha; dropped the inline link styles.
• --shadow-color split from --line so dark mode gets proper black depth-shadows with light borders (real dark neobrutalism, not glow).
• useSequencedPhases hook — extracted the repeated phase/setTimeout/IntersectionObserver state machine; refactored the install-drag and Tab-accept demos onto it.
• Perf — Slack + iMessage demos now use the provided gifs (lazy-loaded, native aspect ratio, reduced-motion placeholder), replacing 2 of the 4 YouTube segment players → less JS.
• Banner — now dismissible (persisted per release) and the ScrollProgressBar, which was fully hidden behind it, now sits at the banner's bottom edge.
• A11y/reduced-motion: ParallaxY guard, no duplicate sr-only on the rotating headline, labelled toggle.

📣 Content / trust

• New "not another cloud tool" comparison (local/free/offline vs cloud, using the strikethrough device) and a "lives in your menu bar" mockup.
• Honest social proof band built from real signals (live GitHub stars, AGPL-3.0, 100% on-device).
• Removed the fabricated testimonials-section.tsx (its own copy called them "believable notes" — invented people). I didn't want fake customer quotes on a real product page; the social-proof band replaces it with verifiable facts.
• Fixed FAQ model drift — tabby-1* → tabby-2* with sizes aligned to the customization cards (StructuredData picks this up automatically).

✅ QA

• next build + eslint clean.
• Screenshotted every section in light and dark (headless Chrome, scrolling to fire the in-view reveals) — no regressions; legal/feedback pages re-theme too.
• Verified the theme toggle flips and persists data-theme / localStorage.

Notes / judgement calls

• The "cat wakes up" idea needed an awake-cat asset that doesn't exist (only cat-sleep/cat-standing), so I used the standing (awake) cat as a peeking sign-off on the wordmark instead.
• GitHub-stars route was already well-cached (ISR + s-maxage + SWR + fallback), so I left it as-is.

🤖 Generated with Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
matcha-landing	Ready	Preview, Comment	Jun 5, 2026 6:25am
tabby-landing	Ready	Preview, Comment	Jun 5, 2026 6:25am