Skip to content

design: live fan-out hero map, with the redesign's best parts on the live site - #225

Draft
kixelated wants to merge 4 commits into
mainfrom
design/v2
Draft

kixelated wants to merge 4 commits into
mainfrom
design/v2

Conversation

@kixelated

Copy link
Copy Markdown
Collaborator

The live site, kept as the base, with flair ported in from an exploratory redesign, and a live fan-out map in the hero. The copy stays the live site's own: no new taglines.

hero map

What changed

Hero map. This is a live SVG drawing (src/components/fanout/map.ts).

  • Five edge relays sit in a mesh. Publishers (a camera, a mic, and a robot driven by a remote operator) and viewers each attach to their nearest edge.
  • Every frame goes up to its publisher's edge, then follows the shortest-path tree across the mesh, copied at each relay toward every viewer's edge.
  • Each broadcast has its own color, shared by its frames, its label, the links it just lit and the viewers watching it.
  • Viewers join and leave, snapping to their nearest edge.
  • The map pauses offscreen, in hidden tabs and under reduced motion. It holds 60 fps.

Type and polish.

  • Bricolage Grotesque display type, Geist and Geist Mono.
  • A marker underline that draws in, chunky hard-shadow buttons, hover states.
  • A small motion toggle in the footer.

Nav. Hand-drawn words, spaced out, with a soft dark halo. A compact header and menu on phones.

Home page.

  • A news ticker of real posts.
  • A tilted green sash under the hero, carrying the feature titles.
  • Ruled feature and use-case lists with the drawn icons.
  • The live standards strip and a plain "The MoQ Alliance." heading.
  • The footer cat is bigger.

Blog. A large featured latest post, then flat cards by year, with no tape or tilt.

Demo. Card art sits on plain dark panels.

Screenshots

Before After
Home
Home, 390 px
Blog
Demo

The images live on the assets/design-v2 branch. Delete that branch once this PR lands.

How this was made

Five rounds of redesign variants (bold to conservative) were each scored out of 10 by Claude Opus and GPT Sol, with Gemini as a low-weight third reviewer.

Round Best variant Opus + Sol consensus
1 "ON AIR" 7.85
2 Refined 8.0
3 R3-B 8.3
4 R4-B 8.5
5 R5-A / R5-B about 8.5

The council kept rewarding loudness. The owner's review of round 5 rejected most of it: the copy, the cat walls, a latency demo that was technically wrong, the tape and tilt. This PR is the result of that review: the live site as the base, with the parts the owner liked ported in and iterated on directly.

Follow-ups

  • Real lobby in the hero. A live MoQ lobby (src/lib/lobby.ts on branch design/r3-lobby, local only) that publishes and subscribes on the anon relay. It needs a moq submodule bump and rate limits on the anon namespace before it can go live.
  • Hand-drawn assets. The map's agent and viewers are plain dots, and drawn versions would fit better. The legend label "a frame, in its source's color" is a placeholder.

Test plan

  • just fix, bun run check, bun test src/lib
  • Looked at home, blog, a post and demo at 390, 768, 1024 and 1440 px in the dev server.
  • Reduced motion, a paused tab and offscreen all stop the map, and it stays a full frame when paused.
  • Owner review in the dev server

Never deployed.

🤖 Generated with Claude Code

(Written by Claude Opus 5.5)

kixelated and others added 4 commits November 7, 2026 22:12
…ut map

Starts from main and ports selectively from the R5 redesign:
- Bricolage/Geist/Geist Mono type, chunky buttons, marker underline draw-in,
  hard-shadow cards, motion toggle (footer only), and reduced-motion handling.
- Hand-drawn word nav, thickened with same-color shadows plus a dark halo and
  spaced out, with the compact phone header and menu.
- Hero keeps the live copy; the diagram is now a live map of edge relays where
  publishers and viewers attach to their nearest edge and frames copy at each
  relay along the shortest-path tree. Pauses offscreen, in hidden tabs, and
  under reduced motion.
- Fan-out steps (x1 to x1,000) under the live "Massive scale" feature line,
  the news ticker, ruled feature and use-case lists with drawn icons, the live
  standards strip, and a plain alliance heading.
- Blog keeps the featured latest post; other cards are flat with no tape or
  tilt. Demo thumbnails are plain dark panels. Footer cat is larger and the
  footer taglines are gone.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
- The hero map drops to five edge relays and a few roaming viewers.
- Sources take turns: the camera, then the mic, then the robot and its operator. Each source's frames, label, lit links and viewers share one color, and endpoints outside the current turn dim.
- New viewers watch whichever broadcast is furthest below its share, so every turn fans out.
- The nav words lose most of their thickening and keep a soft dark halo.
- The "Massive scale" cat steps are gone. "Massive scale" is back in the features list.
- A tilted green sash carrying the feature titles takes the old section's place.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
- Every publisher now streams at once in staggered bursts.
- Frames are faster and carry comet tails.
- Links glow in the color of the broadcast that just crossed them.
- Endpoints ripple as frames leave or land.
- Relay and endpoint icons are much larger and scale with the map.
- The hero gives the map more width and drops the dead space under it.
- The green sash now sits just before "From the blog".

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant