Vercel's The Calculus of Interfaces Compiles React UI into Math Functions

Vercel Labs has released a research prototype, The Calculus of Interfaces: Shu Ding (former Vercel core engineer and co-founder) proposes compiling ordinary React components (like <Dashboard/>) into true pure mathematical functions UI = f(props), so that UI layout can be differentiated, integrated, and formally verified rather than repeatedly rendered and measured. This is currently a research-prototype exploration showcasing various possibilities at the intersection of UI and calculus.

Confirmed

• Core idea: treat UI as a function of props like window width and font size. Since layout is linear between CSS breakpoints, using the linear approximation f(x) ≈ f(a) + f'(a)·(x-a), a single real layout plus one derivative yields all frames.
• Animation: the partial derivative ∂UI/∂prop effectively gives each element a velocity vector, so for any prop change, each element's direction and speed of movement can be precisely "computed" rather than "measured" after re-rendering.
• Visual breakpoint detection: jump discontinuities of f(x) correspond to card wrapping or new columns appearing; discontinuities of f'(x) correspond to kinks (e.g., a container hitting max-width). All real visual breakpoints can be enumerated without testing screen sizes one by one—not just the breakpoints declared in CSS.
• Formal verification: interval arithmetic can verify constraints like "page height stays within bounds" across all viewport widths and font scales simultaneously, producing a guaranteed envelope over the entire parameter region (green means it holds everywhere, red means it fails everywhere).
• Data-driven "average page": treating screen width and font size from production metrics as a distribution ρ, integrating the page-height function ∫H(w)ρ(w)dw yields the "average page" users actually see; H is linear between breakpoints, so each segment has a closed-form solution.
• Fourier transform experiment: page height versus width can be viewed as a signal; keeping the largest few frequency components reconstructs a slightly jittery, "JPEG-style" dashboard—an experiment the author admits was done purely because "it could be done."
• Wild starting point: the author also envisions treating UI props as complex numbers (e.g., viewport width of 720+42i px), using the imaginary part to carry the third dimension of elements' "lift and settle" motion in animation.
• Looking ahead: Shu Ding believes UI code, rendering engines, and production metrics will merge into one closed loop—code will be able to see inside the engine, and online metrics will no longer just sit in dashboards.

Why it matters

This series of experiments pushes UI from the engineering paradigm of "measure after render" toward a mathematical paradigm of "analytically computable": if layout functions can be differentiated, checked for discontinuities, and verified with intervals, visual regression testing, animation generation, and responsive adaptation could all be systematically rethought and connected to real production data. It remains experimental for now, and its path to practical adoption is worth watching.

2026-10-27 ~ 2026-10-27 · 11 related posts

• [source] Vercel Labs compiles React UI into a pure math function, unlocking calculus for interfaces — shuding · 2026-10-27
• shuding: partial derivatives give every UI element an exact velocity when props change — shuding · 2026-10-27
• Interval arithmetic can prove a UI never fails across infinitely many props — shuding · 2026-10-27
• shuding finds every visual breakpoint via discontinuities in the layout function — shuding · 2026-10-27
• Treat designs as points in N-d space: geodesic transitions where no card jumps rows — shuding · 2026-10-27
• shuding mathematically proves UIs never break across infinite prop combos via interval arithmetic — shuding · 2026-10-27
• [source] Ex-Vercel engineer Shu Ding: linear approximation gives free layout animations — shuding · 2026-10-27
• shuding takes the Fourier transform of a responsive dashboard as a frequency signal — shuding · 2026-10-27
• [source] shuding: integrate your UI over real traffic to get the exact average page users see — shuding · 2026-10-27
• Vercel engineer shuding reimagines UI as complex-valued functions: viewport 720+42i px — shuding · 2026-10-27
• Vercel envisions UI future: code, rendering engine and production metrics merge into one loop — shuding · 2026-10-27