diff --git a/AGENTS.md b/AGENTS.md
index 8946176..4d5cf2c 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -175,7 +175,7 @@ change carries its speed as an index into that list, and it meant both
 durations at once. `checks.py` guards the constant the way it guarded
 the menu.
 
-## Ripple moves cells and density, not the field
+## Ripple is a post-pass and a painter, not a field motion
 
 Loop, Drift and Wind move where the field is sampled. Pulse and Ripple
 leave the field alone, which is why both work with no field strength
@@ -186,20 +186,31 @@ Ripple went through the field first and was invisible. A radial
 displacement of the sampling coordinates, at any amplitude short of
 mush, changes almost nothing a dither shows, because the dither stays
 put and only the shading under it shifts. A lateral wave and a zoom
-failed the same way. What reads is either changing how many cells fill
-(the crest's swell, as Pulse does) or moving the finished cells
-themselves (`rippleWarp`, which pulls each drawn cell along the
-water's slope, dither and all). Ripple does both, and the warp is what
-makes every texture move under it, traced ones included, so it needs
-no per-texture answer.
+failed the same way. What reads is changing the finished cells. Ripple
+does that in two places, neither of them `buildGrid`: `rippleSwell`
+grows and shrinks each finished layer's shapes by a cell along the
+rings, and `renderWarped` paints every pixel from the cell under the
+refracted point, at pixel resolution, so blocks stretch rather than
+step. A cell-level warp was tried between the two and stepped whole
+blocks, which is what the pixel painter replaced.
+
+Two things follow that a new consumer of `generate()` must know. It
+returns `warp` alongside the grids, null for every motion but Ripple,
+and `renderToCanvas` needs it passed through or a Ripple frame paints
+with the swell and no pull; every call site in the app and the
+explainers passes it. And the SVG exporter reads the grids only, which
+is right, because an SVG is a still.
 
 Ripple is rain: several seeded drops, each born at its own moment and
 living one cycle, summed where the rings cross. Each is periodic on its
 own so the sum closes, but rings are in flight at phase 0, so Ripple's
-first frame is not the still, as Drift's is not. The rings are
-evaluated on a lattice `RIPPLE_STEP` cells apart and interpolated;
-evaluating every drop at every cell put a frame far over the 80ms
-budget. Both layers share A's drops, B at 70% of the swell and pull.
+first frame is not the still, as Drift's is not. The preview passes
+`loopCycle`, and with it each drop lands somewhere new at every
+rebirth, when its ring is at zero; exports leave it out, so their rain
+repeats and the loop closes. The rings are evaluated on a lattice
+`RIPPLE_STEP` cells apart and interpolated; evaluating every drop at
+every cell put a frame far over the 80ms budget. Both layers share the
+one surface, B at 70% of the swell and pull.
 
 ## Tide is the one motion where the layers touch
 
@@ -226,6 +237,32 @@ way, so the slider worked and looked dead. The edge is now dithered
 over `CONTOUR_FEATHER` of a level and no more, so the same shift moves
 the line. Don't widen it to soften the look without watching it move.
 
+## Collide and per-layer motion
+
+Every motion is resolved per layer in `generate()`: a layer's `motion`
+of "same" follows `loopMode`, "none" holds it still, and a kind runs
+it, all on the one phase. Anything that reads "the" motion in the app
+must say which: `generalMotion()` is what `generate()` gets as
+`loopMode`, and `currentMotion()` is whether anything plays and what to
+call it, which a layer's own kind can answer when General is None.
+
+Collide is Tide's push under any motion: `tidePush` reads the pusher's
+field as it is that frame, on a lattice two cells apart, because under
+Loop, Drift, and Wind it is rebuilt every frame and a full-resolution
+gradient put a frame far over budget. Tide's own push is the still
+one, cached. Both go through the same `deform` hook.
+
+## Wind stands, Drift slides, and B circles the other way
+
+Wind's first octave holds still and only the finer octaves travel
+(`WIND_PARALLAX`), with the gust bending the lot; it used to slide
+like Drift with the gust on top, and the two were hard to tell apart.
+Under Loop, and in Wind's gust circle, layer B turns the opposite way
+(`LAYER_B_SPIN`), so the layers slide against each other; same-way
+circling read as one sway. Both are how a motion plays, not how a
+still looks, so links are untouched, but the Loop and Wind example
+clips were re-rendered for them.
+
 ## Six orthogonal controls drive animation
 
 Don't re-entangle them. **Motion** (General tab) is what a pass looks like,
@@ -272,7 +309,8 @@ field existed", because base64 pads the last byte with zeros and an old
 link's tail is read straight out of that padding. A tail that is all
 zeros is not written at all, though nothing leaves it empty today: the
 two durations are always written, so every new link is the same length
-(83 characters since depth and direction joined the tail).
+(84 characters since depth, direction, collide, and the layers'
+own motions joined the tail).
 
 The escape hatch is `COMPACT_VERSION`. Bumping it says the break is
 deliberate, and both checks stand down: the decoder refuses a version it
diff --git a/README.md b/README.md
index fe35384..60f27f2 100644
--- a/README.md
+++ b/README.md
@@ -29,9 +29,9 @@ no cut.
 
 <!-- HTML rather than a markdown table so the columns can be given equal
      widths; a markdown table sizes them by caption length, and the GIFs
-     scale to whatever each column ends up with. Two columns here against
-     the three below: each clip renders about half again as large, which
-     these need since the motion is the whole point of them. -->
+     scale to whatever each column ends up with. Two columns, so each
+     clip renders large, which these need since the motion is the whole
+     point of them. -->
 <table>
   <tr>
     <th width="50%">Loop</th>
@@ -42,8 +42,8 @@ no cut.
     <td width="50%"><img src="examples/drift.gif" width="100%" alt="Drift"></td>
   </tr>
   <tr>
-    <td width="50%">The flow field breathes around a small closed path and comes back where it started, so the stripes of this 8-way kaleidoscope sway in place.</td>
-    <td width="50%">The green bands slide one way along their flow direction and wrap into themselves, so they never jump; the sparse purple layer, with almost no field strength, holds still behind them.</td>
+    <td width="50%">Each layer's flow field breathes around a small closed path, the two turning opposite ways, so they sway against each other and come back where they started.</td>
+    <td width="50%">Orange bands slide one way and a cream nebula behind them slides the other, each along its own flow direction, and both wrap into themselves so they never jump.</td>
   </tr>
   <tr>
     <th width="50%">Wind</th>
@@ -54,8 +54,8 @@ no cut.
     <td width="50%"><img src="examples/pulse.gif" width="100%" alt="Pulse"></td>
   </tr>
   <tr>
-    <td width="50%">The yellow and magenta streaks travel the way Drift's do, but a much broader gust bends the field as they go, rising and settling once across the cycle, so the fine wisps run ahead of the bands they belong to.</td>
-    <td width="50%">Density swings on one sine wave, Layer B at 70% of the depth, so the streaks swell and thin without moving.</td>
+    <td width="50%">The broad streaks hold their ground while a much broader gust bends them, rising and settling once across the cycle, and their fine detail streams through along the flow.</td>
+    <td width="50%">Density swings on one sine wave, Layer B at 70% of the depth, so the contour lines swell and thin in weight and the streaks behind them breathe, without moving.</td>
   </tr>
   <tr>
     <th width="50%">Ripple</th>
@@ -66,31 +66,8 @@ no cut.
     <td width="50%"><img src="examples/tide.gif" width="100%" alt="Tide"></td>
   </tr>
   <tr>
-    <td width="50%">Rain: seven drops land at their own moments, and each ring bends and swells what it crosses, thins as it spreads, and adds where it meets another, while the field beneath never moves.</td>
-    <td width="50%">Each layer's field is pushed along the other's ridges, rising and settling once per cycle, so the blue and pink bands bend around each other and let go.</td>
-  </tr>
-</table>
-
-Three more, each thirteen Auto-randomize passes at a two-second interval,
-showing three ways to use the locks.
-
-<!-- Three equal columns, for the same reason as the table above: a
-     markdown table would size them by caption length instead. -->
-<table>
-  <tr>
-    <th width="33%">Full random</th>
-    <th width="33%">Brand campaign</th>
-    <th width="33%">Kaleidoscope variations</th>
-  </tr>
-  <tr>
-    <td width="33%"><img src="examples/full-random.gif" width="100%" alt="Full random"></td>
-    <td width="33%"><img src="examples/brand-campaign.gif" width="100%" alt="Brand campaign"></td>
-    <td width="33%"><img src="examples/kaleidoscope-variations.gif" width="100%" alt="Kaleidoscope variations"></td>
-  </tr>
-  <tr>
-    <td width="33%">Only block size and shape mask locked; every other field rerolls each pass.</td>
-    <td width="33%">Fine diagonal streaks fading toward the bottom, colors and flow locked to a brand palette; only density and stretch drift, for a set of on-brand variations.</td>
-    <td width="33%">A chunky 8-way kaleidoscope with symmetry, block size, density, and flow locked; seeds and colors reroll each pass, so every frame is a new pattern in the same language.</td>
+    <td width="50%">Rain on a marble: seven drops land at their own moments, and each ring bends and swells what it crosses, thins as it spreads, and adds where it meets another, while the field beneath never moves.</td>
+    <td width="50%">Each layer's field is pushed along the other's ridges, rising and settling once per cycle, so the strands are swept along the nebula behind them and the nebula bends around the strands.</td>
   </tr>
 </table>
 
@@ -136,6 +113,7 @@ of the sidebar or the end of the settings panel on a phone.
 - Plays on the canvas the moment you pick one, which is exactly what a GIF records
 - Separate sliders for how fast it moves and how often it rerolls, both from one second to sixteen, with the reroll stepping in doublings
 - Depth scales how far a motion goes, and Direction runs it backwards, so Drift and Wind can travel against the flow
+- Collide makes the layers push on each other under any motion, and each layer can run a motion of its own
 
 ### Exporting and sharing
 
diff --git a/animated-backgrounds/index.html b/animated-backgrounds/index.html
index 5127fa9..9226f30 100644
--- a/animated-backgrounds/index.html
+++ b/animated-backgrounds/index.html
@@ -179,7 +179,7 @@ <h2 id="motions">The six motions</h2>
         <button type="button" class="btn" id="playBtn">Pause</button>
         <button type="button" class="btn" id="rerollBtn">Reroll</button>
       </div>
-      <p class="demo-caption">Loop breathes around a closed path and returns where it started. Drift travels one way and wraps into itself. Wind travels and bends as it goes, like a gust crossing the frame. Pulse holds still and swells. Ripple drops rain on the surface and lets the rings cross. Tide bends each layer around the other's ridges and lets go.</p>
+      <p class="demo-caption">Loop breathes around a closed path and returns where it started, the two layers turning opposite ways. Drift travels one way and wraps into itself. Wind holds its ground while a gust bends it and fine detail streams through. Pulse holds still and swells. Ripple drops rain on the surface and lets the rings cross. Tide bends each layer around the other's ridges and lets go.</p>
     </div>
 
     <h2 id="length">How long a cycle lasts</h2>
@@ -188,7 +188,7 @@ <h2 id="length">How long a cycle lasts</h2>
 
     <p>An export uses that same number. A GIF records whole cycles. Set four seconds and you get a four second file. Drop it into a page and let it repeat.</p>
 
-    <p>Two more controls sit beside it. <strong>Depth</strong> is how far the motion goes, from a quarter of its usual reach to twice it. <strong>Direction</strong> runs the cycle backwards, which is how Drift and Wind travel against the flow without the still changing.</p>
+    <p>Three more controls sit beside it. <strong>Depth</strong> is how far the motion goes, from a quarter of its usual reach to twice it. <strong>Direction</strong> runs the cycle backwards, which is how Drift and Wind travel against the flow without the still changing. <strong>Collide</strong> makes the two layers push on each other while they move. And each layer tab has a Motion of its own, so one layer can loop while the other drifts.</p>
 
     <p>The slider starts at one second rather than lower. A cycle is one change of brightness across the whole frame, and one a second stays well under the three that <a href="https://www.w3.org/WAI/WCAG22/Understanding/three-flashes-or-below-threshold.html" target="_blank" rel="noopener">WCAG 2.3.1</a> allows. Worth keeping in mind for whatever you build with the file, too.</p>
 
@@ -295,7 +295,7 @@ <h2 id="try">Try it</h2>
     </footer>
   </main>
 
-  <script src="../generator.js?v=13"></script>
+  <script src="../generator.js?v=14"></script>
   <script>
     // Phosphor's own path data, the same two glyphs and the same
     // flield-theme key the app and the guide use, so a choice made on any
@@ -368,7 +368,7 @@ <h2 id="try">Try it</h2>
         loopMode: mode,
         loopPhase,
       };
-      const { gridA, gridB, cols, rows } = generate(options);
+      const { gridA, gridB, cols, rows, warp } = generate(options);
       renderToCanvas(canvas, {
         ...options,
         colorA: options.layerA.color,
@@ -377,6 +377,7 @@ <h2 id="try">Try it</h2>
         gridB,
         cols,
         rows,
+        warp,
       });
     }
 
diff --git a/examples/brand-campaign.gif b/examples/brand-campaign.gif
deleted file mode 100644
index 68f9bdc..0000000
Binary files a/examples/brand-campaign.gif and /dev/null differ
diff --git a/examples/drift.gif b/examples/drift.gif
index c90f557..d9a48da 100644
Binary files a/examples/drift.gif and b/examples/drift.gif differ
diff --git a/examples/full-random.gif b/examples/full-random.gif
deleted file mode 100644
index 1dc5d0d..0000000
Binary files a/examples/full-random.gif and /dev/null differ
diff --git a/examples/kaleidoscope-variations.gif b/examples/kaleidoscope-variations.gif
deleted file mode 100644
index cd2cf60..0000000
Binary files a/examples/kaleidoscope-variations.gif and /dev/null differ
diff --git a/examples/loop.gif b/examples/loop.gif
index c0d7af7..d30936d 100644
Binary files a/examples/loop.gif and b/examples/loop.gif differ
diff --git a/examples/pulse.gif b/examples/pulse.gif
index 615b662..c5a50ea 100644
Binary files a/examples/pulse.gif and b/examples/pulse.gif differ
diff --git a/examples/ripple.gif b/examples/ripple.gif
index 728a31d..2b60c90 100644
Binary files a/examples/ripple.gif and b/examples/ripple.gif differ
diff --git a/examples/tide.gif b/examples/tide.gif
index d744904..e3031e8 100644
Binary files a/examples/tide.gif and b/examples/tide.gif differ
diff --git a/examples/wind.gif b/examples/wind.gif
index 986304b..2a08924 100644
Binary files a/examples/wind.gif and b/examples/wind.gif differ
diff --git a/flow-fields/index.html b/flow-fields/index.html
index e825969..3153e63 100644
--- a/flow-fields/index.html
+++ b/flow-fields/index.html
@@ -296,7 +296,7 @@ <h2 id="try">Try it</h2>
     </footer>
   </main>
 
-  <script src="../generator.js?v=13"></script>
+  <script src="../generator.js?v=14"></script>
   <script>
     // Phosphor's own path data, the same two glyphs and the same
     // flield-theme key the app and the guide use, so a choice made on any
diff --git a/generator.js b/generator.js
index af9e18d..f5eb843 100644
--- a/generator.js
+++ b/generator.js
@@ -163,32 +163,39 @@ const PULSE_DEPTH = 0.4;
 // way round, and Ripple's rings would shrink toward their drops.
 const MOTION_DEPTH_DEFAULT = 1;
 
-// Wind loops travel like Drift but bend as they go, the way smoke or
-// long grass moves rather than a printed sheet sliding past. Two things
-// do it. A second, coarser noise field (WIND_WARP_SCALE times the
-// field's own frequency) warps where the field is sampled, by up to
-// WIND_WARP noise units at the peak; its strength follows a raised
-// cosine of the phase, zero at both ends, so the cycle opens and closes
-// on Drift's own first frame and the bending rises and settles once
-// per cycle like a gust.
+// Wind is weather passing over a standing field, the way a gust moves
+// long grass without moving the ground. Two things do it. A second,
+// coarser noise field (WIND_WARP_SCALE times the field's own
+// frequency) warps where the field is sampled, by up to WIND_WARP
+// noise units at the peak; its strength follows a raised cosine of the
+// phase, zero at both ends, so the cycle opens and closes on the same
+// frame and the bending rises and settles once per cycle like a gust.
 // The warp's own sampling origin circles WIND_WARP_RADIUS once per
 // cycle too, so the bends travel rather than swell in place. And every
-// octave past the first travels WIND_PARALLAX periods per cycle instead
-// of one, so fine detail runs ahead of the mass. Each octave still
-// covers a whole number of its wrap periods, so the loop closes.
+// octave past the first travels WIND_PARALLAX periods per cycle along
+// the flow axis while the first holds still, so fine detail streams
+// through the mass rather than the whole field sliding as Drift's
+// does. Wind used to slide too, and at a glance was Drift with extra
+// bending; with the mass held, the two read as different things. Each
+// travelling octave covers a whole number of its wrap periods, so the
+// loop closes, and the first octave reads the plain lattice, so Wind's
+// first frame is closer to the still than Drift's.
 const WIND_WARP = 0.5;
 const WIND_WARP_SCALE = 0.5;
 const WIND_WARP_RADIUS = 0.35;
 const WIND_PARALLAX = 2;
 
-// Layer B moves with layer A, not against it, the way two depths of one
-// flow field would: in Loop it circles the same way but starts an
-// eighth of a turn further round, so the two currents never point
-// exactly alike; in Pulse and Ripple it swings the same way at this
-// fraction of A's depth, and in Ripple under A's own drops. In Drift its heading and speed are already its
-// own (its flow angle, and its flow scale times stretch per cycle).
+// Layer B moves with layer A in Pulse and Ripple, swinging the same way
+// at this fraction of A's depth, and in Ripple under A's own drops; in
+// Drift its heading and speed are already its own (its flow angle, and
+// its flow scale times stretch per cycle). In Loop and in Wind's gust
+// it circles the other way, from a point an eighth of a turn round, so
+// the two layers slide against each other once per cycle rather than
+// swaying as one. It circled the same way at first, and Loop read as a
+// single sway.
 const LAYER_B_PHASE_OFFSET = Math.PI / 4;
 const LAYER_B_DEPTH = 0.7;
+const LAYER_B_SPIN = -1;
 
 // Gradient table as two flat arrays, indexed by hash & 7; the same eight
 // directions makePerlin uses.
@@ -197,17 +204,22 @@ const GRAD_Y = new Float64Array([0, 0, 1, -1, 1, 1, -1, -1]);
 
 // `deform`, when given, moves where each cell reads the field before
 // anything else happens to the coordinates: cell (x, y) reads from
-// (x, y) plus `deform.scale` times the vector at `deform.pull[(y *
-// deform.cols + x) * 2]`, in cells. It is how Tide bends one layer's
-// field with the other's (see TIDE_PULL), and it is null for every
-// other motion and every still, which keeps those bit-identical.
+// (x, y) plus `deform.scale` times the vector the pull lattice holds
+// for it, in cells. The lattice is `deform.step` cells apart and
+// `deform.cols` wide, read nearest (see TIDE_STEP). It is how Tide and
+// Collide bend one layer's field with the other's (see TIDE_PULL), and
+// it is null for every other motion and every still, which keeps those
+// bit-identical.
 // `depth` scales how far Loop's circle and Wind's gust go (see
 // MOTION_DEPTH); 1 is exactly the arithmetic without it.
-function getFlowField(seed, fillCols, fillRows, scale, angleRad, stretch, octaves, phase, mode, phaseOffset, warp, deform, depth) {
+// `spin` is the direction Loop's circle and Wind's gust circle turn:
+// 1, or LAYER_B_SPIN for layer B.
+function getFlowField(seed, fillCols, fillRows, scale, angleRad, stretch, octaves, phase, mode, phaseOffset, warp, deform, depth, spin) {
   const drift = mode === "drift";
   const wind = mode === "wind";
   const reach = depth > 0 ? depth : 1;
-  const key = `${seed}|${fillCols}|${fillRows}|${scale}|${angleRad}|${stretch}|${octaves}|${phase || 0}|${mode || ""}|${phaseOffset || 0}|${warp || 0}|${deform ? deform.key + "@" + deform.scale : ""}|${reach}`;
+  const turnSign = spin || 1;
+  const key = `${seed}|${fillCols}|${fillRows}|${scale}|${angleRad}|${stretch}|${octaves}|${phase || 0}|${mode || ""}|${phaseOffset || 0}|${warp || 0}|${deform ? deform.key + "@" + deform.scale : ""}|${reach}|${turnSign}`;
   const cached = fieldCache.get(key);
   if (cached) return cached;
 
@@ -240,12 +252,12 @@ function getFlowField(seed, fillCols, fillRows, scale, angleRad, stretch, octave
   const looping = drift || wind || (mode === "circle" && phase > 0 && phase < 1);
   const start = phaseOffset || 0;
   const radius = LOOP_RADIUS * reach;
-  const offX = !looping || wind ? 0 : drift ? (phase || 0) * DRIFT_PERIOD : radius * (Math.cos(2 * Math.PI * phase + start) - Math.cos(start));
-  const offY = !looping || drift || wind ? 0 : radius * (Math.sin(2 * Math.PI * phase + start) - Math.sin(start));
+  const offX = !looping || wind ? 0 : drift ? (phase || 0) * DRIFT_PERIOD : radius * (Math.cos(2 * Math.PI * phase * turnSign + start) - Math.cos(start));
+  const offY = !looping || drift || wind ? 0 : radius * (Math.sin(2 * Math.PI * phase * turnSign + start) - Math.sin(start));
   // Wind's gust (see WIND_WARP): the warp's strength this frame, and
   // where on its circle the warp field is sampled from. Layer B enters
   // the circle at its own start, like Loop.
-  const turn = 2 * Math.PI * (phase || 0);
+  const turn = 2 * Math.PI * (phase || 0) * turnSign;
   // `warp` is the same displacement held at a constant amount instead of
   // rising and falling with the phase, which is what the marble texture
   // is (see MARBLE_WARP). A wind gust adds to it rather than replacing
@@ -253,8 +265,6 @@ function getFlowField(seed, fillCols, fillRows, scale, angleRad, stretch, octave
   const gust = (wind ? (WIND_WARP * reach) * (1 - Math.cos(turn)) / 2 : 0) + (warp || 0);
   const gustX = wind ? WIND_WARP_RADIUS * (Math.cos(turn + start) - Math.cos(start)) : 0;
   const gustY = wind ? WIND_WARP_RADIUS * (Math.sin(turn + start) - Math.sin(start)) : 0;
-  // Both Drift and Wind wrap the lattice along the flow axis.
-  const wraps = drift || wind;
   // One gradient-noise sample off the same table, for the warp only;
   // the octave loop below keeps its own inlined copy of this arithmetic.
   const sample = (sx, sy) => {
@@ -283,6 +293,7 @@ function getFlowField(seed, fillCols, fillRows, scale, angleRad, stretch, octave
 
   const pull = deform ? deform.pull : null;
   const pullCols = deform ? deform.cols : 0;
+  const pullStep = deform ? deform.step : 1;
   const pullScale = deform ? deform.scale : 0;
   const values = new Float64Array(fillRows * fillCols);
   for (let y = 0; y < fillRows; y++) {
@@ -293,7 +304,7 @@ function getFlowField(seed, fillCols, fillRows, scale, angleRad, stretch, octave
       let px = x;
       let py = y;
       if (pull) {
-        const k = (y * pullCols + x) * 2;
+        const k = (((y / pullStep) | 0) * pullCols + ((x / pullStep) | 0)) * 2;
         px += pull[k] * pullScale;
         py += pull[k + 1] * pullScale;
       }
@@ -323,18 +334,20 @@ function getFlowField(seed, fillCols, fillRows, scale, angleRad, stretch, octave
       let amp = 1;
       let freq = 1;
       for (let o = 0; o < octaves; o++) {
-        // Wind: the first octave travels one period per cycle, the rest
-        // WIND_PARALLAX of theirs.
-        const sx = wind ? (bx + (phase || 0) * DRIFT_PERIOD * (o === 0 ? 1 : WIND_PARALLAX)) * freq : bx * freq;
+        // Wind: the first octave holds still, the rest travel
+        // WIND_PARALLAX periods per cycle.
+        const sx = wind ? (bx + (phase || 0) * DRIFT_PERIOD * (o === 0 ? 0 : WIND_PARALLAX)) * freq : bx * freq;
         const sy = by * freq;
         const flx = Math.floor(sx);
         const fly = Math.floor(sy);
-        // Drift and wind wrap the lattice along the flow axis so the
-        // field is periodic there (see DRIFT_PERIOD); circle mode and
-        // stills use the plain 256-entry wrap.
+        // Drift wraps the lattice along the flow axis so the field is
+        // periodic there (see DRIFT_PERIOD), and Wind wraps the octaves
+        // that travel; a still octave, circle mode, and stills use the
+        // plain 256-entry wrap.
+        const wrapThis = drift || (wind && o > 0);
         const period = DRIFT_PERIOD * freq;
-        const xi = wraps ? (((flx % period) + period) % period) & 255 : flx & 255;
-        const xi1 = wraps ? (((flx + 1) % period + period) % period) & 255 : xi + 1;
+        const xi = wrapThis ? (((flx % period) + period) % period) & 255 : flx & 255;
+        const xi1 = wrapThis ? (((flx + 1) % period + period) % period) & 255 : xi + 1;
         const yi = fly & 255;
         const xf = sx - flx;
         const yf = sy - fly;
@@ -611,26 +624,35 @@ const WEAVE_CROSS = Math.PI / 2;
 // closes; with drops in flight at every moment, the first frame is a
 // frame of rain rather than the still, as Drift's is its own.
 //
-// A ring does two things to the layer under it. It swings density, the
-// way Pulse does, so cells fill where the crest is and thin in the
-// trough, which is the glint on the water. And it moves the finished
-// cells: each cell of the drawn layer is pulled from where the water's
+// Unlike every other motion, Ripple never touches the field or the
+// fill. It works on the finished layers, in two passes. The swell
+// (rippleSwell) grows each layer's shapes by a cell along a crest and
+// shrinks them along a trough, dithered, which is the glint on the
+// water. The pull is applied when the cells are painted (see
+// renderToCanvas): every pixel reads its cell from where the water's
 // slope would refract it, by up to RIPPLE_WARP of a ring spacing, so
-// the picture itself bulges and settles as a ring passes, dither and
-// all. Neither touches the field, which is never recomputed for it
-// (see buildGrid), and both work on every texture and with no field
-// strength at all. Moving the field instead was tried first and is all
-// but invisible in a dither: the dither stays put and only the shading
-// under it shifts.
+// block edges slide smoothly and the blocks themselves stretch and
+// squash as a ring passes rather than stepping a cell at a time.
+// Moving the field instead was tried first and is all but invisible in
+// a dither: the dither stays put and only the shading under it shifts.
+// So a layer ripples with no field strength at all, and every texture
+// ripples the same way.
 //
-// The ring spacing follows the layer's flow scale, so the one slider
-// sets both the field's grain and the wave's. Drops are placed in
-// canvas coordinates and shared by both layers (see generate), so the
-// two ripple as one surface, with B moved less than A, as a deeper
-// layer would be; where A slides over B the cells B shows through
-// change, so the layers act on each other. A mirrored layer sees the
-// drops through its mirrors, and a tile gets its own rain.
-const RIPPLE_DEPTH = 0.5;
+// The ring spacing follows layer A's flow scale, and both layers share
+// the one surface: B is swelled and pulled less than A, as a deeper
+// layer would be, so where A slides over B the cells B shows through
+// change and the layers act on each other. The rain falls on the
+// canvas as a whole, so a mirrored layer's rings are not mirrored, the
+// way rain does not respect a mirror.
+//
+// Where the drops land is seeded, so a link reopens to the same rain,
+// and an export repeats it every cycle, which is what closes its loop.
+// The live preview passes `cycle`, the count of cycles elapsed, and
+// then each drop lands somewhere new every time it is reborn. Its ring
+// is at zero at that moment, so the move is invisible, and the rain
+// stops looking like the same seven drops falling in the same seven
+// places.
+const RIPPLE_DEPTH = 0.9;
 const RIPPLE_WARP = 0.15;
 const RIPPLE_DROPS = 7;
 // A packet's half-width, in its ring spacing, and how many of those out
@@ -652,39 +674,35 @@ const RIPPLE_WEIGHT = [0.5, 1];
 const RIPPLE_SPACING = [0.7, 1.3];
 const RIPPLE_TRAVEL = [0.5, 1.2];
 
-// The rain at this phase, read a row of the unique region at a time:
-// `waveRow(y)` fills the drops' rings summed across that row into
-// `wave`, each a signed swing in -1..1 times its weight, times
-// `amplitude`; `shiftRow(y)` fills the slope's pull into `shiftX` and
-// `shiftY`, in cells. Two calls rather than one because the fill pass
-// wants only the first and the warp pass only the second. The rings are
-// evaluated once on the lattice (see RIPPLE_STEP) and each row is read
-// off it; the first version evaluated every drop at every cell and put
-// a 1200 by 630 frame far over its budget. Null when there is no
-// swing.
-function makeRipple(seed, cols, rows, fillCols, fillRows, isTile, spacing, phase, amplitude) {
-  if (!(amplitude > 0)) return null;
-  const rand = seededRandom(seed + "|ripple");
-  const span = (range) => range[0] + rand() * (range[1] - range[0]);
-  const areaCols = isTile ? fillCols : cols;
-  const areaRows = isTile ? fillRows : rows;
-  const half = Math.hypot(areaCols, areaRows) / 2;
+// The rain at this phase over the whole canvas, on the lattice: the
+// drops' rings summed, each a signed swing in -1..1 times its weight,
+// in `gWave`, and the slope's pull in cells in `gShiftX` and `gShiftY`.
+// `waveRow(y, out)` reads one row of the wave off the lattice at cell
+// resolution; the painter reads the pull at pixel resolution itself.
+// Null when no drop is falling.
+function makeRipple(seed, cols, rows, spacing, phase, cycle) {
+  const half = Math.hypot(cols, rows) / 2;
   const lambda = Math.max(1, spacing);
   const drops = [];
   for (let i = 0; i < RIPPLE_DROPS; i++) {
-    const x = rand() * areaCols;
-    const y = rand() * areaRows;
     // Births spread evenly with a little play, so the rain is steady
     // rather than a burst; each drop's ring lives one whole cycle.
-    const born = (i + rand() * 0.6) / RIPPLE_DROPS;
+    const born = (i + seededRandom(`${seed}|ripple|${i}`)() * 0.6) / RIPPLE_DROPS;
+    // Which of this drop's lives is playing: always the first for an
+    // export, and the one the preview's clock says otherwise.
+    const life = Number.isFinite(cycle) ? Math.floor(cycle + phase - born) : 0;
+    const rand = seededRandom(`${seed}|ripple|${i}|${life}`);
+    const span = (range) => range[0] + rand() * (range[1] - range[0]);
+    const x = rand() * cols;
+    const y = rand() * rows;
     const weight = span(RIPPLE_WEIGHT);
     const ringSpacing = lambda * span(RIPPLE_SPACING);
     const travel = half * span(RIPPLE_TRAVEL);
     const age = phase - born - Math.floor(phase - born);
     const front = age * travel;
     // Lands fast, then fades to exactly nothing as it dies, so the ring
-    // is continuous across its own rebirth.
-    const gate = amplitude * weight * (1 - Math.exp(-age / RIPPLE_RISE)) * (1 - age);
+    // is continuous across its own rebirth, wherever it is reborn.
+    const gate = weight * (1 - Math.exp(-age / RIPPLE_RISE)) * (1 - age);
     const sigma = RIPPLE_WIDTH * ringSpacing;
     const edge = RIPPLE_REACH * sigma;
     drops.push({ x, y, front, gate, sigma, edge, lambda: ringSpacing, near: Math.max(0, front - edge), far: front + edge });
@@ -692,8 +710,8 @@ function makeRipple(seed, cols, rows, fillCols, fillRows, isTile, spacing, phase
   // The lattice: every ring's spacing is at least lambda times the
   // smallest spread, so the step is cut to keep four samples per ring.
   const step = Math.max(1, Math.min(RIPPLE_STEP, Math.floor((lambda * RIPPLE_SPACING[0]) / 4)));
-  const gw = Math.floor((fillCols - 1) / step) + 2;
-  const gh = Math.floor((fillRows - 1) / step) + 2;
+  const gw = Math.floor(cols / step) + 2;
+  const gh = Math.floor(rows / step) + 2;
   const gWave = new Float64Array(gw * gh);
   const gShiftX = new Float64Array(gw * gh);
   const gShiftY = new Float64Array(gw * gh);
@@ -735,62 +753,61 @@ function makeRipple(seed, cols, rows, fillCols, fillRows, isTile, spacing, phase
       }
     }
   }
-  const wave = new Float64Array(fillCols);
-  const shiftX = new Float64Array(fillCols);
-  const shiftY = new Float64Array(fillCols);
-  // Bilinear read of one lattice plane along row y into `out`.
-  const readRow = (plane, out, y) => {
-    const gy = Math.floor(y / step);
-    const fy = y / step - gy;
-    const r0 = gy * gw;
-    const r1 = r0 + gw;
-    for (let x = 0; x < fillCols; x++) {
-      const gx = Math.floor(x / step);
-      const fx = x / step - gx;
-      const a = r0 + gx;
-      const b = r1 + gx;
-      const top = plane[a] + (plane[a + 1] - plane[a]) * fx;
-      const bottom = plane[b] + (plane[b + 1] - plane[b]) * fx;
-      out[x] = top + (bottom - top) * fy;
-    }
-  };
   return {
-    wave,
-    shiftX,
-    shiftY,
-    waveRow(y) {
-      readRow(gWave, wave, y);
-    },
-    shiftRow(y) {
-      readRow(gShiftX, shiftX, y);
-      readRow(gShiftY, shiftY, y);
+    step,
+    gw,
+    gh,
+    gWave,
+    gShiftX,
+    gShiftY,
+    // Bilinear read of the wave along cell row y into `out`.
+    waveRow(y, out) {
+      const gy = Math.min(gh - 2, Math.floor(y / step));
+      const fy = y / step - gy;
+      const r0 = gy * gw;
+      const r1 = r0 + gw;
+      for (let x = 0; x < cols; x++) {
+        const gx = Math.min(gw - 2, Math.floor(x / step));
+        const fx = x / step - gx;
+        const a = r0 + gx;
+        const b = r1 + gx;
+        const top = gWave[a] + (gWave[a + 1] - gWave[a]) * fx;
+        const bottom = gWave[b] + (gWave[b + 1] - gWave[b]) * fx;
+        out[x] = top + (bottom - top) * fy;
+      }
     },
   };
 }
 
-// Moves the drawn cells of the unique region by the rain's pull, each
-// cell taking the cell the water would show there. Nearest cell rather
-// than a blend, since a cell is filled or not; so the picture holds
-// still until a ring's pull passes half a cell, then steps, which in a
-// dithered grid reads as the whole band bulging.
-function rippleWarp(grid, cols, fillCols, fillRows, ripple) {
+// The swell: along a crest, every empty cell beside a filled one fills
+// with a chance that follows the crest, and along a trough every filled
+// cell beside an empty one empties the same way, so shapes grow and
+// shrink by a cell as the ring passes, on every texture alike. Reads
+// the layer as it was before the pass, so a change is one cell deep
+// whatever the cell order, and its own random stream, so the layer's
+// own dither is untouched.
+function rippleSwell(grid, cols, rows, rain, amplitude, seed) {
+  const rand = seededRandom(seed + "|swell");
   const src = grid.slice();
-  for (let y = 0; y < fillRows; y++) {
-    ripple.shiftRow(y);
-    const shiftX = ripple.shiftX;
-    const shiftY = ripple.shiftY;
+  const wave = new Float64Array(cols);
+  for (let y = 0; y < rows; y++) {
+    rain.waveRow(y, wave);
     const row = y * cols;
-    for (let x = 0; x < fillCols; x++) {
-      const sxf = shiftX[x];
-      const syf = shiftY[x];
-      if (sxf === 0 && syf === 0) continue;
-      let sx = Math.round(x - sxf);
-      let sy = Math.round(y - syf);
-      if (sx < 0) sx = 0;
-      else if (sx >= fillCols) sx = fillCols - 1;
-      if (sy < 0) sy = 0;
-      else if (sy >= fillRows) sy = fillRows - 1;
-      grid[row + x] = src[sy * cols + sx];
+    for (let x = 0; x < cols; x++) {
+      const w = wave[x] * amplitude * RIPPLE_DEPTH;
+      if (w === 0) continue;
+      const i = row + x;
+      if (w > 0) {
+        if (src[i]) continue;
+        const beside =
+          (x > 0 && src[i - 1]) || (x < cols - 1 && src[i + 1]) || (y > 0 && src[i - cols]) || (y < rows - 1 && src[i + cols]);
+        if (beside && rand() < w) grid[i] = 1;
+      } else {
+        if (!src[i]) continue;
+        const beside =
+          (x > 0 && !src[i - 1]) || (x < cols - 1 && !src[i + 1]) || (y > 0 && !src[i - cols]) || (y < rows - 1 && !src[i + cols]);
+        if (beside && rand() < -w) grid[i] = 0;
+      }
     }
   }
 }
@@ -814,18 +831,28 @@ function rippleWarp(grid, cols, fillCols, fillRows, ripple) {
 //
 // The other layer's gradient is normalised by its own typical size and
 // clamped, so a sharp ridge pushes no harder than TIDE_CLAMP times a
-// typical one and nothing tears. It depends on nothing that moves, so
-// it is built once per composition and scaled by the gate each frame.
+// typical one and nothing tears. Under Tide the pusher's field is the
+// still, so the push is built once per composition and cached; under
+// Collide (see generate) the pusher may be moving, and then the push is
+// rebuilt every frame, which is why it is sampled on a lattice
+// TIDE_STEP cells apart rather than at every cell. The push varies
+// over a flow scale, never over two cells, so the lattice misses
+// nothing, and a frame under Loop with Collide costs about what Loop
+// alone does.
 const TIDE_PULL = 0.45;
 const TIDE_CLAMP = 1.5;
+const TIDE_STEP = 2;
 const TIDE_CACHE_LIMIT = 4;
 const tideCache = new Map();
 
-// A layer's still field as the canvas shows it: sampled over its unique
-// region, then carried round by the same symmetry passes its cells
-// get. The mirror passes index any typed array, so they serve here as
-// they serve the grid.
-function fieldOnCanvas(layer, cols, rows, blockSize) {
+// A layer's field as the canvas shows it at a phase of a motion:
+// sampled over its unique region, then carried round by the same
+// symmetry passes its cells get. The mirror passes index any typed
+// array, so they serve here as they serve the grid. Sampled every
+// `step` cells, so `cols` and `rows` here are the lattice's; the noise
+// is read at the same coordinates a full sample would read at those
+// cells, since the sampling scale shrinks with the step.
+function fieldOnCanvas(layer, cols, rows, blockSize, step, phase, mode, phaseOffset, depth, spin) {
   const symmetry = layer.symmetry;
   const isTile = symmetry === "tile";
   const fillCols = isTile
@@ -840,7 +867,7 @@ function fieldOnCanvas(layer, cols, rows, blockSize) {
   const stretch = isParticleTexture(layer.texture) ? 1 : field.stretch;
   const warp = layer.texture === "marble" ? MARBLE_WARP : 0;
   const values = field.strength > 0
-    ? getFlowField(layer.seed, fillCols, fillRows, field.scale / blockSize, (field.angle * Math.PI) / 180, stretch, field.octaves, 0, null, 0, warp)
+    ? getFlowField(layer.seed, fillCols, fillRows, field.scale / blockSize / step, (field.angle * Math.PI) / 180, stretch, field.octaves, phase || 0, mode || null, phaseOffset || 0, warp, null, depth, spin)
     : null;
   const full = new Float64Array(cols * rows);
   if (!values) return full;
@@ -855,15 +882,21 @@ function fieldOnCanvas(layer, cols, rows, blockSize) {
   return full;
 }
 
-// The push a layer exerts on every cell of the canvas: its field's
-// gradient, normalised and clamped as above, two numbers a cell in
-// cells per unit of scale. Cached on everything it depends on.
-function tidePush(layer, cols, rows, blockSize) {
+// The push a layer exerts on the canvas: its field's gradient on the
+// TIDE_STEP lattice, normalised and clamped as above, two numbers a
+// lattice cell. `phase`, `mode`, `phaseOffset` and `depth` say where
+// in which motion the pusher's field is; a still push is cached on
+// everything it depends on, a moving one is rebuilt each frame.
+function tidePush(layer, canvasCols, canvasRows, blockSize, phase, mode, phaseOffset, depth, spin) {
   const field = layerOptionsToField(layer);
-  const key = `${layer.seed}|${cols}|${rows}|${blockSize}|${layer.symmetry}|${layer.texture}|${field.strength}|${field.scale}|${field.angle}|${field.stretch}|${field.octaves}`;
-  const cached = tideCache.get(key);
+  const step = TIDE_STEP;
+  const cols = Math.ceil(canvasCols / step);
+  const rows = Math.ceil(canvasRows / step);
+  const moving = !!mode && phase > 0;
+  const key = `${layer.seed}|${canvasCols}|${canvasRows}|${blockSize}|${layer.symmetry}|${layer.texture}|${field.strength}|${field.scale}|${field.angle}|${field.stretch}|${field.octaves}|${moving ? phase : 0}|${mode || ""}|${phaseOffset || 0}|${depth || 1}`;
+  const cached = moving ? null : tideCache.get(key);
   if (cached) return cached;
-  const values = fieldOnCanvas(layer, cols, rows, blockSize);
+  const values = fieldOnCanvas(layer, cols, rows, blockSize, step, phase, mode, phaseOffset, depth, spin);
   const pull = new Float64Array(cols * rows * 2);
   let total = 0;
   for (let y = 0; y < rows; y++) {
@@ -893,7 +926,8 @@ function tidePush(layer, cols, rows, blockSize) {
     pull[k] = gx;
     pull[k + 1] = gy;
   }
-  const push = { key, cols, pull };
+  const push = { key, cols, step, pull };
+  if (moving) return push;
   if (tideCache.size >= TIDE_CACHE_LIMIT) tideCache.delete(tideCache.keys().next().value);
   tideCache.set(key, push);
   return push;
@@ -1025,7 +1059,7 @@ function drawStreamlines(grid, cols, {
 // "kaleidoscope" composes all three: the unique quadrant gets a diagonal
 // mirror first, then that quadrant is mirrored out horizontally and
 // vertically, producing 8-way symmetry.
-function buildGrid({ seed, cols, rows, density, symmetry, smoothPasses, field, blockSize, phase, loopMode, phaseOffset, texture, trailScale, rippleDepth, rippleSeed, deform, depth }) {
+function buildGrid({ seed, cols, rows, density, symmetry, smoothPasses, field, blockSize, phase, loopMode, phaseOffset, texture, trailScale, deform, depth, spin }) {
   // mulberry32 inlined (see the function of that name above for the
   // readable form): the same state update and output arithmetic, so the
   // sequence is identical, minus a closure call per cell.
@@ -1053,9 +1087,6 @@ function buildGrid({ seed, cols, rows, density, symmetry, smoothPasses, field, b
   const fieldMode = !movesField || (streaming && loopMode === "drift") ? null : loopMode;
   const fieldPhase = fieldMode ? phase : 0;
   const hasField = field && field.strength > 0;
-  const ripple = loopMode === "ripple"
-    ? makeRipple(rippleSeed, cols, rows, fillCols, fillRows, isTile, field.scale / blockSize, phase, rippleDepth)
-    : null;
 
   if (streaming) {
     // field.scale is in canvas pixels, as below, and flow stretch is
@@ -1065,7 +1096,7 @@ function buildGrid({ seed, cols, rows, density, symmetry, smoothPasses, field, b
     const scaleCells = field.scale / blockSize;
     const angleRad = (field.angle * Math.PI) / 180;
     const values = field.strength > 0
-      ? getFlowField(seed, fillCols, fillRows, scaleCells, angleRad, 1, field.octaves, fieldPhase, fieldMode, phaseOffset, 0, deform, depth)
+      ? getFlowField(seed, fillCols, fillRows, scaleCells, angleRad, 1, field.octaves, fieldPhase, fieldMode, phaseOffset, 0, deform, depth, spin)
       : null;
     const countCells = Math.max(2, Math.round(field.stretch * scaleCells * STREAM_TRAIL));
     const woven = texture === "weave";
@@ -1101,7 +1132,7 @@ function buildGrid({ seed, cols, rows, density, symmetry, smoothPasses, field, b
     // NEBULA_PIVOT for the two profiles.
     const values = getFlowField(
       seed, fillCols, fillRows, field.scale / blockSize, (field.angle * Math.PI) / 180,
-      field.stretch, field.octaves, fieldPhase, fieldMode, phaseOffset, 0, deform, depth
+      field.stretch, field.octaves, fieldPhase, fieldMode, phaseOffset, 0, deform, depth, spin
     );
     // Never fewer than one level: below that the field's whole range
     // sits within reach of the zero line and the layer goes solid,
@@ -1110,12 +1141,10 @@ function buildGrid({ seed, cols, rows, density, symmetry, smoothPasses, field, b
     for (let y = 0; y < fillRows; y++) {
       const row = y * cols;
       const frow = y * fillCols;
-      const wave = ripple ? (ripple.waveRow(y), ripple.wave) : null;
       for (let x = 0; x < fillCols; x++) {
         const t = values[frow + x] * levels;
         const d = Math.abs(t - Math.round(t));
-        // Ripple swings the line weight, which is what density is here.
-        const half = (wave ? Math.min(1, Math.max(0, density * (1 + RIPPLE_DEPTH * wave[x]))) : density) / 2;
+        const half = density / 2;
         const p = Math.min(1, Math.max(0, (half + CONTOUR_FEATHER / 2 - d) / CONTOUR_FEATHER));
         rngState = (rngState + 0x6d2b79f5) | 0;
         let r = Math.imul(rngState ^ (rngState >>> 15), 1 | rngState);
@@ -1126,7 +1155,7 @@ function buildGrid({ seed, cols, rows, density, symmetry, smoothPasses, field, b
   } else if (texture === "nebula" && hasField) {
     const values = getFlowField(
       seed, fillCols, fillRows, field.scale / blockSize, (field.angle * Math.PI) / 180,
-      field.stretch, field.octaves, fieldPhase, fieldMode, phaseOffset, 0, deform, depth
+      field.stretch, field.octaves, fieldPhase, fieldMode, phaseOffset, 0, deform, depth, spin
     );
     const gain = field.strength * FIELD_GAIN * NEBULA_GAIN;
     let total = 0;
@@ -1135,12 +1164,9 @@ function buildGrid({ seed, cols, rows, density, symmetry, smoothPasses, field, b
     for (let y = 0; y < fillRows; y++) {
       const row = y * cols;
       const frow = y * fillCols;
-      const wave = ripple ? (ripple.waveRow(y), ripple.wave) : null;
       for (let x = 0; x < fillCols; x++) {
         const n = values[frow + x];
-        let bias = density + gain * (pivot - (n < 0 ? -n : n));
-        if (wave) bias += density * RIPPLE_DEPTH * wave[x];
-        const p = Math.min(1, Math.max(0, bias));
+        const p = Math.min(1, Math.max(0, density + gain * (pivot - (n < 0 ? -n : n))));
         rngState = (rngState + 0x6d2b79f5) | 0;
         let r = Math.imul(rngState ^ (rngState >>> 15), 1 | rngState);
         r = (r + Math.imul(r ^ (r >>> 7), 61 | r)) ^ r;
@@ -1165,19 +1191,15 @@ function buildGrid({ seed, cols, rows, density, symmetry, smoothPasses, field, b
       phaseOffset,
       texture === "marble" ? MARBLE_WARP : 0,
       deform,
-      depth
+      depth,
+      spin
     );
     const gain = field.strength * FIELD_GAIN;
     for (let y = 0; y < fillRows; y++) {
       const row = y * cols;
       const frow = y * fillCols;
-      const wave = ripple ? (ripple.waveRow(y), ripple.wave) : null;
       for (let x = 0; x < fillCols; x++) {
-        // Without a ripple this is the arithmetic streaks has always
-        // done, in the same order, so its cells stay bit-identical.
-        let bias = density + gain * values[frow + x];
-        if (wave) bias += density * RIPPLE_DEPTH * wave[x];
-        const p = Math.min(1, Math.max(0, bias));
+        const p = Math.min(1, Math.max(0, density + gain * values[frow + x]));
         rngState = (rngState + 0x6d2b79f5) | 0;
         let r = Math.imul(rngState ^ (rngState >>> 15), 1 | rngState);
         r = (r + Math.imul(r ^ (r >>> 7), 61 | r)) ^ r;
@@ -1187,13 +1209,11 @@ function buildGrid({ seed, cols, rows, density, symmetry, smoothPasses, field, b
   } else {
     for (let y = 0; y < fillRows; y++) {
       const row = y * cols;
-      const wave = ripple ? (ripple.waveRow(y), ripple.wave) : null;
       for (let x = 0; x < fillCols; x++) {
-        const p = wave ? Math.min(1, Math.max(0, density * (1 + RIPPLE_DEPTH * wave[x]))) : density;
         rngState = (rngState + 0x6d2b79f5) | 0;
         let r = Math.imul(rngState ^ (rngState >>> 15), 1 | rngState);
         r = (r + Math.imul(r ^ (r >>> 7), 61 | r)) ^ r;
-        grid[row + x] = ((r ^ (r >>> 14)) >>> 0) / 4294967296 < p ? 1 : 0;
+        grid[row + x] = ((r ^ (r >>> 14)) >>> 0) / 4294967296 < density ? 1 : 0;
       }
     }
   }
@@ -1213,11 +1233,6 @@ function buildGrid({ seed, cols, rows, density, symmetry, smoothPasses, field, b
     }
   }
 
-  // After smoothing, so shapes move whole rather than being smoothed
-  // after they were bent, and before the mirrors, which then carry the
-  // bulge round with everything else.
-  if (ripple) rippleWarp(grid, cols, fillCols, fillRows, ripple);
-
   if (symmetry === "diagonal" || symmetry === "kaleidoscope") {
     mirrorDiagonal(grid, cols, fillCols, fillRows);
   }
@@ -1262,13 +1277,25 @@ let scratchCanvas = null;
 // smoothing off, so each cell lands as a crisp blockSize square. Two
 // draw calls regardless of grid size, versus one fillRect per filled
 // cell before, which was most of a render's time at fine block sizes.
-function renderToCanvas(canvas, { width, height, blockSize, bgColor, colorA, colorB, gridA, gridB, cols, rows }) {
+//
+// `warp` is what generate() returns for a Ripple frame (see
+// RIPPLE_WARP): with it, every pixel is painted from the cell the
+// water's slope would show there, read at pixel rather than cell
+// resolution, so block edges slide and the blocks stretch. Callers
+// that build their own render options must pass it through, or a
+// Ripple frame paints with the swell and no pull.
+function renderToCanvas(canvas, { width, height, blockSize, bgColor, colorA, colorB, gridA, gridB, cols, rows, warp }) {
   canvas.width = width;
   canvas.height = height;
   const ctx = canvas.getContext("2d");
   ctx.fillStyle = bgColor;
   ctx.fillRect(0, 0, width, height);
 
+  if (warp) {
+    renderWarped(ctx, { blockSize, bgColor, colorA, colorB, gridA, gridB, cols, rows, warp });
+    return;
+  }
+
   if (!scratchCanvas) scratchCanvas = document.createElement("canvas");
   if (scratchCanvas.width !== cols || scratchCanvas.height !== rows) {
     scratchCanvas.width = cols;
@@ -1289,6 +1316,64 @@ function renderToCanvas(canvas, { width, height, blockSize, bgColor, colorA, col
   ctx.drawImage(scratchCanvas, 0, 0, cols, rows, 0, 0, cols * blockSize, rows * blockSize);
 }
 
+// The Ripple painter: one 32-bit write per pixel of the composition,
+// each read from the cell under the refracted point. The pull is read
+// off the rain's lattice by bilinear interpolation at every pixel, so
+// it varies within a block, which is what lets a block stretch.
+function renderWarped(ctx, { blockSize, bgColor, colorA, colorB, gridA, gridB, cols, rows, warp }) {
+  const width = cols * blockSize;
+  const height = rows * blockSize;
+  const image = ctx.createImageData(width, height);
+  const pixels = new Uint32Array(image.data.buffer);
+  const bg = packColor(bgColor);
+  const a = packColor(colorA);
+  const b = packColor(colorB);
+  const { step, gw, gh, gShiftX, gShiftY } = warp.rain;
+  const pullA = warp.pullA;
+  const pullB = warp.pullB;
+  const maxX = cols - 1;
+  const maxY = rows - 1;
+  for (let py = 0; py < height; py++) {
+    const cy = (py + 0.5) / blockSize;
+    const gy = Math.min(gh - 2, Math.floor(cy / step));
+    const fy = cy / step - gy;
+    const r0 = gy * gw;
+    const r1 = r0 + gw;
+    const prow = py * width;
+    for (let px = 0; px < width; px++) {
+      const cx = (px + 0.5) / blockSize;
+      const gx = Math.min(gw - 2, Math.floor(cx / step));
+      const fx = cx / step - gx;
+      const i0 = r0 + gx;
+      const i1 = r1 + gx;
+      const topX = gShiftX[i0] + (gShiftX[i0 + 1] - gShiftX[i0]) * fx;
+      const botX = gShiftX[i1] + (gShiftX[i1 + 1] - gShiftX[i1]) * fx;
+      const sx = topX + (botX - topX) * fy;
+      const topY = gShiftY[i0] + (gShiftY[i0 + 1] - gShiftY[i0]) * fx;
+      const botY = gShiftY[i1] + (gShiftY[i1 + 1] - gShiftY[i1]) * fx;
+      const sy = topY + (botY - topY) * fy;
+      let ax = (cx - sx * pullA) | 0;
+      let ay = (cy - sy * pullA) | 0;
+      if (ax < 0) ax = 0;
+      else if (ax > maxX) ax = maxX;
+      if (ay < 0) ay = 0;
+      else if (ay > maxY) ay = maxY;
+      if (gridA[ay * cols + ax]) {
+        pixels[prow + px] = a;
+        continue;
+      }
+      let bx = (cx - sx * pullB) | 0;
+      let by = (cy - sy * pullB) | 0;
+      if (bx < 0) bx = 0;
+      else if (bx > maxX) bx = maxX;
+      if (by < 0) by = 0;
+      else if (by > maxY) by = maxY;
+      pixels[prow + px] = gridB[by * cols + bx] ? b : bg;
+    }
+  }
+  ctx.putImageData(image, 0, 0);
+}
+
 // Merges a grid's filled cells into rectangles instead of one <rect> per
 // cell: first collapses each row into horizontal runs of consecutive
 // filled cells, then extends a run's rect downward through following
@@ -1583,6 +1668,16 @@ function layerOptionsToField(layer) {
 // each layer's field with the other's; and a streamlines layer runs its
 // particles under drift and wind, so that one moves whether it has a
 // field to bend it or not.
+//
+// A layer's own `motion` overrides the kind for that layer: "same" (or
+// absent) follows `options.loopMode`, "none" holds it still, any kind
+// runs it. One phase and one cycle drive both layers whatever they
+// run. `options.collide` (0 to 1) makes the layers push on each other
+// under whatever they are running, by that fraction of Tide's push,
+// rising and settling once per cycle as Tide does; the pusher's field
+// is read as it is that frame, so under Loop, Drift, and Wind the two
+// flows bend each other as they move. Tide is Collide at full with
+// nothing else moving, and takes no more from the slider.
 function generate(options) {
   // Floor rather than ceil, so cols/rows * blockSize never exceeds the
   // canvas: a block that only partly fit would otherwise get clipped
@@ -1592,28 +1687,43 @@ function generate(options) {
   const cols = Math.max(1, Math.floor(options.width / options.blockSize));
   const rows = Math.max(1, Math.floor(options.height / options.blockSize));
 
-  const mode = options.loopMode;
+  const mode = options.loopMode === "none" ? undefined : options.loopMode;
   const forward = options.loopPhase || 0;
   const phase = options.direction === "reverse" && forward > 0 ? 1 - forward : forward;
   const reach = options.depth > 0 ? options.depth : MOTION_DEPTH_DEFAULT;
   const wave = Math.sin(2 * Math.PI * phase);
-  // Tide's gate: zero at both ends of the cycle, so null there and the
-  // still is exactly the still. Each layer is pushed by the other's
-  // field, by TIDE_PULL of its own flow scale at the peak.
-  const tideGate = mode === "tide" ? (1 - Math.cos(2 * Math.PI * phase)) / 2 : 0;
-  const tideDeform = (pushedBy, layer) => {
-    if (!(tideGate > 0)) return null;
-    const push = tidePush(pushedBy, cols, rows, options.blockSize);
-    return { key: push.key, cols: push.cols, pull: push.pull, scale: (tideGate * TIDE_PULL * reach * layer.fieldScale) / options.blockSize };
+  // Each layer's own kind, resolved (see the note above generate).
+  const modeFor = (layer) => (!layer.motion || layer.motion === "same" ? mode : layer.motion === "none" ? undefined : layer.motion);
+  const modeA = modeFor(options.layerA);
+  const modeB = modeFor(options.layerB);
+  const movesField = (m) => m === "circle" || m === "drift" || m === "wind";
+  // The push's gate: zero at both ends of the cycle, so null there and
+  // the still is exactly the still. Tide pushes at full; anything else
+  // that moves pushes by the Collide fraction. Each layer is pushed by
+  // the other's field as it is this frame, by TIDE_PULL of its own flow
+  // scale at the peak.
+  const collide = options.collide > 0 ? Math.min(1, options.collide) : 0;
+  const pushOf = (m) => (m === "tide" ? 1 : m ? collide : 0);
+  const gate = (1 - Math.cos(2 * Math.PI * phase)) / 2;
+  const tideDeform = (pushedBy, pushedByIsB, layer, layerMode) => {
+    const strength = pushOf(layerMode) * gate;
+    if (!(strength > 0)) return null;
+    // The pusher's field this frame: moving under Loop, Drift, and
+    // Wind, except that a traced layer under Drift steers by the still.
+    const pusherMode = modeFor(pushedBy);
+    const fieldMode = movesField(pusherMode) && !(isParticleTexture(pushedBy.texture) && pusherMode === "drift") ? pusherMode : null;
+    const push = tidePush(pushedBy, cols, rows, options.blockSize, fieldMode ? phase : 0, fieldMode, pushedByIsB ? LAYER_B_PHASE_OFFSET : 0, reach, pushedByIsB ? LAYER_B_SPIN : 1);
+    return { key: push.key, cols: push.cols, step: push.step, pull: push.pull, scale: (strength * TIDE_PULL * reach * layer.fieldScale) / options.blockSize };
   };
   // See LAYER_B_PHASE_OFFSET / LAYER_B_DEPTH: B moves with A, offset
   // and gentler, rather than in lockstep or against it.
   const buildLayer = (layer, isB) => {
     const depth = isB ? LAYER_B_DEPTH : 1;
+    const layerMode = isB ? modeB : modeA;
     const field = layerOptionsToField(layer);
     let density = layer.density;
     let trailScale = 1;
-    if (mode === "pulse") {
+    if (layerMode === "pulse") {
       // Pulse swells a streaks layer by swinging its density. On a
       // streamlines layer the same swing goes to trail length instead:
       // adding particles pops whole strands into existence, and growing
@@ -1631,22 +1741,33 @@ function generate(options) {
       field,
       blockSize: options.blockSize,
       phase,
-      loopMode: mode,
+      loopMode: layerMode,
       phaseOffset: isB ? LAYER_B_PHASE_OFFSET : 0,
       texture: layer.texture,
       trailScale,
-      // B's drops are A's, so the two layers ripple as one surface, at
-      // the same depth Pulse gives B.
-      rippleDepth: mode === "ripple" ? depth * reach : 0,
-      rippleSeed: options.layerA.seed,
-      deform: tideDeform(isB ? options.layerA : options.layerB, layer),
+      deform: tideDeform(isB ? options.layerA : options.layerB, !isB, layer, layerMode),
       depth: reach,
+      spin: isB ? LAYER_B_SPIN : 1,
     });
   };
 
   const gridA = buildLayer(options.layerA, false);
   const gridB = buildLayer(options.layerB, true);
 
+  // Ripple works on the finished layers (see RIPPLE_DEPTH): the swell
+  // here, and the pull when they are painted, through `warp`. The rain
+  // is one surface for both, keyed on A's seed and spaced by A's flow
+  // scale, with B at the depth Pulse gives it.
+  const rain = modeA === "ripple" || modeB === "ripple"
+    ? makeRipple(options.layerA.seed, cols, rows, options.layerA.fieldScale / options.blockSize, phase, options.loopCycle)
+    : null;
+  const pullA = modeA === "ripple" ? reach : 0;
+  const pullB = modeB === "ripple" ? reach * LAYER_B_DEPTH : 0;
+  if (rain) {
+    if (pullA) rippleSwell(gridA, cols, rows, rain, pullA, options.layerA.seed);
+    if (pullB) rippleSwell(gridB, cols, rows, rain, pullB, options.layerB.seed);
+  }
+
   applyShapeMask(gridA, cols, rows, options.shapeMask, options.layerA.seed, options.shapeMaskDirection);
   applyShapeMask(gridB, cols, rows, options.shapeMask, options.layerB.seed, options.shapeMaskDirection);
 
@@ -1654,5 +1775,9 @@ function generate(options) {
     if (gridA[i]) gridB[i] = 0;
   }
 
-  return { gridA, gridB, cols, rows };
+  // `warp` is null for everything but Ripple. renderToCanvas reads it;
+  // the SVG and any other consumer of the grids ignore it and get the
+  // unpulled cells, which is the layer as generated.
+  const warp = rain ? { rain, pullA, pullB } : null;
+  return { gridA, gridB, cols, rows, warp };
 }
diff --git a/guide/index.html b/guide/index.html
index 6e4c8d1..bba9f31 100644
--- a/guide/index.html
+++ b/guide/index.html
@@ -232,14 +232,16 @@ <h3>Texture</h3>
     <p>Motion reaches the two traced textures a little differently. Under <strong>Drift</strong> and <strong>Wind</strong>, their particles run along the field instead of the field sliding underneath them. Under <strong>Pulse</strong>, the trails lengthen and shorten instead of the density swinging. That breathes, rather than popping whole strands in and out. Under <strong>Ripple</strong>, the rings bend the strands as they pass, the same way they bend everything else. Under <strong>Tide</strong>, the strands are swept along the other layer's ridges.</p>
     <p>Read <a href="../flow-fields/">what is a flow field?</a> for the arrow grid drawn out beside the strands it produces.</p>
 
-    <h3>Speed, depth, direction, and interval</h3>
+    <h3>Speed, depth, direction, collide, and interval</h3>
     <p>Two sliders in the General tab, on one scale that gives the fast end as much travel as the slow one. Both start at one second and run up to sixteen. <strong>Reroll every</strong> steps in doublings, because a reroll cadence is a choice between a few speeds rather than something to dial in.</p>
     <p><strong>Speed</strong> is how long a motion takes to come back round. It appears under Motion once you have picked one, since there is no cycle to time before that. <strong>Reroll every</strong>, under its own heading, is how long Auto-randomize waits before it rerolls.</p>
     <p><strong>Depth</strong>, under Speed, is how far a motion goes, from a quarter of its usual reach to twice it. It scales Loop's circle, Wind's gust, Pulse's swing, Ripple's swell and pull, and Tide's push. Drift is the one it leaves alone. Drift travels exactly one period, which is what makes its loop close, so any other distance would break it.</p>
+    <p><strong>Collide</strong> makes the two layers push on each other under whatever is running. Each layer's field is bent along the ridges of the other layer's field as it is that frame, so under Loop, Drift, and Wind the two flows bend each other as they move. The slider is how hard, from off up to Tide's full push. It rises and settles once per cycle like Tide, so the still is untouched and the cycle still closes.</p>
+    <p>Each layer tab has a <strong>Motion</strong> of its own, set to follow the General tab unless you change it. Set one layer to Loop and the other to Pulse, or hold one still while the other drifts. Both run on the one Speed, and Collide reaches across them whatever each is doing. Choosing a Motion on the General tab puts both layers back to following it.</p>
     <p><strong>Direction</strong> runs the cycle forwards or backwards. Drift and Wind show it plainly, since reversed they travel against the flow direction without the still changing. Turning the layer's Flow direction round would change the picture, and this does not. Pulse and Tide look the same either way, Loop circles the other way round, and Ripple's rings shrink toward their drops.</p>
     <p>They are separate because they answer different questions. A composition that drifts slowly while rerolling quickly is a perfectly reasonable thing to want.</p>
     <p>An export has to reconcile them in the one case where both are running. There, a pass is a whole motion cycle rather than a reroll interval. The seam that makes a GIF loop is the cycle's own end, so cutting one short at the reroll would be the wrong trade. With Motion off there is no cycle, and a pass is one still held for the reroll interval.</p>
-    <p>All four travel in every shared link. A link to a moving composition arrives at the speed, depth, and direction it was made at, whether or not it offers to play.</p>
+    <p>All of these travel in every shared link. A link to a moving composition arrives at the speed, depth, direction, collide, and each layer's own motion it was made at, whether or not it offers to play.</p>
 
     <h3>Sliders</h3>
     <p>The click and drag target reaches well past the thin line you see, so grabbing a slider doesn't take a precise hit.</p>
@@ -324,32 +326,6 @@ <h2 id="auto">Exploring an art direction with Auto-randomize</h2>
     </ol>
     <p>What comes through is a run of variations that share the same underlying structure, small differences in fill and texture on a shape that stays recognizable. It reads less like random noise and more like a designer trying variations on one idea.</p>
 
-    <!-- The section describing the core workflow had no picture of it. These
-         three are that workflow run three ways, each a different answer to
-         step 2, so what changes between them is the lock set rather than the
-         settings. Lazy, like every clip below. -->
-    <p>Three examples, each a long run at a two-second interval. The only thing that differs between them is what was locked.</p>
-
-    <h3>Full random</h3>
-    <figure class="shot">
-      <img src="../examples/full-random.gif" width="1200" height="630" loading="lazy" decoding="async"
-           alt="Full random: every pass produces an unrelated composition, with colors, density, flow, and symmetry all changing at once." />
-      <figcaption>Only block size and shape mask locked. Every other field rerolls each pass.</figcaption>
-    </figure>
-
-    <h3>Brand campaign</h3>
-    <figure class="shot">
-      <img src="../examples/brand-campaign.gif" width="1200" height="630" loading="lazy" decoding="async"
-           alt="Brand campaign: fine diagonal streaks in a fixed palette, fading toward the bottom, where only the density and stretch shift between passes." />
-      <figcaption>Fine diagonal streaks fading toward the bottom, with colors and flow locked to a brand palette. Only density and stretch drift, giving a set of on-brand variations.</figcaption>
-    </figure>
-
-    <h3>Kaleidoscope variations</h3>
-    <figure class="shot">
-      <img src="../examples/kaleidoscope-variations.gif" width="1200" height="630" loading="lazy" decoding="async"
-           alt="Kaleidoscope variations: a chunky 8-way mirrored pattern that keeps its structure while its seeds and colors change each pass." />
-      <figcaption>A chunky 8-way kaleidoscope with symmetry, block size, density and flow locked. Seeds and colors reroll each pass, so every frame is a new pattern in the same language.</figcaption>
-    </figure>
     <div class="note">
       <p><strong>Took a wrong turn?</strong> <span class="ui-ref"><svg class="ui-ref-icon" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M228,128a100,100,0,0,1-98.66,100H128a99.39,99.39,0,0,1-68.62-27.29,12,12,0,0,1,16.48-17.45,76,76,0,1,0-1.57-109c-.13.13-.25.25-.39.37L54.89,92H72a12,12,0,0,1,0,24H24a12,12,0,0,1-12-12V56a12,12,0,0,1,24,0V76.72L57.48,57.06A100,100,0,0,1,228,128Z"/></svg>Undo</span>, the arrow at the left of the Random row, steps back through recent randomize passes, most recent first. It grays out once there is nothing left to undo.</p>
     </div>
@@ -373,25 +349,25 @@ <h3>Loop</h3>
     <figure class="shot">
       <img src="../examples/loop.gif" width="1200" height="630" loading="lazy" decoding="async"
            alt="Loop: the composition's shapes grow, shrink, and slide in place as the flow field turns through one closed cycle." />
-          <figcaption>The stripes of this 8-way kaleidoscope sway in place and land back where they started.</figcaption>
+          <figcaption>The two layers sway against each other and land back where they started.</figcaption>
     </figure>
 
     <h3>Drift</h3>
     <p>Flows the field one way along its flow direction, travelling exactly one period. So the pattern's density envelope repeats along that axis, at flow scale times stretch pixels.</p>
-    <p>Picking Drift or Wind repaints the composition once. The field they travel on repeats along the flow direction and the still does not, so their first frame is their own. Ripple's first frame already has rings in flight, so it repaints too. Loop, Pulse, and Tide open on the still itself.</p>
+    <p>Picking Drift repaints the composition once. The field it travels on repeats along the flow direction and the still does not, so its first frame is its own. Wind repaints only its fine detail, for the same reason. Ripple's first frame already has rings in flight, so it repaints too. Loop, Pulse, and Tide open on the still itself.</p>
     <figure class="shot">
       <img src="../examples/drift.gif" width="1200" height="630" loading="lazy" decoding="async"
            alt="Drift: the pattern travels steadily across the canvas along its flow direction, repeating exactly at the end of one period." />
-          <figcaption>Green bands slide one way and wrap into themselves, so they never jump. The sparse purple layer behind them, with almost no field strength, holds still.</figcaption>
+          <figcaption>Orange bands slide one way and a cream nebula behind them slides the other, each along its own flow direction, and both wrap into themselves so they never jump.</figcaption>
     </figure>
 
     <h3>Wind</h3>
-    <p>Drift with weather. The field flows the same way and the same distance. A second, much broader noise field bends where it is sampled, rising and settling once per cycle like a gust.</p>
-    <p>Fine detail travels twice as far as the broad shapes, so wisps run ahead of the streaks they belong to. The gust starts and ends at nothing, so the cycle opens on Drift's first frame and the bending rises and settles once through it.</p>
+    <p>Weather passing over a standing field. The broad shapes hold their ground while a second, much broader noise field bends where they are sampled, rising and settling once per cycle like a gust, and the fine detail streams through them along the flow direction.</p>
+    <p>Wind used to slide the whole field the way Drift does, with the gust on top, and at a glance the two were the same thing. Now Drift is the field moving and Wind is the weather moving over it. The gust starts and ends at nothing, so the cycle opens and closes on the same frame.</p>
     <figure class="shot">
       <img src="../examples/wind.gif" width="1200" height="630" loading="lazy" decoding="async"
-           alt="Wind: the pattern travels along its flow direction as a broad gust bends it, rising and settling once across the cycle, with fine wisps running ahead of the wider streaks." />
-          <figcaption>Yellow and magenta streaks over a teal ground, bending as the gust passes through them.</figcaption>
+           alt="Wind: the broad streaks hold still while a gust bends them once across the cycle and fine wisps stream through them along the flow direction." />
+          <figcaption>The streaks hold their ground as the gust bends them and their fine detail streams through.</figcaption>
     </figure>
 
     <h3>Pulse</h3>
@@ -399,17 +375,18 @@ <h3>Pulse</h3>
     <figure class="shot">
       <img src="../examples/pulse.gif" width="1200" height="630" loading="lazy" decoding="async"
            alt="Pulse: the composition inflates and thins as density swings up and down, with cells appearing and vanishing in a stable order." />
-          <figcaption>The streaks hold their position and only change weight, thickening and thinning together.</figcaption>
+          <figcaption>The mint contour lines swell and thin in weight while the grey streaks behind them breathe more gently, and nothing moves.</figcaption>
     </figure>
 
     <h3>Ripple</h3>
     <p>Rain on the surface. A handful of drops land at seeded points, each at its own moment in the cycle and with its own weight, spacing, and reach. Every ring spreads, thins, and dies away before its drop falls again. Where rings cross they add, so two crests double and a crest over a trough cancels.</p>
-    <p>Each ring does two things. It swells the density along its crest, and it pulls the drawn cells the way water bends whatever is under it, so the picture bulges as a ring passes. Neither touches the field, so Ripple works with no field strength. The ring spacing follows the layer's <strong>Flow scale</strong>, so a fine field gets tight rings and a broad one gets wide swells.</p>
-    <p>Both layers ripple under the same drops. Layer B is pulled less than Layer A, as a deeper layer would be, so the two slide against each other where they overlap. On a tile each tile gets its own rain.</p>
+    <p>Each ring does two things. It swells the shapes along its crest and thins them in its trough. And it pulls the picture the way water bends whatever is under it, stretching and squashing the blocks themselves as it passes rather than stepping them a cell at a time. Neither touches the field, so Ripple works with no field strength. The ring spacing follows Layer A's <strong>Flow scale</strong>, so a fine field gets tight rings and a broad one gets wide swells.</p>
+    <p>Both layers ripple under the same drops. Layer B is pulled less than Layer A, as a deeper layer would be, so the two slide against each other where they overlap. The rain falls on the canvas as a whole, so a mirrored layer's rings are not mirrored, the way rain does not respect a mirror.</p>
+    <p>On the canvas each drop lands somewhere new every time it falls. An export has to come back round, so in a GIF the same drops fall in the same places every cycle, and a link reopens to the same rain.</p>
     <figure class="shot">
       <img src="../examples/ripple.gif" width="1200" height="630" loading="lazy" decoding="async"
            alt="Ripple: rings of denser cells spread from several points across the composition, thinning as they grow and crossing where they meet." />
-          <figcaption>Rings from seven drops cross the streaks, bending and swelling them as they pass, and the field beneath never moves.</figcaption>
+          <figcaption>Rings from seven drops cross a lilac marble and the coral streaks under it, bending and swelling both as they pass, and the field beneath never moves.</figcaption>
     </figure>
 
     <h3>Tide</h3>
@@ -418,7 +395,7 @@ <h3>Tide</h3>
     <figure class="shot">
       <img src="../examples/tide.gif" width="1200" height="630" loading="lazy" decoding="async"
            alt="Tide: the two layers' bands bend around each other's ridges, press into crossings, and relax back to the still once per cycle." />
-          <figcaption>The blue bands and the pink ones press into each other and let go, each bent by the other's field.</figcaption>
+          <figcaption>Lime strands are swept along the ridges of the sky-blue nebula behind them, and the nebula bends around the strands, then both let go.</figcaption>
     </figure>
 
     <p>Each kind is one cycle, and a cycle lasts as long as the <strong>Speed</strong> slider in the General tab says. Auto-randomize keeps its own interval, so the two can run at different rates.</p>
@@ -432,12 +409,12 @@ <h3>Tide</h3>
         </thead>
         <tbody>
           <tr>
-            <td><strong>Drift</strong>&nbsp;and&nbsp;<strong>Wind</strong></td>
-            <td>Its heading is its own flow direction, and its speed follows its own flow scale and stretch. Wind's gust bends it from a point an eighth of a turn round, as in Loop.</td>
+            <td><strong>Drift</strong></td>
+            <td>Its heading is its own flow direction, and its speed follows its own flow scale and stretch.</td>
           </tr>
           <tr>
-            <td><strong>Loop</strong></td>
-            <td>It circles the same way, from a point an eighth of a turn further round.</td>
+            <td><strong>Loop</strong>&nbsp;and&nbsp;<strong>Wind</strong></td>
+            <td>Its circle, and Wind's gust, turn the other way, from a point an eighth of a turn round, so the two layers slide against each other once per cycle rather than swaying as one.</td>
           </tr>
           <tr>
             <td><strong>Pulse</strong></td>
diff --git a/index.html b/index.html
index eaa5b06..5f73a0a 100644
--- a/index.html
+++ b/index.html
@@ -606,6 +606,14 @@ <h2 class="section-title">Animation</h2>
           <option value="reverse">Reverse</option>
         </select>
       </div>
+      <!-- Collide makes the layers push on each other under whatever is
+           running, by a fraction of Tide's push. Tenths on the slider,
+           so the link's tail carries it in four bits with zero off. -->
+      <div class="field" id="collideField" hidden>
+        <label for="collide">Collide <span class="field-value" id="collideVal"></span></label>
+        <p class="hint">How hard the layers push on each other.</p>
+        <input type="range" id="collide" min="0" max="10" value="0" />
+      </div>
 
       <h2 class="section-title">Auto-randomize</h2>
 
@@ -762,6 +770,24 @@ <h2 class="section-title">Flow field</h2>
         </div>
       </div>
 
+      <!-- A layer's own motion, or the General tab's. Not randomized and
+           not lockable: a roll changes what a composition is, not how
+           it plays. -->
+      <div class="field">
+        <label>Motion</label>
+        <p class="hint">Its own motion, until General changes.</p>
+        <select class="l-motion">
+          <option value="same" selected>Same as General</option>
+          <option value="none">None (still)</option>
+          <option value="circle">Loop</option>
+          <option value="drift">Drift</option>
+          <option value="wind">Wind</option>
+          <option value="pulse">Pulse</option>
+          <option value="ripple">Ripple</option>
+          <option value="tide">Tide</option>
+        </select>
+      </div>
+
       <div class="field">
         <label><span class="l-fieldStrengthName">Field strength</span> <span class="l-fieldStrengthVal field-value"></span></label>
         <div class="field-row">
@@ -946,7 +972,7 @@ <h1 class="brand"><a href="./">Flield<span class="sr-only">: seamless animated b
     </script>
   </div>
 
-  <script src="generator.js?v=13"></script>
+  <script src="generator.js?v=14"></script>
   <script>
     // Inline replacements for the icons that used to come from the
     // Phosphor webfont (224KB for the ~19 glyphs this app actually uses).
@@ -1531,6 +1557,9 @@ <h1 class="brand"><a href="./">Flield<span class="sr-only">: seamless animated b
       // Absent from every slot and link written before the second
       // texture existed, which is exactly the one they were made with.
       document.getElementById(prefix + "-texture").value = values.texture || "streaks";
+      // Absent from every snapshot written before layers had their own
+      // motion, and those followed General, which is what "same" is.
+      document.getElementById(prefix + "-motion").value = values.motion || "same";
       document.getElementById(prefix + "-symmetry").value = values.symmetry;
       document.getElementById(prefix + "-smoothPasses").value = values.smoothPasses;
     }
@@ -1575,6 +1604,7 @@ <h1 class="brand"><a href="./">Flield<span class="sr-only">: seamless animated b
         flowStretch: parseFloat(document.getElementById(prefix + "-flowStretch").value),
         fieldOctaves: parseInt(document.getElementById(prefix + "-fieldOctaves").value, 10),
         texture: document.getElementById(prefix + "-texture").value,
+        motion: document.getElementById(prefix + "-motion").value,
         symmetry: document.getElementById(prefix + "-symmetry").value,
         smoothPasses: parseInt(document.getElementById(prefix + "-smoothPasses").value, 10),
       };
@@ -1716,7 +1746,7 @@ <h1 class="brand"><a href="./">Flield<span class="sr-only">: seamless animated b
     // empty strip with a close button and nothing in it.
     function updateMotionUI() {
       const show = !!currentMotion();
-      ["speedField", "depthField", "directionField"].forEach((id) => {
+      ["speedField", "depthField", "directionField", "collideField"].forEach((id) => {
         const field = document.getElementById(id);
         if (!show && field.closest("#lastControl")) returnLastField();
         field.hidden = !show;
@@ -1761,6 +1791,7 @@ <h1 class="brand"><a href="./">Flield<span class="sr-only">: seamless animated b
     // as quarters, so the default 1x is index 4.
     const depthInput = document.getElementById("depth");
     const directionSelect = document.getElementById("direction");
+    const collideInput = document.getElementById("collide");
     const DEPTH_STEPS_PER_UNIT = 4;
     const DEPTH_DEFAULT_INDEX = parseInt(depthInput.defaultValue, 10);
     const depthValue = (index) => index / DEPTH_STEPS_PER_UNIT;
@@ -1781,6 +1812,7 @@ <h1 class="brand"><a href="./">Flield<span class="sr-only">: seamless animated b
         interval: speedMs(parseInt(intervalInput.value, 10)),
         depth: depthValue(parseInt(depthInput.value, 10)),
         direction: directionSelect.value,
+        collide: parseInt(collideInput.value, 10) / 10,
         bgColor: document.getElementById("bgColor").value,
         width: clampSide(document.getElementById("width").value),
         height: clampSide(document.getElementById("height").value),
@@ -1908,6 +1940,7 @@ <h1 class="brand"><a href="./">Flield<span class="sr-only">: seamless animated b
       document.getElementById("speedVal").textContent = formatSpeed(options.speed);
       document.getElementById("intervalVal").textContent = formatSpeed(options.interval);
       document.getElementById("depthVal").textContent = formatDepth(options.depth);
+      document.getElementById("collideVal").textContent = options.collide > 0 ? options.collide.toFixed(1) : "off";
       updateLayerLabels("layerA", options.layerA);
       updateLayerLabels("layerB", options.layerB);
       updatePresetChips(options);
@@ -1931,7 +1964,7 @@ <h1 class="brand"><a href="./">Flield<span class="sr-only">: seamless animated b
         lastOptions = options;
         return;
       }
-      const { gridA, gridB, cols, rows } = generate(options);
+      const { gridA, gridB, cols, rows, warp } = generate(options);
       renderToCanvas(canvas, {
         width: options.width,
         height: options.height,
@@ -1943,6 +1976,7 @@ <h1 class="brand"><a href="./">Flield<span class="sr-only">: seamless animated b
         gridB,
         cols,
         rows,
+        warp,
       });
       lastResult = { gridA, gridB, cols, rows };
       lastOptions = options;
@@ -2021,11 +2055,25 @@ <h1 class="brand"><a href="./">Flield<span class="sr-only">: seamless animated b
       return Math.max(2, Math.min(Math.max(MIN_FRAMES_PER_BEAT, Math.min(smooth, affordable)), honored));
     }
 
-    function currentMotion() {
+    // The General tab's kind, or null for None. What generate() gets as
+    // loopMode; each layer's own Motion is resolved against it there.
+    function generalMotion() {
       const value = document.getElementById("motion").value;
       return value === "none" ? null : value;
     }
 
+    // Whether anything is playing, and what to call it: the General
+    // kind, or failing that the first layer running a kind of its own.
+    function currentMotion() {
+      const general = generalMotion();
+      if (general) return general;
+      for (const prefix of ["layerA", "layerB"]) {
+        const own = document.getElementById(prefix + "-motion").value;
+        if (own !== "same" && own !== "none") return own;
+      }
+      return null;
+    }
+
     // What a GIF would record right now, read off the controls that
     // each own one axis: Motion says what a pass looks like, Speed says
     // how long an animated pass runs, Reroll every says how long a still
@@ -2095,7 +2143,10 @@ <h1 class="brand"><a href="./">Flield<span class="sr-only">: seamless animated b
         if (step !== lastStep) {
           lastStep = step;
           const phase = (elapsed % beat) / beat;
-          drawComposition(Object.assign(readOptions(), { loopMode: kind, loopPhase: phase }));
+          // The cycle count is for Ripple, whose drops land somewhere
+          // new each time they are reborn on the canvas; exports leave
+          // it out so their rain repeats and the loop closes.
+          drawComposition(Object.assign(readOptions(), { loopMode: generalMotion() || "none", loopPhase: phase, loopCycle: Math.floor(elapsed / beat) }));
         }
         seamlessPreview.frame = requestAnimationFrame(tick);
       };
@@ -2547,6 +2598,12 @@ <h1 class="brand"><a href="./">Flield<span class="sr-only">: seamless animated b
     // Motion is the only one of the three that changes what's on screen
     // the moment it's set, so it's the one that says so.
     motionSelect.addEventListener("change", () => {
+      // General is the master: choosing a kind here puts both layers
+      // back to following it. A layer set to its own kind would
+      // otherwise keep it, and General would look dead for that layer.
+      ["layerA", "layerB"].forEach((prefix) => {
+        document.getElementById(prefix + "-motion").value = "same";
+      });
       // Also called from prepareRender, but that is a frame away behind
       // scheduleRender, and the select's own change is the moment the
       // Speed slider should be there or gone.
@@ -2558,6 +2615,23 @@ <h1 class="brand"><a href="./">Flield<span class="sr-only">: seamless animated b
       else if (wasPreviewing) showToast("Motion off");
     });
 
+    // A layer's own Motion starts or stops the preview the same way,
+    // and its toast names the layer and what it now does rather than
+    // whatever General happens to say.
+    ["layerA", "layerB"].forEach((prefix) => {
+      const select = document.getElementById(prefix + "-motion");
+      const name = prefix === "layerA" ? "Layer A" : "Layer B";
+      select.addEventListener("change", () => {
+        updateMotionUI();
+        const wasPreviewing = seamlessPreview.active;
+        syncSeamlessPreview();
+        const own = select.value;
+        if (own === "same") showToast(seamlessPreview.active ? `${name} follows General` : wasPreviewing ? "Motion off" : `${name} follows General`);
+        else if (own === "none") showToast(seamlessPreview.active ? `${name} holds still` : wasPreviewing ? "Motion off" : `${name} holds still`);
+        else showToast(`${name} plays ${SEAMLESS_NAMES[own]}`);
+      });
+    });
+
     function stopAutoplay() {
       clearTimeout(autoplayTimer);
       autoplayTimer = null;
@@ -2755,7 +2829,7 @@ <h1 class="brand"><a href="./">Flield<span class="sr-only">: seamless animated b
             performRandomize(false);
             const options = readOptions();
             for (let i = 0; i < perPass; i++) {
-              drawComposition(Object.assign({}, options, { loopMode: kind, loopPhase: i / perPass }));
+              drawComposition(Object.assign({}, options, { loopMode: generalMotion() || "none", loopPhase: i / perPass }));
               gif.addFrame(canvas, { copy: true, delay });
             }
           }
@@ -2768,7 +2842,7 @@ <h1 class="brand"><a href="./">Flield<span class="sr-only">: seamless animated b
           // back to the still afterwards.
           const options = readOptions();
           for (let i = 0; i < frames; i++) {
-            drawComposition(Object.assign({}, options, { loopMode: kind, loopPhase: i / frames }));
+            drawComposition(Object.assign({}, options, { loopMode: generalMotion() || "none", loopPhase: i / frames }));
             gif.addFrame(canvas, { copy: true, delay });
           }
           render();
@@ -2813,6 +2887,7 @@ <h1 class="brand"><a href="./">Flield<span class="sr-only">: seamless animated b
       // than leaving whatever was set.
       depthInput.value = values.depth > 0 ? depthIndex(values.depth) : DEPTH_DEFAULT_INDEX;
       directionSelect.value = values.direction === "reverse" ? "reverse" : "forward";
+      collideInput.value = values.collide > 0 ? Math.min(10, Math.round(values.collide * 10)) : 0;
       document.getElementById("bgColor").value = values.bgColor;
       document.getElementById("width").value = clampSide(values.width);
       document.getElementById("height").value = clampSide(values.height);
@@ -3454,7 +3529,7 @@ <h1 class="brand"><a href="./">Flield<span class="sr-only">: seamless animated b
 
     function renderTutorialAnimateFrame(kind, phase) {
       const options = Object.assign({}, TUTORIAL_ANIMATE_OPTIONS, { loopMode: kind, loopPhase: phase });
-      const { gridA, gridB, cols, rows } = generate(options);
+      const { gridA, gridB, cols, rows, warp } = generate(options);
       renderToCanvas(tutorialAnimateCanvas, {
         ...options,
         colorA: options.layerA.color,
@@ -3463,6 +3538,7 @@ <h1 class="brand"><a href="./">Flield<span class="sr-only">: seamless animated b
         gridB,
         cols,
         rows,
+        warp,
       });
     }
 
@@ -3747,6 +3823,10 @@ <h1 class="brand"><a href="./">Flield<span class="sr-only">: seamless animated b
       // other depth is written as its slider index plus one.
       ["depth", 4],
       ["direction", 1],
+      ["collide", 4],
+      // Index into the layer's Motion menu, whose first entry is "same".
+      ["layerA-motion", 4],
+      ["layerB-motion", 4],
     ];
 
     // Bits go in and out with arithmetic rather than << and >>, which
@@ -3888,6 +3968,10 @@ <h1 class="brand"><a href="./">Flield<span class="sr-only">: seamless animated b
             ? (snapshot.depth > 0 && depthIndex(snapshot.depth) !== DEPTH_DEFAULT_INDEX ? depthIndex(snapshot.depth) + 1 : 0)
             : key === "direction"
               ? (snapshot.direction === "reverse" ? 1 : 0)
+              : key === "collide"
+                ? (snapshot.collide > 0 ? Math.min(10, Math.round(snapshot.collide * 10)) : 0)
+                : key.endsWith("-motion")
+                  ? optionIndex(optionValues("layerA-motion"), snapshot[key.split("-")[0]].motion || "same")
               : key.startsWith("lock:")
                 ? (snapshot.locks || []).includes(key.slice(5)) ? 1 : 0
                 : optionIndex(textures, snapshot[key.split("-")[0]].texture)
@@ -3924,12 +4008,16 @@ <h1 class="brand"><a href="./">Flield<span class="sr-only">: seamless animated b
       const beats = {};
       let depth = 0;
       let motionDirection = "forward";
+      let collide = 0;
       COMPACT_TAIL_FIELDS.forEach(([key, bits]) => {
         const value = input.tail(bits);
         if (key === "speed" || key === "interval") beats[key] = value ? speedMs(value - 1) : 0;
         else if (key === "depth") depth = value ? depthValue(value - 1) : 0;
         else if (key === "direction") motionDirection = value ? "reverse" : "forward";
-        else if (key.startsWith("lock:")) {
+        else if (key === "collide") collide = value / 10;
+        else if (key.endsWith("-motion")) {
+          (key.startsWith("layerA") ? layerA : layerB).motion = optionAt(optionValues("layerA-motion"), value);
+        } else if (key.startsWith("lock:")) {
           if (value) locks.push(key.slice(5));
         } else {
           (key.startsWith("layerA") ? layerA : layerB).texture = optionAt(textures, value);
@@ -3949,6 +4037,7 @@ <h1 class="brand"><a href="./">Flield<span class="sr-only">: seamless animated b
         motion,
         depth,
         direction: motionDirection,
+        collide,
         locks,
         layerA,
         layerB,
diff --git a/seamless-backgrounds/index.html b/seamless-backgrounds/index.html
index ed57262..1799613 100644
--- a/seamless-backgrounds/index.html
+++ b/seamless-backgrounds/index.html
@@ -218,7 +218,7 @@ <h2 id="try">Try it</h2>
     </footer>
   </main>
 
-  <script src="../generator.js?v=13"></script>
+  <script src="../generator.js?v=14"></script>
   <script>
     // Phosphor's own path data, the same two glyphs and the same
     // flield-theme key the app and the guide use, so a choice made on any