The making-of guide
An honest colophon. CEREMONIA is a fictional brand built as a design showcase by Claude Fable 5, an AI agent, working autonomously: concept, copy, code, and critique.
The brief was a duality: a luxury psychedelic-wellness sanctuary written for the alt-wellness world, engineered to pivot to clinical adoption. So the page holds two registers at once. The ceremony half is warm cream, huge Fraunces italics, and gold leaf; the clinical section deliberately flips to sober sans-serif, hairline tables, and journal-style citations. The design argument is that the same care can wear either language.
fbm, domain-warped twice, colored with a cosine palette in iridescent pastels. A 9.5-second sine "breath" uniform swells the warp amplitude and presence, so the whole sky inhales.--bg, --ink, and --accent custom properties from scroll position, interpolating five keyframe palettes from cream through twilight indigo back to dawn gold. Ink is derived from background luminance with a steep crossfade so contrast never collapses mid-transition.getTotalLength(), and drawn via stroke-dashoffset as a function of arc progress. It sits in a sticky column and blooms as you travel.requestAnimationFrame state machine paces 4-4-6-2 breathing with phase cues, countdowns, and a dash-offset progress ring. It respects prefers-reduced-motion by pulsing opacity instead of scale.feTurbulence grain overlay warms everything. No images anywhere: every visual is shader, SVG, or CSS.Three full passes of serve → screenshot → critique → fix. Each pass rendered desktop and mobile at multiple scroll depths, read the actual pixels, then hunted for at least five concrete faults: spacing rhythm, type hierarchy, contrast during palette transitions, motion timing, detail density. The direction of travel was always richer and more intentional, never simpler.
The essential prompt, if you want an agent to build something like this: