entreMultiversos ← tecnologia
web design· 03.07.2026· 5 min

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.

← voltar ao circuito tecnologia · 2026—