Redesign the 404 page: lost terminals drifting across the relay - #117
Conversation
Reuse the homepage marquee's agent terminals, cut loose onto diagonal lanes that cross the page at different angles and depths. Each card hesitates, backs up and carries on, wobbles, carries a "lost" status tag, and sheds spinning Claude Code marks. The 0 in 404 is a spinning Claude mark, a delivery-log terminal shows the missing path, and clicking the page sends out a burst of marks. Pointer parallax by depth; reduced motion gets a static scatter. HeroTerminalMarquee now exports HeroTerminalCard and its card data so the 404 can render the same terminals. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
|
Important
This repository does not receive automatic reviews because it has fewer than 10 stars. ⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Advanced Run ID: Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
Preview deployed!
This is a Cloudflare Workers preview version of this PR's build. |
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes using default effort and found 2 potential issues.
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
Want higher recall? High effort reviews run extra passes and find more bugs. A team admin can switch effort levels in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit dd06692. Configure here.
| .page::before { | ||
| position: fixed; | ||
| inset: 0; | ||
| z-index: -1; |
There was a problem hiding this comment.
404 page cannot scroll on small screens
Medium Severity
.page keeps overflow: hidden and the previous mobile overflow: auto override is gone. With min-height: 100dvh and a 1fr content row, many browsers treat that min-height as a definite size, so the large 404 block, readout, and stacked buttons clip instead of growing the page. On short or landscape phones the actions and footer can sit off-screen with no way to reach them. Decorative cards already clip inside the fixed .field, so the page itself does not need to hide overflow.
Additional Locations (1)
Reviewed by Cursor Bugbot for commit dd06692. Configure here.
| useEffect(() => { | ||
| window.addEventListener('pointerdown', burst); | ||
| return () => window.removeEventListener('pointerdown', burst); | ||
| }, [burst]); |
There was a problem hiding this comment.
Touch scrolling fires click bursts
Medium Severity
The burst handler listens for pointerdown on window and never ignores touch. pointerdown fires at the start of a finger contact, including when the user is about to scroll, so each scroll attempt on a phone spawns twelve animated Claude marks. Parallax already bails out for pointerType === 'touch', but bursts do not, so mobile browsing of the 404 page is noisy and extra work for the GPU.
Reviewed by Cursor Bugbot for commit dd06692. Configure here.
3 participants
What
A new 404 page that matches the homepage branding. The terminals from the homepage hero marquee have come loose and are lost.
HeroTerminalCards (Claude Code, Codex, Grok, OpenCode, each with its live animated body) travel on diagonal lanes at different angles. They move across the page, stop, back up in confusion, then keep going. Each card wobbles and has a "lost" tag (↺ rerouting · attempt 14,→ DM to 404: hello?). One is reading the map upside down.relay deliver <the actual missing path>, then fails with404 · nobody is subscribed to this route.btn btn-primary).Refactor
HeroTerminalMarquee.tsxnow exportsHeroTerminalCard(one card pulled out of the marquee row),AGENT_METAand the row data. The marquee itself renders the same as before. The oldLostMessageswidget is removed.Testing
tsc --noEmitpasses.vitest: 278 pass. The 2 failures are inlib/test/flow-push-guard.test.ts, which this PR doesn't touch.🤖 Generated with Claude Code
Note
Low Risk
UI-only changes to the 404 page and a shared hero component refactor; no API, auth, or data-path impact.
Overview
Redesigns the 404 experience around homepage “lost relay” branding: drops the two-column layout and interactive
LostMessagesmisrouting widget in favor of a centered hero with a glitchy 404 (Claude mark as the zero), new copy/metadata (Lost in the relay), and home/docs CTAs wired to global button styles.Adds
LostField— a decorative client backdrop that reuses exported homepageHeroTerminalCards on diagonal lanes (wobble, parallax, sparks, click bursts) withprefers-reduced-motionand responsive lane culling.Adds
RouteReadout— a terminal-style log that runsrelay deliveragainst the actual missing pathname and reports the 404 failure.Refactors
HeroTerminalMarqueeby extracting and exportingHeroTerminalCard,AGENT_META, and row card data so the marquee behavior stays the same while the 404 can scatter the same terminals.Replaces
not-found.module.csswith styles for lanes, vignette, readout, and animations (old network-stage styles removed).Reviewed by Cursor Bugbot for commit dd06692. Bugbot is set up for automated code reviews on this repo. Configure here.