← Back to the playroom

Behind the Clay

How PLAYGROUND was built

Site 07 of ten design directions for Nomadic Owls: a claymorphic toy world where a hand-rendered clay owl mascot leads you through the page, everything springs when you touch it, and the agency's real services become squishy toy blocks and collectible sticker cards.

Concept & inspiration

Nomadic Owls builds fast, technical, unglamorous things — static sites, SEO plumbing, lead pipelines — and does it with obvious joy. PLAYGROUND takes that seriously-not-serious tension literally: the agency as a playroom. A clay mascot performs the site's three big beats (waving hello, working at a laptop, delivering the mail), pastel toy-block cards stand in for services, and every interactive surface behaves like it's made of putty — it lifts, wobbles and presses back down when you touch it. The brief asked for "soft toys for serious work"; the build tries to make every pixel earn both halves of that sentence.

Palette & type specimen

  • Cream #fdf8ef

    the workbench — every section rests on this base

  • Butter #ffe9a8

    services background, hero mascot tint

  • Mint #b8e8d0

    a pillar card, the laptop diorama tint

  • Lilac #d8c6f2

    manifesto background, the envelope, a pillar card

  • Coral #ffb3a3

    contact background, the accent ink on headlines

  • Sky #aed9ff

    a pillar card, floating clouds

Baloo 2 — Display — chubby, rounded, does all the shouting

Obsessively Curious.

Nunito — Body — soft, warm, does all the reading

We send beautiful things to the Internet.

Techniques used

  • Claymorphism as one reusable recipe

    Every card shares the .clay class: an outer drop shadow (depth), an inset top-left highlight (light catching the putty), and an inset bottom-right shadow (the card pressed into itself). Three box-shadow layers, one class, reused on pillar cards, the manifesto card, and every clay button.

  • A tiny reusable spring utility — no libraries

    spring({from, to, stiffness, damping, onUpdate}) numerically integrates a damped harmonic oscillator, one requestAnimationFrame at a time. It settles the hero mascot into place with an overshoot wobble on load, kicks a jelly rotation on every button click, and drives the easing of every confetti dot's flight arc — one ~20-line function, three completely different jobs.

  • Squish on hover AND press

    Clay surfaces lift and rotate slightly on hover (var(--spring-bounce), an overshoot cubic-bezier), then compress and flatten their inner shadows on :active — the card visibly presses into the desk. A touchstart listener on <body> forces iOS Safari to honour :active, so the squish works on tap, not just cursor.

  • Confetti without a library

    20 <span> dots are pre-created and pooled once, then recycled: hovering the contact CTA fires a small 7-dot burst, clicking fires 18. Each dot's flight is driven by the same spring() utility — its 0→1 progress value doubles as a projectile parameter, so the burst has a satisfying overshoot instead of a linear fade.

  • Toy-block and sticker-card geometry

    The six disciplines render as alphabet-block <li> elements with a numbered tag and a hard offset shadow (0.4rem 0.5rem 0 var(--ink-loud)) that reads as a screen-printed block edge. Project cards use a ::before/::after radial-gradient repeat to punch scalloped stamp perforations top and bottom, plus a circular flag badge pinned at an angle like a sticker.

  • Blob dividers between every section

    Three hand-drawn SVG wave paths (WaveDivider.astro) sit between sections, filled with the colour of the section below — the page reads as stacked, overlapping toy shelves rather than hard horizontal seams.

  • Reduced motion, still soft

    prefers-reduced-motion (media query and matchMedia both) cancels the spring-driven mascot settle, the button wobble and the confetti burst outright, and removes hover-lift transforms — everything renders in its resting, fully visible state instead of a half-finished animation.

Higgsfield prompts

Three still poses (GPT Image 2) plus one image-to-video loop (Kling 2.6), generated at 1000×1000 / 720p, compressed and dropped straight into public/ — no hotlinking, no regeneration.

  • play-owl-wave.webpHiggsfield · GPT Image 2

    Cute claymation-style 3D owl mascot character waving hello with one wing, soft matte clay texture with subtle fingerprints, big friendly eyes, round chubby body in warm butter yellow and soft coral clay, standing on pastel mint ground, soft studio lighting, pastel cream background, 3D render, no text

  • play-owl-laptop.webpHiggsfield · GPT Image 2

    Cute claymation-style 3D owl mascot character typing on a tiny pastel blue laptop, soft matte clay texture, big friendly curious eyes, round chubby body in warm butter yellow and soft coral clay, sitting down, soft studio lighting, pastel cream background, 3D render, no text

  • play-owl-mail.webpHiggsfield · GPT Image 2

    Cute claymation-style 3D owl mascot character holding a big lilac envelope in its wings, soft matte clay texture, big friendly eyes, round chubby body in warm butter yellow and soft coral clay, soft studio lighting, pastel cream background, 3D render, no text

  • play-owl-wave-clip.mp4Higgsfield · Kling 2.6 (image-to-video)

    Claymation stop-motion owl waves its wing happily, gentle squash and stretch, blinks, subtle bobbing, playful, seamless loop

Three iteration passes

  • Pass One

    First full build screenshotted at five scroll depths and on mobile. Found a broken mobile nav (a second link row floated permanently over the hero instead of toggling), a scroll-reveal system that left entire sections invisible on a mobile full-page capture that never scrolls, a measured WCAG contrast failure on body copy sitting directly on coral/sky/lilac cards, and a dead, atmosphere-free gap between the services and work sections.

  • Pass Two

    Fixed all of the above — nav now wraps in-flow, a timeout safety-net guarantees every reveal element eventually shows, body copy swapped to the higher-contrast ink token everywhere it sat on a saturated pastel, and the services/work seam got decorative blobs plus tighter padding. Also caught a real bug: the hero mascot's JS spring rotation and its CSS bounce-in entrance both animated `transform` on the same element, so the CSS animation silently overrode the spring every frame. Split them onto nested elements so the spring actually paints.

  • Pass Three

    Nitpick sweep — touch targets grown to 44px on the scroll cue and mobile nav links, line-length and widow check across every paragraph, focus-ring legibility against all six palette colors, and a final side-by-side re-screenshot of every route confirming zero console errors.