[{"_1":2,"_137":-5,"_138":-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,"_31":32,"_33":34,"_35":36,"_37":38,"_39":40,"_41":42,"_43":44,"_5":45,"_56":57,"_58":59,"_60":42,"_61":62,"_63":59,"_64":59,"_65":59,"_66":59,"_67":59,"_68":59,"_69":17,"_70":17,"_71":72,"_73":74,"_75":76,"_77":78,"_79":80,"_97":-5,"_98":17,"_99":100,"_133":32,"_134":135,"_136":17},"id","f2a0ea50be0346bbf2b9","isMyApp",false,"name","layerlab","description","Magically blend your images with our predefined backgrounds to create surreal visual mashups! Upload, layer, and watch as your photos transform into unexpected artistic collages.","brief","","isLive",true,"isPublic","tags",[29,30],"💰","👑","cover","https://cdn.dev.fun/snapshot/f2a0ea50be0346bbf2b9/35089_2de410e5.webp","cdnUrl","https://cdn.dev.fun/app/f2a0ea50be0346bbf2b9/35089","createdAt",["D",1742388109273],"updatedAt",["D",1742394759538],"lastCommitId",["B","35089"],"tier",1,"credits",3,{"_14":46,"_47":48,"_49":-5,"_50":48,"_51":52,"_53":-5,"_54":55},"eac470ae-a1ce-40a9-8b57-f05847f5feea","uniqueId","6jGWmHhjy4SrMLVoCz3dMJaZnoaX7tsQdrfiWxqp29EJ","username","solanaWallet","displayName","6jG...9EJ","bio","avatar","/avatar.svg","commitCount",35,"forkCount",0,"likeCount","runsCount",163,"downvoteCount","upvoteCount","upvoteRate","commentCount","reportCount","visitorCount","isArchived","isRenamed","contractAddress","3HfLqhtF5hR5dyBXh6BMtRaTm9qzStvEGuMa8Gx6pump","code","import React, { useState, useEffect, useRef } from 'react';\nexport default function App() {\n const [backgroundImage, setBackgroundImage] = useState(null);\n const [overlayImage, setOverlayImage] = useState(null);\n const [resultCanvas, setResultCanvas] = useState(null);\n const [overlayScale, setOverlayScale] = useState(0.8);\n const [overlayVerticalPosition, setOverlayVerticalPosition] = useState(0.5);\n const [text, setText] = useState('');\n const [fontSize, setFontSize] = useState(30);\n const [textColor, setTextColor] = useState('#ffffff');\n const [textPosition, setTextPosition] = useState({\n x: 0,\n y: 0\n });\n const [isDraggingText, setIsDraggingText] = useState(false);\n const [dragOffset, setDragOffset] = useState({\n x: 0,\n y: 0\n });\n const canvasRef = useRef(null);\n const fileInputRef = useRef(null);\n useEffect(() => {\n // Load the default cosmic background\n const defaultBg = new Image();\n defaultBg.crossOrigin = \"Anonymous\";\n defaultBg.src = \"https://i.postimg.cc/N0hf4CVR/Epic-2.png\";\n defaultBg.onload = () => {\n setBackgroundImage(defaultBg);\n };\n }, []);\n useEffect(() => {\n if (backgroundImage) {\n updateCanvas();\n }\n }, [backgroundImage, overlayImage, overlayScale, overlayVerticalPosition, text, fontSize, textColor, textPosition]);\n useEffect(() => {\n if (canvasRef.current && backgroundImage) {\n // Set initial text position to center bottom (85% down)\n const canvasWidth = canvasRef.current.width;\n const canvasHeight = canvasRef.current.height;\n setTextPosition({\n x: canvasWidth / 2,\n y: canvasHeight * 0.85\n });\n }\n }, [backgroundImage, canvasRef.current]);\n const updateCanvas = () => {\n if (!canvasRef.current || !backgroundImage) return;\n const canvas = canvasRef.current;\n const ctx = canvas.getContext('2d');\n\n // Set canvas dimensions to match background image\n canvas.width = backgroundImage.width;\n canvas.height = backgroundImage.height;\n\n // Draw background\n ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height);\n\n // Draw overlay if it exists\n if (overlayImage) {\n const overlayWidth = overlayImage.width * overlayScale;\n const overlayHeight = overlayImage.height * overlayScale;\n const overlayX = (canvas.width - overlayWidth) / 2;\n const overlayY = (canvas.height - overlayHeight) * overlayVerticalPosition;\n\n // Always use 'overlay' blend mode\n ctx.globalCompositeOperation = 'overlay';\n ctx.drawImage(overlayImage, overlayX, overlayY, overlayWidth, overlayHeight);\n ctx.globalCompositeOperation = 'source-over'; // Reset blend mode\n }\n\n // Draw text\n if (text) {\n ctx.fillStyle = textColor;\n ctx.font = `${fontSize}px Arial`;\n ctx.textAlign = 'center';\n ctx.textBaseline = 'bottom';\n ctx.fillText(text, textPosition.x, textPosition.y);\n }\n\n // Convert canvas to data URL\n const dataURL = canvas.toDataURL('image/png');\n setResultCanvas(dataURL);\n };\n const handleOverlayUpload = e => {\n const file = e.target.files[0];\n if (!file) return;\n const reader = new FileReader();\n reader.onload = event => {\n const img = new Image();\n img.crossOrigin = \"Anonymous\";\n img.onload = () => {\n setOverlayImage(img);\n };\n img.src = event.target.result;\n };\n reader.readAsDataURL(file);\n };\n const handleTextChange = e => {\n setText(e.target.value);\n };\n const handleFontSizeChange = e => {\n setFontSize(Number(e.target.value));\n };\n const handleColorChange = e => {\n setTextColor(e.target.value);\n };\n const handleMouseDown = e => {\n const canvas = canvasRef.current;\n if (!canvas) return;\n const rect = canvas.getBoundingClientRect();\n const x = (e.clientX - rect.left) * (canvas.width / rect.width);\n const y = (e.clientY - rect.top) * (canvas.height / rect.height);\n\n // Check if mouse is over text\n if (text && canvasRef.current) {\n const ctx = canvasRef.current.getContext('2d');\n const textWidth = ctx.measureText(text).width;\n const textHeight = fontSize;\n const textLeft = textPosition.x - textWidth / 2;\n const textRight = textPosition.x + textWidth / 2;\n const textTop = textPosition.y - textHeight;\n const textBottom = textPosition.y;\n if (x >= textLeft && x <= textRight && y >= textTop && y <= textBottom) {\n setIsDraggingText(true);\n setDragOffset({\n x: textPosition.x - x,\n y: textPosition.y - y\n });\n }\n }\n };\n const handleMouseMove = e => {\n if (!isDraggingText || !canvasRef.current) return;\n const canvas = canvasRef.current;\n const rect = canvas.getBoundingClientRect();\n const x = (e.clientX - rect.left) * (canvas.width / rect.width);\n const y = (e.clientY - rect.top) * (canvas.height / rect.height);\n setTextPosition({\n x: x + dragOffset.x,\n y: y + dragOffset.y\n });\n };\n const handleMouseUp = () => {\n setIsDraggingText(false);\n };\n const handleDownload = () => {\n if (!resultCanvas) return;\n const a = document.createElement('a');\n a.href = resultCanvas;\n a.download = 'anyone-can-be-a-hero.png';\n a.click();\n };\n return

Anyone Can Be A Hero

\n \n

Upload Overlay Image

\n \n

\n \n {overlayImage &&

Adjust Overlay

\n Scale: {overlayScale.toFixed(2)}\n setOverlayScale(Number(e.target.value))} className=\"w-full bg-gray-600 rounded-lg appearance-none cursor-pointer\" />\n

\n Vertical Position: {overlayVerticalPosition.toFixed(2)}\n setOverlayVerticalPosition(Number(e.target.value))} className=\"w-full bg-gray-600 rounded-lg appearance-none cursor-pointer\" />\n

}\n \n

Add Text

\n Text:\n \n

\n Font Size: {fontSize}px\n \n

\n Color:\n \n

\n \n \n

\n \n

Preview

;\n}","packageJson","{\"dependencies\":{\"react\":\"18.2.0\",\"lucide-react\":\"0.441.0\"}}","appFunctions",[],"token",{"_18":81,"_82":81,"_83":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_71":72},"buidl","symbol","price",0.0008997,"marketcap",899715,"image","https://pump.mypinata.cloud/ipfs/QmPR3CamxoBQW892uHDT2EGRxFvksiJyrEg1ajZYVqJhnf?img-width=256&img-dpr=2","website","https://buidl.eco/","twitter","https://x.com/buidldao_","devCount",320,"appCount",2183,"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-12","runCount",{"_102":106,"_104":59},"2025-08-13",{"_102":108,"_104":59},"2025-08-14",{"_102":110,"_104":59},"2025-08-15",{"_102":112,"_104":59},"2025-08-16",{"_102":114,"_104":59},"2025-08-17",{"_102":116,"_104":59},"2025-08-18",{"_102":118,"_104":59},"2025-08-19",{"_102":120,"_104":59},"2025-08-20",{"_102":122,"_104":59},"2025-08-21",{"_102":124,"_104":59},"2025-08-22",{"_102":126,"_104":59},"2025-08-23",{"_102":128,"_104":59},"2025-08-24",{"_102":130,"_104":59},"2025-08-25",{"_102":132,"_104":42},"2025-08-26","snapshot","ogImage","https://cdn.dev.fun/og/image/f2a0ea50be0346bbf2b9/565eac55.webp","isDevbase","actionData","errors"]

say something