The browser is a material.
I built this page to explore how a browser turns a document into pixels. Scroll through six simplified stages while one shader changes with the explanation.
A rendering experiment
Romain C., 2026
01 / Signal
Nothing begins
with a pixel.
Interaction starts with input: a pointer moves, a key is pressed, or data arrives. The browser turns those events into state the page can use.
The state has changed. Nothing has been drawn yet.
- Input
- Events / bytes / time
- Rate
- 1–1000 Hz
- Output
- State
Move your pointer. The field remembers.
02 / Style
Rules collide.
The cascade decides.
CSS rules can conflict. The cascade compares origin, layer, scope, specificity, and source order to choose the computed values for each element.
The rules are resolved. The elements still have no geometry.
- Input
- Selectors / declarations
- Operation
- Match + cascade
- Output
- Computed styles
03 / Layout
Constraints discover
their geometry.
Layout calculates the size and position of each box from the available space, intrinsic sizes, writing mode, grid tracks, and flex rules.
The boxes have geometry. They have not been painted.
- Input
- Styled element tree
- Operation
- Constraint resolution
- Output
- Fragments + geometry
04 / Paint
Geometry acquires
a skin.
Paint turns the layout into drawing commands for text, borders, shadows, and gradients. Color spaces such as OKLCH and Display P3 allow a wider range of color.
The drawing commands are ready. The layers still need assembling.
- Input
- Layout fragments
- Gamut
- OKLCH / Display P3
- Output
- Display list
05 / Composite
Flat things learn
how to move.
Some painted content becomes GPU layers. The browser can move or fade those layers without repeating layout and paint each time.
The frame is assembled. The display has not shown it yet.
- Input
- Paint chunks
- Operation
- Layerize + raster
- Output
- GPU textures
06 / Photon
The model ends.
Light begins.
The browser combines the layers and sends the frame to the display. At 60 Hz, it has about 16.67 milliseconds before the next refresh.
One frame appears, then the process continues.
- Budget at 60 Hz
- 16.67 ms
- Typical display
- 8.3 million pixels
- Output
- Perception
End of the experiment
The result is a sequence of frames.
The browser parsed the document, resolved its styles, laid out the boxes, and produced paint commands. It repeated the work that changed, then sent another frame to the display.
A page is not one image.
It is a document being rendered.
Romain C. Rendered locally
- Source
HTML / CSS / JavaScript