Log inSign up

aishaidk12

happy-one-month

Public
Pastel kawaii bunny and puppy love val
cutelovereact
Edit with AI
1 Branch1 Remix
Val Town is a collaborative website to build and scale JavaScript apps.
Deploy APIs, crons, & store data – all from the browser, and deployed in milliseconds.
Sign up now
index.ts
README.md

Happy One Month A&A 💕

A pastel kawaii love page: a cute bunny 🐰 and puppy 🐶 couple, a "Happy One Month" message, and a secret tickle-to-letter moment.

How it works

  1. Intro screen — the bunny & puppy bob and wiggle on a soft pink/lavender gradient, with floating hearts and the message "Happy One Month A & A — to the best gf ever."
  2. Tickle the belly — click either pet's belly and they giggle, shake, and shower hearts, then it glides into…
  3. The letter — a fluffy paper with Dear A, and a big space to write. Typing auto-saves to the device (localStorage), so the letter is still there next time. "Seal it with a kiss 💋" tucks it away.

Stack

  • React 18 + Framer Motion (client-side, no build step)
  • Hono server serving the HTML shell
  • Twind (Tailwind utility classes) + Google Fonts (Baloo 2, Caveat)
  • All characters are hand-drawn inline SVG — no external images

Files

index.ts                    ← Hono server (serves shell + assets)
frontend/
  root.tsx                  ← HTML shell (fonts, title, favicon)
  favicon.svg               ← heart icon
  index.tsx                 ← React entrypoint
  components/
    App.tsx                 ← screen flow + background
    Intro.tsx               ← the couple + "happy one month" + tickle
    Pet.tsx                 ← the bunny & puppy SVG characters
    Letter.tsx              ← the letter-writing page

Want to tweak?

  • Names / message — edit Intro.tsx.
  • Colors — the gradient lives in App.tsx; character colors in Pet.tsx.
  • Letter storage — currently stored per-device in localStorage. To save it server-side instead, add a small API route in index.ts + a sqlite import.