A browser-based augmented reality app that detects faces in real-time via your webcam and overlays the iconic Laughing Man logo from Ghost in the Shell: Stand Alone Complex.
- Real-time face detection using face-api.js (TinyFaceDetector model)
- Laughing Man SVG overlay — rotates continuously over each detected face
- Glitch effect — triggers a black-and-white barcode scanline pattern when the face moves quickly
- CCTV mode — toggleable retro surveillance filter with scanlines, vignette, REC indicator, and live timestamp
- Multi-face support — tracks multiple faces simultaneously with smooth interpolation
No build step required — it's pure HTML, CSS, and vanilla JS.
Tweak these constants at the top of script.js:
| Constant | Default | Description |
|---|---|---|
LERP |
0.25 |
Overlay smoothing factor (0 = frozen, 1 = instant) |
VELOCITY_THRESH |
4.5 |
Movement speed (px/frame) that triggers the glitch |
GLITCH_HOLD_MS |
350 |
How long the glitch lingers after movement stops |
FACE_HOLD_MS |
600 |
How long the overlay persists after face is lost |
DETECT_INTERVAL |
40 |
ms between detection calls (~25 fps) |
- Laughing Man SVG — johan/laughing-man.svg — a beautiful SVG by @johan
- Face detection — @vladmandic/face-api
- Ghost in the Shell: Stand Alone Complex