← Return to Aurelia

How this site was made

AURELIA came to us as a name and a mood board. Our AI design pipeline delivered the full site, concept to code, in a single day. This case study documents how the build happened.

Stack HTML + CSS + Three.jsAssets Higgsfield AIPasses 3 iteration loops

1 · Art direction first

Before any code: a one-line brief, "perfume as light, suspended": then a palette (near-black warm ink, champagne gold, ivory), a type pairing (Cormorant Garamond for display, Jost for utility), and a motion vocabulary (slow, eased, nothing bounces). Every later decision gets tested against that brief.

2 · The centerpiece is procedural, not an asset

The amber gem is a Three.js IcosahedronGeometry wearing a MeshPhysicalMaterial with transmission: 0.92, high ior, and warm attenuationColor, real-time refraction, no texture files. It reflects a procedural environment: a tiny custom-shader sphere rendered once through PMREMGenerator. The gold dust is a 900-point buffer geometry with a hand-written point shader (twinkle from a per-particle seed).

transmission: 0.92, thickness: 2.8, ior: 1.6,
attenuationColor: 0xb26a10, clearcoat: 1.0, flatShading: true

Scroll choreography maps scrollY to the gem's position, scale, and rotation, so it retreats to the upper right and lets the typography take over.

3 · One AI film, placed like jewellery

The flacon in the Atelier section began as a Higgsfield image (nano_banana series, prompt: "ultra-luxurious perfume flacon, smoked amber glass, gold-leaf stopper, chiaroscuro, wet black stone"), then was animated into a 5-second slow push-in with kling3_0_turbo, using the image as the start frame. It plays as a muted loop inside a curtain-reveal frame.

4 · The details that read as "designed"

  1. Per-letter hero stagger with rotation, driven by the Web Animations API.
  2. Line-mask reveals (overflow: hidden + translateY) on every heading.
  3. A pointer-tracked gold veil and 3D tilt on the collection cards.
  4. SVG-noise film grain fixed over everything at 5% opacity.
  5. A two-part custom cursor (dot + lagging halo) that hides until the pointer moves.

5 · Iterate against rendered pixels

The site was screenshotted headlessly (Playwright) at five scroll depths on desktop and three on mobile, then reviewed like a design crit. Three passes caught real bugs: the mobile headline wrapped, reveal thresholds ate the manifesto at certain scroll positions, and the gem's original path left a dead viewport mid-page. Fix, re-render, re-review.

Built by our AI pipeline (Claude Fable 5) · Imagery by Higgsfield AI · July 2026