A computed interface, not a hand-written one
Everything on the dashboard below — the number of columns, where every line of text breaks,
how tall each card is, how tall the page is — is decided by one math function,
UI = f(props, width). It is a straight list of
… adds, multiplies, divides, ReLUs and step functions.
No branches, no loops over layout, no media queries.
Because the UI is a function, we can do calculus on it. This page takes its exact derivative by automatic differentiation, runs gradient descent to find better layout props for a stated design goal, and then proves the result over every phone-to-desktop width — not a sample, all 1,121 of them. It runs entirely in your browser, offline, at … evaluations per second on your device.
Drag the width. The gray frame is the viewport the function sees; the cards are drawn exactly
where f says, with line breaks f counted. Underneath, the page
measures the real DOM and compares it to the function's prediction.
The design goal, stated as a loss: short page +
little dead space inside cards + no cut-off words +
at least 24 characters per line + font never below 16 px +
cards never wider than 440 px. To get gradients through the breakpoints,
every step() is softened into a sigmoid() and every ReLU into a
softplus — then forward-mode automatic differentiation gives the exact
∂loss/∂props, and Adam descends for 250 steps. Afterwards we switch the hard steps back on
and report true numbers. The descent optimizes five widths at once (320, 420, 640, 900, 1440).
f is evaluated at every integer width from 320 px to 1440 px — 1,121
evaluations — with the hand-picked props and with the optimized props. That is a certificate,
not a screenshot: the worst-case page height and every layout jump (a width where one extra
pixel changes the page height by more than 5 px) over the whole range.
One evaluation of UI = f(props, width) is a fixed list of primitive operations,
counted by running the function with a counting scalar:
Text wrapping is inside the function: for each card, the line count as a function of
characters-per-line was precompiled into a sum of step functions
(… steps across all twelve texts), so the same equation that sizes
the cards also decides where every line breaks. Column count is
clamp(⌊(w+g)/(cw+g)⌋, 1, 4); floor is a sum of steps; max is
a + ReLU(b−a); page height is rows × tallest card + gaps + padding.
Card contents are fixed sample data. The honesty rule of this demo: every number on this page was measured by running the function or the DOM just now, on your device.