Skip to content

feat(scratchnode): live "big number" room counter on the landing#473

Merged
HomenShum merged 3 commits into
mainfrom
feat/scratchnode-landing-live-stats
Jun 2, 2026
Merged

feat(scratchnode): live "big number" room counter on the landing#473
HomenShum merged 3 commits into
mainfrom
feat/scratchnode-landing-live-stats

Conversation

@HomenShum

Copy link
Copy Markdown
Owner

Re your ask

"we should also surface beautiful animated visual design that live updates and floats around telling the visitors how many rooms has been created, active sessions right now or something, or just A BIG NUMBER THAT IS MEANINGFULLY ATTRACTIVE"

Done — and it's real, not theater.

What it does

A big, glowing room counter floats at the top of the landing hero and ticks up the instant anyone, anywhere, creates a room — because it's wired to a new reactive Convex query, not a fake client timer. A pulsing ● N live right now sub-line shows open rooms.

  • Backend (convex/events.ts): events:getLandingStats{ roomsCreated, liveNow, capped }. Convex queries are reactive, so every subscribed visitor's number updates live with zero polling.
  • Frontend (public/proto/home-v5.html): animated count-up (cubic ease), gentle float, soft terracotta glow, pulsing live-dot. Mobile scales the digits down.

Honest by construction (this repo's agentic_reliability HONEST_SCORES rule)

The big number is the exact backend row count — no fabricated marketing figure. Specifically:

  • Hidden entirely until the backend reports ≥1 room, so an empty/offline backend never flashes a fake "0" (enforced by the render() guard and a .landing-pulse[hidden]{display:none} rule — a class selector otherwise beats the UA [hidden] rule; that was a real bug a test caught).
  • The cheaply + honestly countable metrics are rooms created (cumulative) and live now (open rooms). A true global "people active this second" needs a presence index the schema doesn't have, so I did not fake one.
  • BOUND: count is a full table walk (no Convex count aggregate); capped at 5000, shown as N+ rather than silently undercounting.
  • Read-only subscription, never sets data-sn-live, never throws to the page.

Motion safety

Subtle float + small status-dot ring — no flashing, no large-area pulses — all gated under prefers-reduced-motion.

Verification

  • tsc --noEmit: clean (exit 0)
  • e2e: scratchnode-live-route-honesty.spec.ts 13/13 green, incl. 3 new stats cases (real value renders 1,342, scan-cap renders 5,000+, zero rooms stays hidden)
  • Preview: rendered the counter in-page (64px desktop / 48px mobile, terracotta glow, float animation), accessibility tree confirms order + aria-live

Note: this is a follow-up to #472 (create-room front-door, already merged). Branched fresh off main so the diff is stats-only.

🤖 Generated with Claude Code

Add an animated, reactive hero stat to the apex landing: a large room count
that ticks up the instant anyone, anywhere, creates a room — driven by a new
reactive Convex query events:getLandingStats (bounded scan, returns
{ roomsCreated, liveNow, capped }), not a client timer. A pulsing
"● N live right now" sub-line shows open rooms.

The counter gently floats with a soft accent glow; the number animates up via a
cubic ease when the reactive value changes. Motion-safe: subtle translate + a
small status-dot ring (no flashing), all gated under prefers-reduced-motion;
mobile scales the digits down.

Honesty (agentic_reliability HONEST_SCORES): every figure is a real row count,
no fabricated marketing number. The stat is hidden entirely until the backend
reports >=1 room (so an empty/offline backend never flashes a fake "0"),
enforced by both the render() guard and a .landing-pulse[hidden]{display:none}
rule (a class selector otherwise beats the UA [hidden] rule). The landing
subscription is read-only and never sets data-sn-live, so the apex stays
honestly "not live". Any config/client failure leaves the stat hidden and never
throws to the page.

BOUND: the count is a full table walk (no Convex count aggregate); capped at
5000, surfaced as "N+" rather than silently undercounting.

Covered by 3 new cases in scratchnode-live-route-honesty.spec.ts (real value
renders 1,342, scan-cap renders 5,000+, zero rooms stays hidden). 13/13 honesty
suite green; tsc clean; verified in preview.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@vercel

vercel Bot commented Jun 2, 2026

Copy link
Copy Markdown

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

Project Deployment Actions Updated (UTC)
nodebench-ai Ready Ready Preview, Comment Jun 2, 2026 8:26pm

Request Review

@github-actions

github-actions Bot commented Jun 2, 2026

Copy link
Copy Markdown

✅ Dogfood Visual QA Gate: PASSED

Check Status
Screenshots 23 captured (pass)
Walkthrough 9 chapters (pass)
Key Frames 9 extracted (pass)
Scribe Steps 8 how-to steps (pass)
Build success
Artifacts

Download the dogfood-evidence-9038271 artifact from the Actions tab for full screenshots, frames, and walkthrough video.


Generated by Dogfood QA Gate

Replace the feature-describing hero line "A disposable sidecar room for live
event memory" (jargon, no emotional/temporal hook) with an outcome-first,
say-it-out-loud headline: "The room remembers everything."

Lineage: Linear ("the issue tracker you'll enjoy using"), Slido ("audience
interaction made easy" — the closest live-event Q&A comp), Luma ("delightful
events start here"). Features move into the sub-headline where they belong:
"Drop a code, chat live, hit /ask for sourced answers — and walk away with a
wiki of everything that happened. No account, no app."

Also updates <title>, meta description, and all OG/Twitter card tags so shared
links carry the new hook. 13/13 honesty suite green.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Update public/og-scratchnode.svg to lead with "The room remembers everything."
(matching the landing), and re-rasterize og-scratchnode.png (1200x630) — the PNG
that og:image/twitter:image actually point at — so Slack/Discord/X/iMessage link
previews carry the new hook instead of the old "Turn live events into public
knowledge" copy.

Adds scripts/ui/renderOgImage.mjs: a reusable rasterizer that renders the SVG
through the already-installed Playwright Chromium with the brand fonts (Manrope
+ JetBrains Mono), tolerant of an offline font CDN. Re-run after any OG SVG edit.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@HomenShum
HomenShum merged commit f8daaac into main Jun 2, 2026
17 checks passed
@HomenShum
HomenShum deleted the feat/scratchnode-landing-live-stats branch June 2, 2026 20:38
@github-actions

github-actions Bot commented Jun 2, 2026

Copy link
Copy Markdown

Demo: walkthrough of the surfaces this PR changed is available as a workflow artifact (pr-demo-473) at https://github.com/HomenShum/nodebench-ai/actions/runs/26846607570

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.

2 participants