Optical Center
Playground

    v0.2 · drop-in

    Math centers your icon. Your eye disagrees.

    optical-center: auto shifts the viewBox at build time. 

    <div class="container">  <PlayIcon /></div>
    .container {}
    optical-center

    The problem

    Geometric centering looks off.

    CSS centers the bounding box. Your eye centers the visual mass. They disagree — and they disagree by a different amount for every shape.

    • Pixel nudging by hand

      Designers shift every icon, every button, every component — by eye, with no shared baseline. The fix lives in someone's muscle memory.

    • Bounding boxes lie

      CSS centers the rectangle around your shape. Visual mass sits somewhere else, and “centered” quietly stops meaning centered.

    • No CSS primitive

      Type has ascender, descender, baseline. Icons have nothing — no built-in way to express where a shape looks centered.

    Science

    How we model the human eye.

    No guesswork. Each stage of the algorithm simulates a step your visual cortex actually performs — from retinal edge detection to cortical compression. The pipeline is grounded in published neuroscience.

    Pipeline

    Every icon passes through this at build time. The output is a single (dx, dy) offset in viewBox units.

    pixels DoG filter compress edge centroid · 40% hull centroid · 30% symmetry axis · 30% + bias ( dx, dy )

    1. Retinal edge detection

      Marr & Hildreth, 1980

      Your retina sharpens edges and suppresses flat regions through ON-center / OFF-surround receptive fields. We mirror that with a Difference of Gaussians filter.

      DoG = G(σ=1.0) − G(σ=1.6)

    2. Cortical compression

      Naka & Rushton, 1966

      V1 neurons respond on a compressive curve. Dense regions get tamed, edges gain weight — which is why a contour reads louder than its fill.

      w′ = w^0.7

    3. Contour dominance

      Proffitt, Cutting & Stier, 1983

      You see a shape's center by its boundary, not its mass. We take an edge-weighted centroid via a Sobel pass on the compressed weight map.

      40% edge centroid

    4. Bounding shape

      Andrew, 1979 · monotone chain

      The convex hull of visible pixels traces the shape's outer envelope. Its centroid captures the structural balance the eye picks up at a glance.

      30% hull centroid

    5. Symmetry detection

      Sasaki et al., 2005

      The Lateral Occipital Complex spots symmetry in ~220 ms. When axes line up, perceived center snaps to their intersection. We scan 36 angles to find the dominant one.

      30% symmetry axis

    6. Vertical bias

      Drain & Reuter-Lorenz, 1996

      People consistently see a shape's center slightly above its geometric midpoint. We apply a 3.5% upward shift — a well-documented perceptual bias.

      cy −= height × 0.035

    References

    The papers behind each stage. Heeger (1992) underlies the normalization framing throughout.

    1. Marr, D. & Hildreth, E. 1980

      Theory of edge detection.

      Proceedings of the Royal Society B 207(1167), 187–217.

      stage 01

    2. Naka, K.I. & Rushton, W.A.H. 1966

      S-potentials from luminosity units in the retina of fish.

      Journal of Physiology 185, 587–599.

      stage 02

    3. Proffitt, D.R., Cutting, J.E. & Stier, D.M. 1983

      Perception of the centroid of irregular shapes.

      Perception & Psychophysics 33(4), 383–388.

      stage 03

    4. Sasaki, Y. et al. 2005

      Symmetry activates extrastriate visual cortex in human and nonhuman primates.

      PNAS 102(8), 3159–3163.

      stage 05

    5. Drain, M. & Reuter-Lorenz, P.A. 1996

      Vertical orienting control: Evidence for attentional bias.

      Canadian Journal of Experimental Psychology 50(2), 181–190.

      stage 06

    6. Heeger, D.J. 1992

      Normalization of cell responses in cat striate cortex.

      Visual Neuroscience 9(2), 181–197.

      framework

    Research

    Measuring where people actually look.

    We’re running a perceptual centering study with real participants. Each person adjusts the position of a shape until it “looks centered” inside a container.

    1. Phase 01 Completed
    2. Phase 02 Completed
    1. Completed Phase 01

      Perceptual Data

      Method of Adjustment study. Participants positioned icons until they “looked centered.” Data used to validate the biologically-inspired v2 pipeline.

      • 36 Participants
      • 2,160 Trials
      • 100% Pass rate
      • 20 Test icons

      Result

      RMSE 2.99 px r = 0.585

    2. Completed Phase 02

      Icon Validation (2AFC)

      Two-alternative forced choice tests on real icons from Lucide, Feather, Heroicons, Bootstrap Icons, and Phosphor. The v2 model was validated against human perceptual judgments.

      • 41 Participants
      • 5,234 Trials
      • 999 Icons processed
      • 5 Libraries

      Result

      PSE 0.745 humans prefer 74.5% of model correction

    Proposal

    Fonts carry their own metrics. Icons should carry an optical center.

    Treat optical-center like any other intrinsic asset metric — computed once at build time, shipped with the file, and queried at runtime through a CSS property the same tier as letter-spacing or text-underline-offset.

    Draft spec

    optical-center property

    One length pair or the auto keyword, on replaced elements. Phrased the way a CSSWG draft would phrase it.

    Name
    optical-center
    Syntax
    auto | <length>{1,2}
    Initial
    auto
    Applies to
    block containers of a replaced child
    Inherited
    no
    Computed value
    two <length> values
    Animatable
    by computed value
    author.css what you write 
    .button {  optical-center: auto;}
    output.css what actually ships 
    .button {  display: flex;  --optical-center: auto;}.button > * {  margin: auto;  translate: -4.33% -2.63%;}

    The data already exists — every icon in this page ships with a precomputed offset today. The only thing missing is a syntax the browser can read natively.