Fashion & Footwearfootwearsneakerssandalsinteractive groundgpu simulationcalm ux
imprint
A footwear site that sits on a ground you can touch — press it, leave footprints, walk from the kerb to the sea.
The whole page floats on a GPU height field that gives like memory foam: press the concrete, smudge the wordmark pressed into it, and every scroll leaves a trail of footprints that turn barefoot as the ground becomes sand. Shoes land with a ripple, dent when you press them and turn when you drag. A court sneaker comes apart into ten labelled parts and dyes across five colourways, a flip-flop rests on the sand, postcards drift, you brush sand off macro photos, and at the end the tide washes everything clean. Opt-in procedural sound.
Next.js 16three.jsGSAP ScrollTriggerLenisTailwind v4gltf-transformWeb Audio
PROMPT.md
Build "imprint", a footwear site (sneakers + sandals) whose whole page sits on a ground you can touch. Next.js 16 + raw three.js + GSAP ScrollTrigger + Lenis + Tailwind v4. The goal is not a catalogue but a place people linger: calm, eye-relaxing colours, slow easing, and small satisfying things to discover.
The ground (src/scene/ground.ts) is a GPU height field in screen space (R = imprint depth that relaxes like memory foam, G/B = damped ripple wave). It is advected with the page scroll in whole texels (the sub-texel rest is applied when drawing, so prints stay crisp), and shaded full-screen as concrete that turns into sand: aggregate / wind-ripple micro relief, a sun that drops from cool morning to golden evening, a soft contact shadow under the shoe, and a tide with a foam line that can wash over everything. The rest shape holds the wordmark, drawn into a canvas and pressed into the ground — smudge it and it slowly reforms.
Interactions: move to trace, press and hold to sink in; scrolling lays a trail of footprints (sneaker soles on concrete, bare feet on sand) and counts steps; shoes land with a ripple; press a shoe and its foam dents and springs back (vertex dent in the material); drag to turn it with inertia.
Models (gltf-transform): runner = one shoe cut from a pair by connected islands, simplified; court = parts kept as named meshes (outsole, midsole, insole, lining, upper, toe, heel, tongue, laces, eyelets) recoloured per part with a toe-to-heel dye sweep; flip-flop = one of a pair, Z-up fixed, two-toned in the shader by height and normal.
Places (state targets {x, y, size, turn, tilt, model, explode} + env {coast, warm, tide}):
1. Arrive — only the ground and the pressed wordmark. "Shoes for the walk between places."
2. Kerb Runner — lands on concrete; drag / press.
3. Inside the Court Low (pinned) — ten parts lift apart side-on, serif labels follow them; hover a part (phones walk them one at a time).
4. Colour (pinned) — five colourways dye across the shoe; drifts on its own when idle.
5. The walk (tall) — three lines fade through blur while concrete gives way to sand and footprints turn barefoot.
6. Shore Thong — flip-flop on sand; press the cork footbed.
7. Postcards — generated lookbook photos scattered at different depths; open in a lightbox.
8. Materials — brush the sand off three macro photos (canvas eraser; an automatic stroke invites if untouched).
9. Collection — four pairs, quiet rows, keep toggles, a photo that follows the cursor.
10. Visit — the store.
11. Tide — water washes over the ground; "Every imprint fades." Walk again: the ground is washed, the page glides back to a fresh wordmark.
Chrome: step counter + kerb→sea line, contextual hint, opt-in procedural sound (city hum → sea swells, soft press / step / land / tick one-shots), soft ring cursor that changes with context, magnetic pill buttons.
Palette: mist #e6e4df, stone, ink #2c2e30, sage, sand #e9dcc5, clay, sea-glass, dusk, a little volt #d6f25e. Type: Fraunces 300 (+ italic), Manrope, Unbounded for the wordmark.