Say Hello

A webcam photo booth with creative dot matrix and pixel art filters. Transform your camera feed into living art with 6 unique filter effects and capture moments in style.

Features

• 6 Unique Filters - Classic dots, halftone, ASCII matrix, neon grid, stipple, and pixel mosaic
• Real-time Processing - Smooth 30fps filter rendering on your webcam feed
• Creative Controls - Adjust filter parameters, color modes, mirror, and invert effects
• Capture Gallery - Save your favorite filtered moments locally in your browser
• Keyboard Shortcuts - Fast workflow with comprehensive keyboard controls
• localStorage Persistence - Your captures are saved locally (max 20 captures)
• Responsive Design - Works on desktop and mobile devices

Tech Stack

• Next.js 16 — React framework
• React 19 — UI library
• Tailwind CSS v4 — Styling
• TypeScript — Type safety
• Canvas 2D API — Real-time video filtering

Getting Started

# Install dependencies
npm install
# or
bun install

# Run development server
npm run dev
# or
bun dev

Open http://localhost:3000 to view the experiment.

Keyboard Shortcuts

Key	Action
SPACE	Capture current frame
M	Toggle mirror mode
I	Toggle invert
1	Classic Dots filter
2	Halftone filter
3	ASCII Matrix filter
4	Neon Grid filter
5	Stipple filter
6	Pixel Mosaic filter
C	Toggle camera on/off
D	Toggle debug overlay

Filter Effects

Classic Dots

Brightness-based circle sizes create a vintage LED display look.

Halftone

CMYK-style offset dot patterns simulating traditional print screening.

ASCII Matrix

Character-based rendering using density-mapped ASCII characters.

Neon Grid

Glowing colored dots with bloom effect for a retro-futuristic vibe.

Stipple

Random dot density based on brightness for an organic hand-drawn look.

Pixel Mosaic

Chunky color blocks with averaged colors for a pixelated effect.

How It Works

1. Camera Access - Uses WebRTC getUserMedia() to access your webcam
2. Video Processing - Draws video frames to an offscreen canvas
3. Filter Application - Analyzes pixel data and renders dots/shapes based on brightness
4. Capture - Saves filtered frames as compressed JPEG images
5. Storage - Stores captures in localStorage (max 20, FIFO queue)

Browser Support

Requires a modern browser with support for:

• WebRTC (getUserMedia)
• Canvas 2D API
• localStorage
• ES2017+

License

MIT