# Architecture

> How the shader draws a pixel, how pixi-silk compares with other anti-aliasing and how layout computes.

Source: https://pixi-silk.schmooky.dev/docs/architecture/

The ideas under the API. Read these when you want to know why a result looks the way it does.

## 01. How it works

One instanced quad per primitive, an exact signed distance per pixel, coverage from screen-space derivatives and dithered OKLab gradient ramps.

Guide: https://pixi-silk.schmooky.dev/docs/how-it-works/

## 02. Anti-aliasing compared

MSAA, resolution, curve smoothness, supersampling, FXAA, @pixi/graphics-smooth and analytic SDF anti-aliasing in PixiJS v8, compared, with fixes by symptom.

Guide: https://pixi-silk.schmooky.dev/docs/anti-aliasing-compared/

Experiments:

- [Infinite zoom](https://pixi-silk.schmooky.dev/lab/03-zoom/): Five nested levels, each 3000 times smaller than the last. Zoom in to see curves and hairlines at every scale.
- [Sub-pixel motion](https://pixi-silk.schmooky.dev/lab/04-subpixel/): Shapes drifting at 2 px per second. Compare how tessellated edges step between pixels and distance fields glide.

## 03. Layout engine

pixi-silk/layout is the flex engine under SmartContainer and FlexContainer: plain nodes, CSS flexbox styles, measure functions and incremental passes.

Guide: https://pixi-silk.schmooky.dev/docs/layout-engine/