CakeView · 3D Cake Maker

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_193":194,"_195":196},"routes/_app.x.$handle.$name",{"_100":99,"_37":49,"_109":90,"_32":110,"_13":14,"_111":-5,"_11":112,"_113":114,"_115":116,"_117":118,"_119":120,"_26":-5,"_121":-5,"_122":-5,"_123":30,"_124":125,"_126":63,"_127":-5,"_128":-5,"_129":130},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":-5},"project",{"_47":48,"_37":49,"_42":50,"_51":-5,"_52":30,"_53":54,"_55":54,"_56":57,"_58":-5,"_19":59,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":67,"_68":69,"_70":-5,"_71":-5,"_72":-5,"_73":-5,"_74":75,"_76":75,"_77":78,"_79":78,"_80":78,"_81":75,"_82":75,"_83":84,"_85":86,"_87":88,"_89":30},"version",4,"changes",[25],"aiChatInfo",{"_20":21,"_22":-5,"_23":-5,"_24":-5},"userId","aiChatMessageId","3b98e73e-340f-4066-853a-b986663148d4","aiChatThreadId","aiChatThreadUserId","aiChatThreadTitle",{"_26":27,"_28":-7,"_29":30,"_31":30,"_32":33,"_34":33},"file",{"_35":36,"_37":33,"_38":39,"_40":41,"_42":43,"_44":14,"_45":46,"_29":30},"previous","deleted",false,"deletedHere","path","app.tsx","latestPath","fileId","c011b35a-5db6-11f1-a0d3-1607ee4eb77e","name","fileType","script","content","/** @jsxImportSource https://esm.sh/react@18 */\nimport React, { useEffect, useRef, useState } from \"https://esm.sh/react@18\";\nimport { createRoot } from \"https://esm.sh/react-dom@18/client\";\nimport { createCakeScene, type CakeConfig } from \"./cake3d.ts\";\n\nconst CAKE_TYPES = [\n { name: \"Classic Vanilla\", sponge: \"#f4e6c4\" },\n { name: \"Rich Chocolate\", sponge: \"#5b3a29\" },\n { name: \"Red Velvet\", sponge: \"#9e2b3a\" },\n { name: \"Lemon Drizzle\", sponge: \"#f2e07a\" },\n { name: \"Carrot Spice\", sponge: \"#c98a4b\" },\n];\n\nconst ICINGS = [\n { name: \"Cream\", hex: \"#fdfaf4\" },\n { name: \"Blush\", hex: \"#f6b9c0\" },\n { name: \"Butter\", hex: \"#f7d58a\" },\n { name: \"Rose\", hex: \"#ef9aac\" },\n { name: \"Peach\", hex: \"#f6c79a\" },\n { name: \"Mint\", hex: \"#bfe3c9\" },\n];\n\nconst DECOS = [\n { id: \"candles\", label: \"🕯️ Candles\" },\n { id: \"sprinkles\", label: \"🌈 Sprinkles\" },\n { id: \"figurine\", label: \"🍓 Berries\" },\n { id: \"none\", label: \"✦ None\" },\n];\n\nconst C = {\n card: \"#ffffff\",\n bg: \"#faf6f1\",\n pink: \"#f7c4cb\",\n pinkDeep: \"#ef9aac\",\n pinkSoft: \"#fbe3e6\",\n text: \"#3a322e\",\n sub: \"#8a7d74\",\n};\n\nfunction Section({ title, children }: { title: string; children: React.ReactNode }) {\n return (\n

{title}

\n {children}\n

\n );\n}\n\nfunction App() {\n const canvasRef = useRef(null);\n const sceneRef = useRef | null>(null);\n\n const [typeIdx, setTypeIdx] = useState(0);\n const [layers, setLayers] = useState(2);\n const [icing, setIcing] = useState(ICINGS[0].hex);\n const [decoration, setDecoration] = useState(\"figurine\");\n const [sent, setSent] = useState(false);\n const [autoRotate, setAutoRotate] = useState(true);\n\n useEffect(() => {\n if (!canvasRef.current) return;\n sceneRef.current = createCakeScene(canvasRef.current);\n return () => sceneRef.current?.dispose();\n }, []);\n\n useEffect(() => {\n sceneRef.current?.update({\n layers,\n icing,\n sponge: CAKE_TYPES[typeIdx].sponge,\n decoration,\n } as CakeConfig);\n }, [typeIdx, layers, icing, decoration]);\n\n useEffect(() => { sceneRef.current?.setAutoRotate(autoRotate); }, [autoRotate]);\n\n const decoLabel = DECOS.find((d) => d.id === decoration)?.label.replace(/^\\S+\\s/, \"\") ?? \"None\";\n const icingName = ICINGS.find((i) => i.hex === icing)?.name ?? \"Custom\";\n\n return (\n

\n {/* Header */}\n

🎂

CakeView

Design your dream cake in 3D

\n\n

\n {/* 3D Stage */}\n

\n\n {/* Controls */}\n

Customize Cake

\n\n

\n {CAKE_TYPES.map((t, i) => (\n \n ))}\n

\n\n

\n {[1, 2, 3, 4].map((n) => (\n \n ))}\n

\n\n

\n {ICINGS.map((ic) => (\n setIcing(ic.hex)}\n style={{\n width: 38, height: 38, borderRadius: 99, cursor: \"pointer\", background: ic.hex,\n border: icing === ic.hex ? `3px solid ${C.pinkDeep}` : \"2px solid #eee\",\n boxShadow: \"0 2px 6px rgba(0,0,0,0.06)\", transition: \"transform .15s\",\n transform: icing === ic.hex ? \"scale(1.12)\" : \"scale(1)\",\n }}\n />\n ))}\n

\n\n

\n {DECOS.map((d) => (\n \n ))}\n

\n\n { setSent(true); setTimeout(() => setSent(false), 2600); }}\n style={{ width: \"100%\", border: \"none\", cursor: \"pointer\", background: C.pink, color: C.text, fontWeight: 700, fontSize: 16, padding: \"16px\", borderRadius: 16, marginTop: 4, boxShadow: \"0 8px 20px rgba(239,154,172,0.4)\" }}\n >\n {sent ? \"✓ Your cake design has been sent!\" : \"Send Order\"}\n \n

\n\n {/* Order summary strip */}\n

Order Summary — Your Custom Cake

\n \n \n \n \n

\n\n \n

\n View source on Val Town\n

\n );\n}\n\nfunction Stat({ label, value }: { label: string; value: string }) {\n return (\n

{label}

{value}

\n );\n}\n\nfunction pill(active: boolean): React.CSSProperties {\n return {\n border: \"none\", cursor: \"pointer\", borderRadius: 12, padding: \"9px 14px\", fontSize: 13, fontWeight: 600,\n background: active ? C.pink : C.pinkSoft,\n color: C.text,\n boxShadow: active ? \"0 4px 12px rgba(239,154,172,0.35)\" : \"none\",\n };\n}\n\ncreateRoot(document.getElementById(\"root\")!).render();\n","createdAt",["D",1780317491288],"branchVersion","branchId","8b8baffa-5db6-11f1-a0d3-1607ee4eb77e","id","8b8af060-5db6-11f1-a0d3-1607ee4eb77e","cakeview",["D",1780317403175],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","3D cake maker and customization site","imageUrl","ce853fdc-9996-40c7-996b-556d13e92e26","pinnedFileId","90f0abbc-5db6-11f1-95bf-1607ee4eb77e","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","019e832e-4116-75ec-826a-81329287dac1","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_100":99,"_108":104},"org",{"_100":99,"_101":102,"_103":104,"_19":59,"_105":106,"_107":30},"branch",{"_13":14,"_37":90,"_47":46,"_91":48,"_92":-5,"_93":-5,"_94":-5,"_95":-5,"_96":-5,"_97":49,"_98":99},"isOwned","main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","dynamikcodez","handle","displayName","Olukoya iyiola","avatar","https://avatars.githubusercontent.com/u/61966129?v=4","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_47":48,"_37":49,"_42":189,"_51":-5,"_52":30,"_53":54,"_55":54,"_56":57,"_58":-5,"_19":59,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":67,"_68":69,"_70":-5,"_71":-5,"_72":-5,"_73":-5,"_74":75,"_76":75,"_77":78,"_79":78,"_80":78,"_81":75,"_82":75,"_83":190,"_85":191,"_87":192,"_89":30},"tree",[172,173,174,175],"files",[172,173,174,175],"counts",{"_162":67,"_163":138,"_164":67,"_165":166,"_167":168},"contents",[131,132,133,134],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_47":159,"_37":33,"_35":36,"_137":-5,"_45":46,"_44":14,"_139":63,"_42":160,"_13":67,"_38":39,"_40":41,"_29":30,"_143":-5,"_32":161},{"_47":152,"_37":153,"_35":154,"_137":-5,"_45":46,"_44":155,"_139":63,"_42":156,"_13":67,"_38":39,"_40":157,"_29":30,"_143":-5,"_32":158},{"_47":145,"_37":146,"_35":147,"_137":-5,"_45":46,"_44":148,"_139":63,"_42":149,"_13":67,"_38":26,"_40":150,"_29":30,"_143":-5,"_32":151},{"_47":135,"_37":136,"_35":61,"_137":-5,"_45":46,"_44":138,"_139":63,"_42":140,"_13":67,"_38":141,"_40":142,"_29":30,"_143":-5,"_32":144},"90f0aacc-5db6-11f1-95bf-1607ee4eb77e","main.tsx","parentId",1,"latest",["D",1780317412217],"http","/** @jsxImportSource https://esm.sh/react@18 */\nimport { readFile } from \"https://esm.town/v/std/utils/index.ts\";\n\nexport default async function (req: Request): Promise {\n const url = new URL(req.url);\n\n // Serve the client-side bundle\n if (url.pathname === \"/app.tsx\") {\n const code = await readFile(\"/app.tsx\", import.meta.url);\n return new Response(code, {\n headers: { \"Content-Type\": \"text/javascript; charset=utf-8\" },\n });\n }\n\n const html = await readFile(\"/index.html\", import.meta.url);\n return new Response(html, {\n headers: { \"Content-Type\": \"text/html; charset=utf-8\" },\n });\n}\n","label",[136],"93ebaa42-5db6-11f1-95bf-1607ee4eb77e","index.html","93ebab28-5db6-11f1-95bf-1607ee4eb77e",2,["D",1780317417222],"\n\n \n \n \n CakeView · 3D Cake Maker\n 🎂\" />\n \n \n \n \n \n \n

\n \n \n\n",[146],"a6ecaa56-5db6-11f1-95bf-1607ee4eb77e","cake3d.ts","a6ecab1e-5db6-11f1-95bf-1607ee4eb77e",3,["D",1780317449105],"import * as THREE from \"https://esm.sh/three@0.160.0\";\nimport { OrbitControls } from \"https://esm.sh/three@0.160.0/examples/jsm/controls/OrbitControls.js\";\n\nexport type CakeConfig = {\n layers: number;\n icing: string; // hex\n sponge: string; // hex\n decoration: string; // \"candles\" | \"sprinkles\" | \"figurine\" | \"none\"\n};\n\nexport function createCakeScene(canvas: HTMLCanvasElement) {\n const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: true });\n renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));\n renderer.shadowMap.enabled = true;\n renderer.shadowMap.type = THREE.PCFSoftShadowMap;\n\n const scene = new THREE.Scene();\n\n const camera = new THREE.PerspectiveCamera(40, 1, 0.1, 100);\n camera.position.set(0, 3.2, 7);\n\n const controls = new OrbitControls(camera, canvas);\n controls.enableDamping = true;\n controls.dampingFactor = 0.08;\n controls.enablePan = false;\n controls.minDistance = 4.5;\n controls.maxDistance = 11;\n controls.minPolarAngle = 0.4;\n controls.maxPolarAngle = Math.PI / 2.05;\n controls.target.set(0, 1, 0);\n controls.autoRotate = true;\n controls.autoRotateSpeed = 1.1;\n\n // Lighting — soft, bakery-warm\n scene.add(new THREE.HemisphereLight(0xfff4ec, 0xd9c9bd, 0.9));\n const key = new THREE.DirectionalLight(0xffffff, 1.4);\n key.position.set(4, 8, 5);\n key.castShadow = true;\n key.shadow.mapSize.set(1024, 1024);\n key.shadow.camera.near = 1;\n key.shadow.camera.far = 25;\n key.shadow.bias = -0.0004;\n scene.add(key);\n const fill = new THREE.DirectionalLight(0xffe0d2, 0.5);\n fill.position.set(-5, 3, -4);\n scene.add(fill);\n\n // Plate\n const plate = new THREE.Mesh(\n new THREE.CylinderGeometry(2.7, 2.9, 0.18, 64),\n new THREE.MeshStandardMaterial({ color: 0xf3ece4, roughness: 0.6, metalness: 0.05 }),\n );\n plate.position.y = 0.09;\n plate.receiveShadow = true;\n scene.add(plate);\n\n // Ground shadow catcher\n const ground = new THREE.Mesh(\n new THREE.CircleGeometry(8, 64),\n new THREE.ShadowMaterial({ opacity: 0.16 }),\n );\n ground.rotation.x = -Math.PI / 2;\n ground.position.y = 0.001;\n ground.receiveShadow = true;\n scene.add(ground);\n\n const cakeGroup = new THREE.Group();\n scene.add(cakeGroup);\n\n function buildCake(cfg: CakeConfig) {\n cakeGroup.clear();\n\n const layerHeight = 0.55;\n const baseRadius = 1.85;\n const radiusStep = 0.28;\n let y = 0.18;\n\n for (let i = 0; i < cfg.layers; i++) {\n const r = baseRadius - i * radiusStep;\n // sponge tier\n const tier = new THREE.Mesh(\n new THREE.CylinderGeometry(r, r + 0.04, layerHeight, 64),\n new THREE.MeshStandardMaterial({ color: cfg.sponge, roughness: 0.85 }),\n );\n tier.position.y = y + layerHeight / 2;\n tier.castShadow = true;\n tier.receiveShadow = true;\n cakeGroup.add(tier);\n\n // icing band (drip ring) on top of each tier\n const band = new THREE.Mesh(\n new THREE.CylinderGeometry(r + 0.05, r + 0.05, 0.16, 64),\n new THREE.MeshStandardMaterial({ color: cfg.icing, roughness: 0.55 }),\n );\n band.position.y = y + layerHeight - 0.04;\n band.castShadow = true;\n cakeGroup.add(band);\n\n y += layerHeight + 0.04;\n }\n\n // top frosting dome\n const topR = baseRadius - (cfg.layers - 1) * radiusStep;\n const dome = new THREE.Mesh(\n new THREE.SphereGeometry(topR + 0.05, 48, 24, 0, Math.PI * 2, 0, Math.PI / 2),\n new THREE.MeshStandardMaterial({ color: cfg.icing, roughness: 0.5 }),\n );\n dome.scale.y = 0.35;\n dome.position.y = y;\n dome.castShadow = true;\n cakeGroup.add(dome);\n\n const topY = y + (topR + 0.05) * 0.35;\n\n // Decorations\n if (cfg.decoration === \"candles\") {\n const n = 6;\n for (let i = 0; i < n; i++) {\n const a = (i / n) * Math.PI * 2;\n const cr = topR * 0.6;\n const candle = new THREE.Mesh(\n new THREE.CylinderGeometry(0.05, 0.05, 0.7, 12),\n new THREE.MeshStandardMaterial({ color: 0xfff4d6, roughness: 0.4 }),\n );\n candle.position.set(Math.cos(a) * cr, topY + 0.35, Math.sin(a) * cr);\n candle.castShadow = true;\n cakeGroup.add(candle);\n const flame = new THREE.Mesh(\n new THREE.SphereGeometry(0.07, 12, 12),\n new THREE.MeshStandardMaterial({ color: 0xffae42, emissive: 0xff8c1a, emissiveIntensity: 1.5 }),\n );\n flame.scale.y = 1.7;\n flame.position.set(Math.cos(a) * cr, topY + 0.78, Math.sin(a) * cr);\n cakeGroup.add(flame);\n }\n } else if (cfg.decoration === \"sprinkles\") {\n const colors = [0xff6b8a, 0x6bb6ff, 0xffe066, 0x8ce99a, 0xda77f2];\n for (let i = 0; i < 80; i++) {\n const a = Math.random() * Math.PI * 2;\n const rad = Math.random() * topR * 0.95;\n const s = new THREE.Mesh(\n new THREE.CapsuleGeometry(0.03, 0.1, 4, 6),\n new THREE.MeshStandardMaterial({ color: colors[i % colors.length], roughness: 0.4 }),\n );\n s.position.set(Math.cos(a) * rad, topY + 0.02 + Math.random() * 0.05, Math.sin(a) * rad);\n s.rotation.set(Math.random() * Math.PI, Math.random() * Math.PI, Math.random() * Math.PI);\n cakeGroup.add(s);\n }\n } else if (cfg.decoration === \"figurine\") {\n const berryMat = new THREE.MeshStandardMaterial({ color: 0xe23b5a, roughness: 0.35 });\n const n = 5;\n for (let i = 0; i < n; i++) {\n const a = (i / n) * Math.PI * 2;\n const cr = topR * 0.55;\n const berry = new THREE.Mesh(new THREE.SphereGeometry(0.16, 20, 20), berryMat);\n berry.scale.set(1, 1.25, 1);\n berry.position.set(Math.cos(a) * cr, topY + 0.14, Math.sin(a) * cr);\n berry.castShadow = true;\n cakeGroup.add(berry);\n }\n const cherry = new THREE.Mesh(new THREE.SphereGeometry(0.2, 20, 20), berryMat);\n cherry.scale.set(1, 1.2, 1);\n cherry.position.set(0, topY + 0.18, 0);\n cherry.castShadow = true;\n cakeGroup.add(cherry);\n }\n }\n\n let frame = 0;\n function resize() {\n const w = canvas.clientWidth;\n const h = canvas.clientHeight;\n if (canvas.width !== w || canvas.height !== h) {\n renderer.setSize(w, h, false);\n camera.aspect = w / h;\n camera.updateProjectionMatrix();\n }\n }\n\n function animate() {\n frame = requestAnimationFrame(animate);\n resize();\n controls.update();\n renderer.render(scene, camera);\n }\n animate();\n\n return {\n update: buildCake,\n setAutoRotate: (v: boolean) => { controls.autoRotate = v; },\n dispose: () => { cancelAnimationFrame(frame); controls.dispose(); renderer.dispose(); },\n };\n}\n",[153],"c011b292-5db6-11f1-a0d3-1607ee4eb77e",["D",1780317491288],[33],"pulls","branches","forks","envVars",{"_169":67,"_171":67},"connections",{"_169":67,"_170":67},"count","unfilledCount","emptyCount",{"_47":159,"_37":33,"_35":36,"_137":-5,"_45":46,"_44":14,"_139":63,"_42":186,"_13":67,"_38":39,"_40":41,"_29":30,"_143":-5,"_177":187,"_32":188},{"_47":152,"_37":153,"_35":154,"_137":-5,"_45":46,"_44":155,"_139":63,"_42":183,"_13":67,"_38":39,"_40":157,"_29":30,"_143":-5,"_177":184,"_32":185},{"_47":145,"_37":146,"_35":147,"_137":-5,"_45":46,"_44":148,"_139":63,"_42":180,"_13":67,"_38":26,"_40":150,"_29":30,"_143":-5,"_177":181,"_32":182},{"_47":135,"_37":136,"_35":61,"_137":-5,"_45":46,"_44":138,"_139":63,"_42":176,"_13":67,"_38":141,"_40":142,"_29":30,"_143":-5,"_177":178,"_32":179},["D",1780317412217],"children",[],[136],["D",1780317417222],[],[146],["D",1780317449105],[],[153],["D",1780317491288],[],[33],["D",1780317403175],{"_100":99,"_108":104},{"_100":99,"_101":102,"_103":104,"_19":59,"_105":106,"_107":30},{"_13":14,"_37":90,"_47":46,"_91":48,"_92":-5,"_93":-5,"_94":-5,"_95":-5,"_96":-5,"_97":49,"_98":99},"ctx",{"_83":-5,"_128":226,"_227":228,"_229":230,"_231":30,"_232":30,"_233":30,"_234":63,"_235":-5,"_236":-7,"_237":-7,"_238":67,"_239":30,"_240":30,"_241":-5,"_242":30,"_243":30,"_244":30,"_245":-5},"ENV",{"_197":198,"_199":200,"_201":90,"_202":203,"_204":205,"_206":207,"_208":209,"_210":211,"_212":213,"_214":215,"_216":217,"_218":219,"_220":221,"_222":223,"_224":225},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v4