18 · Pocket Garden: a clay pot you feed seeds to, for a kids' seed club

Pip's Pocket Garden is a made-up subscription club for kids 5 to 10: a paper envelope of windowsill seeds every month. The thing that makes people stop is the hero. A clay pot with a face sits on a stack of books on a windowsill, four seed packets in front of it. You drag a packet into the pot (or tap it) and the plant grows in 3D while the pot's eyes follow your pointer.

Inspiration

The page is built from the tools the 20 Oct labs kept. Paper Shaders' mesh gradient (the "Beach" preset, recolored to peach, mint, rose and butter) is the moving sky. three.js draws Pip, the books and four procedural plants, and Anime.js 4.5 with its three.js adapter does the springs and squashes. GSAP handles the envelopes, bars, prices and headline. The clay look follows the Clay theme in _kit\THEMES.md and the earlier Drift site. The billing switch is a Uiverse piece, and 3dicons supplies the clay icons. What the builder added on top is the toy itself: eyes that track the dragged packet, a mouth that goes "ooh" near the pot, and plants that each grow in their own way.

Visual direction

Theme, kit and licenses

Theme: Clay, unchanged, Medium budget. Soft pastels, rounded shapes and a springy feel suit a brand that parents read with their kids. Two moments per screen: the hero (sky plus 3D toy) is one, and the envelopes, bars, plan cards or footer sun are the second as you scroll.

Kit parts: paper.js (with paper-data.json), uv-piece.js and fps-chip.js (shown with ?fps). Nothing outside TOOLKIT.md.

Source License
Paper Shaders 0.0.81 Apache-2.0
three.js 0.186.1 (with RoundedBoxGeometry) MIT
Anime.js 4.5.0 MIT
GSAP 3.15 (core, SplitText, ScrollTrigger) GSAP standard no-charge license
3dicons by realvjy (sun, gift box, calendar, heart, tick), inlined as WebP CC0
Uiverse switch slimy-penguin-36 by EddyBel (credit kept) MIT
Fredoka, Nunito SIL OFL 1.1

References

Why these choices

Kids' products need to feel safe and friendly, so the whole page is soft and rounded with no sharp motion. The hero is a toy, not a backdrop, which fits an audience that wants to poke things. Everything meaningful is a real button: each packet in the 3D scene has a matching HTML button that follows it, so keyboard, tap and drag all work, and the packets are about 61 by 81 px on a phone. Drag leaves page scrolling alone (touch-action: none applies only to the packets).

Trade-offs: the WebGL scene is the heaviest part, so it renders only while the hero is on screen and caps pixel ratio at 1.75 (1.5 on small screens). If WebGL2 is missing, an SVG drawing with "Plant cress" style chips takes over. If the sky shader fails, the CSS gradient stays. Reduced motion skips the auto-demo and swaps plants instantly. The plans section says it is fictional in a dialog and in the footer, and the copy (grow times, prices) is plain and honest.

Who this kind of site is for

It suits kids' products, subscription boxes, family services, classroom programmes, toy and craft shops, and children's museums or libraries. It fits any brand with one lovable object to play with. It is the wrong call for serious or fast-transactional businesses (law, trades, clinics), or for audiences on weak phones where a live 3D scene costs too much. The pot-and-packets scene could be reused for a local garden centre or a school fundraiser by swapping the plant builders.

How to make it

Stack and key techniques

The prompt

Build a single-file website (no build step, CDN imports pinned) for "Pip's Pocket Garden", a FICTIONAL seed club for kids 5 to 10. A paper envelope of windowsill seeds arrives monthly. State clearly on the page and in the plan dialog that nothing ships.

Look: clay and toy-like. Palette: peach #ffe8d6, mint #b8e0d2, rose #f6a6b2, butter #ffd97d, cream #fff6ec, ink #3d405b, terracotta #ef8a74. Fonts: Fredoka (headings), Nunito (body). Soft clay shadows (inset highlights), wavy SVG dividers between sections. Motion: springs, squash and elastic easing. Max two big "moments" per screen.

Hero: a Paper Shaders mesh-gradient sky (Beach, recolored) behind a three.js scene: a windowsill running full width, a stack of two books, and Pip, a lathe-geometry terracotta pot with a face (eyes that follow the pointer or the dragged packet, random blinks, mouth goes "ooh" when a packet is near, squishes when planted). Four seed packets in front (cress, radish, sunflower, peas) with canvas-drawn labels. Drag a packet into the pot, or tap or press Enter on it: it flies over, tips, pours falling seeds, and a procedural plant grows (26-sprout cress; radish with leaves and swelling root; sunflower with growing stem, unfolding petals and a head that turns toward the pointer; peas with a vine drawn along a tube with leaves, pods and tendrils appearing as it reaches them). Each packet needs a real HTML button that tracks it, with touch-action none only on the buttons so phones can still scroll. Pip plants a sunflower on its own after a second. The camera must fit the scene in its layout slot at any width. Headline letters bounce in with GSAP SplitText.

Sections: (1) three envelopes (this month and the next two) that open on click: seal pops, flap flips, four cards fan out, a contents list expands; this month's opens by itself on scroll. (2) A grow calendar: 12 month buttons, sunny or shady sill toggle (shady slows sun-loving plants 1.3x), bars for sprout and ready times that grow with elastic ease, axis resizing per month. (3) Plans: monthly/yearly switch (Uiverse, in a shadow root), kids stepper, three springy plan cards with live prices that count and stretch, a confirm dialog. (4) Footer with a clay sun that winks when clicked.

Use 3dicons clay icons (CC0) inlined as WebP, with credits. Credit all libraries in the footer.

Rules: real buttons, visible focus, aria-live captions, reduced-motion path (no auto-demo, instant plants), SVG fallback with plant buttons if WebGL2 is missing, render loop paused when the hero is off screen, no horizontal scroll at 390 px. No em dashes in copy.

Verify: screenshot hero, each section and the dialog at 1440 and 390 wide, with reduced motion on and off, and with WebGL2 blocked. Test drag, tap and keyboard on every packet, check the console for errors, fix, repeat.

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. The point is how much the tested kit parts carry for a smaller model.

Feature Sonnet 5.5 with this kit Sonnet 5.5 from a blank page
Paper mesh-gradient sky Does fine: paper.js already handles the texture-loading and uniform-name traps Attempts it with likely bugs: a vanilla mount that throws on uniforms or unloaded textures, or a plain CSS gradient
Pip with face, tracking eyes, "ooh" mouth Likely does fine on the base pot; blinks or the mouth swap may be simpler Attempts it with likely bugs: eyes that jitter or sit off the surface; may drop the "ooh" and squish
Drag and tap with real buttons that follow 3D packets Attempts it with likely bugs: screen-projection and touch capture (buttons drifting off the packets) Likely simplifies it away: click-only on a canvas, no keyboard path
Four distinct procedural plants Attempts it with likely bugs: pea vine draw-range and sunflower head turning; cress and radish probably fine Simplifies it: one generic plant with a colour change
Camera fit to a layout slot Attempts it with likely bugs: off-centre or cropped at some widths Likely a fixed camera that clips on phones
GSAP envelopes (seal, flap, fan-out) Does fine, with a possible flip-direction or z-order slip Attempts it with likely bugs: flap crossing the cards
Grow calendar and plan pricing Does fine: standard DOM and GSAP work Does fine, with fewer small touches such as the shade slowdown tag
WebGL2 fallback and reduced motion Does fine, since the brief names them Attempts it: usually adds reduced motion, less often a real fallback

Overall judgment call: Sonnet 5.5 with this kit probably keeps roughly 75 to 90 percent of the visual impact in one pass, with the 3D toy as the main risk. From a blank page, probably roughly 45 to 65 percent, because the toy and the sky are what get simplified. A screenshot loop and a split build (scene first, page second) would close most of the gap; the kit parts remove the risk that is hardest to see.

← Previous reportNext report →