style: homepage revamp with staggered focus and animated wavy underlines #18

Merged

me merged 8 commits from style/homepage-revamp into main

2026-08-29 14:48:10 +00:00

me commented

2026-08-29 14:01:42 +00:00

Owner

Summary

This PR revamps the homepage narrative storytelling scroll experience:

Wavy Underlines & Clipping Fix:
- Replaced stretched single-SVGs with an invariant repeating SVG mask tile (24px wavelength \times 10px height).
- Solved font descender collision and 10:1 aspect ratio compression across long phrases.
- Fixed z-index layering (z-30) so text and underlines always sit cleanly above floating envelope/phone mockups.
Staggered Entrance Animation:
- Stage 1: Sentence prefix/suffix text renders into view upon scroll.
- Stage 2: Highlighted keywords bloom into sharp focus smoothly over 1.1s (delay = 0.85s).
- Stage 3: Wavy underline writes on smoothly from left to right over 2.1s (delay = 1.45s).
Verification:
- All beats verified visually via Playwright captures across desktop and mobile viewports.
- bun run check & bun run build (with SSR pre-render) passed with 0 errors.

## Summary This PR revamps the homepage narrative storytelling scroll experience: 1. **Wavy Underlines & Clipping Fix**: - Replaced stretched single-SVGs with an invariant repeating SVG mask tile (`24px` wavelength $\times$ `10px` height). - Solved font descender collision and 10:1 aspect ratio compression across long phrases. - Fixed z-index layering (`z-30`) so text and underlines always sit cleanly above floating envelope/phone mockups. 2. **Staggered Entrance Animation**: - **Stage 1**: Sentence prefix/suffix text renders into view upon scroll. - **Stage 2**: Highlighted keywords bloom into sharp focus smoothly over 1.1s (`delay = 0.85s`). - **Stage 3**: Wavy underline writes on smoothly from left to right over 2.1s (`delay = 1.45s`). 3. **Verification**: - All beats verified visually via Playwright captures across desktop and mobile viewports. - `bun run check` & `bun run build` (with SSR pre-render) passed with 0 errors.

me added 8 commits

2026-08-29 14:01:42 +00:00

fix: restore sticky homepage pane by clipping main without a scroll container b856770873

style: revamp homepage with cinematic entrance and curved wavy underlines 1e95efe12f

style(homepage): fix wavy underlines clipping and restore scroll write-on animation 466c6fa036

style(homepage): add 1s delay and longer 1.6s draw duration to wavy underlines 8e8f78ef1b

style(homepage): add 0.5s entrance delay for highlighted text elements a5b3c8e77c

style(homepage): increase wavy underline draw duration to 2.1s 037f1b866e

style(homepage): smooth late-focus entrance for highlighted words with coordinated wavy underlines a954f09546

style(homepage): reduce wavy underline delay by 0.5s to 1.45s

CI / Generate Certificates (pull_request) Successful in 18s

Details