Launch FanMirror
Learn More

WHY FANMIRROR

Live Face Tracking

478-point face mesh powered by MediaPipe detects expressions, head rotation, and hand gestures in real time — all running locally in your browser with zero latency.

3D

3D Avatars

Load any .glb model with Mixamo animations. Swap between mascots, characters, and custom models instantly.

NEW

Zero Downloads

Runs entirely in the browser. No installs, no plugins. Just open the link and go.

Event Ready

Deploy as a kiosk at conventions, sports events, or brand activations. Works offline with local config.

FAST

Instant Snapshots

Attendees capture their avatar look and download it instantly or receive it via email.

Hidden Admin Panel

Event runners swap avatars, backgrounds, and branding on the fly from a secret in-app menu.

HOW IT WORKS

01

Open the Mirror

Launch FanMirror in any browser — no downloads, no plugins, no account required.

02

Pick Your Avatar

Choose from VRM characters. Your face drives their expressions, head, and hands in real time.

03

Strike a Pose

Wave, dance, emote — the avatar mirrors your body. Trigger animations with a tap or keyboard.

04

Snap & Share

Capture a branded snapshot and download it instantly or have it emailed to you on the spot.

TECHNOLOGY STACK

A detailed breakdown of every technology, library, framework, and tool used to build the FanMirror real-time avatar mirror experience.

Infrastructure & Server

Ubuntu
Ubuntu Server 22.04.5 LTS (Jammy Jellyfish)

Host operating system — Linux 5.15 kernel

Apache
Apache HTTP Server 2.4.52

Reverse proxy, static file serving, SSL termination, .htaccess security rules

Let's Encrypt
Let's Encrypt / Certbot SSL/TLS

Free automated HTTPS certificates with auto-renewal via Certbot

Backend / API

Node.js
Node.js v23.11.1

JavaScript runtime for the CRM API server, running as a systemd service

Express
Express.js ^4.21.0

REST API framework — event management, user CRM, asset hosting, public endpoints

SQLite
SQLite 3 (better-sqlite3) 3.37.2 / ^11.0.0

Embedded database for events, users, snapshots, and asset metadata. Zero config, file-based

npm
npm 10.9.2

Package manager for API dependencies

API Middleware & Utilities

helmet ^8.0.0 — HTTP security headers
cors ^2.8.5 — Cross-origin resource sharing
express-rate-limit ^7.4.0 — Public API rate limiting
multer ^1.4.5-lts.1 — Multipart file upload handling
nodemailer ^6.9.0 — Email sending for snapshot delivery
dotenv ^16.4.0 — Environment variable management
uuid ^10.0.0 — Unique ID generation for records

Frontend & 3D Engine

HTML5
HTML5 ES Modules, Import Maps

Semantic markup with native ES module loading — no build step, no bundler

CSS3
CSS3 Custom Properties, Glassmorphism

Responsive design, backdrop-filter blur effects, CSS animations, custom scrollbars

JavaScript
JavaScript (ES2022+) Vanilla, no framework

Pure vanilla JS with ES Modules — no React, Vue, or Angular. All DOM, state, and rendering handled directly

Three.js
Three.js v0.170.0 (via CDN)

WebGL 3D rendering engine — scene graph, PBR materials, skeletal animation, orbit controls, texture loading

WebGL
WebGL 2.0 GPU-accelerated rendering

Hardware-accelerated 3D graphics via the browser — sRGB color space, anti-aliased rendering

Avatar & Motion Capture

MediaPipe
MediaPipe Tasks Vision v0.10.18 (via CDN)

Google's on-device ML pipeline — runs face, hand, and pose detection entirely in the browser via WebAssembly + GPU delegate

VRM
@pixiv/three-vrm v3.4.5 (via CDN)

VRM avatar format loader for Three.js — humanoid bone mapping, expression management, spring bone physics

GLB
glTF / GLB Format glTF 2.0

Standard 3D model format with ARKit-compatible blend shapes (52 morph targets for facial expressions)

ML Models (loaded at runtime)

FaceLandmarker float16 — 478 face landmarks + 52 ARKit blend shapes + face transformation matrix
HandLandmarker float16 — 21 landmarks per hand, 2 hands, handedness classification
PoseLandmarker Lite float16 — 33 full-body landmarks (shoulders, elbows, wrists, hips)

IK & Animation Pipeline

Custom Arm IK — Shoulder→elbow→wrist chain from pose landmarks, with smoothed quaternion slerp
Distance-based Finger Curl — MCP-to-TIP ratio mapped to per-joint rotation with thumb opposition
Landmark Smoothing — Exponential moving average with velocity-damped jump detection
Procedural Idle Breathing — Sine-wave spine rise/fall + subtle chest sway when no tracking
Dead Zone Filtering — Sub-threshold quaternion changes ignored to prevent micro-jitter

Browser APIs

WebRTC getUserMedia — Real-time camera access for face/hand/pose tracking (640x480, user-facing)
Canvas 2D API — Webcam preview overlay, face bounding box crop, snapshot branding
Fullscreen API — Immersive kiosk-mode display toggle
Web Animations API — CSS keyframes for countdown, flash, loading spinner, pulse effects
localStorage — Persistent admin config (mode, avatar, wireframe color, password)
Blob / Data URL — Client-side snapshot capture, download, and email attachment
ES Module Import Maps — CDN dependency resolution without a bundler (Three.js, VRM, MediaPipe)

Desktop Kiosk

Electron
Electron ^33.0.0

Desktop kiosk packaging — chromeless fullscreen window, local config persistence, offline operation

EB
electron-builder ^25.0.0

Cross-platform build tool — Windows (.exe) and macOS (.app) installer generation

Design System & Assets

Orbitron Google Fonts — Futuristic display typeface for headings and branding (500/700/900)
Rajdhani Google Fonts — Semi-geometric typeface for UI labels and navigation (400/600/700)
Inter Google Fonts — Clean body text typeface for readability (400/500/600)
Color Palette — Red (#e63946) + Blue (#4895ef) Spiderman-inspired, dark navy backgrounds (#07071a / #0a0a1a)
Glassmorphism — backdrop-filter blur(12-16px) with semi-transparent surfaces throughout UI
WebP Images — All assets in WebP format for optimal compression and quality
Canvas Particle Swirl — Custom JavaScript particle system (red/blue/purple flow, no orange/yellow/cyan)

CDN & Delivery

jsDelivr CDN — Three.js, @pixiv/three-vrm served via global CDN with npm package resolution
Google Storage CDN — MediaPipe ML models (face_landmarker, hand_landmarker, pose_landmarker) served from Google Cloud
Google Fonts CDN — Orbitron, Rajdhani, Inter font families with display=swap for performance
Devicons CDN — Technology icons from the devicon project via jsDelivr