VIPEX Motion · 12 Generative canvas

Helix Flow

A loose, frayed band enters on the left and tightens into a clean helix on the right. Rungs bridge the strands once it settles. Run the pointer through the ribbon and the strands part around it, then spring back. Chunky pixel cells, depth-sorted, canvas 2D only.

sweep the canvas · hover a stage · press H for the panel

Three presets

tighten runs the fray-to-clean transition off a progress value — drive it from scroll, from a slider, or from your own timeline. ambient is a settled three-strand loop for a hero backdrop. steps adds a labelled stage row: hovering a label dims every quarter of the ribbon but its own.

Drop-in

var fx = HelixFlow.init(el, { preset: "tighten" }); then fx.progress(0.6), fx.highlight(2), fx.destroy(). Zero dependencies, no assets, no network calls.