CakeView · 3D Cake Maker

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_188":189,"_190":191},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":-7,"_18":19,"_17":-7,"_143":-5,"_20":144,"_22":145,"_146":147,"_148":149,"_26":150,"_24":151,"_152":-5,"_153":-5,"_154":51,"_155":156,"_157":43,"_158":-5,"_159":-5,"_160":161},"routes/_app.x.$handle.$name.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":25,"_26":27,"_28":-5,"_29":-5,"_30":-5,"_31":-5,"_32":-5},"handle","dynamikcodez","name","cakeview","branchName","main","version","path","index.html","project",{"_33":88,"_13":14,"_44":89,"_90":-5,"_91":51,"_92":93,"_94":93,"_95":96,"_97":-5,"_98":99,"_100":60,"_101":43,"_102":-5,"_103":-5,"_104":46,"_105":106,"_107":-5,"_108":-5,"_109":-5,"_110":-5,"_111":112,"_113":112,"_114":115,"_116":115,"_117":115,"_118":112,"_119":112,"_120":121,"_122":123,"_124":125,"_126":51},"tree",[54,55,56,57],"file",{"_33":34,"_13":19,"_35":36,"_37":-5,"_38":39,"_40":41,"_42":43,"_44":45,"_17":46,"_47":24,"_48":49,"_50":51,"_52":-5,"_18":53},"contents",[],"upstream","pull","ahead","behind","envVars","id","93ebaa42-5db6-11f1-95bf-1607ee4eb77e","fileId","93ebab28-5db6-11f1-95bf-1607ee4eb77e","parentId","branchId","8b8baffa-5db6-11f1-a0d3-1607ee4eb77e","branchVersion",2,"latest",true,"createdAt",["D",1780317417222],0,"fileType","content","\n\n \n \n \n CakeView · 3D Cake Maker\n 🎂\" />\n \n \n \n \n \n \n

\n \n \n\n","deleted",false,"label",[19],{"_33":80,"_13":81,"_35":82,"_37":-5,"_38":39,"_40":83,"_42":43,"_44":84,"_17":46,"_47":76,"_48":85,"_50":51,"_52":-5,"_65":86,"_18":87},{"_33":71,"_13":72,"_35":73,"_37":-5,"_38":39,"_40":74,"_42":43,"_44":75,"_17":46,"_47":76,"_48":77,"_50":51,"_52":-5,"_65":78,"_18":79},{"_33":34,"_13":19,"_35":36,"_37":-5,"_38":39,"_40":41,"_42":43,"_44":68,"_17":46,"_47":24,"_48":49,"_50":51,"_52":-5,"_65":69,"_18":70},{"_33":58,"_13":59,"_35":60,"_37":-5,"_38":39,"_40":61,"_42":43,"_44":62,"_17":46,"_47":63,"_48":64,"_50":51,"_52":-5,"_65":66,"_18":67},"90f0aacc-5db6-11f1-95bf-1607ee4eb77e","main.tsx","90f0abbc-5db6-11f1-95bf-1607ee4eb77e",1,["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",[],[59],["D",1780317417222],[],[19],"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",[],[72],"c011b292-5db6-11f1-a0d3-1607ee4eb77e","app.tsx","c011b35a-5db6-11f1-a0d3-1607ee4eb77e",4,["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",[],[81],"8b8af060-5db6-11f1-a0d3-1607ee4eb77e",["D",1780317403175],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","3D cake maker and customization site","imageUrl","userId","ce853fdc-9996-40c7-996b-556d13e92e26","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","orgId","019e832e-4116-75ec-826a-81329287dac1","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_142":138},"org",{"_11":12,"_135":136,"_137":138,"_98":99,"_139":140,"_141":51},"branch",{"_17":83,"_13":16,"_33":39,"_127":88,"_128":-5,"_129":-5,"_130":-5,"_131":-5,"_132":-5,"_133":14,"_134":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","Olukoya iyiola","avatar","https://avatars.githubusercontent.com/u/61966129?v=4","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_33":88,"_13":14,"_44":184,"_90":-5,"_91":51,"_92":93,"_94":93,"_95":96,"_97":-5,"_98":99,"_100":60,"_101":43,"_102":-5,"_103":-5,"_104":46,"_105":106,"_107":-5,"_108":-5,"_109":-5,"_110":-5,"_111":112,"_113":112,"_114":115,"_116":115,"_117":115,"_118":112,"_119":112,"_120":185,"_122":186,"_124":187,"_126":51},[172,173,174,175],"files",[172,173,174,175],"counts",{"_163":46,"_164":61,"_165":46,"_32":166,"_167":168},[],{"_33":34,"_13":19,"_35":36,"_37":-5,"_38":39,"_40":41,"_42":43,"_44":45,"_17":46,"_47":24,"_48":49,"_50":51,"_52":-5,"_18":162},"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},[19],"pulls","branches","forks",{"_169":46,"_171":46},"connections",{"_169":46,"_170":46},"count","unfilledCount","emptyCount",{"_33":80,"_13":81,"_35":82,"_37":-5,"_38":39,"_40":83,"_42":43,"_44":84,"_17":46,"_47":76,"_48":85,"_50":51,"_52":-5,"_65":182,"_18":183},{"_33":71,"_13":72,"_35":73,"_37":-5,"_38":39,"_40":74,"_42":43,"_44":75,"_17":46,"_47":76,"_48":77,"_50":51,"_52":-5,"_65":180,"_18":181},{"_33":34,"_13":19,"_35":36,"_37":-5,"_38":39,"_40":41,"_42":43,"_44":68,"_17":46,"_47":24,"_48":49,"_50":51,"_52":-5,"_65":178,"_18":179},{"_33":58,"_13":59,"_35":60,"_37":-5,"_38":39,"_40":61,"_42":43,"_44":62,"_17":46,"_47":63,"_48":64,"_50":51,"_52":-5,"_65":176,"_18":177},[],[59],[],[19],[],[72],[],[81],["D",1780317403175],{"_11":12,"_142":138},{"_11":12,"_135":136,"_137":138,"_98":99,"_139":140,"_141":51},{"_17":83,"_13":16,"_33":39,"_127":88,"_128":-5,"_129":-5,"_130":-5,"_131":-5,"_132":-5,"_133":14,"_134":12},"ctx",{"_120":-5,"_159":221,"_222":223,"_224":225,"_226":51,"_227":51,"_228":51,"_229":43,"_230":-5,"_231":-7,"_232":-7,"_233":46,"_234":51,"_235":51,"_236":-5,"_237":51,"_238":51,"_239":51,"_240":-5},"ENV",{"_192":193,"_194":195,"_196":16,"_197":198,"_199":200,"_201":202,"_203":204,"_205":206,"_207":208,"_209":210,"_211":212,"_213":214,"_215":216,"_217":218,"_219":220},"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"]