Perfect Peel 3D Project Report
1. The Concept
Perfect Peel 3D is a landscape 16:9 web game where you hold, swipe down, and peel a rotating fruit in one continuous ribbon. The fruit spins on its own; the peeler follows your finger or mouse. Keep a smooth line — gaps leave unpeeled skin. Clear about 72% of the skin, collect coins, then move on to the next fruit. There are 12 levels (apple, kiwi, pumpkin, watermelon, pineapple, and more), with progress saved in the browser. On a phone, it is meant to be played in landscape; portrait shows a rotate-your-phone overlay.
2. The Stack
The Stack: Vite 7 + vanilla JavaScript + Three.js 0.179, with HTML/CSS overlays for the home, HUD, pause, and result screens. No backend. Fruit shapes are procedural meshes; some skins are PNG textures, the rest are painted in canvas. Progress (level, coins, gems, sound) lives in localStorage.
The AI Assist: Cursor (Grok) as a pair-programmer. I used it to study a reference peel video frame by frame, rewrite the peel as a curling 3D ribbon, scaffold the home/result UI from the design spec, and debug Windows/Vite asset-serving issues in the same day.
3. The 1 Day Sprint:
Morning (Hours 1–3): Locked the loop: one fruit, one gesture, one goal. Set up Vite + Three.js, a 16:9 stage, lighting, and a rotating fruit with a peeler that follows the pointer. Built the first playable peel with a UV mask so skin actually disappears, plus a simple HUD (level, progress bar, “HOLD & MOVE DOWN”).
Afternoon (Hours 4–6): The hard part — making the peel look like the reference video. Replaced a short tip-lift ribbon with a continuous curling helix (Catmull-Rom spine, Frenet frames, inner/outer materials). Added 12 fruit shapes and looks, a home screen (PLAY, shop, levels, wallets), result card with retry/next, and coin rewards. Tuned peel width, curl, and the 72% finish threshold in config.js.
The Finish Line (Hour 7-8): Saved last level, unlocked grid, coins, gems, and sound in localStorage. Added landscape-only play with a Khmer/English rotate prompt. Cut unused Kenney GLB/FBX assets and went fully procedural so peeling stayed UV-friendly. Wrote README, cleaned dead textures, and made sure the game ran on LAN for phone testing.
4. The Roadblocks
Roadblocks: Matching the reference peel was the biggest fight — the first version only lifted the tip and truncated the strip, so it never looked like a real ribbon. Imported Kenney fruit models also failed for peeling because we needed stable UVs and a stampable skin mask, so we dropped GLBs and built fruits in code. On Windows, PowerShell blocked pnpm scripts, so the dev server had to be started with node node_modules/vite/bin/vite.js. Vite did not serve the assets/ folder by default, which broke textures until a custom plugin was added. Late bugs: progress reset on refresh, coins spawning while peeling instead of on the result card, and mask gaps when the pointer jumped across the UV wrap.
5. Key Takeaways
A one-gesture 3D game is only as good as the feel of that gesture. Most of the day was not “adding features,” it was making one peel look continuous, fair, and satisfying. Scope control saved the sprint: procedural fruit + canvas textures beat a huge unused 3D kit. Config-driven tuning (rotationSpeed, peel curl, finish ratio) let us iterate without rewriting the scene. AI is fast at scaffolding and at reading a video into geometry — but you still have to play it on a phone, in landscape, and throw away anything the player does not touch.
My final thought: Perfect Peel 3D works because it is small: hold, swipe, peel, win. One day is enough for a complete loop if you protect that loop and cut everything else.