Site: hero buttons on phones, "Built differently." and the stack scene

[GLinnik21]

Landing-page follow-ups to #625: two phone fixes, a new slogan, and the approach diagram redesigned in Claude Design.

Hero buttons side by side on phones. Before: on an iPhone, "Install PlxNative" and "View on GitHub" wrapped onto two lines, each as wide as its own label. After: under 760px they stay on one row. Type (14–16px), padding and the gap scale with the window, so the pair fits from 320px up, and both buttons stay 48px tall.

"Built differently." The approach section's headline becomes this slogan, as large as the hero's. The sentence under it, still lit word by word as you scroll, moves down a size.

The stack scene. Before: a small line drawing of PlxNative's own layers, with nothing to compare against. On iPhone each slab also sat on a hard grey disk, because Safari ignores a CSS blur inside an SVG.

After: under "Most TV apps run inside a browser. PlxNative doesn't."

• The typical TV app starts as one closed block. It opens as the scene scrolls in, showing seven isometric glass plates: the demo frame on the app's plate and on the screen, and a fine white wireframe on each plate between them.
• JavaScript, the browser engine and the compositor slide away one after another.
• The four plates that stay close up under the app, and the label turns from "A typical TV app" to "PlxNative".
• A still motion blur of the picture runs from the app down to the screen.
• "60" counts up from 0 as the stack closes.
• Each plate has a visible glass edge and a band of light that crosses it as you scroll, and light pools under the screen plate.
• Nothing loops; every change is tied to the scroll position.
• No app is named and no speed is claimed beyond the existing "60 fps on a 2019 TV".

How: site.js writes a few custom properties: each plate's height (--f), each browser plate's exit (--t), the end state (--k), the opening (--open) and the light (--s). styles.css does the rest. Without JS, or under reduced motion, the page shows the settled PlxNative stack. On wide screens the scene is pinned for 220svh. On phones and short landscape windows it plays in the page's flow while the stack's middle moves from 85% to 40% of the window, so all of it plays on screen.

Verification:

• Rendered in Chromium at 1440×900, 1280×720, 393×852 and 320×568, at five scroll points each, using instant scrolling:
  • nothing scrolls sideways;
  • the pinned scene clears the header capsule and fits the window;
  • labels never overlap;
  • no console errors;
  • the count reaches 60 as the stack settles.
• Scroll performance on the latest commit, scripted full-page scroll:
  • iPhone size at 4× CPU: no slow frames.
  • Desktop: one 33 ms frame over the whole page.
  • No long tasks while scrolling, no layout shift, and LCP below main's.
• Hero buttons, checked at 320–759px: one line at every width.
• tools/subset-site-fonts.py check passes.
• unittest over ci/test_ci_workflows.py, tests/test_site_video.py, tests/test_site_stills.py and tests/test_demo_library.py: OK.

🤖 Generated with Claude Code

https://claude.ai/code/session_01BJ2h83YxmxxQSEFgaMJM5a

---

Generated by Claude Code