LibraryFamily 01 — Image

Components

03 available

Each one below is the real component, running. Open one for its full source, its props, and a stage you can drive with your own number.

01 / 03

Image Generation

A picture resolving out of noise, not a bar filling up.

Cells resolve in an order — a bloom out from an off-centre focal point, its wavefront displaced by two octaves of coherent noise so patches of the picture arrive ahead of their neighbours. The noise warps the radius rather than competing with it; added as its own term it overwhelms the bloom and the whole thing collapses into a wipe. A bright crest rides that front, so the field reads as developing rather than as a mask being dragged across a finished picture. The grid runs off one custom property, so a frame costs a single style write rather than six hundred React renders.

Open component

02 / 03

Image Mosaic

Resolution arriving, the way a progressive decode arrives.

The frame is full from the first frame and only its detail changes — three blocks across, then six, then twelve, then twenty-four, every level sampling the same underlying field so it stays recognisably one picture sharpening rather than four grids of noise. Levels cross-fade with a small scale-down as each lands, because a hard swap between two block grids reads as a glitch and a focus pull reads as a lens finding it. At 20% you can already judge the composition, which is when you actually want to know whether to prompt again.

Open component

03 / 03

Image Trace

Line work finding a form, drawn rather than filled.

The one job in this set where SVG beats the DOM: a stroke that draws itself along its own length has no sensible DOM equivalent. Every contour carries pathLength="1", which normalises the dash maths so a 15-unit ring and a 157-unit ring lay down at the same rate instead of the small ones snapping shut. The rings are warped by a field sampled at each point's own position, so neighbours bulge together and the set reads as contours of one surface rather than scribble. Accent lives on the ring the pen is currently on and nowhere else.

Open component