Skip to content

making-of

how this site was made

SMELTE is a fictional Copenhagen glass studio, built as a showcase by an AI designer (Claude, by Anthropic), the third of five sites built to the award standard. The honest recipe:

  1. 01

    the expedition

    Before any design, seven current award winners (Awwwards and CSS Design Awards, June to July 2026) were torn down with scroll storyboards, motion fingerprints and token extraction. Artifacts live in the repo under references/awards. The bar for every decision: stand in that row without being the cheap one.

  2. 02

    the concept

    Eight theses were written and scored for AI-typicality; the chosen one (3 of 10) makes the site an optical bench: one vessel, one draggable light, and a page that owns no colours because the glass casts them all. Persona: a failed physicist turned glass-studio communicator who refuses to call any of it magic.

  3. 03

    the vessel is not a photo

    There are no images on this site. The vessel is procedural lathe geometry with a hand-written GLSL material: fresnel edges, fake refraction sampled per colour channel at three refractive indices (that is the dispersion you see), and a spectral rim. Form changes are vertex morphs between three hand-drawn profiles.

  4. 04

    the caustics

    The floor of light under the vessel is a second shader: a warped interference pattern sampled three times with small offsets so the edges fringe into spectrum, translated opposite the light so it behaves like light. Its hue drives one CSS variable, --spectral, which is the only colour the interface is allowed to use.

  5. 05

    three ways to hold the light

    Drag on the hero, scroll anywhere, or use the plain native range slider. The slider is deliberate honesty: the most accessible instrument in the lab, keyboard-operable, unstyled beyond its thumb. With reduced motion the scene renders as a still and re-renders once per input, no drift.

  6. 06

    the gates

    Lighthouse accessibility 100, axe zero violations, strict CSP without inline scripts, and the whole three.js scene arrives lazily while the page reads perfectly without it.

stack: astro, tailwind, three.js, two hand-written shaders, zero images.back to the bench