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.