Galeria Rio: um filmstrip que repousa
Um trilho horizontal que só se move ao toque, com foco central e o motor três-corpos vivo por trás.
Vestígios nasceu com uma galeria vertical, do jeito óbvio, e ficou
errado. Fotografia pede horizonte — a leitura de um contato de rolo de
filme, quadro depois de quadro, não uma pilha que empurra a página para
baixo. A resposta virou Lente.galeriaRio: uma fábrica única
em scripts/galeria-rio.js e shared/galeria-rio.css,
compartilhada por Vestígios e por Traços, que monta um trilho horizontal
em qualquer tamanho de tela. Sem isWide(), sem breakpoint
que empilha em mobile — o mesmo trilho, sempre.
A decisão difícil não foi o layout, foi o repouso. Nenhum
carrossel autoplay, nenhuma seta piscando pedindo clique: o
trilho só anda quando alguém arrasta ou toca. touch-action:
pan-y no .rio__viewport deixa o dedo rolar a página
na vertical como sempre rolou — só o gesto horizontal move o trilho.
Ao soltar, a velocidade do arraste vira inércia (boost *= 0.92
a cada quadro, até cair abaixo de 0.02 e zerar) e, se o
trilho passou dos limites, uma borracha o puxa de volta a 82% da
distância por quadro — nunca um scroll-snap seco, sempre
um objeto que desacelera como teria peso.
Foco central, não destaque de CSS
Enquanto o trilho se move, cada quadro recalcula sua distância até o
centro da viewport e responde: o mais próximo do centro cresce, sobe
levemente, ganha opacidade plena; os das bordas encolhem e apagam sob a
máscara de gradiente. A curva é um smoothstep — suave nas
pontas, sem degrau perceptível — não um :hover nem um
IntersectionObserver discreto:
// scripts/galeria-rio.js — foco central por 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)
};
}
E o motor de três corpos nunca sai de cena: #field
continua rodando atrás do trilho, a mesma coreografia do mundo, viva o
tempo todo — a galeria é uma camada em primeiro plano sobre um fundo que
não pausa para ela. Um filmstrip que descansa quando ninguém toca é mais
difícil de construir do que um que gira sozinho; é também o único que
parece pertencer a este site.