Thrown, Glazed, Fired.

01 · The Concept

KILN casts Nomadic Owls as a ceramicist's studio. The agency's own words — "We have ideas — And send them to the Internet" — map cleanly onto the potter's sequence: an idea is thrown on the wheel, glazed, fired, and shipped. It is the deliberate craft counterweight among the ten directions: warm where others are technical, tactile where others are precise.

Imperfection is the aesthetic argument. Nothing on the page is perfectly square: tiles have irregular hand-cut radii, cards sit at slight tilts, underlines are drawn rather than ruled, and a clay-grain noise sits over the whole canvas. Six services become six glaze tests on the studio board; three projects come off a slowly turning potter's wheel; and contact is the firing — the page literally warms in color temperature as you approach the kiln.

Honestly stated intent: this is a portfolio-caliber demonstration piece. The copy is the agency's real copy, unaltered; the ceramics are the metaphor wrapped around it.

02 · Cited References

• House of Honey

  Mixed-typeface masthead with an overlapping italic interrupter → adapted as the "Nomadic OWLS" masthead broken by a rotated, glaze-brown Lora italic "of the internet" chip overlapping both display lines.

• Everyday

  A single blurred warm photo as the entire canvas → adapted as the kiln-glow photograph, blurred to 14px and laid full-bleed behind the firing/contact section under a dark vignette.

• KÖPPEN

  Navigation condensed into a bordered spreadsheet cell block → adapted as the glaze-test tile board nav: ruled cells, each holding a small irregular ceramic chip and a link.

03 · Design System

Palette

• Studio plaster #F4EFE8
• Terracotta #C0603B
• Glaze celadon #9FBFAD
• Tenmoku #2E211C
• Kiln-glow orange #E8862F

Typefaces

Spacing & form logic

Fluid clamp() scales everywhere: section padding clamp(3.5rem→6.5rem), a shared --gutter of clamp(1.25rem→4rem), display type up to clamp(4rem→9.5rem). The signature form language is the irregular blob radius — two reusable border-radius tokens (--blob-a, --blob-b) plus per-component hand-cut radii — and a global SVG feTurbulence noise overlay at 5% opacity for clay grain. Everything ruled is 1.5–2.5px tenmoku, like slip-trailed lines.

04 · Tech & Motion

• Glaze tile flips. Each service is a <button aria-expanded> holding a 3D-preserved inner span; CSS rotateY(180deg) fires on hover, :focus-visible, and on [aria-expanded="true"] (toggled by click/Enter). A clay-springy cubic-bezier(0.34, 1.3, 0.42, 1) does the easing; reduced-motion swaps it for an instant flip.
• Potter's wheel. A conic + repeating-radial-gradient disc behind the project cards rotates via a --wheel-rot custom property set to scrollY × 0.02deg inside a requestAnimationFrame-throttled scroll handler. Cards themselves never rotate with it — legibility first.
• The firing. A fixed "heat veil" (radial kiln-glow gradient, mix-blend-mode: multiply) has its opacity driven by --heat, computed from the contact section's bounding rect: 0 far away, 1 as the kiln fills the viewport. The whole page warms in color temperature on approach, then the section itself sits over the blurred kiln photograph.
• Craft video. Muted, playsinline, poster frame, 580KB H.264. Paused under reduced-motion, when off-screen (IntersectionObserver), and when the tab is hidden.
• Reveals. One IntersectionObserver adds .in to .reveal elements — a small rise with a 0.3deg un-rotation, skipped entirely under reduced-motion.

Stack: Astro v5, fully static, zero client frameworks — one small inline vanilla TS module.

05 · AI Assets

Generated centrally with GPT Image 2 (stills) and Kling (motion) via the Higgsfield CLI, then converted to WebP / re-encoded H.264 locally. Prompts verbatim:

• glaze-tiles.png — services glaze board

  GPT Image 2 (via Higgsfield CLI)

  “Grid of six ceramic glaze test tiles on a plaster white table: terracotta, celadon green, tenmoku black-brown, kiln-glow orange, matte cream, speckled oatmeal, each with dripping glaze edges and a small hole at top, overhead natural light, pottery studio photography, no text”

• owl-vessel.png — hero vessel

  GPT Image 2 (via Higgsfield CLI)

  “A hand-thrown ceramic vessel with a subtle owl face carved in relief, terracotta clay with celadon glaze pooling in the carved lines, sitting on a potter's wheel in warm studio light, visible throwing rings, craft pottery photography, no text”

• kiln-glow.png — contact backdrop

  GPT Image 2 (via Higgsfield CLI)

  “View into a glowing pottery kiln at night, vessels silhouetted against intense warm orange firing light, heat shimmer, dark studio around the bright kiln mouth, atmospheric craft photography, no text”

• wheel-throwing.mp4 — clay centering motion

  Kling (kling2_6, via Higgsfield CLI)

  “Hands centering wet terracotta clay on a spinning potter's wheel, clay rising smoothly under steady palms, water sheen, warm studio light, close-up on hands and clay only, meditative craft footage, static camera”

06 · How to Reproduce

1. Scaffold Astro v5, output: 'static'; npm install @fontsource-variable/bricolage-grotesque and @fontsource-variable/lora (plus Lora's italic axis CSS).
2. Set the palette as CSS custom properties; add the feTurbulence noise overlay and the two blob-radius tokens.
3. Build the cell-board nav, interrupted masthead, flip-tile services, wheel projects, and kiln contact section as above; wire --heat and --wheel-rot in one rAF scroll handler.
4. Convert assets to WebP; encode the video with ffmpeg -an -vcodec libx264 -crf 30 -vf scale=1280:-2.
5. npm run build, then QA: keyboard walk, reduced-motion, zero console errors.