LJ Photography

A logo reveal usually animates every stroke over the same duration, so short strokes crawl and long ones rush. We timed each stroke by its real length so the pen moves at one speed, then eased the whole pass as a single gesture.

• Stroke duration is proportional to path length inside one paused timeline, scrubbed by a single sine ease
• The open ring sweeps round in parallel, slightly ahead of the pen, then holds for 0.15s before the mark travels to the nav
• GSAP autoRound disabled: with pathLength=1, default pixel rounding snaps strokes straight from hidden to drawn
• mask-check.mts renders the draw mask over the glyphs and counts uncovered pixels; the target is 0

The hero cross-fades chapter covers with an organic wipe that rises from the bottom, like light filling a room. WebGL does it on capable desktops; everywhere else a CSS version gives the same rhythm at a fraction of the cost.

• Fragment shader: simplex-noise edge, a soft displacement band along it and a slow zoom settle on the incoming photo
• 5.2s between slides, 1.8s per transition; the canvas renders only during a transition or resize and is idle between slides
• The shader loads by dynamic import after a mount delay, so it never blocks first paint
• Fallback: GSAP clip-path wipe from inset(100% 0 0 0), expo.inOut over 1.5s, with a 1.18 to 1 inner zoom

Each motion has one job in the story of the page. The intro lifts a curtain, headings arrive line by line, the cursor leaves a trail of frames, and the page darkens for the low-key portraits.

• Intro runs on two CSS variables, --intro and --curtain, so the curtain, its corner radius and the logo's travel move as one
• Split-text reveals sit in clipped line masks with 0.25em bottom padding so descenders never clip
• Image trail on fine pointers only: a new frame every 110px of travel, easing out over 0.9s
• After dark: an ink panel opens from a rounded inset card (inset 12% 10%, 48px radius) to full bleed as it scrolls in
• Lenis smooth scroll, with a glide back to the top when the visitor changes chapter

A narrow, high-contrast serif gives the display type the stillness of a printed album. A tight grotesk keeps the practical information plain. One italic accent face is used for single words, never whole lines.

• Display: Instrument Serif 400, tracking -0.02em, line-height 0.92
• Text and captions: Inter Tight; captions 11px uppercase at 0.16em tracking
• Accent: Cormorant Garamond italic, weights 300 and 400, for words such as 'held' and 'hello'
• All three self-hosted through next/font, with the page language set to en-GB

Newborn and maternity photography is mostly skin tones and soft neutrals. Any strong interface colour would fight it, so the interface stays on paper and ink and uses one warm stone for quiet emphasis.

• Paper #f6f4f0 ground; bone #edeae4 behind the intro curtain
• Ink #141312 for text, mute #6d6861 for secondary copy
• Stone #c9b8a3 as the single warm accent
• A fixed grain layer sits over everything to give the paper some tooth