♥ Happy Birthday, My Love ♥

\n\n {showButton && (\n \n Next →\n \n )}\n\n \n \n );\n}\n",[198,101,76],"50c04c9a-957e-4f55-aad2-8d0fe996c7dd",["D",1783897826535],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\n\nconst FULL_TEXT = `Happy birthday my soulmate\n\nThank you for filling my life with love and happiness. Have the best day ever! You deserve all the happiness in the world today and every day. I love you more than words can say. Wishing the happiest birthday to my favorite person. 💋`;\n\nexport function EnvelopePage({ onDone }: { onDone: () => void }) {\n const [stage, setStage] = useState<\"closed\" | \"opening\" | \"open\" | \"closing\" | \"done\">(\"closed\");\n const [typedText, setTypedText] = useState(\"\");\n\n useEffect(() => {\n const t1 = setTimeout(() => setStage(\"opening\"), 1200);\n const t2 = setTimeout(() => setStage(\"open\"), 2200);\n return () => { clearTimeout(t1); clearTimeout(t2); };\n }, []);\n\n // Typewriter: word by word as the paper pops out\n useEffect(() => {\n if (stage !== \"open\") return;\n if (typedText.length >= FULL_TEXT.length) return;\n const timer = setTimeout(() => {\n setTypedText(FULL_TEXT.slice(0, typedText.length + 1));\n }, 55);\n return () => clearTimeout(timer);\n }, [stage, typedText]);\n\n // Closing → done transition\n useEffect(() => {\n if (stage === \"closing\") {\n const t = setTimeout(() => setStage(\"done\"), 1500);\n return () => clearTimeout(t);\n }\n }, [stage]);\n\n const flapOpen = stage === \"opening\" || stage === \"open\";\n const letterUp = stage === \"open\";\n const showClosingBtn = stage === \"open\" && typedText.length >= FULL_TEXT.length;\n\n return (\n \n {/* Floating petals */}\n {Array.from({ length: 10 }).map((_, i) => (\n 🌹\n ))}\n\n \n {/* ======== LETTER PAPER ======== */}\n \n {/* Top decoration */}\n

\n 💗\n

\n\n {/* Divider */}\n

\n ─── ♥ ───\n

\n\n {/* Typewriter text — appears word by word as paper slides out */}\n \n {typedText}\n {stage === \"open\" && typedText.length < FULL_TEXT.length && (\n \n )}\n \n\n {/* Signature — shows after typing is done */}\n {typedText.length >= FULL_TEXT.length && (\n

\n Forever yours ♥\n

\n )}\n \n\n {/* ======== ENVELOPE ======== */}\n \n {/* Envelope back */}\n \n\n {/* Bottom-left pocket triangle */}\n \n {/* Bottom-right pocket triangle */}\n \n\n {/* Envelope flap */}\n \n\n {/* Wax seal */}\n {!flapOpen && (\n \n ♥\n \n )}\n\n {/* To: label */}\n {!flapOpen && (\n \n To: My Soulmate\n \n )}\n \n \n\n {/* Close button — shows after typing finishes */}\n {showClosingBtn && (\n setStage(\"closing\")}\n style={{\n marginTop: \"16px\",\n padding: \"12px 32px\",\n background: \"linear-gradient(135deg, #ff6b9d, #c44d9e)\",\n color: \"white\",\n border: \"none\",\n borderRadius: \"30px\",\n fontSize: \"15px\",\n fontWeight: \"bold\",\n cursor: \"pointer\",\n boxShadow: \"0 4px 20px rgba(255,107,157,0.4)\",\n fontFamily: \"'Georgia', serif\",\n animation: \"pulseBtn 2s ease-in-out infinite\",\n }}\n >\n Close envelope ✉️\n \n )}\n\n {/* After closing — replay */}\n {stage === \"done\" && (\n

\n Happy Birthday, my love ♥\n

\n \n ♥ Replay from start ♥\n \n

\n )}\n\n \n \n );\n}\n",[198,101,88],"cbeaf26e-bc88-4ec8-9195-564cf30adb0c",["D",1783897826535],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\n\nexport function CakePage({ onDone }: { onDone: () => void }) {\n const [lit, setLit] = useState(true);\n const [showButton, setShowButton] = useState(false);\n const [candleProgress, setCandleProgress] = useState(0);\n\n useEffect(() => {\n const t1 = setTimeout(() => setCandleProgress(1), 300);\n const t2 = setTimeout(() => setShowButton(true), 2000);\n return () => { clearTimeout(t1); clearTimeout(t2); };\n }, []);\n\n return (\n \n {/* Sparkles */}\n {Array.from({ length: 20 }).map((_, i) => (\n ✨\n ))}\n\n

\n {/* Candle flame */}\n \n {lit && (\n

\n {/* Glow */}\n \n {/* Flame outer */}\n \n {/* Flame inner */}\n \n

\n )}\n

\n\n {/* Candle stick */}\n \n {/* Wick */}\n \n \n\n {/* Cake */}\n

\n {/* Bottom layer */}\n \n {/* Frosting drips */}\n

\n {[0, 1, 2, 3, 4, 5, 6, 7].map((i) => (\n \n ))}\n

\n {/* Decorations */}\n

♥ ♥ ♥

\n\n {/* Top layer */}\n \n

\n {[0, 1, 2, 3, 4, 5].map((i) => (\n \n ))}\n

\n \n\n {/* Cherries on top */}\n

\n {[\"#ff2040\", \"#ff4060\", \"#ff2040\"].map((color, i) => (\n \n

\n ))}\n

\n \n \n\n \n Make a wish, my love 🎂\n

\n\n {showButton && (\n \n Open your letter →\n \n )}\n\n \n \n );\n}\n",[198,101,94],"3a2dfc98-5a67-45c7-ad90-9756540089da",["D",1783897826535],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\nimport { HeartPage } from \"./HeartPage.tsx\";\nimport { CakePage } from \"./CakePage.tsx\";\nimport { EnvelopePage } from \"./EnvelopePage.tsx\";\n\nexport function App() {\n const [page, setPage] = useState(0);\n\n return (\n

\n {page === 0 && setPage(1)} />}\n {page === 1 && setPage(2)} />}\n {page === 2 && setPage(0)} />}\n

\n );\n}\n",[198,101,99],"pulls","branches","forks","envVars",{"_95":26,"_227":26},"connections",{"_95":26,"_226":26},"unfilledCount","emptyCount",{"_33":290,"_13":198,"_74":191,"_43":-5,"_35":36,"_192":40,"_193":24,"_37":291,"_39":26,"_77":102,"_195":-5,"_79":30,"_196":-5,"_244":292,"_17":293},{"_33":190,"_13":101,"_74":100,"_43":191,"_35":36,"_192":40,"_193":24,"_37":287,"_39":26,"_77":102,"_195":-5,"_79":30,"_196":-5,"_244":288,"_17":289},{"_33":215,"_13":99,"_74":98,"_43":100,"_35":36,"_192":40,"_193":24,"_37":284,"_39":26,"_77":78,"_195":217,"_79":30,"_196":-5,"_244":285,"_17":286},{"_33":211,"_13":94,"_74":93,"_43":100,"_35":36,"_192":40,"_193":24,"_37":281,"_39":26,"_77":78,"_195":213,"_79":30,"_196":-5,"_244":282,"_17":283},{"_33":207,"_13":88,"_74":87,"_43":100,"_35":36,"_192":40,"_193":24,"_37":278,"_39":26,"_77":78,"_195":209,"_79":30,"_196":-5,"_244":279,"_17":280},{"_33":203,"_13":76,"_74":75,"_43":100,"_35":36,"_192":40,"_193":24,"_37":275,"_39":26,"_77":78,"_195":205,"_79":30,"_196":-5,"_244":276,"_17":277},{"_33":268,"_13":269,"_74":270,"_43":191,"_35":36,"_192":40,"_193":24,"_37":271,"_39":26,"_77":21,"_195":272,"_79":30,"_196":-5,"_244":273,"_17":274},{"_33":261,"_13":262,"_74":263,"_43":191,"_35":36,"_192":40,"_193":24,"_37":264,"_39":26,"_77":21,"_195":265,"_79":30,"_196":-5,"_244":266,"_17":267},{"_33":254,"_13":255,"_74":256,"_43":191,"_35":36,"_192":40,"_193":24,"_37":257,"_39":26,"_77":78,"_195":258,"_79":30,"_196":-5,"_244":259,"_17":260},{"_33":247,"_13":248,"_74":249,"_43":-5,"_35":36,"_192":40,"_193":24,"_37":250,"_39":26,"_77":21,"_195":251,"_79":30,"_196":-5,"_244":252,"_17":253},{"_33":239,"_13":240,"_74":115,"_43":-5,"_35":36,"_192":40,"_193":24,"_37":241,"_39":26,"_77":242,"_195":243,"_79":30,"_196":-5,"_244":245,"_17":246},"bf50f507-23ba-40ea-9d21-c527a1950ce0","index.ts",["D",1783897826535],"http","import { parseVal, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\n\nconst app = new Hono();\n\n// Serve index.html at the root /\napp.get(\"/\", () => serveFile(\"/frontend/index.html\"));\n\n// Serve all /frontend files\napp.get(\"/frontend/**/*\", (c) => serveFile(c.req.path));\n\n// View source redirect\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\n// Add your API routes here\n// app.get(\"/api/data\", c => c.json({ hello: \"world\" }));\n\n// Unwrap and rethrow Hono errors as the original error\n// If you delete this, all errors will be \"Internal Server Error\"\napp.onError((err) => Promise.reject(err));\n\n// HTTP vals expect an exported \"fetch handler\"\n// This is how you \"run the server\" in Val Town with Hono\nexport default app.fetch;\n","children",[],[240],"f37ecd37-d0c2-4e21-ba3b-7e1791bc225a","README.md","019f5898-a54b-7756-9636-7fadad8d9232",["D",1783897826535],"# React + Hono Starter\n\nA minimal starter template for building client-side React apps with a Hono\nbackend on Val Town. Click **Remix** to get your own copy.\n\n## Picking a starter\n\n| Starter | When to pick it |\n| --- | --- |\n| [`basic-html-starter`](https://www.val.town/x/templates/basic-html-starter) | Static HTML pages. Sprinkle of vanilla JS. No server-side rendering. |\n| [`hono-jsx-starter`](https://www.val.town/x/templates/hono-jsx-starter) | Dynamic server-rendered HTML with JSX. API routes. No React, no SPA. |\n| **[`react-hono-starter`](https://www.val.town/x/templates/react-hono-starter)** *(you're here)* | Client-side React SPA with a Hono API backend. |\n\n**Want to build UI?** Start writing React components in\n[`frontend/components/`](/frontend/components/). Import them into `App.tsx` and\nyou're good to go. Styling is [Twind](https://twind.style/) — just use Tailwind\nutility classes, zero config.\n\n**Want to add an API?** Add routes in [`index.ts`](/index.ts) (there's a\ncommented-out example). Fetch them from your React components.\n\n## Architecture\n\n```mermaid\ngraph LR\n Browser -->|\"GET /\"| Hono[\"index.ts
(Hono server)\"]\n Hono -->|serves| HTML[\"index.html\"]\n HTML -->|loads| Entry[\"index.tsx\"]\n Entry -->|renders| App[\"App.tsx\"]\n App -->|renders| Counter[\"Counter.tsx\"]\n```\n\n## File structure\n\n```\nindex.ts ← Hono backend (serves frontend + API routes)\nfrontend/\n index.html ← HTML shell (loads Twind + React)\n index.tsx ← React entrypoint (mounts )\n favicon.svg ← App icon\n components/\n App.tsx ← Root component (layout + view source link)\n Counter.tsx ← Example component with state\n```\n\n## How it works\n\n1. **`index.ts`** is the HTTP entrypoint — a Hono server that serves the\n frontend and any API routes you add.\n2. **`frontend/index.html`** loads Twind and the React entrypoint.\n3. **`frontend/index.tsx`** mounts the React app.\n4. **`frontend/components/App.tsx`** is the root layout — add new components\n alongside it.\n5. **`frontend/components/Counter.tsx`** is an example stateful component —\n replace it with your own!\n\n## Next steps\n\n- Add API routes in `index.ts`\n- Add new components in `frontend/components/`\n- Add a SQLite database — see the\n [React Hono Example](https://www.val.town/x/stevekrouse/reactHonoExample) for\n a full-stack example with database, queries, and shared types\n",[],[248],"ac747708-029d-4845-9af2-a0f408691ac1","index.tsx","019f5898-a54b-7756-9636-77207b665d1c",["D",1783897826535],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { App } from \"./components/App.tsx\";\n\nconst root = document.getElementById(\"root\");\nif (!root) {\n throw new Error(\"No root element found\");\n}\n\ncreateRoot(root).render();",[],[198,255],"fee8fc81-19da-494a-9ac6-64e5728756fe","index.html","019f5898-a54b-7756-9636-71135aac43e9",["D",1783897826535],"\n\n \n \n \n ♥ Happy Birthday, My Love ♥\n \n \n \n \n

\n \n \n \n",[],[198,262],"5b07c3f6-330f-4dea-ae46-dab07bf39b5f","favicon.svg","019f5898-a54b-7756-9636-6fd3a46ed4d5",["D",1783897826535],"\n",[],[198,269],["D",1783897826535],[],[198,101,76],["D",1783897826535],[],[198,101,88],["D",1783897826535],[],[198,101,94],["D",1783897826535],[],[198,101,99],["D",1783897826535],[230,231,232,233],[198,101],"81252405-6a9e-48dd-b495-f1ac3b20255d",["D",1783897826535],[229,234,235,236],[198],["D",1783897826535],["D",1789489305251],{"_11":12,"_156":82},{"_11":12,"_152":-5,"_81":82,"_31":80,"_153":154,"_155":30},{"_39":40,"_13":16,"_33":36,"_142":104,"_143":71,"_144":72,"_145":108,"_146":147,"_148":149,"_150":14,"_151":12},"ctx",{"_52":-5,"_177":332,"_333":334,"_335":336,"_337":30,"_338":30,"_339":30,"_340":24,"_341":-5,"_342":-7,"_343":-7,"_344":26,"_345":30,"_346":30,"_347":-5,"_348":30,"_349":30,"_350":30,"_351":-5},"ENV",{"_303":304,"_305":306,"_307":16,"_308":309,"_310":311,"_312":313,"_314":315,"_316":317,"_318":319,"_320":321,"_322":323,"_324":325,"_326":327,"_328":329,"_330":331},"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"]

History · components