← Back to Solstice House

How the house was built.

A short record of the concept, the stack, and a prompt that would make a site like this one.

The concept

Solstice House is a fictional members-only longevity and recovery club, built as a design study. The site is made to feel like the brand: light, warm, editorial, and quiet — the opposite of a dark, technical product page. The single sentence that set the register was "a place to come back to yourself," and every typographic and motion choice was tested against it.

Design tokens

• Palette: warm paper — bg #faf8f4, text #191817, dim #6f6a63, accent #c8552e, ember #b04525.
• Display: Fraunces (variable optical-size serif; its italic carries the site's whole secondary voice — labels, markers, marginalia).
• Body: Instrument Sans (variable). Both faces are self-hosted latin-subset woff2 — no font CDN in the request chain.
• Accent discipline: the warm terracotta is used only for emphasis, rules, sun marks, and one CTA — well under 10% of surface area.

The one signature mechanic: a solar day

The page runs on a single sun. At the top it rises — a warm radial wash that climbs the hero on load (pure CSS keyframes), then drifts on a 26-second loop. As you scroll out of the hero, a GSAP scrub lowers the sun back toward the horizon line and deepens the light to dusk. The three rooms carry small sun-position marks — rising, noon, setting — and at the Visit section the dusk wash gathers again at the door. One mechanic, told across the whole page; no WebGL, no canvas. With ?noanim, reduced motion, or a failed CDN, every layer rests at a designed static state (dawn in the hero, dusk at the door).

Stack

• Single self-contained index.html, inline CSS + JS.
• GSAP 3.12.5 + ScrollTrigger, pinned: scroll reveals (opacity + translateY) and the solar-day scrub.
• Lenis 1.1.13 for smooth scroll, driven by the GSAP ticker only (one rAF owner).
• IntersectionObserver fallback if the CDN fails; static fallback via ?noanim and prefers-reduced-motion.
• Self-hosted Fraunces + Instrument Sans (variable woff2, preloaded). No images — every visual is typographic or CSS-drawn.

Verification

Gates run after every pass: HTTP 200, title + canonical present, proof screenshots read at 1440×900 and 375×812, no horizontal overflow at 375/768/1280, zero console errors on a scripted scroll-through, reduced-motion and CDN-failure drills, first-load weight budget, and a fabrication scan returning no unproven numeric claims. All copy is commitments and description — no invented statistics, testimonials, or credentials.

---

Reusable prompt

Match every detail below exactly. Build a single-page site for a fictional
members-only longevity and recovery club, honestly labeled as a fictional
design study in the footer. Stack: one self-contained index.html, inline
CSS/JS, GSAP 3.12.5 + ScrollTrigger + Lenis 1.1.13 pinned, fonts self-hosted
as variable latin woff2 (Fraunces 300-600 roman+italic for display and all
secondary labels — set in italic sentence case, never uppercase — and
Instrument Sans 400-600 for body), preloaded with fetchpriority=high.
Palette: bg #faf8f4, text #191817, dim #6f6a63, accent #c8552e, ember
#b04525; accent under 10% of surface. ONE signature mechanic — a solar day:
(1) on load a blurred warm radial "sun" (radial-gradient closest-side,
rgba(255,221,170,.55) core, blur 8px) rises across the 100dvh hero over 9s
via CSS keyframes, then drifts on a 26s loop; (2) a GSAP scrub
(start "top top", end "bottom 20%", scrub .6) lowers the sun wrapper
yPercent 34 and crossfades a dusk gradient layer to opacity 1 as the hero
leaves; (3) the final Visit section carries a low amber dusk wash scrubbed
from 0 to 1 on entry, resting fully visible without JS. Sections: hero,
philosophy, three room cards (each with a 30px CSS sun-position mark —
horizon line + 7px dot at rise / noon / set), single-tier membership with
price withheld ("by invitation"), founder note (no credentials), visit,
footer with the fictional-concept line. Hospitality register, no medical
outcome claims, no statistics, no testimonials, no phone number. Reveals:
opacity/translateY(22px) gated behind an html.js head class, start "top
86%", cubic-bezier(.22,.61,.36,1); ?noanim, prefers-reduced-motion, and
CDN failure must each render the complete page at final values. Flawless
at 1440×900 and 375×812; zero horizontal overflow at 375/768/1280.

Solstice House is a fictional concept, built as a design study · © 2026