GuillocheLines

Options

paper #fbfaf4

css colour

The paper the plate is printed on. Match it to your page background.

ink #2f2b26

css colour

The engraving. A desaturated near-black reads as ink; pure black reads as a wireframe.

accent #c44400

css colour

The second colour, printed over one band of the pattern the way a share certificate prints one guilloche in red over the rest in black.

scale 0.92

0.2 to 3, good: 0.6 to 1.4

Size of the whole rosette. Below about 0.5 the lines are finer than the pixels and the plate turns grey.

pitch 26

4 to 80, good: 14 to 40

Lines per unit of radius. Higher is finer engraving, and past about 50 it stops resolving on anything but a retina screen.

lobes 7

2 to 24, good: 5 to 12

Lobes on the first rosette. Whole numbers only: a fractional lobe count gives a curve that never closes, and an open curve reads as a mistake rather than as engraving. The other two families are derived from this and kept coprime to it.

waves 24

4 to 80, good: 12 to 40

Spokes in the family that runs around the circle rather than out from it. This is what turns two ring families into woven guilloche instead of a moire.

depth 0.07

0 to 0.4, good: 0.04 to 0.14

How far each rosette's radius wobbles. Zero is concentric circles. Past about 0.2 the curves cross themselves and the weave becomes a tangle.

weight 0.35

0 to 1, good: 0.2 to 0.55

Weight of the engraved line. Heavy lines at a high pitch fill in solid, so raise one and lower the other.

accentBand 0.22

0 to 1.2, good: 0.1 to 0.5

Where the second colour sits, as a radius from the centre. Set it past the corner of the panel to switch the second colour off.

grain 0.28

0 to 1

Paper tooth. Static by design. Animated grain flickers, and a flicker this fine is what WCAG 2.3.1 exists to prevent.

period 6

4 to 180 s, good: 6 to 60

Seconds for one turn of the gears. The pattern is exactly periodic over this. The default is 6 so the preview video is a whole turn; 30 to 60 is right behind a page, where the gears should be moving slowly enough that nobody catches them.

reducedMotionTime 5

0 to 180 s

The single frame shown when the user prefers reduced motion. Any time works: a still guilloche is an engraving, which is a finished thing to look at.

What it needs

Dependencies

None at all

Browser

WEBGL2

Frame budget

~0.9 ms · 1 context

Pinned to

v0.6.2

• WebGL2 for gl_VertexID; there is no WebGL1 fallback and none is planned
• The line width is derived from the screen-space derivative of the field, so the engraving stays one pixel wide at any DPR instead of filling in at the centre
• Falls back to a still frame under prefers-reduced-motion, handled in the runtime
• One full-screen triangle and three line families. No noise, no textures, no render targets
• The cheapest effect in the library
• Dense line work is the hardest thing in this library for a video codec to encode, so its recording carries a per-item quality override. The effect itself is unaffected