What this explores
Real-time behavioral biometrics using a neural network trained to distinguish human mouse patterns from bot automation.
Principles demonstrated
- Behavioral biometrics analysis
- Neural network classification
- Feature extraction from movement data
- Real-time anomaly detection
Build It Yourself
Step-by-step guide to recreate this experiment
Intermediate40-50 min
Prerequisites
- JavaScript/TypeScript
- Basic statistics concepts
- Canvas API basics
Track mouse positions with timestamps. Store points in an array and limit the buffer size to prevent memory issues.
typescript
interface Point {
x: number;
y: number;
t: number; // timestamp
}
const pointsRef = useRef<Point[]>([]);
function handleMouseMove(e: MouseEvent) {
const rect = container.getBoundingClientRect();
const point: Point = {
x: e.clientX - rect.left,
y: e.clientY - rect.top,
t: Date.now(),
};
pointsRef.current.push(point);
// Keep only last 200 points
if (pointsRef.current.length > 200) {
pointsRef.current = pointsRef.current.slice(-200);
}
}Use refs instead of state for high-frequency updates like mouse tracking to avoid excessive re-renders.