Teardown
What the source actually says
Everything below is read straight from the shipped CSS and JS bundles, not guessed from screenshots. The site is Next.js + DatoCMS + Mux video, animated with GSAP, ScrollTrigger, and Lenis.
One color does everything
Candlelight cream #fdecb4 appears 90 times in the CSS – text, buttons,
focus rings, selection. The darks are warm browns (#402b2b, #1d1d20),
never a cold black. Even the favicon swaps per color scheme.
Zero @keyframes in the CSS
Every entrance, parallax, and scroll effect is orchestrated in JS – one source
of truth for choreography. CSS keeps only micro-state transitions
(underline wipes, icon inverts). Grep the bundles: no @keyframes at all.
The hero is a diorama, not a shader
A streamed video base, CMS-positioned parallax layers driven by
--posX/--posY/--order custom properties, a scrim, the logo. Depth from
stacking. The real h1 sits screen-reader-only under the logo image.
Fluid type with a lock
clamp(min, calc(min + Δ·(100vw − 80rem)/40), max) – sizes interpolate
only between 1280 and 1920 px and hold still everywhere else. No tiny phone
text, no runaway ultrawide headlines.
Two typefaces, strict roles
Petit Serif for uppercase display (tight -0.02em tracking), PP Fragment
Sans Light for everything else. Eyebrows get an extreme 0.5em letter-spacing
– the quiet luxury signal. Titles mix in a smaller raised word via inline
<i>.
Scrims are a component
G06Gradient takes color as RGB channel variables and direction/size as
data-position / data-size attributes – twelve explicit stops instead of
ad-hoc one-off gradients scattered through the codebase.
Atomic grammar, CMS-fed
Components are named A00PrimaryButton, M12VerticalBanner,
C01ImmersiveHero, G06Gradient – atoms, molecules, sections, globals.
The CMS feeds layout through custom properties, not through markup changes.
Hygiene you can't see
Logical properties throughout (inline-size, inset-block-start),
content-visibility: auto on the hero, will-change only on animated nodes,
focus outlines offset 10 px, a strict CSP header, disabled buttons that keep contrast.
Recreation
The type system
Instrument Serif and Geist Light stand in for Petit Serif and PP Fragment Sans Light. The heading below uses Bonfire's exact clamp formula – resize the window and watch the readout: it only moves between 1280 and 1920 px.
Warmth is a design token
font-size: clamp(2rem, calc(2rem + 1 · (100vw − 80rem) / 40), 3rem) → currently …
Body copy stays in the light sans with a positive 0.02em tracking – slightly airy, never crowded, and it holds the same cream at 62% opacity so hierarchy comes from tone, not from extra font weights.
Recreation
The primary button
Rebuilt 1:1 from A00PrimaryButton: the underline wipes in
from the left and exits to the right (transform-origin flips between states),
and the circled arrow inverts. The disabled state keeps its shape with an inset
keyline instead of fading away.
Recreation
Scrims as a component
Bonfire's G06Gradient ships twelve explicit stops with the color
split into RGB channel variables. Compare a naive two-stop fade, the shipped
twelve-stop linear ramp, and an eased variant – watch the top edge of the scrim,
where the two-stop version draws a visible line.
Recreation
The vertical banner
From M12VerticalBanner: a 4:5 card inside a
preserve-3d tilt wrapper, a bottom scrim from the component above, and an
uppercase serif title glowing through text-shadow: 0 0 40px #000. Move your
cursor over the card.
