DEV Community

Cover image for Snapbooth
Chinmayee P
Chinmayee P

Posted on

Snapbooth

#devchallenge #418challenge #showdev

April Fools Challenge Submission ☕️🤡

This is a submission for the DEV April Fools Challenge

What I Built

I built SnapBooth, a vintage-style photobooth web app that looks completely normal at first.

It includes all the expected features:

  • Live webcam preview
  • Countdown timer
  • Photo strip generation
  • Downloadable images
  • A clean retro aesthetic

But hidden inside are three “enhancement” buttons that are actually pranks:

  • Depth Effect - triggers a swarm of animated spiders crawling down the screen with a jumpscare
  • Flip Layout - rotates the entire page upside down while flipping only the user in the camera feed (gravity illusion)
  • HDR Enhance - launches a horror sequence with static, ghosts, and creepy messages

The key twist is that the prank doesn’t just happen in the UI - the webcam feed itself is manipulated in real time, so users see themselves inside the chaos.

Demo

Main page
Gravity failure
Ghost effect
Spider attack

To run the project locally:

python photobooth_backend.py
Enter fullscreen mode Exit fullscreen mode

This starts the backend server and automatically opens the app in your browser.

Best way to demo it:

  1. Let someone take normal photos first
  2. Suggest trying “Depth Effect”
  3. Then “HDR Enhance”
  4. Finish with “Flip Layout”

Code

GitHub Repository:
https://github.com/Chinmayeep58/snapbooth/tree/main

Key files:

snapbooth/
├── photobooth_backend.py   # Backend server + OpenCV processing
├── photobooth.html         # Frontend UI
├── README.md
Enter fullscreen mode Exit fullscreen mode

How I Built It

The app is built using a frontend + backend architecture:

Frontend

  • Pure HTML, CSS, and JavaScript
  • No frameworks used
  • Vintage photobooth UI design
  • Dynamic SVG animations for spiders and ghosts
  • CSS transforms for page flipping

Each prank button sends a request to the backend:

fetch('http://localhost:5000/prank?action=X')
Enter fullscreen mode Exit fullscreen mode

Backend

  • Python HTTPServer to serve the app and handle requests
  • OpenCV for real-time webcam processing
  • MediaPipe for person segmentation

Core Idea

Instead of applying effects to the entire frame, the app isolates the person:

  • Detect foreground (user)
  • Apply transformations only to them
  • Keep the background unchanged

This creates effects like:

  • “Hanging from the ceiling” illusion
  • Ghost trails using frame blending
  • Horror overlays with noise and color shifts

Technologies Used

  • OpenCV
  • MediaPipe
  • NumPy
  • Python standard libraries
  • Vanilla JavaScript & CSS

Prize Category

Community Favorite

This project is designed for maximum shareability and real-time reactions.
The combination of a believable UI and unexpected interactive pranks makes it perfect for live demos and social sharing - exactly what April Fools is about.

Happy pranking!!

Top comments (0)