An interactive birthday card vibecoded with Next.js, featuring smooth animations and a memory gallery experience.
- Beautiful Bauhaus-inspired design with warm colors
- Smooth transitions using Framer Motion
- Interactive memory wall with flip cards
- Confetti animation on final screen
- Fully responsive mobile-first design
npm installnpm run devOpen http://localhost:3000 in your browser.
npm run build
npm startbirthday_interactive/
├── app/
│ ├── layout.tsx # Root layout
│ ├── page.tsx # Main page
│ └── globals.css # Global styles
├── components/
│ ├── CardFlow.tsx # State machine for card flow
│ ├── Landing.tsx # Step 0: Landing screen
│ ├── EnvelopeReveal.tsx # Step 1: Envelope animation
│ ├── Letter.tsx # Step 2: Letter view
│ ├── MemoryWallIntro.tsx # Step 3: Memory wall intro
│ ├── MemoryWall.tsx # Step 4: Interactive memory wall
│ ├── PhotoFlipCard.tsx # Flip card component
│ ├── Final.tsx # Step 5: Final screen
│ └── ui/
│ └── button.tsx # Button component
├── data/
│ ├── memories.ts # Memory data
│ └── letter.ts # Letter content
├── lib/
│ └── utils.ts # Utility functions
└── public/
└── memories/ # Memory images (add your photos here)
- Add your photos to
public/memories/ - Name them:
memory1.jpg,memory2.jpg, etc. - Update
data/memories.tswith your custom messages
Edit data/letter.ts to customize the letter text.
Edit the backText field in data/memories.ts for each memory card.
- Framework: Next.js 14 (App Router)
- Styling: Tailwind CSS
- Animations: Framer Motion
- UI Components: Custom shadcn-style components
- TypeScript: Full type safety
Deploy to Vercel:
npm install -g vercel
vercelOr connect your GitHub repository to Vercel for automatic deployments.
MIT