First she has to say yes to the date (the Yes button grows every time she refuses, and the No button eventually runs away 😆). Then it's a cute little planner of 8 steps:
🍽️ What should we eat? — Pizza, sushi, tacos, ramen…
🎠 What should we do? — Movie night, park stroll, arcade games…
📅 When do we go? — This weekend, Friday night, ASAP…
👗 What's the vibe? — Cozy casual, dress to impress…
🎧 Music? — Your playlist, karaoke night, lo-fi chill…
🍦 Dessert? — Ice cream, cheesecake, boba, donuts…
💬 What do we talk about? — Awkward stories, our past crushes…
🌆 How should the night end? — Midnight walk, drive around town…
Every pick is a tappable emoji card, with a progress bar and a ← Back button so she can change her mind. At the end she gets a recap of her perfect date with raining confetti.
Plus:
❤️ Floating hearts + wobbling headline throughout, and smooth slide transitions between steps.
🔗 A "Copy link to send to my crush" button snaps the share URL to the clipboard.
👀 view source is in the corner for anyone to remix.
Make it yours
Everything is easy to tweak in main.tsx:
The questions — edit the QUESTIONS array (tag, prompt, subtitle, and each options emoji/name). Add or remove entire steps.
The question on the first screen — edit the <h1>.
The phrases on the No button — edit the NO_PHRASES array.
The colors — the buttons, background gradient, and headline are set with inline styles.
The GIFs — swap firstImg and secondImg.
When No starts running away — change the noClicks >= 5 threshold.