The Oblique Effect

v2.2.0 release notes →

Look at a toolbar in your peripheral vision. You can tell there are four buttons separated by dividers. You can’t tell which icon is which. The button rectangles and divider lines are horizontal and vertical. The icons inside — check marks, close ×, navigation chevrons — are built from 45° strokes.

menu H/V only check 45° strokes close 45° strokes expand 45° strokes In the periphery, the oblique effect predicts: toolbar structure (H/V) survives further icon detail (45°) degrades first You see “there are 4 buttons” before you see which icon is which
A typical toolbar: the container borders and dividers are horizontal/vertical (teal). The icons — checkmark, close, chevron — are built from 45° strokes (red). The oblique effect preserves the layout grid further into the periphery than the icon glyphs. You know where the buttons are before you can tell what they do.

NNg’s research on icon usability (Harley 2014) found that icons without text labels are functionally invisible — “obscure icon = wasted feature.” The oblique effect offers a perceptual mechanism for part of that failure. V1 responds more strongly to cardinal orientations (Furmanski & Engel 2000), and web layout is overwhelmingly cardinal — text baselines, column borders, horizontal rules, input field edges — giving it a biological advantage that diagonal icon strokes do not.

Can you see the error from here?

LukeW’s inline validation study (2009) found that showing errors as users fill in fields — rather than after submission — improved success rates by 22% and reduced completion time by 42%. The eye-tracking data is the telling number: 47% fewer fixations. The study didn’t test peripheral detection directly, but the geometry fits: red borders are high-contrast cardinal signals that the periphery is tuned to detect.

Shipping Address City San Francisco State CA ZIP 9410 Must be 5 digits Payment Card number 4242 4242 4242 4242 Expiry 08/27 CVC Required red H/V border = cardinal + chromatic signal same signal: red rect, H/V edges In periphery: red rectangle shape persists → error text (“Must be 5 digits”) degrades first
A checkout form with two inline validation errors. The ZIP and CVC fields have red borders (horizontal and vertical rectangles) plus error text below. The red border has two peripheral advantages: chromatic contrast (red on white) and cardinal geometry (H/V edges). The error message text is fine detail that degrades first — you see “something is wrong with that field” before you can read what.

The oblique effect accounts for the geometry component of those red borders — cardinal edges survive further than oblique ones at the same eccentricity.

A designer can’t assume the error message text is readable at 8° eccentricity, but the shape of the error state — colored rectangle with H/V borders — persists further. Inline validation works for many reasons: immediate feedback, reduced memory load, temporal proximity. The oblique effect adds one more — it relies on a signal structure the periphery is tuned to detect.


What v2.2 changes

Until v2.2, Scrutinizer treated all orientations equally — a horizontal text baseline lost fidelity at the same eccentricity as a diagonal noise texture. v2.2 adds orientation-selective attenuation: cardinal edges keep more detail further into the periphery.

What the shader sees

Every pixel gets decomposed into four orientation channels, matching V1 simple cell tuning (Hubel & Wiesel 1962). Here’s a test pattern with horizontal lines (top-left), vertical lines (bottom-right), and 45°/135° diagonals (top-right, bottom-left):

Four-quadrant orientation grid with V1 energy decomposition: magenta = horizontal edges, cyan = vertical edges, blue-purple = diagonal edges
V1 orientation energy decomposition. Each pixel’s color shows what fraction of local edge energy falls into each channel. Magenta = horizontal edges (top-left quadrant). Cyan = vertical edges (bottom-right). Blue-purple = diagonal edges (top-right, bottom-left). Black = flat regions, no edges. The orient bonus favors magenta and cyan over blue-purple.

The same decomposition on a spider web, where orientation varies continuously:

Spider web orientation energy: spokes change color from cyan/magenta at cardinal to purple at diagonal, concentric rings shift as tangent angle rotates
Spider web, V1 energy channels. The H/V guidelines glow magenta and cyan. Diagonal spokes are blue-purple. Each concentric ring shifts color as its local tangent rotates through all orientations.

Four layers of biology

The implementation models four layers:

fixation radial toward/away from fixation tangential along iso-eccentricity arc crowding zone
Radial = toward/away from fixation. Tangential = perpendicular to it (along the arc). The dashed ellipse is the crowding zone — anything inside it gets smeared together. It’s wider radially, so items arranged tangentially stay more distinct.

Why the effect is subtle

The oblique effect is a detection threshold phenomenon — 30–50% better acuity at the threshold of visibility. At the suprathreshold contrasts of typical web content (black text on white, colored buttons), the orient bonus extends band cutoffs by a fraction that gets further compressed by the downstream pipeline: fovea/periphery blending, luminance contrast normalization, chromatic aberration, and Oklab chromatic pooling. The result is biologically correct but visually subtle. You won’t see a dramatic before/after in a screenshot. You might notice it the way you notice the real thing — toolbar structure holds together a beat longer than icon detail, and you don’t think about why.

The full implementation detail — shader math, per-band fade curves, uniform reference, and performance budget — is in the v2.2.0 release notes and the oriented DoG spec.

Also in this release

Testing the math

v2.2 also adds 23 regression tests encoding findings from the five-wave psychophysical validation. The tests mirror the core attenuation and crowding formulas, load parameters from modes.json, and validate against published data (Bowers 2025, Mullen & Kingdom 2002). If a parameter drifts, these catch it before the next data collection.