CakeView · 3D Cake Maker

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_196":197,"_198":199},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":16,"_17":18,"_38":-7,"_121":-5,"_19":122,"_123":124,"_125":126,"_127":128,"_129":130,"_21":131,"_132":-5,"_133":-5,"_134":24,"_135":136,"_137":83,"_138":-5,"_139":-5,"_140":141},"routes/_app.x.$handle.$name.branch.$branch.history_.$",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":20,"_21":22,"_23":24,"_25":26,"_27":28,"_29":24,"_30":-5},"handle","dynamikcodez","name","cakeview","branchName","main","path","index.html","project",{"_32":70,"_13":14,"_36":71,"_72":-5,"_73":24,"_74":75,"_76":75,"_77":78,"_79":-5,"_30":66,"_80":81,"_82":83,"_84":-5,"_85":-5,"_86":26,"_40":41,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":92,"_93":92,"_94":95,"_96":95,"_97":95,"_98":92,"_99":92,"_52":100,"_101":102,"_103":104,"_105":24},"file",{"_62":63,"_13":18,"_64":21,"_65":24,"_69":-5},"isDirectory",false,"page",0,"history",[31],"hasNext","userId",{"_32":33,"_34":35,"_36":37,"_38":39,"_40":41,"_42":43,"_44":-5,"_45":46,"_47":-5,"_48":-5,"_49":-5,"_50":-5,"_51":-5,"_52":53,"_21":54,"_55":-5,"_56":-5,"_57":-5,"_58":-5,"_59":60},"id","93edbc1a-5db6-11f1-95bf-1607ee4eb77e","branchId","8b8baffa-5db6-11f1-a0d3-1607ee4eb77e","createdAt",["D",1780317417222],"version",2,"orgId","019e832e-4116-75ec-826a-81329287dac1","parentId","90f3c428-5db6-11f1-95bf-1607ee4eb77e","incomingCommitId","aiChatMessageId","3b98e73e-340f-4066-853a-b986663148d4","aiChatThreadId","aiChatThreadUserId","aiChatThreadTitle","source","clientLabel","user",{"_32":66,"_40":41,"_11":12,"_67":68},{"_62":63,"_13":18,"_64":21,"_65":24},"pull","merge","revert","multiple","commits",[61],{"_32":33,"_34":35,"_36":37,"_38":39,"_40":41,"_42":43,"_44":-5,"_45":46,"_47":-5,"_48":-5,"_49":-5,"_50":-5,"_51":-5,"_52":53,"_21":54,"_55":-5,"_56":-5,"_57":-5},"fileId","93ebab28-5db6-11f1-95bf-1607ee4eb77e","fileType","deleted","ce853fdc-9996-40c7-996b-556d13e92e26","avatar","https://avatars.githubusercontent.com/u/61966129?v=4","deletedAtVersion","8b8af060-5db6-11f1-a0d3-1607ee4eb77e",["D",1780317403175],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","3D cake maker and customization site","imageUrl","pinnedFileId","90f0abbc-5db6-11f1-95bf-1607ee4eb77e","pinPreview",true,"pinMigrated","screenshotVersion","likeCount","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm",{"_11":12,"_120":68},"org",{"_11":12,"_115":116,"_67":68,"_30":66,"_117":118,"_119":24},"branch",{"_38":106,"_13":16,"_32":35,"_107":70,"_108":-5,"_109":-5,"_110":-5,"_111":-5,"_112":-5,"_113":14,"_114":12},"isOwned",4,"projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","Olukoya iyiola","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_32":70,"_13":14,"_36":192,"_72":-5,"_73":24,"_74":75,"_76":75,"_77":78,"_79":-5,"_30":66,"_80":81,"_82":83,"_84":-5,"_85":-5,"_86":26,"_40":41,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":92,"_93":92,"_94":95,"_96":95,"_97":95,"_98":92,"_99":92,"_52":193,"_101":194,"_103":195,"_105":24},"tree",[160,161,162,163],"files",[160,161,162,163],"counts",{"_149":26,"_150":151,"_152":26,"_153":154,"_155":156},"contents",[],{"_32":142,"_34":35,"_62":63,"_13":18,"_143":144,"_64":21,"_38":26,"_42":-5,"_36":145,"_146":39,"_147":-5,"_17":148},"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},"93ebaa42-5db6-11f1-95bf-1607ee4eb77e","content","\n\n \n \n \n CakeView · 3D Cake Maker\n 🎂\" />\n \n \n \n \n \n \n

\n \n \n\n",["D",1780317417222],"branchVersion","label",[18],"pulls","branches",1,"forks","envVars",{"_157":26,"_159":26},"connections",{"_157":26,"_158":26},"count","unfilledCount","emptyCount",{"_32":185,"_13":186,"_62":187,"_42":-5,"_34":35,"_146":106,"_166":83,"_36":188,"_38":26,"_64":181,"_143":189,"_65":24,"_147":-5,"_170":190,"_17":191},{"_32":176,"_13":177,"_62":178,"_42":-5,"_34":35,"_146":179,"_166":83,"_36":180,"_38":26,"_64":181,"_143":182,"_65":24,"_147":-5,"_170":183,"_17":184},{"_32":142,"_13":18,"_62":63,"_42":-5,"_34":35,"_146":39,"_166":83,"_36":173,"_38":26,"_64":21,"_143":144,"_65":24,"_147":-5,"_170":174,"_17":175},{"_32":164,"_13":165,"_62":81,"_42":-5,"_34":35,"_146":151,"_166":83,"_36":167,"_38":26,"_64":168,"_143":169,"_65":24,"_147":-5,"_170":171,"_17":172},"90f0aacc-5db6-11f1-95bf-1607ee4eb77e","main.tsx","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","children",[],[165],["D",1780317417222],[],[18],"a6ecaa56-5db6-11f1-95bf-1607ee4eb77e","cake3d.ts","a6ecab1e-5db6-11f1-95bf-1607ee4eb77e",3,["D",1780317449105],"script","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",[],[177],"c011b292-5db6-11f1-a0d3-1607ee4eb77e","app.tsx","c011b35a-5db6-11f1-a0d3-1607ee4eb77e",["D",1780317491288],"/** @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",[],[186],["D",1780317403175],{"_11":12,"_120":68},{"_11":12,"_115":116,"_67":68,"_30":66,"_117":118,"_119":24},{"_38":106,"_13":16,"_32":35,"_107":70,"_108":-5,"_109":-5,"_110":-5,"_111":-5,"_112":-5,"_113":14,"_114":12},"ctx",{"_52":-5,"_139":229,"_230":231,"_232":233,"_234":24,"_235":24,"_236":24,"_237":83,"_238":-5,"_239":-7,"_240":-7,"_241":26,"_242":24,"_243":24,"_244":-5,"_245":24,"_246":24,"_247":24,"_248":-5},"ENV",{"_200":201,"_202":203,"_204":16,"_205":206,"_207":208,"_209":210,"_211":212,"_213":214,"_215":216,"_217":218,"_219":220,"_221":222,"_223":224,"_225":226,"_227":228},"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"]

History · index.html