A Harry Potter-themed MERN application for creating self-destructing secret messages with beautiful animations and magical UI.
- Enchanted UI: Harry Potter-inspired design with golden colors, magical fonts, and mystical styling
- Burning Animation: Secrets literally burn away with flame animations when viewed
- Floating Particles: Magical golden particles float across the screen
- Smooth Animations: Framer Motion powers all the magical transitions
- Responsive Design: Works beautifully on all devices
- Self-Destructing Messages: Links can only be viewed once before they vanish forever
- Create Secret: Write your message in the magical textarea with parchment styling
- Get Enchanted Link: Receive a shareable link with copy functionality
- View Once: The secret is revealed with dramatic animations
- Burning Ritual: After viewing, watch the secret burn away with realistic flame effects
- Gone Forever: The message is permanently destroyed
- Frontend: React 19, Framer Motion, Lucide React
- Backend: Node.js, Express, MongoDB
- Styling: Custom CSS with Harry Potter theme
- Animations: Framer Motion for smooth transitions
cd server
npm install
npm startcd client
npm install
npm run dev- Colors: Deep purples, royal blues, and magical gold
- Typography: Cinzel for headings, Crimson Text for body
- Animations: Burning flames, floating particles, shimmer effects
- Icons: Magical symbols like scrolls, flames, and sparkles
The burning animation consists of:
- Flame Stage: CSS-animated flames with flickering effects
- Ashes Stage: Smoke particles rising upward
- Complete: Message fully destroyed with fade-out
The animation is triggered automatically 3 seconds after viewing a secret and lasts for 4 seconds total.
- Mobile-optimized magical cards
- Touch-friendly buttons with haptic feedback
- Adaptive particle systems
- Scalable typography and spacing
Enjoy creating magical secrets that vanish like morning mist! ✨