[{"_1":2,"_133":-5,"_134":-5},"loaderData",{"_3":4,"_10":11},"root",{"_5":-5,"_6":7,"_8":9},"user","appId","cm7twdhs6009l11ml868xhxld","wsEndpoint","https://dev.fun","routes/p.$appId",{"_12":13,"_132":-5,"_129":-5},"appDetail",{"_14":15,"_16":17,"_18":19,"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_39":40,"_41":42,"_5":43,"_54":40,"_55":56,"_57":56,"_58":59,"_60":56,"_61":56,"_62":56,"_63":56,"_64":56,"_65":17,"_66":17,"_67":68,"_69":70,"_71":72,"_73":74,"_90":-5,"_91":17,"_92":93,"_129":30,"_130":131},"id","7f76051164fb0daca299","isMyApp",false,"name","spiralverse","description","Create mesmerizing spiral patterns that will hypnotize your eyeballs and bend your perception of reality! Customize colors, rotation speed, and density to craft your own portal to another dimension, then export your creation to share the dizzying experience with friends.","brief","Generate mind-bending spiral portals that will make your friends question if they've been hypnotized!","isLive",true,"isPublic","tags",[],"cover","https://cdn.dev.fun/snapshot/7f76051164fb0daca299/62546_8ac62361.webp","cdnUrl","https://cdn.dev.fun/app/7f76051164fb0daca299/62546","createdAt",["D",1746381378385],"updatedAt",["D",1746381385579],"lastCommitId",["B","62546"],"tier",1,"credits",60,{"_14":44,"_45":46,"_47":-5,"_48":46,"_49":50,"_51":-5,"_52":53},"12b22a1e-a69f-4cdc-ab82-f7e21baa7e43","uniqueId","AsejP2MPNyoDoeDxPD4Bg4NPUyEpsg5LAKMDNMSN494H","username","solanaWallet","displayName","Ase...94H","bio","avatar","/avatar.svg","commitCount","forkCount",0,"likeCount","runsCount",8,"downvoteCount","upvoteCount","upvoteRate","commentCount","visitorCount","isArchived","isRenamed","contractAddress","8hY64s8Aj5wsnNMkXSQLjz8QLqEdt6wu6txCXqPxpump","code","import { useState, useEffect, useRef } from 'react';\nimport { Download, Zap, Plus, Minus, Palette, Star } from 'lucide-react';\nexport default function App() {\n const [settings, setSettings] = useState({\n rotationSpeed: 0.02,\n density: 5,\n colorScheme: 'rainbow',\n spiralArms: 4,\n thickness: 2,\n zoom: 0.8,\n invertColors: false\n });\n const [customColors, setCustomColors] = useState({\n primary: '#FF00FF',\n secondary: '#00FFFF'\n });\n const [isPaused, setIsPaused] = useState(false);\n const [showCustomColors, setShowCustomColors] = useState(false);\n const canvasRef = useRef(null);\n const animationRef = useRef(null);\n const [rotation, setRotation] = useState(0);\n const colorSchemes = {\n rainbow: t => {\n const r = Math.sin(t) * 127 + 128;\n const g = Math.sin(t + 2 * Math.PI / 3) * 127 + 128;\n const b = Math.sin(t + 4 * Math.PI / 3) * 127 + 128;\n return `rgb(${r}, ${g}, ${b})`;\n },\n neon: t => {\n const r = Math.sin(t * 0.3) * 55 + 200;\n const g = Math.sin(t * 0.7) * 55 + 100;\n const b = Math.sin(t * 0.5) * 55 + 200;\n return `rgb(${r}, ${g}, ${b})`;\n },\n sunset: t => {\n const r = Math.sin(t * 0.5) * 55 + 200;\n const g = Math.sin(t * 0.3) * 30 + 50;\n const b = Math.sin(t * 0.9) * 70 + 100;\n return `rgb(${r}, ${g}, ${b})`;\n },\n monochrome: t => {\n const val = Math.sin(t) * 120 + 135;\n return `rgb(${val}, ${val}, ${val})`;\n },\n psychedelic: t => {\n const r = Math.sin(t * 2.1) * 127 + 128;\n const g = Math.sin(t * 1.7 + Math.PI / 2) * 127 + 128;\n const b = Math.sin(t * 1.3 + Math.PI) * 127 + 128;\n return `rgb(${r}, ${g}, ${b})`;\n },\n custom: t => {\n const ratio = (Math.sin(t) + 1) / 2;\n return interpolateColors(customColors.primary, customColors.secondary, ratio);\n }\n };\n const interpolateColors = (color1, color2, factor) => {\n const r1 = parseInt(color1.substring(1, 3), 16);\n const g1 = parseInt(color1.substring(3, 5), 16);\n const b1 = parseInt(color1.substring(5, 7), 16);\n const r2 = parseInt(color2.substring(1, 3), 16);\n const g2 = parseInt(color2.substring(3, 5), 16);\n const b2 = parseInt(color2.substring(5, 7), 16);\n const r = Math.round(r1 + factor * (r2 - r1));\n const g = Math.round(g1 + factor * (g2 - g1));\n const b = Math.round(b1 + factor * (b2 - b1));\n return `rgb(${r}, ${g}, ${b})`;\n };\n const drawSpiral = (ctx, width, height, rotation) => {\n ctx.clearRect(0, 0, width, height);\n const centerX = width / 2;\n const centerY = height / 2;\n const maxRadius = Math.min(width, height) * settings.zoom;\n if (settings.invertColors) {\n ctx.fillStyle = 'black';\n ctx.fillRect(0, 0, width, height);\n }\n for (let arm = 0; arm < settings.spiralArms; arm++) {\n const armRotation = 2 * Math.PI / settings.spiralArms * arm + rotation;\n for (let i = 0; i < settings.density * 360; i += 1) {\n const angle = i / 180 * Math.PI + armRotation;\n const radius = i / (settings.density * 360) * maxRadius;\n const x = centerX + radius * Math.cos(angle);\n const y = centerY + radius * Math.sin(angle);\n const colorPosition = i / 50 + arm + rotation * 5;\n ctx.fillStyle = colorSchemes[settings.colorScheme](colorPosition);\n ctx.beginPath();\n ctx.arc(x, y, settings.thickness, 0, 2 * Math.PI);\n ctx.fill();\n }\n }\n };\n const animate = () => {\n if (!isPaused) {\n setRotation(prev => prev + settings.rotationSpeed);\n }\n animationRef.current = requestAnimationFrame(animate);\n };\n const handleExport = () => {\n const canvas = canvasRef.current;\n const link = document.createElement('a');\n link.download = 'spiralverse-creation.png';\n link.href = canvas.toDataURL('image/png');\n link.click();\n };\n const handleSettingChange = (key, value) => {\n setSettings(prev => ({\n ...prev,\n [key]: value\n }));\n };\n const handleRandom = () => {\n setSettings({\n rotationSpeed: Math.random() * 0.05 - 0.025,\n density: Math.random() * 10 + 2,\n colorScheme: Object.keys(colorSchemes)[Math.floor(Math.random() * Object.keys(colorSchemes).length)],\n spiralArms: Math.floor(Math.random() * 10) + 1,\n thickness: Math.random() * 4 + 0.5,\n zoom: Math.random() * 0.6 + 0.4,\n invertColors: Math.random() > 0.5\n });\n };\n useEffect(() => {\n const canvas = canvasRef.current;\n const resizeCanvas = () => {\n canvas.width = window.innerWidth;\n canvas.height = window.innerHeight;\n };\n resizeCanvas();\n window.addEventListener('resize', resizeCanvas);\n animationRef.current = requestAnimationFrame(animate);\n return () => {\n window.removeEventListener('resize', resizeCanvas);\n cancelAnimationFrame(animationRef.current);\n };\n }, []);\n useEffect(() => {\n const canvas = canvasRef.current;\n const ctx = canvas.getContext('2d');\n drawSpiral(ctx, canvas.width, canvas.height, rotation);\n }, [rotation, settings, customColors]);\n return

\n \n SpiralVerse\n \n