Skip to content

Make every page respond within a frame: still field, no live blur, instant feedback - #195

Open
sdcarlson wants to merge 1 commit into
mainfrom
claude/ui-smoothness
Open

sdcarlson wants to merge 1 commit into
mainfrom
claude/ui-smoothness

Conversation

@sdcarlson

Copy link
Copy Markdown
Contributor

What

Hover and click felt slow. I measured first, under Chromium with a 4x CPU throttle and the WebGL background forced on, then removed the causes.

Page p95 frame time, before → after Worst interaction, before → after
Factory 100 → 16.7 ms 3,280 → 32 ms
Attest 217 → 16.8 ms 688 → 40 ms
RISE 350 → 33 ms 1,144 → 120 ms
FLYSPACE 267 → 16.8 ms 2,824 → 56 ms
Plus 33 → 16.8 ms 3,360 → 40 ms
Home 67 → 33 ms 760 → 88 ms

With the background turned off, every static page was already smooth. That isolated the cause.

Changes

  • Background field: one still frame, redrawn on resize only. It used to re-render at 60 fps on every pointer move, so the GPU was busiest exactly while visitors hovered. The 3D sigils are still too.
  • No live blur: the sticky header and glass panels drop backdrop-filter over moving content and use translucent solids instead.
  • Hero video: the colour grade and dimming are baked into new v2 clips and posters, with a mean difference of 1–2/255. This removes a per-frame CSS filter, opacity and blend mode over a full-screen video. The entrance is faster and has no blur.
  • Reveals: 360–420 ms, transform and opacity only.
  • Magnetic buttons removed.
  • Interaction layer:
    • 100 ms hover and 60 ms press on buttons and links.
    • Visible focus rings, and no tap delay on touch.
    • Hover effects only on devices that can hover.
    • An automated audit hovered every visible control on 16 pages; all now respond.
  • Instant navigation: same-site links prerender after a short hover (Speculation Rules), and pages crossfade with cross-document View Transitions. Both are ignored where unsupported.

Checks

  • scripts/*.test.mjs: 32 pass. server/test: 208 pass.
  • pnpm build:site plus all "Prepare public site" assertions.
  • scripts/qa.mjs: the only error is the staff worker bundle, which a later step builds.
  • Before/after screenshots of the hero and factory pages match.

Generated by Claude Code

…stant feedback

Measured first (Chromium, 4x CPU throttle, WebGL field forced on), then fixed the causes:
- The fixed WebGL field behind every page re-rendered at 60 fps whenever the
  pointer moved, so the GPU was busiest exactly while visitors hovered. It now
  renders one still frame (redrawn on resize only); 3D sigils likewise.
- No backdrop blur over content that moves: the sticky header and glass
  panels use translucent solids; the menu backdrop blur is lighter.
- Homepage hero: the colour grade and dimming are baked into new v2 clips
  and posters (mean difference 1-2/255), removing a per-frame CSS filter,
  opacity and blend mode over a full-screen video; the entrance is shorter
  and has no blur.
- Reveals: 360-420 ms, transform and opacity only, smaller stagger.
- Magnetic buttons removed (targets no longer move under the cursor).
- Interaction layer: 100 ms hover, 60 ms press feedback on buttons and
  links, focus rings, touch-action manipulation, hover only where hover
  exists; every visible control now changes on hover (automated audit).
- Same-site links prerender after a short hover (Speculation Rules) and
  pages crossfade (cross-document View Transitions).

Result (p95 frame time / worst interaction, before -> after): factory
100 ms / 3280 ms -> 16.7 / 32; attest 217 / 688 -> 16.8 / 40; rise
350 / 1144 -> 33 / 120; flyspace 267 / 2824 -> 16.8 / 56; plus 33 / 3360
-> 16.8 / 40; home 67 / 760 -> 33 / 88.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01VHrJ4fbaWysbQJ2TrSq6FB
@chatgpt-codex-connector

chatgpt-codex-connector Bot commented Nov 5, 2026 •

Copy link
Copy Markdown

Codex Review Summary

This comment shows the latest Codex review activity on this pull request.

Review Status Commit Review trigger
📝 Code Review ✅ Completed 2026-11-05T04:28:12.853473Z 5f63d68 PR opened
ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review" or "@codex security review".

Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings.

This branch has not been deployed

No deployments
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