feat(header): add liquid-metal Contact pill

[ctwhome]

Summary

• replaces the shared header’s plain amber Contact link with an original CTW-native liquid-metal pill inspired by the observed ThreeUI reference
• adds a pointer-following silver highlight, cyan/amber spectral rim, soft bloom, localized press ripple, keyboard focus treatment, and static reduced-motion/touch fallback
• preserves the native /#about anchor, exact accessible name, 44px target, mobile navigation, BFCache behavior, and all shared routes

Source boundary

Reference: https://threeui.com/buttons/liquid-metal-button/pill

ThreeUI identifies the exact renderer source as protected and distributes it through a React/raw-WebGL package. This implementation does not copy or probe that source, install the package, add React/WebGL/canvas, or use ThreeUI assets. It is an original Astro/CSS/TypeScript adaptation based only on the publicly visible interaction language.

Implementation

• semantic + Contact anchor with decorative layers hidden from assistive technology
• CSS conic/radial metal treatment scoped to .ctw-liquid-contact
• event-local pointer coordinates; no global pointer handler, idle loop or continuous animation
• bounded press ripple and pointer capture cleanup
• stored system/full/reduced motion preference initialized consistently across Home, Portfolio, Signals and Workshop
• persisted pagehide resets visual state without breaking BFCache restoration; true unload aborts listeners
• active white hotspots capped at 40% over near-black with a dark text halo for label readability
• dedicated selectors replace the previous fragile last-child styling without affecting design-system guide navigation

Verification

• TDD: initial contract failed against the plain amber Contact link
• bun run check — 0 diagnostics across 52 files
• bun run build — 17 routes; 63 responsive covers; 237 preserved files
• design-system tests — 17/17
• dist tests — 9/9
• liquid-contact E2E repeated twice — 34/34
• full built-preview E2E — 62/62
• homepage visual tests — 3/3
• route/preference matrix covers /, /portfolio/, /signals/, /workshop/
• BFCache persisted/nonpersisted lifecycle regression — passing
• 320px and 390px header fit/44px/label checks — passing
• desktop idle/hover/press/focus and compact screenshots inspected
• fresh staged closure review — CLEAN
• git diff --check — clean

Dependency

This PR is intentionally stacked on #168 and should be retargeted to main after #168 merges.

CI note

Both fresh hosted jobs pass check/build, Signals tests, design, syntax, dist, all 62 browser tests, and visual tests. The changed shared header passes homepage Lighthouse at performance 93/96, accessibility 100, LCP 2.19–2.26s, and CLS 0; Portfolio passes at 98. Both jobs fail only the unchanged Signals Atlas Lighthouse variance (performance 78, CLS 0.456). Both Vercel previews are green.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
ctw.studio	Ready	Preview	Aug 21, 2026 9:51pm
jessegonzalez.dev	Ready	Preview	Aug 21, 2026 9:51pm