Project Overview
Lumière Booth reimagines the classic photobooth experience for the modern web. Built with Next.js and React, it offers a seamless and highly interactive process from capturing photos to the final print layout. The application features a dynamic "Darkroom" phase where users can customize their captured photos. Key innovations include "Motion Prints," which capture short video clips alongside still photos, an interactive drag and drop system for arranging photos on the final print, dynamic text customization that renders directly onto the final output, and an aesthetic halftone pattern background.
Key Features
Motion Prints
Captures short video clips (1.5s before and 0.5s after shutter) that can be downloaded or played back interactively.
Dynamic Darkroom
A highly interactive photo management phase with drag and drop reordering and dynamic text customization.
Halftone Aesthetic
Implements a dynamic halftone pattern background for a unique and stylish visual presentation.
Flexible Retake Workflow
Allows users to undo specific shots or tap to retake individual frames without restarting the entire session.
Impact & Outcomes
- ✓Delivered a highly engaging and interactive user experience
- ✓Successfully integrated complex media capture workflows directly in the browser
- ✓Created a robust and flexible state management architecture for photo sessions
Technical Challenges
Motion Capture Implementation
Synchronizing video capture with still photography using the MediaRecorder API while maintaining high performance.
Drag and Drop State
Managing complex global state for photo arrangements and ensuring seamless updates during drag and drop operations.
Halftone Rendering
Developing a performant algorithm for rendering realtime halftone dots over the camera feed.