← Lab homeTensorFlow.js face tracking drives real-time Pretext typography—your face controls the text layout in real-time.
What It Does
Face × Pretext represents the most technically ambitious integration in the Pretext showcase. Using TensorFlow.js for real-time face detection via your webcam, the demo translates facial movements into text layout changes. Tilt your head left and the text shifts left. Raise an eyebrow and the typography responds. Lower your head and spacing contracts. This combination of technologies—machine learning inference plus frame-accurate text measurement plus responsive layout—should theoretically be expensive and stutter-prone. But Pretext's near-zero layout cost leaves enough computational budget for TensorFlow inference, animation, and rendering in the same frame. The result is an interactive experience that feels futuristic precisely because it executes efficiently. Requires a connected webcam and user permission to access camera input.
Technical Highlights
This demo coordinates three computational heavy-hitters: TensorFlow.js neural network inference, Pretext text measurement, and canvas-based rendering, all running at 60fps. Traditional architecture would struggle under this load, with layout becoming the bottleneck. TensorFlow would compete with rendering for frame budget, creating perceptible stuttering. Here, Pretext decouples measurement from rendering, allowing each system to operate independently. Face detection runs asynchronously, Pretext geometry calculations happen instantly without DOM overhead, and the rendering pipeline completes in the remaining frame time. The technical achievement isn't flashiness—it's choreography. Each system knows its role and executes without blocking others. This demo proves that Pretext's efficiency isn't theoretical; it's the architectural enabler of an interaction that would be impossible using traditional DOM measurement.
Pretext APIs Used
| API | Purpose |
|---|---|
| Real-time text measurement | Update layout on every face detection frame |
| Wrap geometry | Recalculate line breaks as layout parameters change |
| Responsive sizing | Scale text dimensions based on facial movement |
| Frame-rate measurement | Maintain 60fps while computing geometry |
How to Try It
Open the Face × Pretext demo and grant camera permission when prompted. Ensure you have adequate lighting for face detection to work reliably. Once active, move your face naturally and watch the text respond in real-time. Slow, deliberate movements show the correlation most clearly; fast movements reveal how quickly Pretext recalculates. Try tilting, nodding, and changing your distance from the camera to see different layout effects. This demo works on desktop and mobile devices with functioning webcams. The novelty wears off quickly, but the technical accomplishment remains impressive—you're running machine learning and responsive typography simultaneously in your browser.
Built By
Created by sachinkasana. View the source on GitHub.
