How Night Sanctuary was made.

the one-sentence vibe

“A candlelit sanctuary under a night sky: hushed, vast, reverent.”

Night Sanctuary is the boldest of three deliberately unrelated concepts for Dr. Wells's personal brand. Where the first concept is a warm morning magazine, this one is cinema: full-bleed acts, a living sky, one carried light. The metaphor runs the whole way through: her work is walking with people through dark seasons, so the site itself is a dark season with a light moving through it. Every choice serves the same conversion goal: make booking her feel like the natural next step.

the signature: a living sky

The background is one fixed WebGL canvas (Three.js, ~1,600 far stars + 420 near stars as additive point sprites) with a slow scroll-driven camera: as you read down the page, you sink deeper through the starfield. One warm ember, a flickering gold sprite with a small trailing cluster, starts high in the sky on arrival and descends with you, so the “candle carried through the dark” is literally enacted by scrolling. Motion engine rules kept it honest: no GSAP, no scroll-jacking, just a requestAnimationFrame loop reading scrollY, lerped for calm.

• Pixel ratio clamped to 1.75; point counts halved on mobile; low-power GPU hint.
• Pauses entirely when the tab is hidden.
• prefers-reduced-motion removes the canvas before it initializes. The site is plain deep-indigo and fully readable.
• No WebGL? The canvas removes itself. Content never depends on it.

palette: six colors of night

• Night #0B0E1A The ground: deep indigo-black
• Night 2 #131A30 Raised panels
• Candle #E8B04B The light: kickers, buttons, stars
• Candle deep #C58A2E Borders, hovers
• Moon #F4EFE6 Primary text
• Moon dim #AAA79B Secondary text (AA on night)

Warm white on deep indigo holds ~15:1 contrast; the dim secondary text still clears 7:1. Gold is reserved for light itself (kickers, stars, buttons, hovers) so it keeps its meaning.

typography

Cormorant, the liturgy

Karla, the plain speech

Cormorant’s high-contrast strokes read like candlelight on stone, used huge and light-weight for the act titles. Karla, a quiet humanist sans, carries body text and the lowercase letterspaced kickers (marked with a ✦ star, this site’s recurring glyph). Self-hosted WOFF2, font-display: swap. Deliberately nothing in common with the other two concepts’ type.

imagery: candlelit night photography

All imagery is AI-generated placeholder photography (GPT Image 2), shot dark: chiaroscuro candlelight against deep indigo, so this concept still reads as a different world from the golden-morning site. The recurring woman is a generic stand-in, not a real person. The ambient candle loop in Sessions is a 5-second generated video (Kling 3.0 turbo, 1.5 MB, lazy, muted, paused under reduced-motion). Every slot is annotated in source for real photography.

accessibility & performance

• Content is static HTML above the canvas. Reveals are CSS transitions triggered by IntersectionObserver, and the no-JS default shows everything.
• Skip-link, landmarks, focus rings, keyboard-complete menu, native <details> FAQ.
• The sky is aria-hidden decoration; nothing meaningful lives in it.
• Budgets: LCP ≤ 2.5s, CLS ≤ 0.1, Lighthouse ≥ 85, verified before deploy.

the seams: what to replace

• Her real story on Her Story (three watches are placeholder narrative).
• Real credentials and affiliations on Foundations.
• Real engagements, fees, logistics: every <!-- PLACEHOLDER --> in source.
• Real photography (or keep the painted look: it’s hers now).
• Contact email/phone; the form posts via Netlify Forms once on a permanent account.

stack

Astro 5 static · hand-written CSS design tokens · Three.js (the only JS beyond ~2 KB of UI glue) · Astro/sharp image pipeline · Netlify. Build: npm run build → dist/.