Backgrounds

Contour

Pro

A topographic map of terrain that will not hold still. The lines are not drawn, they are found. A height field is sampled onto a grid every frame and marching squares walks it once per altitude, emitting segments wherever the land crosses that height. Nothing here knows what a ridge is. Ridges are where the crossings bunch up. The pointer raises a hill the contours have to route around, and because the interval is fixed rather than the line count, that extra altitude produces extra rings instead of restretching the ones already on screen.

Install

Props

What It Demonstrates

Loop
An animation that repeats, a set number of times or infinitely.
Idle animation
Subtle motion that plays while an element is just sitting there, waiting to be interacted with.
Hover effect
Visual change when the cursor moves over an element.
Linear
Constant speed. Avoid for UI; reserve for spinners or marquees.

Related Components

Appears In