Hello, world

First post. A quick tour of every layout primitive on this site.

meta

Welcome. This is the first post on the site — a quick demo of every layout primitive available so I have something to reference later.

Math

Inline math like eiπ+1=0e^{i\pi} + 1 = 0 renders via KaTeX at build time. Block math, too:

∇⋅E=ρε0\nabla \cdot \mathbf{E} = \frac{\rho}{\varepsilon_0}

The rendering equation, for reference:

Lo(p,ωo)=Le(p,ωo)+∫Ωfr(p,ωi,ωo) Li(p,ωi) cos⁡θi dωiL_o(\mathbf{p}, \omega_o) = L_e(\mathbf{p}, \omega_o) + \int_\Omega f_r(\mathbf{p}, \omega_i, \omega_o)\, L_i(\mathbf{p}, \omega_i)\, \cos\theta_i \, d\omega_i

Wide and full-bleed figures

By default, content sits in the narrow text column. Figures can opt into wider tiers:

wide figure placeholder

A wide figure — same column width as text plus side margins.

full-bleed placeholder

A full-bleed figure spans the whole viewport width.

Sidenotes

Margin notes float in the right gutter on wide screens and inline on mobile.

The text continues without interruption.

WebGPU islands

The site can host live WebGPU demos as React “islands” — only the components that need it ship JS, and the rest of the page stays static HTML. Below is the default demo: a fragment shader animating UV coordinates in time.
Animated WGSL shader running locally on your GPU. Shows a fallback in browsers without WebGPU.

Code

function lerp(a: number, b: number, t: number) {
  return a + (b - a) * t;
}

That’s the tour.