Min Zhou

# Project: "Jelly Paws" — Interactive Cardboard Box Cat Paw ## Concept Build a single-page interactive web experience. A corrugated cardboard box sits upside down in the center of the screen, covered in children's crayon drawings stuck on like stickers. A cat paw pokes out from under the box. The paw is made of a soft, wobbly jelly material. The user can grab it, stretch it, and pull it around, and it springs back with an elastic jiggle. Two arrow buttons at the bottom slide to the next box. Every box looks different, and so does the cat hiding inside (different fur color, pattern, and toe bean color). The mood is playful, tactile, and handmade. The cardboard should look so real you feel like you could touch it. The UI should be almost invisible. ## Tech Stack (recommended) - Three.js (ES modules via importmap/CDN). A static site with no build step is preferred, so it runs from a plain `index.html`. - Custom GLSL vertex shader for the jelly deformation. You may use a small spring/physics solver written in JS. No heavy physics engine. - GSAP (or hand-written easing) for the box carousel transitions. - Output everything to `./outputs/jelly-paws/`. ## 1. The Cardboard Box (the most important visual element) The corrugated cardboard must clearly show its MATERIAL and THICKNESS. - Build the box from geometry with real wall thickness (about 4-6 mm at scale), not from zero-thickness planes. Every visible cut edge must show the cross-section: two flat liner layers with the wavy corrugated flute between them (a sine-wave fluting pattern in the edge texture or real geometry). - The box is UPSIDE DOWN: the open flaps face the floor, and the top face we see is the box's sealed bottom, with a strip of brown packing tape (slightly glossy, a little wrinkled, with a peeling corner). - Tilt the box slightly up on the front edge (propped about 2-3 cm), as if the cat is lifting it. This gap is where the paw comes out, and it shows off the wall thickness and flute cross-section along the bottom edge. - Materials: kraft paper albedo with subtle fiber noise, faint vertical flute ridges showing through the liner (normal map), slightly rounded and crushed corners, soft dents, scuffs, and a few creases near the fold lines. Roughness should be high (matte paper), never plastic-looking. - Lighting: soft studio key light from the upper left, gentle fill light, and a soft contact shadow under the box (use AO or a baked shadow plane). Add a darker shadowed interior visible through the lifted gap. - Camera: a 3/4 view from slightly above, so the top face and two side faces are visible. Keep the camera fixed with very slight parallax following the mouse (max 2-3 degrees). ## 2. Crayon Drawing Stickers - Generate the stickers with `openai/gpt-image-2` through the AI Gateway (`$AI_GATEWAY_BASE_URL`, key in `$AI_GATEWAY_API_KEY`), requesting a TRANSPARENT background PNG. Verify each output actually has an alpha channel. If one does not, regenerate it. Do not fake transparency. - Style: drawings by a 4-6 year old child in wax crayon. Visible waxy strokes, uneven pressure, colors going outside the lines, paper-grain gaps in the fill. Subjects: a fish, a sun with a face, a house, a heart, stars, a stick figure holding a cat, a rainbow, a lopsided cat face, wobbly handwritten words like "MY CAT" or "DO NOT OPEN". - Generate about 12-16 stickers and save them to `assets/stickers/`. Keep the generation script in the repo so the stickers can be regenerated. - Apply the stickers as decals that follow the box surface (projected onto the faces, slightly rotated, a few overlapping the edges or folding around a corner). Blend them so the cardboard texture shows through a little. Some should read as crayon drawn straight onto the box, and some as paper stickers with a thin white border and a slightly lifted corner. ## 3. The Jelly Cat Paw - Shape: a rounded cat forearm and paw with 4 toe beans plus a central pad, emerging from the gap under the front edge of the box. - Material: translucent jelly / gummy candy. Subsurface-scattering look, glossy specular highlights, slight refraction, and fur color showing as the tint and pattern of the jelly. The toe beans are a slightly more saturated, more opaque jelly. - Interaction: - Hover: the cursor changes to grab and the paw does a small anticipation squish. - Drag: the user grabs any point and pulls. The paw stretches toward the pointer with elastic falloff (the base stays anchored under the box, and the stretch is strongest at the grabbed point). Volume should look roughly preserved: it gets thinner as it stretches. - Release: the paw snaps back with a damped spring (visible overshoot and 2-4 wobbles), then settles. - Click/tap on the toe beans: they squish flat and bounce back. - Clamp the maximum stretch so it never looks broken. Past the limit, resistance increases (rubber-band effect). - Idle behavior: every few seconds the paw does something small on its own, like a slow wiggle, a curious reach sideways, a quick bat at nothing, or briefly retracting into the box and peeking out again. - The box reacts slightly when the paw is pulled hard: it lifts or shifts by a few millimeters, as if the cat is holding on. - Must work with mouse and touch (pointer events). ## 4. Box Carousel - Two simple arrow buttons centered at the bottom of the screen (left/right). Also support keyboard arrows and swipe on mobile. - On switch: the paw quickly retracts into the box, the box slides out horizontally while the next box slides in (with slight overshoot and a tiny settle bounce), then the new cat's paw peeks out. - Make at least 5 unique box + cat combinations. Each box differs in material, wear, tape, and stickers. Each cat differs in fur and toe bean color. Example set: 1. Classic kraft shipping box, brown tape, rainbow and sun drawings. Orange tabby paw with stripes and pink beans. 2. White bleached cardboard box with a shipping label and barcode. Tuxedo cat paw (black with white "sock" tip), black and pink mixed beans. 3. Old, water-stained box with a faded marker "FRAGILE". Gray cat paw, dusty rose beans. 4. A box with a printed fruit-brand logo (an invented brand). Calico paw with orange, black, and white patches and mottled beans. 5. A small box with doodles all over it. Siamese paw (cream fading to dark brown at the tip), dark beans. - Show a tiny, unobtrusive indicator (dots or "2 / 5") near the arrows. ## 5. Background & UI - Background: a single SOLID color. No gradients, no patterns, no scene props. A warm off-white or soft pastel works well. Each box may have its own solid background color that crossfades smoothly during transitions. - No header, no text blocks, no menus. The only UI elements are the two arrow buttons and the page indicator. The buttons should feel soft and tactile (rounded, a subtle press animation), but visually quiet. - Fully responsive. On mobile the box scales down and stays centered, and the buttons stay reachable with the thumb. ## 6. Performance & Quality - Target 60fps on a mid-range laptop and a modern phone. Cap the pixel ratio at 2. - Load textures and stickers lazily per box. Preload the next box. - Respect `prefers-reduced-motion` (reduce the idle animations and the transition overshoot). ## 7. Deliverables - `outputs/jelly-paws/index.html` plus `js/`, `assets/textures/`, and `assets/stickers/`. - The sticker generation script (`scripts/generate-stickers.*`) with all prompts used. - A short README explaining how to add a new box/cat variant (ideally a single config object per variant: box textures, sticker list, tape style, fur colors/pattern, bean color, background color). ## 8. Acceptance Checklist (verify before finishing) - [ ] Cardboard edges clearly show the layered corrugated cross-section, and the box reads as thick, real cardboard at first glance. - [ ] The box is visibly upside down (tape seam on top, flaps toward the floor). - [ ] The stickers have real transparency and look stuck on or drawn on, not floating above the surface. - [ ] The paw stretches smoothly while dragged, springs back with a jiggle, and never tears or inverts. - [ ] Toe bean squish works on click/tap. - [ ] The left/right buttons, keyboard arrows, and swipe all switch boxes, and every box + cat combination is visibly different. - [ ] The background is a single solid color, and the UI has only the arrows plus the indicator. - [ ] Works on desktop and mobile, with no console errors. - [ ] Take verification screenshots of every variant and save them to `./tmp/` (not to outputs).