feat(site): bright "Inspector" redesign — interactive verdict, lens sheen, theme-scan#23
Merged
Merged
Conversation
…heen, theme-scan Drop the warm manila/amber "Case File" palette (kept reading as brown/Claude-ish) for a clean, bright direction the lens-mascot actually belongs in. - Palette: cool near-white base + near-black ink + vivid blue (#2563ff) lead, a cyan scanner glint, and a hot-coral pop (kicker dot, wide-feature lenses). Dark mode recast as a cool slate, not a warm noir. All driven by global.css tokens so marketing + docs reskin together; AA contrast preserved. - Verdict demo is now a live tablist: 7 clickable tabs crossfade the card body, real tab/tabpanel a11y + arrow-key nav, and the "Strong fit" stamp slams in on scroll (the previously-unused --ease-stamp curve). - Hero: bigger Fraunces type contrast, a soft specular lens sheen drifting over the mascot port (replaced a cheap cyan scan-line), CASE No. kicker. - Bento: accent edge-light + lens-icon tilt on hover; section titles wipe in. - Theme toggle: a top->bottom scanline "develops" the page into the new theme via the View Transitions API (flushSync + clip-path reveal, cyan glow edge), with an instant-flip fallback for unsupported browsers and reduced-motion. All motion is reduced-motion gated. Production build, typecheck, and lint pass.
- Verdict card now lifts and tilts in 3D toward the cursor, with an iridescent cyan→blue→silver→coral foil (hard-light blend, vivid on both light and dark) and a glare that tracks the pointer. Desktop + motion-OK only (pointer:fine); touch and reduced-motion get the clean static card. Pure CSS+JS, ~zero weight. - Theme-scan reveal extracted to lib/themeScan.ts (shared by the toggle) and de-lagged: dropped the full-page animated drop-shadow (the jank source) and tightened to 720ms — the clip-path wipe alone is GPU-cheap.
The hero mascot becomes a real WebGL scene on capable desktops: Vee floats inside a clear refractive glass lens (transmission + chromatic aberration) with a glowing cyan aperture rim, tilting toward the cursor with a slow idle drift. Procedural studio lighting via Lightformers — no external HDR, so it keeps the zero-external-calls promise. - Lazy-loaded via next/dynamic (ssr:false): three/R3F/drei never touch the initial bundle — home First Load JS 112 → 114 kB (+2 kB). - Gated to pointer:fine + motion-OK + WebGL + ≥880px. Touch, reduced-motion, no-WebGL, narrow, or while-loading all fall back to the existing clip/poster. - Error boundary around the scene → poster fallback if WebGL drops. - Adds three, @react-three/fiber, @react-three/drei (+@types/three).
- Add drei Sparkles: a cluster of cyan motes drifting around the lens for a bit of magic (especially against the dark theme). - Brighten the aperture rim and beef up the CSS radial glow behind the floating lens so it reads luminous without postprocessing. Tried @react-three/postprocessing Bloom for a real glow, but EffectComposer broke the transparent canvas (a visible box around the lens), so it's out — the emissive rim + Sparkles + CSS halo get the look with the float intact. First Load JS unchanged (114 kB); all 3D still lazy-loaded.
Vee was over-warped through the glass. Cut distortion 0.25→0.03, drop temporal distortion, ease thickness/ior/aberration/blur so he reads clearly with just a gentle lens refraction at the rim.
- Vee is now the live mascot clip (useVideoTexture on mascot.mp4) refracted through the glass, so the character actually moves instead of a still frame. - Rim was too cyan: shift it toward brand blue, dim and thin it; pull cyan out of the sparkles and the CSS glow halo too.
- The glass now rests perfectly still and only tilts while hovered (removed the idle drift/bob); eases back to rest on leave. - Slow the mascot clip (playbackRate 0.8) so Vee's loop reads gentler. - Cut the glass distortion further (distortion 0, lower ior/thickness/aberration) so Vee reads almost directly through near-clear glass.
The 3D glass lens didn't land — restore the original framed video mascot in the hero and drop three/@react-three/fiber/@react-three/drei. The bright palette, holographic verdict card, and theme-scan all stay. First Load JS back to 112 kB.
The single clip had a hard cut at the loop point. Render a boomerang (forward → reversed, via ffmpeg, -tune animation) so it loops with no seam, and ease playback to 0.85x for a gentler feel. Replaces mascot.mp4 (185K) with mascot-loop.mp4 (403K, 12s). Reduced-motion still shows the static poster.
The final CTA floated in a void — ~100px above and ~90px below. Trim the CTA section's top padding and the footer's margin-top so the showcase strip, CTA, and footer read as one cohesive bottom (~54px gaps).
Swap the View-Transition scan reveal — which lagged because it animated a blurred filter over a full-page snapshot — for a quick white "screenshot" flash that masks an instant theme swap, like snapping a photo of the repo. It's just one fading overlay (GPU-cheap, no snapshot), so there's no lag. Reduced-motion still flips instantly. Removes lib/themeScan.ts + the ::view-transition CSS.
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 & why
Three rounds of feedback converged on one root cause: the warm manila/amber "Case File" palette kept reading as brown / "Claude Code theme". This drops it entirely for a clean, bright "Inspector" direction the lens-mascot actually belongs in — and adds the interactive + motion polish that makes the page feel alive.
Changes
Palette (one source of truth —
global.csstokens drive marketing and docs)#2563fflead, cyan scanner glint, hot-coral pop (kicker dot, wide-feature lenses).Verdict demo → live tablist
tablist/tab/tabpanelsemantics + roving-tabindex arrow/Home/End nav (wasrole="img").--ease-stampcurve.Hero & sections
CASE No.kicker.Theme toggle → scanline reveal
flushSync+clip-pathreveal with a cyan glow edge).prefers-reduced-motion.Verification
next build) — static export, all 17 routes, home 4.51 kB / 112 kB First Load JStsc --noEmitclean · ✅ ESLint cleanNotes
maindeploys to GitHub Pages (website/**trigger) — this is the live site.