- Extract the logo into an inline-SVG LogoMark shared by the loader and
the site logo; one CSS animation driven by `.is-animating`
- Hovering/focusing the logo redraws it from a faint ghost and runs one
wave along the facets; a replay always finishes and can't restart
midway; skipped for reduced motion
- Cap hero subtitles (inner pages + home intro) at 36rem with pretty
wrapping so the About hero no longer runs across half the screen
Co-Authored-By: Claude Opus 5.5 <[email protected]>
- Full-screen loader whose only content is the logo animating: the "B"
draws in and fills, the base facets trace in, then a wave runs along
them until the page is ready (pure CSS, plays before JS)
- Loader gate holds the loader until GSAP + fonts and every 3D scene's
first frame are ready, then waits 1s (min 1.4s total) before leaving;
hard 8s limit, head-script fallback if JS never boots
- Scroll reveals, SplitText and scene entry animations start only once
the loader leaves, so above-the-fold entries play in view
- Internal links fade the loader back in before navigating, so page
changes are one seamless dark transition
- No loader for no-JS or reduced-motion visitors
Co-Authored-By: Claude Opus 5.5 <[email protected]>
- Import all twui layout/elements components and base.css from the
@moduletrace/twui package instead of src/components/lib
- Move the site's own motion and three modules out of the old lib
folder into src/components/motion and src/components/three
- Delete the vendored src/components/lib folder and its tsconfig excludes
- Type BlogPostsListCard's post prop with the DB blog post type,
fixing the type error in BlogPostsList
Co-Authored-By: Claude Opus 5.5 <[email protected]>
- Stage/SceneCanvas: per-breakpoint framing (zoom + horizontal shift)
- Desktop: graphic spans 72% of the hero, zoomed ~1.35-1.4x and shifted
right, masked to fade toward the text column and at top/bottom edges
- Mobile: full-bleed, taller, zoomed ~1.3x; lower part slides under the
text and fades out downward
Co-Authored-By: Claude Opus 5.5 <[email protected]>
- Home hero: full-height, with an interactive 3D wireframe of my face
(MediaPipe landmarks from my-photo.png) rendered as a network graph
with packets, scan sweeps and an assemble-on-load entry animation
- Inner pages: shared PageHero with a themed scene per page
(About helix, Skills geodesic sphere, Work infra stack, Blog signal
waves, Contact globe with connection arcs)
- Shared Three.js stage (framing, GSAP entry, pointer, off-screen
pausing, reduced motion) with lazily loaded per-scene chunks
- GSAP motion system: data-reveal / data-reveal-stagger / data-parallax
attributes, SplitText headings, divider draw-in, page exit fade,
no-JS and reduced-motion fallbacks
- Mobile: graphic stacks above the text
Co-Authored-By: Claude Opus 5.5 <[email protected]>
tbenandClaude Opus 5.5