[{"_1":2,"_136":-5,"_137":-5},"loaderData",{"_3":4,"_10":11},"root",{"_5":-5,"_6":7,"_8":9},"user","appId","cm7twdhs6009l11ml868xhxld","wsEndpoint","https://dev.fun","routes/app.$appId",{"_12":13},"appDetail",{"_14":15,"_16":17,"_18":19,"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_30":31,"_32":33,"_34":35,"_36":37,"_38":39,"_40":41,"_42":43,"_5":44,"_56":57,"_58":59,"_60":59,"_61":43,"_62":59,"_63":59,"_64":59,"_65":59,"_66":59,"_67":59,"_68":17,"_69":25,"_70":71,"_72":73,"_74":75,"_76":77,"_78":79,"_97":-5,"_98":17,"_99":100,"_132":31,"_133":134,"_135":17},"id","a82e47a4966226f5a419","isMyApp",false,"name","Onaru’s galle ","description","Your digital art doesn't just sit there—it comes alive in an immersive gallery that adapts to each piece's mood and style. Visitors don't just scroll through your work; they experience it through dynamic layouts, interactive hover effects, and a personalized journey that makes every piece feel like a discovery. This isn't a portfolio, it's your artistic universe where every click reveals another dimension of your creativity.","brief","Your digital art comes alive in an immersive, interactive gallery experience!","isLive",true,"isPublic","tags",[29],"💰","cover","https://cdn.dev.fun/snapshot/a82e47a4966226f5a419/93232_eee848f4.webp","cdnUrl","https://cdn.dev.fun/app/a82e47a4966226f5a419/93232","createdAt",["D",1754505533106],"updatedAt",["D",1754577837215],"lastCommitId",["B","93232"],"tier",1,"credits",9,{"_14":45,"_46":47,"_48":47,"_49":50,"_51":47,"_52":53,"_54":55},"f5c5cfed-395b-44b0-b788-2207f06ac184","uniqueId","Onaru","username","solanaWallet","DQ483ePfjg1m9SpuYX46wC56F12uRByMjxXUj9oFEMAJ","displayName","bio","Animate what ever ","avatar","https://cdn.dev.fun/avatar/f5c5cfed-395b-44b0-b788-2207f06ac184/be5a0363.webp","commitCount",8,"forkCount",0,"likeCount","runsCount","downvoteCount","upvoteCount","upvoteRate","commentCount","reportCount","visitorCount","isArchived","isRenamed","contractAddress","AgYVbX4CueNVrBAXZh84DoFQtZhG6wpi3JgXHyCKpump","code","import { useState, useEffect } from 'react';\nimport { Grid, Layers, Palette, Eye, Heart, X, MessageCircle } from 'lucide-react';\nexport default function App() {\n const [currentView, setCurrentView] = useState('immersive');\n const [selectedPiece, setSelectedPiece] = useState(null);\n const [hoveredPiece, setHoveredPiece] = useState(null);\n const [galleryTheme, setGalleryTheme] = useState('cosmic');\n const artworks = [{\n id: 1,\n title: \"Kawaii Collection\",\n category: \"Stickers\",\n mood: \"playful\",\n theme: \"cyberpunk\",\n image: \"https://cdn.dev.fun/asset/a82e47a4966226f5a419/IMG_4578_d2a20f11.jpeg\",\n description: \"-stickers\",\n colors: [\"#ff69b4\", \"#00ffff\", \"#ff1493\"],\n year: \"2024\"\n }, {\n id: 2,\n title: \"Brand Identity Suite\",\n category: \"Graphic Design\",\n mood: \"professional\",\n theme: \"nature\",\n image: \"https://cdn.dev.fun/asset/a82e47a4966226f5a419/IMG_4581_208d233f.jpeg\",\n description: \"-graphic design\",\n colors: [\"#2563eb\", \"#10b981\", \"#6366f1\"],\n year: \"2024\"\n }, {\n id: 3,\n title: \"Motion Magic\",\n category: \"Animation\",\n mood: \"dynamic\",\n theme: \"abstract\",\n image: \"https://cdn.dev.fun/asset/a82e47a4966226f5a419/IMG_2928_3f5cda8d.jpeg\",\n description: \"-animation.\",\n colors: [\"#ff4080\", \"#8040ff\", \"#ff8040\"],\n year: \"2024\"\n }, {\n id: 4,\n title: \"Viral Moments\",\n category: \"Memes\",\n mood: \"humorous\",\n theme: \"urban\",\n image: \"https://cdn.dev.fun/asset/a82e47a4966226f5a419/IMG_4582_ac15a7b7.jpeg\",\n description: \"-memes\",\n colors: [\"#ff6040\", \"#ffaa00\", \"#ff2040\"],\n year: \"2024\"\n }, {\n id: 5,\n title: \"Event Promotions\",\n category: \"Banners\",\n mood: \"bold\",\n theme: \"fantasy\",\n image: \"https://cdn.dev.fun/asset/a82e47a4966226f5a419/IMG_4586_f55f0917.jpeg\",\n description: \"-banners\",\n colors: [\"#aa80ff\", \"#ff80aa\", \"#80ffaa\"],\n year: \"2024\"\n }, {\n id: 6,\n title: \"Digital Sticker Pack\",\n category: \"Stickers\",\n mood: \"cute\",\n theme: \"futuristic\",\n image: \"https://cdn.dev.fun/asset/a82e47a4966226f5a419/IMG_4584_26cf4bdc.jpeg\",\n description: \"-stickers\",\n colors: [\"#4080ff\", \"#ff4080\", \"#80ff40\"],\n year: \"2024\"\n }, {\n id: 7,\n title: \"Logo Designs\",\n category: \"Graphic Design\",\n mood: \"sleek\",\n theme: \"cosmic\",\n image: \"https://cdn.dev.fun/asset/a82e47a4966226f5a419/IMG_4580_67979d8a.jpeg\",\n description: \"-graphic design\",\n colors: [\"#8b5cf6\", \"#06b6d4\", \"#f59e0b\"],\n year: \"2023\"\n }, {\n id: 8,\n title: \"Smooth Transitions\",\n category: \"Animation\",\n mood: \"fluid\",\n theme: \"nature\",\n image: \"https://cdn.dev.fun/asset/a82e47a4966226f5a419/IMG_4585_33694c2b.jpeg\",\n description: \"-animation.\",\n colors: [\"#10b981\", \"#3b82f6\", \"#8b5cf6\"],\n year: \"2023\"\n }];\n const themeStyles = {\n cosmic: {\n bg: \"from-purple-900 via-blue-900 to-indigo-900\",\n accent: \"text-purple-300\",\n glow: \"shadow-purple-500/20\"\n },\n cyberpunk: {\n bg: \"from-pink-900 via-purple-900 to-cyan-900\",\n accent: \"text-cyan-300\",\n glow: \"shadow-cyan-500/20\"\n },\n nature: {\n bg: \"from-teal-900 via-green-900 to-blue-900\",\n accent: \"text-teal-300\",\n glow: \"shadow-teal-500/20\"\n },\n abstract: {\n bg: \"from-orange-900 via-red-900 to-purple-900\",\n accent: \"text-orange-300\",\n glow: \"shadow-orange-500/20\"\n },\n urban: {\n bg: \"from-gray-900 via-slate-900 to-zinc-900\",\n accent: \"text-amber-300\",\n glow: \"shadow-amber-500/20\"\n },\n fantasy: {\n bg: \"from-violet-900 via-fuchsia-900 to-pink-900\",\n accent: \"text-violet-300\",\n glow: \"shadow-violet-500/20\"\n },\n futuristic: {\n bg: \"from-blue-900 via-indigo-900 to-cyan-900\",\n accent: \"text-blue-300\",\n glow: \"shadow-blue-500/20\"\n }\n };\n useEffect(() => {\n if (hoveredPiece) {\n setGalleryTheme(hoveredPiece.theme);\n } else {\n setGalleryTheme('cosmic');\n }\n }, [hoveredPiece]);\n const ArtworkCard = ({\n artwork,\n index\n }) => {\n const isHovered = hoveredPiece?.id === artwork.id;\n const delay = index * 0.1;\n return

setHoveredPiece(artwork)} onMouseLeave={() => setHoveredPiece(null)} onClick={() => setSelectedPiece(artwork)}>\n {}\n

\n\n {}\n

{artwork.title}

{artwork.category}

\n {artwork.description}\n

\n \n {}\n

\n {artwork.mood}\n

\n\n {}\n {isHovered &&

\n \n

}\n

;\n };\n const DetailModal = ({\n artwork,\n onClose\n }) => {\n if (!artwork) return null;\n return

e.stopPropagation()}>\n

\n {}\n

\n\n {}\n

{artwork.title}

{artwork.category}

{artwork.year}

{artwork.description}

\n\n {}\n

COLOR PALETTE

\n {artwork.colors.map((color, index) =>

)}\n

\n\n {}\n

\n \n {artwork.mood}\n \n \n {artwork.theme}\n \n

\n\n {}\n \n

;\n };\n const currentTheme = themeStyles[galleryTheme];\n return

\n {}\n

ONARU'S COLLECTION

Curated Digital Art Experience

\n \n

\n \n \n \n \n \n \n \n \n

\n\n {}\n

\n {}\n

\n \n {galleryTheme} Mood\n

\n\n {}\n

\n {artworks.map((artwork, index) =>

\n \n

)}\n

\n\n {}\n setSelectedPiece(null)} />\n\n {}\n

\n {[...Array(20)].map((_, i) =>

)}\n

\n\n \n

;\n}","packageJson","{\"dependencies\":{\"react\":\"18.2.0\",\"lucide-react\":\"0.441.0\"}}","appFunctions",[],"token",{"_18":80,"_81":82,"_83":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_70":71},"vibecode.fun","symbol","rick","price",0.00008784,"marketcap",86778.5,"image","https://pump.mypinata.cloud/ipfs/QmdiVAhd3kBiCNCc559HT5hQGeoP742a9BGML1qod45c8j?img-width=256&img-dpr=2","website","https://dev.fun/p/93870176b0b04c03015d","twitter","https://x.com/crabbylions/status/1898018929869832580?s=46","devCount",66,"appCount",96,"upstreamApp","isLordOfDev","analytics",[101,105,107,109,111,113,115,117,119,121,123,125,127,129,131],{"_102":103,"_104":59},"day","2025-08-09","runCount",{"_102":106,"_104":59},"2025-08-10",{"_102":108,"_104":59},"2025-08-11",{"_102":110,"_104":59},"2025-08-12",{"_102":112,"_104":59},"2025-08-13",{"_102":114,"_104":59},"2025-08-14",{"_102":116,"_104":59},"2025-08-15",{"_102":118,"_104":59},"2025-08-16",{"_102":120,"_104":59},"2025-08-17",{"_102":122,"_104":59},"2025-08-18",{"_102":124,"_104":59},"2025-08-19",{"_102":126,"_104":59},"2025-08-20",{"_102":128,"_104":59},"2025-08-21",{"_102":130,"_104":59},"2025-08-22",{"_102":110,"_104":41},"snapshot","ogImage","https://cdn.dev.fun/og/image/a82e47a4966226f5a419/44693f3b.webp","isDevbase","actionData","errors"]

say something