Layover

• 

  Loading state

• 

  4 images grid polaroid (+ editing page, where you can customize it)

• 

  1 image polaroid (+ editing page, where you can customize it)

• 

  3 images polaroid (+ editing page, where you can customize it)

• 

  Finish Polaroid ( ready to download)

• 

  Home Screen where user will select layout

Inspiration

Layover was inspired by the photo booth culture I discovered in South Korea, where friends can take fun pictures together and turn those moments into something they can keep. I loved the idea of making memories feel tangible, but photo booths like these aren't easily accessible where I live in Pakistan. So I wanted to bring a small part of that experience to the web.

What it does

Layover lets you turn your own photos into customizable digital polaroids. You can choose different layouts, upload your photos, customise frame colours and designs, add stickers, and create your own little composition. Once you're happy with it, you can save the polaroid and download it as a PNG.

How I built it

Layover was built using HTML, CSS, and JavaScript. I focused heavily on the visual experience, using CSS animations, keyframes, clip-path polygons, box shadows, and interactive JavaScript to create a playful polaroid-making experience.

Challenges I ran into

One of the biggest challenges was making the customisation experience work smoothly while ensuring that the final downloadable polaroid accurately reflected the user's choices. I also spent a lot of time experimenting with CSS animations, shapes, shadows, and interactions to make the interface feel more like a physical keepsake.

Accomplishments that I'm proud of

I'm proud that I turned an idea inspired by something I experienced and admired into a working web experience. I'm especially happy with the visual details, animations, customizable polaroids, and the ability to turn the final creation into a downloadable PNG.

What I learned

This project pushed me to explore CSS beyond basic styling. I became much more comfortable creating animations with CSS keyframes, using clip-path polygons for custom shapes, and using box shadows to create depth and a more realistic polaroid feel. I also learned how small visual details can make a big difference in how an interface feels.

What's next for Layover

I'd love to expand Layover with more Polaroid layouts, stickers, filters, text and caption options, and more customisation. In the future, I could also explore sharing, printing, and bringing the concept to a mobile app for an even more photo-booth-like experience.

Built With

• canvas
• css3
• html5
• javascript