14 · Drift: a clay toy box for a fictional sleep app

Drift is a made-up sleep and wind-down app. Its landing page opens on a real physics toy box: a crescent moon, star, cloud, pillow, mug, a Z, an alarm clock and two beads drop in, settle, and can be picked up, tossed and shaken. Everything is matte pastel clay with big soft shadows. The page says plainly that it is fictional and that the sign-up sends nothing.

Inspiration

The look comes from 3dicons: matte, inflated, pastel forms lit by one soft key light from the top left, with no shiny highlights. The page layout borrows from Appshot Gallery: five phone frames in a sideways scroll-snap strip, a caption above each phone, and one pastel gradient running across all five like a panoramic App Store set.

The interactions are hand-built versions of Motion Primitives pieces: Sliding Number (the hero stats), Text Roll (the headline), Morphing Dialog (the plan cards), Border Trail (the featured plan), Magnetic (buttons) and Progressive Blur (the strip edges). Button and card easing uses a spring curve with overshoot, in the spirit of Kinetics.

What was added on top: real rigid-body physics with drag and flick, a working four-channel sound machine built with Web Audio and shared between a mini phone mixer and a large mixer, a 20-minute fade-out, a live wind-down ring, and a sleep graph drawn from data.

Visual direction

References

Why these choices

A sleep app should feel safe and gentle, so the design avoids anything sharp, glossy or dark-mode neon. Clay does that well, and a toy you can hold makes the page feel physical, which suits kids and wellness products.

Roughness .92 and large soft shadows are what make the clay read. The floor is a shadow-only plane, so the page colour stays visible behind the toys. The box walls are fitted to the camera frustum, so toys stay on screen, and on wide screens the left wall is pushed over to keep toys off the text column.

Trade-offs and fallbacks are handled in code: pixel ratio is capped at 1.6, physics pauses when the tab is hidden or the hero is scrolled away, and a ?nogl switch or a lost WebGL context swaps in CSS clay blobs. Reduced motion pre-steps the physics 720 times and then puts every body to sleep, so toys sit still. Audio is off by default and starts only on a click. The plan dialog uses View Transitions where available and a Web Animations fallback otherwise. The sign-up form validates the email but sends nothing.

Who this kind of site is for

It wins for consumer app launches, wellness, sleep, meditation, kids and family products, toy and stationery brands, and anything that wants to feel friendly and tactile instead of slick. A bakery or a children's dentist could use the same toy-box idea with their own objects.

It is the wrong call for banks, legal, medical-device or enterprise B2B work where calm authority matters more than charm, and for sites that must load fast on weak phones, because the hero needs two libraries and a GPU.

To pitch it: "A homepage hero your customers can pick up and throw. It is the first thing they remember." Reuse is easy: swap the eight toys for the client's products and keep the box, the physics and the dialog.

How to make it

Stack and key techniques

The prompt

Build a single-file landing page, index.html, for "Drift", a FICTIONAL sleep and wind-down app. The page must say plainly it is a design demo, and the sign-up must send nothing.

Look: soft clay, like 3dicons. Matte, inflated, pastel, one soft key light from the top left, big soft shadows, no shiny highlights. Palette: lavender #C9B8FF, peach #FFC9A8, butter #FFE59A, mint #B8F0D6, plum #3B2A5A, page #F7F3FF. Fonts: Baloo 2 (display) and Nunito (body) from Google Fonts. Pill buttons, 28px radii, inset clay shadows on every round object. Floating blurred pill nav. Spring easing with overshoot on buttons and cards.

Hero: a real toy box using three.js 0.170 and cannon-es 0.20 from jsdelivr via an import map. A crescent moon, star, cloud, pillow, mug with handle, a Z, an alarm clock and two beads drop in one after another, settle, and can be dragged with the pointer (raycast plus a point-to-point constraint), flicked by tapping, and shaken with a "Shake the box" button. Use MeshStandardMaterial roughness .92, VSM soft shadows, and a shadow-only ground plane so the page colour shows. Fit the walls to the camera frustum so toys stay visible, and keep them out of the text column on wide screens. Headline "Wind down. Drift off. Wake up soft." with a letter-by-letter Text Roll on hover. Four stats (27 sounds, 12 routines, 0 ads, 7 days free) as Sliding Number digits.

Sections: a five-step timeline of clay icons; a scroll-snap strip of five phone frames with captions above and one pastel gradient flowing behind them, with progressive blur on both edges and pointer tilt; a sound mixer with four channels (rain, brown noise, wind, hum) that are SYNTHESIZED with Web Audio, off by default, with a 20-minute fade-out switch; a mini mixer on the second phone and the big mixer share their sliders. A live wind-down ring and an SVG sleep graph drawn from data. Three plans as cards; the featured one has a rotating Border Trail light. Clicking a card morphs it into a dialog (View Transitions with a fallback), with an email form that rejects empty and invalid input and confirms with an honest "this is a demo" message. Magnetic buttons.

Constraints: one file, no build, no images, no external assets besides fonts and the two libraries. Cap pixel ratio, pause physics when hidden or offscreen. Provide a ?nogl switch and a CSS clay fallback if WebGL fails. Honour prefers-reduced-motion (pre-settle physics, no animation). Keyboard access for cards, switches and the strip. Mobile layout stacks the hero and keeps the box usable by touch.

Verify: open in a browser, take screenshots at six scroll stops on desktop and six on mobile, read every one, check the console for errors and for horizontal overflow, test drag, shake, sound on and off, the fade timer, the dialog, form validation and the no-WebGL path. Fix and repeat until clean.

Build notes

Stepping down: what you would likely lose

This is an informed estimate, not a measurement. No public benchmark compares these exact models on one-shot frontend work, so everything below rests on the spec table, Anthropic's tier positioning, an earlier-generation design comparison, and extrapolation.

Feature Opus 5.5 (likely outcome) Sonnet 5.5 (likely outcome)
Clay look: matte material, soft VSM shadows, shadow-only floor Does fine Does fine, though the shadows may come out harder or the clay slightly shiny
Toy shapes (crescent from two arcs, star, Z, compound cloud and clock) Does fine, minor shape slips Attempts it with likely bugs: a wrong arc angle on the crescent or physics shapes that do not match the meshes
Physics settling (compound bodies, damping, sleep) Attempts it, likely some toys that jitter or roll forever until tuned Attempts it, likely a toy that rolls forever or spawns outside the box, as the mug did before the fix
Frustum-fitted walls and a clear text column Attempts it, likely wall misplacement on resize Likely simplifies it to fixed walls, so toys leave the view or sit under the text
Drag, flick and shake (constraint on a camera-facing plane) Does fine on mouse, with possible touch edge cases Attempts it with likely bugs: stuck grabs on pointer cancel or scrolling blocked on mobile
Web Audio mixer, shared sliders, 20-minute fade Does fine Attempts it with likely bugs: sliders out of sync or the fade not restoring on stop
Morphing dialog (View Transitions plus fallback) Does fine Likely simplifies it to a plain dialog with a fade
Hero polish: Text Roll, Sliding Number, Border Trail, progressive blur Does fine, fewer secondary touches Simplifies some away, most likely the layered blur and the border light

Rough overall estimate, as a judgment call: Opus 5.5 would likely keep roughly 80 to 90 percent of the visual impact in one pass, and Sonnet 5.5 roughly 60 to 75 percent. The gap between Fable 5.1 and Opus 5.5 is probably small here, since the hard parts are careful tuning rather than exotic maths. Sonnet 5.5 is the most likely to drop late-file details and rarely exercised paths such as resize, touch and the no-WebGL fallback.

What would close the gap: a screenshot and console feedback loop, and a physics tuning pass where someone actually throws the toys. Building the toy box first and the page second would also help Sonnet 5.5.

← Previous reportNext report →