This is a retro-style camera web application that generates polaroid-style photos using AI technology. The app features an intuitive camera interface with viewfinder, shutter button, and AI image generation capabilities.
Live Demo: https://voidmuse-dev.github.io/retro-camera/
The idea for this project originated from this Twitter post: https://x.com/ann_nnng/status/1991079810882265254
The main prompt used to generate this project was summarized from: https://cloud.typingmind.com/share/f4d4bf7e-3898-4b64-b1ec-0d480258e722
This project was created using Gemini 3 Pro Preview (as of 25-11-24, the latest available version). The model's performance in generating frontend UI code was exceptional, showcasing its capabilities in creating visually appealing and functional web applications.
The shooting schedule and camera position features could not be accurately generated by the Gemini 3 Pro model. These positions were manually adjusted to achieve precise functionality.
- Polaroid Style: Photos are produced with classic polaroid aesthetics and animations
- Drag & Drop: Polaroid photos can be freely moved around the screen
- Gallery View: Photos are displayed in a gallery format
- Batch Download: Photos can be downloaded as a composite image
- Demo Mode: Initializes with sample photos for immediate preview
- Audio Feedback: Realistic shutter sound plays when taking photos
Prerequisites: Node.js
- Install dependencies:
npm install - Run the app:
npm run dev
This project can be expanded with many interesting features:
- Multi-burst shooting mode
- Stickers and photo editing tools
- Filters and effects
- Share to social media
- Camera settings (exposure, focus, etc.)
This project demonstrates the incredible potential of AI in frontend development. With just a well-crafted prompt, Gemini 3 Pro was able to generate most of the app's functionality. Human intervention was minimal, limited to fine-tuning specific positions. This showcases how AI can accelerate development processes while maintaining high-quality results.
# Retro Camera Web Application Development Requirement Prompt
Please use HTML, CSS, JavaScript combined with an interactive canvas plugin to develop a Polaroid camera web application named "Retro Camera" with the following specific requirements:
## I. Core Basic Configuration
1. Camera Resources: Use the specified camera image (https://www.bubbbly.com/assets/retro-camera.webp). Adjust the lens position (match the black circle on the image, need to be moved up and slightly to the right). The real-time camera feed should be displayed at the lens position. Synchronously adjust the camera button position to fit the image. Move the entire camera to the left (reserve blank space on the right for storing dragged images) and move it down as a whole (reserve space at the top for displaying rising images).
2. Responsive Requirement: Adapt to mobile devices, and all element layouts should display normally on mobile phones.
## II. Initial Demo Effect
1. Before the user takes a photo, display 3 specified demo images (https://bubbbly.com/assets/retro-camera/cat-cute-3.webp, https://bubbbly.com/assets/retro-camera/cat-cute-2.webp, https://bubbbly.com/assets/retro-camera/cat-cute-1.webp);
2. The demo images should be slightly enlarged and arranged closely. All demo images will be automatically cleared when the user starts taking photos.
## III. Photo Taking and Image Generation Functions
1. Photo Trigger: Click the camera button to take a photo; only one photo can be taken at a time. The camera API should be called for photo taking.
2. Audio Feedback: Automatically play the specified sound effect (https://www.bubbbly.com/assets/retro-camera/polaroid-camera.mp3) when taking a photo;
3. Image Effect: The generated image should have a Polaroid style + vintage filter, with reduced image height. It pops up from the top of the camera (rising animation) and only displays half its height. Only one rising image is displayed at a time.
## IV. Image Editing and Drag-and-Drop Function
1. Caption Setting: The image displays two lines of text by default — the first line "May I meet you" (slightly larger font size), and the second line the current date (format: YYYY/MM/DD, same font family, smaller font size). Users can edit this caption directly on the image;
2. Drag-and-Drop Function: Polaroid images support drag-and-drop (refer to https://css-tricks.com/books/greatest-css-tricks/draggable-elements/) and can be dragged to the blank area on the right of the camera for storage.
## V. Function Buttons
1. Reset Button: Click to clear all user-taken photos;
2. Download Button: Click to download all Polaroid images at once (merged into a single-frame file).
## VI. Guidance Tooltips
When the user takes the first photo, display step-by-step tooltips: ① Click the button to take a photo ② Drag it there to save.