Julerulett

Overview#

Julerulett is a festive gift roulette application for Christmas! Spin the wheel and let the excitement decide who gets to open the next present. Built with Next.js 16 and Framer Motion, the project combines modern web technology with a warm Nordic Christmas aesthetic and delightful animations.

Key Features#

🎡 Animated Roulette Wheel#

Smooth spinning animation with realistic deceleration:

• Cubic-bezier easing for natural feel
• 10-second audio-controlled spinning
• Visual feedback during spin
• Smooth stop animation

🎨 Nordic Christmas Design#

Warm and harmonious color palette:

• Christmas Red (#A4243B) - Main accent color
• Christmas Green (#2F5233) - Secondary color
• Christmas Gold (#D4A574) - Highlights
• Christmas Cream (#F8F4EF) - Background
• Glass-morphism effects with backdrop blur
• Gradient background transitioning from green to red
• Custom scrollbar matching the theme
• Smooth hover effects for better UX

❄️ Festive Animations#

Enhanced Christmas atmosphere:

• Snowflake animations falling in the background
• Confetti effect when winner is announced
• Smooth transitions throughout the app
• No hard edges - everything flows seamlessly

🎯 Smart Game Logic#

Intelligent winner selection:

• Same person cannot win multiple times in the same round
• Tries to avoid the same person winning twice in a row
• Automatic round management
• Winners are remembered even after page refresh

💾 Persistent State#

LocalStorage integration:

• Participants saved automatically
• Active round state preserved
• Winner history maintained
• Seamless experience across sessions

📱 Responsive & Accessible#

Optimized for all users:

• Works perfectly on mobile and desktop
• ARIA labels for screen readers
• Keyboard navigation support
• Touch-friendly controls

Technical Implementation#

Frontend Architecture#

Modern React with Next.js 16:

• App Router for optimal performance
• React 19 with latest features
• TypeScript for type safety
• Framer Motion for smooth animations

Styling#

• Tailwind CSS 4 for utility-first styling
• Custom design tokens for Christmas theme
• Glass-morphism for modern card effects
• Gradient backgrounds for depth

Audio Integration#

Custom audio handling:

• 11-second spinning sound effect
• Synchronized with wheel animation
• Smooth audio playback

Game Logic#

Sophisticated winner selection algorithm:

• Round-based tracking
• Duplicate prevention
• Consecutive winner avoidance
• Fair distribution system

Project Structure#

/app
  /page.tsx          # Main page with game logic
  /layout.tsx        # Root layout
  /globals.css       # Global styling with Christmas colors
/components
  /RouletteWheel.tsx # Animated wheel component
  /WinnerModal.tsx   # Winner modal with confetti
/lib
  /types.ts          # TypeScript types
  /utils.ts          # Game logic utilities
  /storage.ts        # localStorage helpers
  /audio.ts          # Audio handling
/public
  /sounds
    /spinning-wheel.mp3  # Spinning sound (11 sec)

User Experience Flow#

Setup#

1. Add participants by entering names
2. Minimum 2 participants required to start
3. Participants saved automatically

Playing#

1. Click "SPIN!" button to start the wheel
2. Wheel spins for 10 seconds with sound
3. Realistic deceleration as wheel slows down
4. Winner modal appears with confetti

Round Management#

1. Click "Next!" to continue to next spin
2. Same person cannot win again in current round
3. When all participants have won, new round starts automatically
4. Winner history preserved across sessions

Challenges & Solutions#

Challenge: Realistic Wheel Physics#

Solution: Implemented custom easing functions with Framer Motion to create natural deceleration. Combined with audio timing to ensure synchronized experience.

Challenge: Fair Winner Selection#

Solution: Created smart algorithm that tracks winners per round and attempts to avoid consecutive wins while maintaining randomness.

Challenge: State Persistence#

Solution: Integrated localStorage to save participants, active round, and winner history. Users can refresh without losing progress.

Challenge: Festive Atmosphere#

Solution: Combined Nordic color palette with snowflake animations, confetti effects, and glass-morphism design for immersive Christmas experience.

Results#

• ✅ Smooth and realistic wheel animation
• ✅ Beautiful Nordic Christmas aesthetic
• ✅ Smart game logic with fair distribution
• ✅ Persistent state across sessions
• ✅ Fully responsive and accessible
• ✅ Delightful user experience with animations
• ✅ Production-ready application

Future Enhancements#

• 🎵 Multiple sound effect options
• 🎨 Customizable color themes
• 👥 Multiple game modes
• 📊 Statistics and history tracking
• 🌐 Multi-language support
• 🎁 Gift tracking integration
• 📱 PWA for offline use
• 🔊 Volume controls

Lessons Learned#

This project provided valuable experience with:

• Framer Motion for complex animations
• Audio synchronization with visual effects
• LocalStorage for state management
• Creating festive, themed user interfaces
• Game logic and fair randomization
• Accessibility in interactive applications
• Performance optimization for animations
• TypeScript for type-safe game logic

Julerulett demonstrates how modern web technologies can create engaging, festive applications that bring joy to holiday celebrations.

"The best way to spread Christmas cheer is spinning a wheel for all to hear!" 🎅