Motion Loops

Motion loops are flat, graphic backgrounds that repeat every 12 seconds with no visible seam: the last frame flows straight back into the first. Each one is a single canvas drawn from the loop phase, so any frame renders the same way every time.

They come in four families, tagged so you can filter them:

• depth: Ridgeline Field, Helix Field, Polygon Drift, Orbit Arcs
• lines: Light Trails, Ribbon Field, Sunburst Wash, Terraced Relief
• dots: Halftone Clouds, Ripple Plane, Bloom Wallpaper, Pixel Rain
• shapes: Bauhaus Poster, Truchet Arcs, Hanging Garlands, Pinwheel Meadow

Fifteen of them are built to sit behind text and UI: no single focal object, even weight across the frame, muted contrast and slow motion, so a headline in light or dark type stays readable on top. Bauhaus Poster is the exception: a bold poster composition that works as a standalone piece.

Restyle with palette tokens

Every loop exposes the same three colour knobs, plus one or two structural ones such as ridges (Ridgeline Field), rings (Orbit Arcs, Truchet Arcs), sway (Hanging Garlands), pinwheels (Pinwheel Meadow) and seed:

Token	Role
background	The field colour, painted on the #bg layer
foreground	Ink: the main lines, dots or a highlight
accent	The brand colour that carries the motion

Install one, then pass your brand colours on the embed:

npx @av/hyperbits add halftone-sweep --into compositions/

<div
  data-composition-id="brand-backdrop"
  data-composition-src="compositions/halftone-sweep.html"
  data-start="0"
  data-duration="12"
  data-variable-values='{"background":"#0b1020","foreground":"#e8ecff","accent":"#5b7cfa"}'
></div>

Or render it directly:

npx hyperframes render --composition compositions/halftone-sweep.html \
  --variables '{"accent":"#5b7cfa"}' --output renders/backdrop.mp4

To cover more than 12 seconds, place copies back to back (data-start="0", "12", "24"). Frame 12s equals frame 0, so the joins are invisible.

Design your own

Start from the loop closest to the look you want (npx @av/hyperbits fetch dot-tunnel) and keep its shell: #bg, one full-bleed canvas, a paused 12-second timeline and the three palette tokens. Then follow these rules so the loop stays seamless:

1. Draw everything from phase = (time % 12) / 12. The timeline tween calls draw(phase); nothing else keeps state between frames.
2. Every periodic term completes a whole number of cycles per loop: Math.sin(turn * (phase * 2 + offset)), never phase * 1.5.
3. Anything that travels moves a whole number of pattern repeats per loop. A grid scrolls by whole rows, a stream wraps with (offset + phase * laps) % 1 with integer laps, a zoom advances an even number of layers when layers alternate colours.
4. Rotations use the shape’s symmetry: a square may turn 90° per loop, a triangle 120°, an asymmetric shape a full turn.
5. Things that appear and disappear do it at zero size or zero opacity: fade at the far plane, grow from the centre, decay to nothing before the wrap.
6. Randomness is seeded (hyperbits.random, randomFloat, pick) and drawn once at setup, keyed by a seed knob.
7. Derive tints from the tokens (mix the accent into the background) instead of adding hard-coded colours, so a palette swap restyles the whole loop.

Check it before you ship: render frame 0 and frame 12s, they must match, and the step from the last frame (11.967s at 30 fps) into frame 0 should be no larger than any other frame-to-frame step.

Gallery

All depth lines dots shapes

16 bits

Helix Field

Stacked dotted tubes seen from the side, their rings slowly turning into helix stripes across the whole frame

loop background depth tunnel dotted

Orbit Arcs

Wide orbital arcs around a sun far beyond the frame, small planets gliding along them in whole-number periods

loop background depth rings orbit

Ridgeline Field

Muted wireframe ridgelines filling the frame and rolling slowly toward a high, distant horizon

loop background depth terrain perspective

Polygon Drift

Hexagon outlines in three depth layers circling slowly in place with parallax, turning a sixth per loop

loop background depth polygons parallax

Terraced Relief

A frame-wide relief of softly lifted contour terraces, the low hills reshaping slowly as the layers breathe

loop background lines contours topographic

Sunburst Wash

Soft retro sunburst wedges fanning from far below the frame, turning slowly under faint rings rippling outward

loop background lines radial burst

Light Trails

Soft long-exposure light trails looping slowly in their own patch of the frame, spread evenly with no bright heads

loop background lines speed trails

Ribbon Field

Muted striped ribbons laid diagonally across the whole frame, each slowly twisting so its back face shows

loop background lines waves ribbon

Ripple Plane

A gently tilted plane of dots filling the frame, slow ripples from three points lifting it in soft waves

loop background dots ripple plane

Halftone Clouds

A square halftone screen where soft clouds of larger dots drift in small slow circles across the whole frame

loop background dots halftone clouds

Bloom Wallpaper

A wallpaper of small phyllotaxis flower heads whose petals open and close in a slow wave travelling across the frame

loop background dots spiral organic

Pixel Rain

Slanting pixel rain that lands and splashes at different depths across the whole frame

loop background dots pixel rain

Bauhaus Poster

An asymmetric Bauhaus poster whose circle, half-disc, bars and triangle trade places in four eased beats

loop background shapes geometric poster

Hanging Garlands

Garlands of soft paper cutouts hanging from the top edge across the whole width, swaying gently on their threads

loop background shapes geometric ambient

Pinwheel Meadow

A meadow of small paper pinwheels in receding rows filling the frame, turning slowly as soft gusts roll through

loop background shapes pinwheel meadow

Truchet Arcs

Gently curving bands of Truchet arcs across the frame, from a centre far off the corner, neighbouring bands gliding slowly in opposite directions

loop background shapes truchet pattern