Polaroid Booth - Stardance

@Amu approved your project · about 2 months ago

This project was vetted by Shipwrights and is now up for voting. You can ship again after making more updates.

Feedback

Hey there,
Awesome project! I'd love to see what you make in the future!

Shipwright walkthrough

@meowmeow returned your project · about 2 months ago

This needs changes before we can consider it shipped. Review the Shipwright feedback, make updates, then ship again.

Feedback

Hey Aamina,
You seem to have used a lot of AI in your readme. Please rewrite it yourself, as we would like to see how you worked on the project!
For any other questions, DM @alexander or create a ticket in Slack—#ask-the-shipwrights.

Shipwright walkthrough

Ship #1

@Aamina on Polaroid Booth · about 2 months ago

I built Polaroid Booth, a browser-based photo booth app using HTML, CSS, and JavaScript that captures pictures from your webcam and turns them into realistic polaroid-style snapshots, complete with a white border and a randomly rotated tilt.
The trickiest part was handling the camera access and capture logic,getting the video feed to reliably render onto a canvas and convert into a clean image without lag or permission issues took some trial and error, along with fine-tuning the CSS rotation so the photos looked naturally scattered instead of just messy.

2 devlogs
2h
15.93x multiplier
38 Stardust

Try project → See source code →

Open comments for this post

@Aamina on Polaroid Booth · about 2 months ago

1h 22m 26s logged

DEVLOG #2

JavaScript (Vanilla):
Camera access via navigator.mediaDevices.getUserMedia(), drawing video frames to canvas, converting canvas to image, DOM manipulation, randomized rotation logic, download functionality
the cam is working yayayayayy!!

Open comments for this post

@Aamina on Polaroid Booth · about 2 months ago

59m 50s logged

DEVLOG #1:

Worked on HTML and CSS:

Built the whole Polaroid Booth interface from scratch in a single HTML file.
The HTML sets up a retro camera viewfinder (element), a big red snap button, and a gallery wall where Polaroids pile up. In CSS I added a blue background, a camera module (rounded corners, shadows, a pressable button with a 3D click effect), and each Polaroid card gets its own random rotation via a CSS custom property (–rot) so the wall looks like a real messy photo table.