Valentine's Day Invitation

\n {dots.map((d) => (\n \n ))}\n

\n );\n}\n\n// ❤️ Floating red hearts (soft + adult)\nfunction FloatingHearts() {\n const hearts = useMemo(() => {\n return Array.from({ length: 12 }).map((_, i) => ({\n id: i,\n left: Math.random() * 100,\n size: 12 + Math.random() * 18,\n duration: 7 + Math.random() * 6,\n delay: Math.random() * 2,\n opacity: 0.12 + Math.random() * 0.22,\n rotate: -10 + Math.random() * 20,\n }));\n }, []);\n\n return (\n \n {hearts.map((h) => (\n \n ❤️\n \n ))}\n \n );\n}\n\n// 🎆 Fireworks background (when YES)\nfunction Fireworks({ active }) {\n const bursts = useMemo(() => {\n return Array.from({ length: 12 }).map((_, i) => ({\n id: i,\n left: 10 + Math.random() * 80,\n top: 10 + Math.random() * 55,\n delay: Math.random() * 0.7,\n size: 70 + Math.random() * 90,\n }));\n }, []);\n\n if (!active) return null;\n\n return (\n \n {bursts.map((b) => (\n \n ))}\n \n );\n}\n\nfunction App() {\n const [noClicks, setNoClicks] = useState(0);\n const [isValentine, setIsValentine] = useState(false);\n const [fireworks, setFireworks] = useState(false);\n\n const [noPos, setNoPos] = useState({ x: 0, y: 0 });\n const noBtnRef = useRef(null);\n\n // classy scaling (not too crazy)\n const yesButtonSize = Math.min(28, 16 + noClicks * 1.35);\n\n const firstImg =\n \"https://media.tenor.com/VIChDQ6ejRQAAAAj/jumping-bear-hearts-no-png.gif\";\n const secondImg =\n \"https://media.tenor.com/f1xnRxTRxLAAAAAj/bears-with-kisses-bg.gif\";\n\n const handleNo = () => {\n setNoClicks((prev) => prev + 1);\n\n // elegant escape (small movement so it stays premium)\n const maxMove = 90;\n const x = (Math.random() - 0.5) * 2 * maxMove;\n const y = (Math.random() - 0.5) * 2 * maxMove;\n setNoPos({ x, y });\n };\n\n const handleYes = () => {\n setIsValentine(true);\n setFireworks(true);\n setTimeout(() => setFireworks(false), 2200);\n };\n\n useEffect(() => {\n const onResize = () => setNoPos({ x: 0, y: 0 });\n window.addEventListener(\"resize\", onResize);\n return () => window.removeEventListener(\"resize\", onResize);\n }, []);\n\n return (\n \n \n\n \n \n \n\n {/* ✨ Premium card */}\n \n {/* top highlight line */}\n \n\n {!isValentine\n ? (\n <>\n {/* header */}\n \n \n Valentine Invite\n \n\n \n 14 / 02 / 2026\n \n \n\n {/* content */}\n

\n \n\n \n Malak, will you be my Valentine?\n \n\n \n A small question… but a big meaning...❤️\n

\n\n {/* buttons */}\n \n (e.currentTarget.style.filter = \"brightness(1.06)\")}\n onMouseLeave={(\n e,\n ) => (e.currentTarget.style.filter = \"brightness(1)\")}\n onMouseDown={(\n e,\n ) => (e.currentTarget.style.transform = \"scale(0.98)\")}\n onMouseUp={(\n e,\n ) => (e.currentTarget.style.transform = \"scale(1)\")}\n >\n YES\n \n\n \n {noClicks === 0 ? \"No\" : NO_PHRASES[\n Math.min(noClicks - 1, NO_PHRASES.length - 1)\n ]}\n \n

\n\n {noClicks > 0 && (\n \n Attempts to escape Aly:{\" \"}\n {noClicks}\n \n )}\n \n \n )\n : (\n <>\n {/* success */}\n

\n \n\n \n OKAY GOT YOU!!\n

\n\n \n 14/2/2026\n \n\n \n Now wait for your the next step.\n \n \n \n )}\n \n \n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") client();\n\nexport default async function server(request) {\n return new Response(\n `\n \n \n Valentine's Day Invitation\n \n \n \n \n

\n \n \n \n \n `,\n { headers: { \"content-type\": \"text/html\" } },\n );\n}","deleted","label",[124],"cdd90b58-0106-11f1-b21b-42dde27851f2","README.md","019c23c1-9882-75e4-9694-3c8c82704136",1,["D",1770126415889],"Hello!!! \n\nFeel free to mess around with this val and make it your own :). Just click on \"Fork\" in the top right.\n\nYou can change the phrases that show up as you click no, you can change the firstImg and secondImg, maybe even add more images. And you can also change the colors and any of the text on the screen!\n\nHave fun with it and hopefully your crush says yes hehe.",[140],"pulls","branches","forks","envVars",{"_153":41,"_155":41},"connections",{"_153":41,"_154":41},"count","unfilledCount","emptyCount",{"_18":139,"_20":140,"_125":141,"_126":-5,"_127":67,"_128":142,"_129":37,"_22":162,"_64":41,"_132":99,"_134":144,"_136":26,"_137":-5,"_159":163,"_88":164},{"_18":123,"_20":124,"_125":35,"_126":-5,"_127":67,"_128":65,"_129":37,"_22":158,"_64":131,"_132":133,"_134":135,"_136":26,"_137":-5,"_159":160,"_88":161},["D",1770198868163],"children",[],[124],["D",1770126415889],[],[140],["D",1770126415889],{"_16":17,"_86":82},{"_16":17,"_80":-5,"_81":82,"_32":33,"_83":84,"_85":26},{"_64":65,"_20":66,"_18":67,"_68":19,"_69":70,"_71":72,"_73":28,"_74":75,"_76":77,"_78":21,"_79":17},"ctx",{"_57":-5,"_109":202,"_203":204,"_205":206,"_207":26,"_208":26,"_209":26,"_210":37,"_211":-5,"_212":-7,"_213":-7,"_214":41,"_215":26,"_216":26,"_217":-5,"_218":26,"_219":26,"_220":26,"_221":-5},"ENV",{"_173":174,"_175":176,"_177":66,"_178":179,"_180":181,"_182":183,"_184":185,"_186":187,"_188":189,"_190":191,"_192":193,"_194":195,"_196":197,"_198":199,"_200":201},"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"]

Search