entreMultiversos ← technology
web design· 03 jul 2026· 5 min

River Gallery: a filmstrip at rest

A horizontal track that only moves at a touch, with center focus and the three-body engine alive behind it.

Vestiges was born with a vertical gallery, the obvious way, and it came out wrong. Photography asks for horizon — the reading of a film contact sheet, frame after frame, not a stack pushing the page down. The answer became Lente.galeriaRio: a single factory in scripts/galeria-rio.js and shared/galeria-rio.css, shared by Vestiges and Strokes, that mounts a horizontal track at any screen size. No isWide(), no breakpoint that stacks on mobile — the same track, always.

The hard decision wasn't the layout — it was rest. No autoplay carousel, no arrow blinking for a click: the track only moves when someone drags or taps. touch-action: pan-y on .rio__viewport lets your finger scroll the page vertically the way it always has — only the horizontal gesture moves the track. On release, the drag's velocity becomes inertia (boost *= 0.92 each frame, until it falls below 0.02 and zeroes out), and if the track went past its limits, a rubber band pulls it back by 82% of the distance per frame — never a dry scroll-snap, always an object that decelerates as if it had weight.

Center focus, not a CSS highlight

As the track moves, every frame recalculates its distance to the center of the viewport and responds: the one closest to the center grows, lifts slightly, reaches full opacity; the ones at the edges shrink and fade under the gradient mask. The curve is a smoothstep — soft at the ends, no perceptible step — not a :hover, not a discrete IntersectionObserver:

// scripts/galeria-rio.js — center focus via smoothstep
function foco(cx, centro, range, cfg) {
  var rel = (cx - centro) / range;
  var ar = Math.min(1, Math.abs(rel));
  var t = 1 - ar;
  var e = t * t * (3 - 2 * t); // smoothstep
  return {
    e: e,
    scale: 1 + cfg.amp * e,
    lift: e * cfg.lift,
    opacity: 0.5 + 0.5 * e,
    z: Math.round(e * 100)
  };
}

And the three-body engine never leaves the stage: #field keeps running behind the track, the world's own choreography, alive the whole time — the gallery is a foreground layer over a background that does not pause for it. A filmstrip that rests when nobody touches it is harder to build than one that spins on its own; it is also the only one that seems to belong on this site.

← back to the circuit technology · 2026—