#231 Homepage hero: living byte-stream backdrop

Summary

The homepage hero sits over a faint, living field of hex bytes.

• Byte stream (web/components/homepage/HeroStream.tsx): a canvas of hex bytes falling in slow columns, barely above the page. Columns brighten in a soft patch around the mouse cursor.
• Easter eggs: every 7–12s, a familiar assistant phrase ("you're absolutely right", "controlplaneforagents", "great question!", …) decodes out of the stream in the left or right third, holds for a few seconds, and dissolves. Phrases are only slightly brighter than the stream, so they reward a second look rather than compete with the copy.
• Legibility: a CSS mask fades the canvas at the edges and quiets it behind the headline and description, with a wider quiet zone on phones.
• CTA: the sign-up button keeps the shared primary style, one size up, with an arrow that nudges on hover.
• Performance and accessibility: glyphs are pre-rendered to an atlas, so each frame is image copies. The loop pauses when the hero is off screen or the tab is hidden. prefers-reduced-motion renders one static frame. The canvas is aria-hidden and ignores pointer events.
• HOME_SIGNUP_HREF lives in lib/home-copy.ts, so client components (NavActions) import it without pulling the hero and its client canvas into their module graph.

Verification

• Checked in the dev server at 1440×860 and 375×812: no horizontal scroll, copy legible, phrases render and dissolve, cursor patch brightens.
• tsc --noEmit clean; vitest run: 627 passed.

🤖 Generated with Claude Code

---

^{Need help on this PR? Tag @codesmith-bot with what you need.}

---

[!NOTE]
Low Risk
Landing-only UI and a shared signup URL refactor; no auth, API, or data-path changes. Client canvas work is scoped with reduced-motion and visibility guards.

Overview
The homepage hero now sits on a canvas byte-stream backdrop: slow falling hex columns, a cursor-brightened patch, and occasional assistant-style phrases that decode and dissolve in the side thirds.

Legibility and layout use new landing.module.css rules to pin the stream behind the fold, mask it at the edges and under the headline, and tune mobile masks and CTA spacing. The primary sign-up control is larger (heroCta) with a hover-nudging arrow.

HOME_SIGNUP_HREF moves from HomeHero to lib/home-copy.ts so NavActions, Hosting, and HomeSections can import the signup URL without pulling the client hero/canvas into their bundles. The animation respects prefers-reduced-motion, pauses when off-screen or the tab is hidden, and uses a pre-rendered glyph atlas for drawing.

^{Reviewed by Cursor Bugbot for commit 76ac7d386aa75dc3b7dab06f807e73d67492ecff. Bugbot is set up for automated code reviews on this repo. Configure here.}

---

Summary by cubic

Places a living byte-stream backdrop behind the homepage hero: slow columns of hex bytes that brighten around the cursor and occasionally decode into familiar assistant phrases, with a larger CTA.

• Glyphs are pre-rendered to an atlas; the loop pauses off screen or in hidden tabs, and prefers-reduced-motion shows a single static frame that updates live when the setting changes, matching the frame drawn at load.
• A CSS mask fades the canvas at the edges and quiets it behind the copy, with a wider quiet zone on phones.
• The sign-up button uses the shared primary style, one size up, with an arrow that nudges on hover.
• HOME_SIGNUP_HREF moved to lib/home-copy so client components like NavActions don't load the hero's client code.

---

Agent Relay sessions

• claude session 3a52b123 · opened via gh pr create · last active 2026-10-17