your face. pixelated.
A retro-inspired, no-framework pixel art camera app built with pure HTML, CSS & JS.
PIXEL.CAM turns your webcam into a real-time pixel art generator. Open your camera, pick a retro color palette, throw on a frame, toggle some glitch — and capture yourself as an 8-bit legend. No sign up. No filters. Just pixels.
| Feature | Description |
|---|---|
| 🎥 Live Camera Feed | Real-time webcam pixelation using the Canvas API |
| 🎨 Palette Filters | Gameboy · Synthwave · C64 · Neon · Ash · Original |
| 🖼️ Retro Frames | Overlay arcade-style frames on your live feed |
| ⚡ Glitch Effect | Toggle a live glitch distortion for extra chaos |
| 📸 Instant Capture | Freeze your frame and download it as a PNG |
| ✏️ Pixel Drawing Grid | Draw your own pixel art when the camera is off |
| ↩️ Undo / Redo | Full history stack for drawing mode |
| 🔲 Adjustable Pixel Size | Slider from fine (5px) to chunky (30px) |
Built with absolutely zero frameworks or dependencies. Just vibes and vanilla JS.
- HTML5 Canvas API — live pixelation, drawing grid, frame capture
- Vanilla JavaScript — camera stream, palette remapping, glitch effect, undo/redo stack
- Pure CSS — animations, tab UI, retro styling
- Google Fonts — Press Start 2P + Silkscreen for that pixel font energy
# 1. Clone the repo
git clone https://github.com/lakshitasethia/Pixel-Art-Generator.git
# 2. Navigate into it
cd Pixel-Art-Generator
# 3. Open with Live Server (VS Code extension) or any local server
# Landing page → index.html
# App → next.html
⚠️ Camera access requires a local server or HTTPS. Opening next.html directly as a file won't work for webcam features.
index.html → ENTER THE WORLD → next.html
- Open Camera — click the Camera button to start your live pixel feed
- Adjust — use the pixel size slider and pick a palette from the Adjust tab
- Add a Frame — jump to the Frames tab and pick your overlay
- Glitch it — toggle the Glitch button for distortion chaos
- Capture — hit Capture, download your pixel portrait instantly
Pixel-Art-Generator/
├── index.html # Landing page (pixel world hero, features, CTA)
├── next.html # Main pixel art generator app
├── style.css # All styles
├── script.js # Core JS — camera, canvas, palettes, capture
└── README.md
| Palette | Vibe |
|---|---|
| Original | Real webcam colors |
| Gameboy | 4 shades of green, pure nostalgia |
| Synthwave | Dark navy + hot pink + cyan + yellow |
| C64 | Commodore 64's iconic 16-color palette |
| Neon | High saturation electric colors |
| Ash | Desaturated cool-toned grayscale |
Lakshita Sethia — 2nd year CS student @ DJ Sanghvi, Mumbai
MIT — free to use, fork, and pixelate.
made with 💚 and way too many pixels