Release · v2.23.0
Cursor-tracking glint on the wordmark
feat(v3): cursor-tracking glint on the wordmark
Details
Hovering the name ("Joshua Shay Kricheli") rides a specular highlight across
the letters under the cursor. Reusable: add class `v3-glint` + matching
`data-text` to any text element.
- _sass/v3/_glint.scss: data-text duplicate clipped to the glyphs with a radial
highlight at --gx/--gy; tight hot core -> accent -> transparent (3.5rem,
stops 28%/60%); per-theme core (hot white on dark, saturated warm-amber on
light so lit glyphs stay legible); asymmetric timing (fast in 0.12s, slow out
0.45s); responsive radius on mobile; disabled under prefers-reduced-motion.
- components/cursor-glint.ts: rAF-throttled pointer tracking -> --gx/--gy,
reduced-motion guard, binds every .v3-glint.
- nav.html wordmark gets the class + data-text; layout loads cursor-glint.js.
Tuned over a design-review pass (radius/ramp/colour/timing).
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01HShRpQUmDUttxD5F89ziDu
Files changed (5)
| frontend/client/ts/components/cursor-glint.ts | +45 | −0 |
| frontend/jekyll/_includes/v3/nav.html | +1 | −1 |
| frontend/jekyll/_layouts/v3.html | +1 | −0 |
| frontend/jekyll/_sass/v3.scss | +1 | −0 |
| frontend/jekyll/_sass/v3/_glint.scss | +54 | −0 |