Four frames

No. 42 · Early example

The frame pickedThick chip: field, ground, frost or glassThin chip: one blur passEmpty well: nothing drawnI stack one chip for every draw, in the order the passes run. The thin chips are the blur, a horizontal and a vertical pass for each of the 16 rounds; the thick ones are the SDF, the gradient, the ground, the two frost passes and the glass. The first frame of a frosted <Glass> that draws its own ground stacks all 38. A moving control rebakes its field with SDF_UNION, has no ground to draw and keeps its frost, so it stacks 35 on every frame it moves. A still <Glass> draws the glass alone. A control at rest matches its mark and returns before draw, so its well stays empty and its canvas keeps the last frame. The stack I pick lifts and lights from the bottom up; on the two that pay again every frame, the light keeps climbing.

One chip per draw call, stacked in the order the passes run, for four kinds of frame: from a full rebake of 38 draws down to a still frame with none.

Drawn while the skill was being made, for a long article on rendering frosted panes in WebGL.

Install

npm install anatomy-figures

In your code

page.tsx

import { FourFrames } from "anatomy-figures";

<FourFrames theme="light" />

Or load this figure on its own, so the others never download:

page.tsx

import FourFrames from "anatomy-figures/four-frames";

Theme it

Early examples keep their own light and dark palettes: theme picks one, and --anatomy-card sets the ground.

page.tsx

<FourFrames
  theme="dark"
  tokens={{ "--anatomy-card": "#000000" }}
/>

Without React

It still draws with React inside, so install react and react-dom next to it.

index.html

import { define } from "anatomy-figures/element/four-frames";

define();

<anatomy-four-frames theme="light"></anatomy-four-frames>