nerurora
A beautiful, interactive romantic demonstration featuring Matrix rain effects, particle systems, elegant typography, and audio integration. Created with love and modern web technologies.
š Romantic Animated Demo
A beautiful, interactive romantic demonstration featuring Matrix rain effects, particle systems, elegant typography, and audio integration. Created with love and modern web technologies.
#āØ Features
##š Visual Effects
- Matrix Rain Effect: Customizable falling code characters with color transitions
- Particle Systems: Hearts, stars, and fireworks with physics-based animations
- Text Reveal: Elegant typography with staggered animations
- Shape Formations: Dynamic particle arrangements forming romantic shapes
##šµ Audio Integration
- Background Music: Seamless audio playback with fade in/out effects
- Lyrics Display: Synchronized text display with color transitions
- Audio Controls: Volume control, play/pause, and seeking capabilities
##šØ Design & Animation
- Responsive Design: Optimized for desktop, tablet, and mobile devices
- Custom Animations: Framer Motion powered smooth transitions
- Color Themes: Romantic pink, gold, and purple gradients
- Typography: Dancing Script and Playfair Display fonts
#š ļø Technology Stack
##Frontend
- Next.js 15: React framework with App Router
- TypeScript: Type-safe development
- Tailwind CSS: Utility-first styling with custom animations
- Framer Motion: Professional animation library
##Libraries
- Howler.js: Web audio management
- Lucide React: Beautiful icons
- clsx: Conditional className utility
#š Getting Started
##Prerequisites
- Node.js 18.0.0 or higher
- npm, yarn, or pnpm
##Installation
-
Clone the repository
git clone <repository-url> cd kaysa-romantic-demo -
Install dependencies
npm install # or yarn install # or pnpm install -
Add background music (optional)
- Place an MP3 file in
public/audio/ - Rename it to
background-music.mp3 - Ensure you have proper licensing for any music files
- Place an MP3 file in
-
Start development server
npm run dev # or yarn dev # or pnpm dev
#š Project Structure
kaysa-romantic-demo/
āāā public/
ā āāā audio/ # Audio files
ā āāā ... # Static assets
āāā src/
ā āāā app/ # Next.js App Router
ā ā āāā globals.css # Global styles
ā ā āāā layout.tsx # Root layout
ā ā āāā page.tsx # Main page
ā āāā components/ # React components
ā ā āāā ui/ # Reusable UI components
ā ā āāā AudioController.tsx
ā ā āāā LyricsDisplay.tsx
ā ā āāā MatrixEffect.tsx
ā ā āāā ShapeFormation.tsx
ā ā āāā TextReveal.tsx
ā āāā hooks/ # Custom React hooks
ā ā āāā useAnimationSequence.ts
ā ā āāā useAudio.ts
ā ā āāā useParticles.ts
ā āāā types/ # TypeScript type definitions
ā ā āāā animation.ts
ā ā āāā audio.ts
ā ā āāā particles.ts
ā āāā utils/ # Utility functions and classes
ā ā āāā animationHelpers.ts
ā ā āāā audioUtils.ts
ā ā āāā particleSystem.ts
ā āāā data/ # Static data
ā ā āāā lyrics.ts
ā ā āāā quotes.ts
ā āāā lib/ # Constants and configuration
ā āāā constants.ts
āāā tailwind.config.ts # Tailwind CSS configuration
āāā tsconfig.json # TypeScript configuration
āāā package.json # Project dependencies
#šØ Customization
##Colors
Edit
tailwind.config.ts to customize the color palette:colors: {
romantic: { /* pink variations */ },
gold: { /* gold variations */ },
magic: { /* purple variations */ },
matrix: '#00ff41'
}
##Animation Durations
Modify timing in
src/lib/constants.ts:export const ANIMATION_DURATIONS = {
MATRIX_EFFECT: 5000,
SHAPE_FORMATION: 3000,
TEXT_REVEAL: 4000,
TRANSITION: 1000
};
##Text Content
Update quotes and lyrics in:
src/data/quotes.ts- Romantic quotes and dedication messagesrc/data/lyrics.ts- Synchronized lyrics with timestamps
##Particle Effects
Configure particle systems in
src/lib/constants.ts:export const PARTICLE_CONFIGS = {
HEART: { count: 30, speed: { min: 0.5, max: 2 }, /* ... */ },
STAR: { count: 25, /* ... */ },
FIREWORKS: { count: 80, /* ... */ }
};
#šµ Audio Setup
- Supported Formats: MP3 (recommended for compatibility)
- File Location:
public/audio/background-music.mp3 - Licensing: Ensure proper licensing for any music files
- Fallback: The app gracefully handles missing audio files
#š± Responsive Design
The application is optimized for:
- Desktop (1200px+): Full experience with high particle counts
- Tablet (768px-1199px): Reduced particles, touch-friendly controls
- Mobile (<768px): Essential animations, vertical layout
#š§ Development
##Available Scripts
npm run dev- Start development servernpm run build- Build for productionnpm run start- Start production servernpm run lint- Run ESLint
##Code Quality
- TypeScript: Strict type checking enabled
- ESLint: Code linting with Next.js configuration
- Prettier: Code formatting (install extension recommended)
##Architecture Principles
- Clean Code: Modular, readable, and maintainable code
- DRY (Don't Repeat Yourself): Reusable components and utilities
- KISS (Keep It Simple, Stupid): Simple, focused solutions
- OOP: Object-oriented particle systems and audio management
#š Deployment
##Vercel (Recommended)
- Connect repository to Vercel
- Configure build settings (automatic with Next.js)
- Deploy with zero configuration
##Other Platforms
- Netlify: Drag and drop build folder
- GitHub Pages: Static export with
next export - Custom Server: Use
npm run startafternpm run build
#š Troubleshooting
##Common Issues
Audio not playing:
- Check if
background-music.mp3exists inpublic/audio/ - Verify file format is MP3
- Check browser's autoplay policy
Performance issues:
- Reduce particle counts in
src/lib/constants.ts - Check hardware acceleration in browser
- Monitor CPU usage with DevTools
Build errors:
- Ensure all dependencies are installed
- Check TypeScript errors with
npm run build - Verify ESLint configuration
#š License
This project is for personal and educational use. Ensure proper licensing for any music or media files used.
#š Dedication
Created with love for Kaysa āØ
Note: This is a demonstration project showcasing modern web development techniques for creating romantic, interactive experiences. Feel free to customize and adapt it for your own romantic gestures!