A design constraint model for studying foveal vs. peripheral vision on the web.
Scrutinizer is a browser-based simulation that strips away the brain's post-processing to reveal the raw, noisy data your optic nerve actually receives. It compels designers to stop designing for the "Screenshot" and start designing for the "Scan".
It's intended to be useful in the design process, from solo iteration to design review dialogue, and even client presentation (with special modes for storytelling!).
Additionally, there's a long history (keyword: "restricted focus viewer")of using foveal simulation bound to the mouse as a way to conduct user testing, allowing the observer to track the attention of the participant.
- The Concept: Vision as Controlled Hallucination
- Visualizing the Glance
- Features
- Installation
- Usage & Controls
- Under the Hood: WebGL Implementation
- Theoretical Foundation
- Limitations & Roadmap
- License & Contributors
We assume we see the world in high-definition 180° video. We don't. The human eye is a biological scanner with a terrifyingly narrow bandwidth.
- The Fovea ("The What"): You only possess "20/20 vision" in a tiny patch of retina roughly the size of your thumb held at arm's length (~2° of visual field).
- The Periphery ("The Where"): Everything else is a low-resolution, color-blind, motion-sensitive sensor that doesn't "see" objects, but merely guesses at their textures.
Your brain stitches these jittery, low-fidelity snapshots into a seamless timeline. Scrutinizer disables this "auto-correct" feature, forcing you to navigate using only the raw retinal input.
This simulation visualizes the split-second mechanics of a glance—how your brain transforms a blurry peripheral cue into a sharp, focused image.
- Frames 1-5 (Far Periphery): The "Mongrel" Zone. High-frequency details are compressed into statistical noise. Color simulates rod-dominant vision (desaturated), preserving only high-contrast "blobs".
- Frames 6-10 (Parafovea): The "Crowding" Zone. Color sensitivity returns as cone density increases. Text features emerge, but "Interactional Crowding" prevents legibility.
- Frames 11-14 (Fovea): The "High-Res" Zone. The central 2° of vision resolves the image, finally allowing the brain to parse semantic meaning.
- Foveal/Peripheral Vision Simulation: Toggle between clear central vision and degraded peripheral zones
- Content Analysis:
- Structure Map: Analyzes page layout (text rhythm, density, semantic type)
- Saliency Map: Detects visual attention (edges, contrast, high-importance areas)
- Fidelity Bias: Reduces peripheral degradation near salient targets
- Aesthetic Modes: High-Key Ghosting, Lab Mode, Frosted Glass, Blueprint, Cyberpunk (with saliency-driven pixelation)
- Visual Memory: Simulates iconic memory decay (Off, Limited, Extended, Infinite)
- Chromatic Aberration: Lens-like color fringing in periphery
- Adjustable Parameters: Foveal radius (20-450px), shape (4 ratios), intensity (0-100%)
- Neural Processing Model (WebGL): Biologically accurate retinal simulation with domain warping
Security Note: These are unsigned developer previews. Your OS will warn you. Only install if you trust this repository.
Download:
- macOS (Apple Silicon): Scrutinizer-1.1.4-arm64-mac.zip
- Windows: Scrutinizer-Setup-1.1.4.exe
Troubleshooting macOS Warnings
- Right-click
Scrutinizer.app→ Open. - Click Open when warned about the unidentified developer.
- If blocked, go to System Settings → Privacy & Security and click Open Anyway.
- Advanced:
xattr -dr com.apple.quarantine /Applications/Scrutinizer.app.
Troubleshooting Windows SmartScreen
- Run the installer.
- If SmartScreen appears, click More info → Run anyway.
# Install dependencies
npm install
# Run the application
npm start- Navigate: Use File → Open URL (
Cmd+L) to enter a website address - Toggle simulation: Press
Cmd+Shift+For use Simulation → Foveal → Toggle Foveal Mode - Quick adjust: Use Left/Right arrow keys to change foveal radius
Access all features via Simulation menu:
- Foveal: Toggle, Radius (6 sizes), Shape (4 ratios)
- Peripheral: Intensity (5 levels), Mongrel Mode, Chromatic Aberration
- Behavior: Aesthetic Mode (5 styles), Visual Memory (4 modes)
- Content Analysis: Enable/Show Structure Map, Enable/Show Saliency Map
- Show Boundary: View foveal edge
- Show Structure Map: View layout analysis (RGB channels: rhythm, density, type)
- Show Saliency Map: View attention heatmap (Blue=Low → Green=Medium → Red=High)
| Key | Action |
|---|---|
Right Arrow (>) |
Increase foveal radius (when foveal mode is enabled) |
Left Arrow (<) |
Decrease foveal radius (when foveal mode is enabled) |
Cmd+L |
Open URL dialog |
Scrutinizer uses a custom WebGL pipeline to simulate biological constraints like rod-weighted luminance, retinal ganglion density, and domain warping.
For implementation details, see Implementation Notes: The Biological Model.
This allows the visual simulation to be applied efficiently to even video content and in general a smooth experience, with only a minor additional latency associated with initial shader compilation and some defenses against showing partially loaded untransformed content.
- Renderer Stability: Fixed critical WebGL initialization crashes by isolating renderer scripts in IIFEs.
- Visuals Restored: Resolved shader uniform mismatches to ensure Mongrel Mode and Rod Vision work correctly.
- Configuration: Added
renderer/config.jsfor fine-tuning, includingenableLoggerfor debugging.
This project is grounded in research from vision science and cognitive psychology. Mapping blur to surround the mouse position has been a technique for decades, and is used in tools like the Restricted Focus Viewer (RFV) and the Eye Tracking Viewer (ETV). More recently, VR headsets have utilized foveated rendering to reduce the amount of pixels needed to render the scene.
Research into exactly how the periphery is perceived has progressed in recent years, with the development of the "Mongrel Theory" of vision. As of 2025, AI researchers are actively trying to develop a more accurate model of how the periphery is perceived so that they can better simulate it in their own tools ref
- Scientific Literature Review: Deep dive into the science behind the simulation.
- YouTube Playlists: Watch our curated videos on vision science and UX.
Warning
Scrutinizer is intentionally approximate and should be used as a design constraint model, not a precise physiological instrument.
- It models retinal input constraints, not the brain's transsaccadic integration.
- Current implementation uses Box Sampling with Noise, not full "Mongrel Theory" texture synthesis.
- It assumes a fixed relationship between screen pixels and visual angle.
Copyright (c) 2012-2025, Andy Edmonds. All rights reserved. Licensed under the MIT License.