feat(site): machine-collage hero, use-case cards, and /for/ pages - #262
Merged
Conversation
…3D stage The hero keeps the baked demo wall but replaces the 3D PSP with a machine matrix: seven targets (PSP, PS Vita, Nokia E7, iPhone 2G, PocketBook Verse, ESP32-P4, macOS) with their silicon — CPU, RAM, display, year — and one fixed roster of seven flagship apps re-lit per machine, so partial support is visible instead of implied. The matrix auto-rotates every 6 s, pauses on hover/focus/off-screen, and parks on any manual pick; reduced-motion never rotates. Every dot is repo-claimed: mint = verified on the machine, sky = builds today with the hardware pass pending, hollow = not yet. The device taxonomy chips catch up with the same sweep: iPhone 2G joins as live, M5Stack Tab5 becomes live (renderer hardware-verified at 720p), Playdate and PocketBook move to in-progress per their own READMEs, and iOS moves to in-progress now that #256 plays on the simulator. The 3D stage is now playground-only: the homepage no longer loads pocket-stage-web.js, while the build keeps packaging /stage/ (model, profile, launcher payloads) because the playground wraps its live framebuffer in the same model. verify-playground-stage passes against the rebuilt dist; site-stage tests re-pin the new split. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The first screen is rebuilt around one idea: the most striking thing on
entry is what runs on what. The h1 becomes a rotating app-on-machine
statement in display type ("A real Figma file / on a 2004 Sony PSP.",
"Real Vue components / on a 1989 Game Boy."), with the machine's silicon
as spec chips underneath, an honest also-running line, and a machine rail
to steer. Slides stack in one grid cell so the hero never changes height;
inactive slides are inert. The old one-liner survives as a small-caps
kicker above the title.
The machine matrix moves out of the hero into its own "What runs where,
today" section, replacing the proof strip whose six facts the rotating
title now carries. The hero and the matrix share one rotator (pause on
hover/focus/off-screen, park on manual pick, countdown sweep, no rotation
under reduced motion). Also sweeps the five em dashes out of the new copy
per the landing-page house style, with a test guard so they stay out.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The hero becomes the machine collage picked from the design round: eight devices in CSS bezels, every screen a real capture playing at once, cropped live out of the baked demo wall's known 4x4 tile grid. The Figma screen is a committed still of the 8% zoomed-out spread, because the wall loop passes through the 59% close-up whose cartoon figure is not to be used. The collage sits on a fixed 1440x820 canvas that cover-scales to fill the first viewport, so narrow screens crop the sides instead of stacking devices. H1 stays "Rich interactive JavaScript where no browser fits."; the sub now says what PocketJS is in one sentence. CTAs are Get started and Star on GitHub. The pillars section moves below the target selector and becomes four capture-backed cards with one-line claims, each opening a new /for/ page (interfaces, games, worlds, agents). The pages share the homepage chrome via site/for/shell.html + fragments, rendered by build.ts, and carry the longer story with receipts and links. The ".pocket format" and "Built for every kind of impossible" sections are removed entirely, and the footer Explore column now lists the four pages. site-stage tests re-pin the collage (eight devices, the 8% Figma still, retired sections stay retired) and extend the em-dash guard across the /for/ surfaces. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
doodlewind
changed the title
The hero collage already carries the apps-on-machines story, so the matrix section between the hero and the target selector comes out whole: markup, .lp-mx styles, and the rotator/matrix glue in home.js. The page now walks hero, target selector, use-case cards, showcase, closing CTA. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
A ground-up landing redesign. The through-line: PocketJS's defining quality is many apps on many wildly different machines at the same time, so the page never rotates content; breadth is always on screen.
Hero: the machine collage
Eight devices in CSS bezels ring the headline, every screen a real capture playing at once, cropped live out of the baked demo wall's known 4x4 tile grid (five
<video>crops + one still + two honest CSS mocks for Game Boy and ESP32-P4 pending real clips). Each device carries a caption chip: app, machine, clock and RAM.Page walk
hero → "Write the app you already know how to write" → use-case cards → showcase → CTA.
/for/page (/for/interfaces/,/for/games/,/for/worlds/,/for/agents/): landing-style chrome viasite/for/shell.html+ per-page fragments rendered bybuild.ts, no hero, short copy on how PocketJS serves the scenario, receipts and links. Footer Explore lists all four.The 3D PSP stays playground-only
The homepage no longer loads
pocket-stage-web.js, while the build keeps packaging/stage/because the playground wraps its live framebuffer in the same model (#260).Verification
bun tools/test.ts --stage=unit— 204 pass. site-stage tests pin the collage (eightlp-devdevices, the 8% Figma still, retired sections stay retired,/for/links present) and extend the em-dash guard across home + the five /for/ sources.bun site/build.tsclean,/for/*/index.html+/assets/wall/crops emitted;verify-playground-stageall 13 checks green.🤖 Generated with Claude Code