Home▸Perception & Optical Illusions▸Web Design Visual Hierarchy: Attention Heatmap (2D)

🖥️ Web Design Visual Hierarchy: Attention Heatmap (2D)

Responsive landing-page mock-up analysed with a saliency model: drag sections to reorder them and watch the predicted attention heatmap, gaze scan path, WCAG contrast, Fitts-law click time and Hick-law menu time update across phone, tablet and desktop widths.

Perception & Optical Illusions2DEasy60 FPS📱 Mobile-adapted⇄ 3D version

Details

CategoryPerception & Optical Illusions

RenderingCanvas 2D

DifficultyEasy

Target FPS60

ControlsDrag page sections up or down to reorder them; sliders for viewport width, headline size, body size, whitespace, article column width, menu items, text contrast, call-to-action hue and saturation, image saturation, clutter, reading-pattern bias and number of fixations; dark-theme, heatmap and scan-path toggles; seven scenarios; pause, step and reset.

web designvisual hierarchyvisual attentionsaliencyresponsive designusability

Related simulations

Motion AftereffectStare at a rotating spiral for 20 seconds (adaptation phase), then stop — the static spiral…

Colour Contrast IllusionsThree classic colour perception illusions: simultaneous lightness contrast, Mach bands at…

Optical Illusions — Visual Perception GalleryInteractive gallery of 8 classic optical illusions: Müller-Lyer, Ebbinghaus, Café Wall,… ⊞ All 175 in Perception & Optical Illusions →

⚙ Under the hood

web designvisual hierarchyvisual attentionsaliencyresponsive designusability

2D · HTML5 Canvas 2D · 60 FPS target · runs fully client-side, no install