benday
Your logo, halftoned into a thinking indicator.
· ·
Install
Seven files land in your project and belong to you. Only React is required — there is no package to depend on.
Presets
Twenty-one presets span signature, sweep, orbit, field and transform motion: contour waves, serpentine cascades, radar beams, orbiting comets, equalizers, magnetic pulls, staged resolves and more.
thinking runs the preset; idle and done show the crisp mark, and the dots spring back into it. A preset is a function of one dot and the clock, so write your own.
How it works
The image is rasterized once, ink separated from background by alpha or luminance, then a Euclidean distance transform gives every dot its depth inside the mark. That dot map is all the renderer animates — cached by source, paused off-screen, honouring reduced motion, resolving currentColor against the canvas.
Bake at build time and pass dotMap instead of src to skip the work entirely.
Repository
The docs app imports registry/ through @registry/* rather than keeping a copy, so every example on the site is the code that ships.
Development
registry:build regenerates the payloads and must be committed with any change to registry/. check, typecheck, knip and build are what CI runs. See .
MIT