A romantic and interactive way to ask your special someone to be your Valentine! This web application features a memory card game in a heart shape, where matching all pairs reveals a special Valentine's proposal with cute animations and effects.
You can see the live demo of the game here.
- Interactive memory card game in a heart shape layout
- Beautiful animations and transitions using Framer Motion
- Customizable with your own photos
- Romantic proposal screen with:
- Fireworks animation on acceptance
- Playful "No" button that moves away when hovered
- Cute hamster GIFs and images
- Elegant design with Playfair Display font
- Fully responsive layout
- Built with Next.js and Tailwind CSS
- Node.js (v18.18.0 or higher)
- npm or yarn
- Git
- Clone the repository:
git clone https://github.com/visibait/valentines.git
cd valentines- Install dependencies:
npm install
# or
yarn install-
Replace the photos:
- Navigate to the
public/game-photosdirectory - Replace the existing images (1.avif through 36.avif) with your own photos
- Make sure to keep the same naming convention
- Use photos of you and your partner together!
- Navigate to the
-
Start the development server:
npm run dev
# or
yarn dev- Open http://localhost:3000 in your browser
- Add your photos to
public/game-photos/ - Name them from 1.avif to 36.avif
- For best results, use square images of the same size
- Convert your images to .avif format for better performance
- Edit proposal messages in
components/ValentinesProposal.tsx - Change game instructions in
components/TextFooter.tsx
- The project uses Tailwind CSS for styling
- Modify colors, fonts, and other styles in the respective component files
- Main color schemes can be adjusted in
tailwind.config.js
Contributions are welcome! Feel free to submit issues and enhancement requests.
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License.
- Inspired by love and creativity
- Built with Next.js 15 App Router
visibait - [https://visibait.com]
Made with ❤️ for my Valentine
Note: This project is meant for romantic purposes. Please use responsibly and spread love!