Vídeo escovado pelo scroll

Uma seção alta prende a tela: o palco gruda (position:sticky) dentro de um trilho de altura declarada, e a fração já rolada desse trilho vira o currentTime do vídeo. O filme não toca — ele é escovado. Rolar para baixo avança; rolar de volta desfaz, quadro a quadro, o que nenhum vídeo tocando faz. Por cima, a copy do manifesto ancorada embaixo; num canto, a leitura de progresso com início, percentual e fim.

O que ela resolve editorialmente: dar tempo a uma frase de princípio. Um manifesto num bloco de texto comum passa em dois segundos de rolagem; aqui a mesma frase divide a tela com uma imagem que se move sob comando de quem lê, e o tempo de leitura vira decisão da pessoa.

Compliance

O percentual é de rolagem, e é isso que a ressalva existe para dizer.

Num site de assessoria, um número grande em porcentagem ao lado de um filme institucional é lido como rendimento por quem passa o olho — não porque a pessoa seja desatenta, mas porque é o que aquele formato significa no resto da página. Por isso:

• a .esc-nota mora no mesmo bloco do número, não num rodapé de seção, e nega explicitamente as três leituras erradas: rentabilidade, resultado, indicador de carteira;
• ela não é opcional. Quem quiser a dobra sem a ressalva tem de apagar o .esc-leitura inteiro — número sem ressalva não é uma versão desta peça;
• o aria-valuetext repete a mesma unidade ("42% desta dobra"), para que a leitura por voz não fique mais ambígua que a visual.

A copy do manifesto não cita rentabilidade. Ela fala de método (política de investimentos escrita), de governança (comitê) e de remuneração (honorário acordado, sem comissão de produto). Números de resultado não entram nesta dobra — para número apurado existe o dados/grade-indicadores, que carrega fonte e data.

Quando usar

• Manifesto, princípio da casa, "como trabalhamos" — texto curto que merece uma tela inteira e um tempo próprio.
• Depois do hero ou no meio da página, quando a proposta já foi apresentada e o que falta é tom.
• Quando existe filme de verdade: material de arquivo, imagem de escritório, mar, cidade, mãos sobre papel. Movimento contínuo e lento, sem corte.
• Quando a página aguenta perder 2,2 telas de rolagem para uma dobra só.

Quando não usar

• Sem vídeo. Sem o arquivo, a peça é um pôster parado com copy por cima — e isso é o conteudo/pilares-texto-na-foto, com três telas de rolagem a mais.
• Com filme que tem corte, legenda ou fala. Escova não respeita corte: a pessoa pode parar exatamente no quadro de transição e ficar lá. E o vídeo é mudo por construção.
• Duas vezes na mesma página. Ver "Padrão editorial".
• Em página curta (uma landing de três dobras): a peça sozinha seria metade do site.

O irmão mais próximo, e quando ele ganha

O irmão ganha sempre que o vídeo for textura e não conteúdo, e ganha sempre que a dobra for a primeira: acima da linha de corte ninguém rolou ainda, então não há agulha. Um terceiro vizinho é o midia/faixa-horizontal-pinada, que usa a mesma mecânica de trilho + sticky com imagens paradas em vez de filme — ele ganha quando o conteúdo é uma fila de coisas e não um plano contínuo.

Padrão editorial

Uma por página, e o limite é de rede antes de ser de desenho: preload="auto" baixa o arquivo inteiro, e duas dobras destas somam dois vídeos antes de a pessoa chegar à segunda.

O título não repete o olho e não repete o título da dobra anterior. Ele é a única linha em corpo grande da tela, e divide essa tela com a prosa e o progresso: acima de nove palavras passa de três linhas no celular e empurra a leitura de progresso para fora da dobra.

Especificação dos assets

O keyframe denso não é otimização, é requisito de funcionamento. Num arquivo com GOP normal (2 a 10 segundos entre keyframes), um seek para um instante qualquer obriga o decodificador a voltar ao keyframe anterior e decodificar tudo até lá — e como a escova pede um instante novo a cada quadro de rolagem, ele nunca alcança. O sintoma é a imagem andando em degraus de meio segundo e travando. Com -g 1 todo quadro é keyframe: o seek é direto, e o preço é o arquivo pesar mais — que é exatamente por que a duração está cravada em 4 a 8 segundos e não em 30.

A conta da duração contra o trilho: o palco fica preso por (--esc-trilho - 1) telas. No padrão 3.2, são 2,2 telas de rolagem para o filme inteiro — numa janela de 900px, 1.980px de rolagem. Para um vídeo de 6s isso dá 330px de rolagem por segundo de filme, ou 0,3s de filme por clique de roda de mouse. Filme mais longo pede trilho mais longo, e o teto do trilho é 4,8 telas: acima de ~8 segundos a dobra vira armadilha de rolagem.

Como usar

<link rel="stylesheet" href="componentes/midia/video-escovado-scroll/estilo.css">
<script src="componentes/midia/video-escovado-scroll/script.js"></script>

Cole a <section>, troque o poster, descomente os dois <source> e aponte para os arquivos. A biblioteca não versiona vídeo (§11), então o preview mostra o pôster parado — que é, e não por acaso, o mesmo fallback que a peça entrega em produção quando algo dá errado.

Não ponha overflow na <section> nem no .esc-trilho. Ver Gotchas.

Ganchos

Parafusos

Variações

• Trilho mais longo ou mais curto — --esc-trilho. Dentro da faixa 2,2–4,8, que o clamp() obriga.
• No tom claro — trocar .sec-deep por .sec-paper. Nenhuma linha de CSS muda: o realce do título lê --accent-ink e o scrim lê --dark-rgb, que continua sendo a tinta certa para escurecer vídeo em qualquer tom.
• Sem a leitura de progresso — apagar o .esc-leitura inteiro. Vale quando a página já tem o navegacao/progresso-leitura no topo: dois indicadores de rolagem na mesma tela competem em vez de somar. O que não se faz é apagar só a .esc-nota.
• Copy com destaque palavra a palavra (experimental) — trocar o [data-rv] do .esc-texto pelo efeitos/destaque-texto-scroll, que acende a prosa conforme a mesma rolagem que escova o vídeo. É composição, não dependência: este markup não carrega nenhum gancho daquele componente, e quem não colar o outro não perde nada.
• Dois vídeos numa página (experimental) — duas seções [data-esc]. O script parte da raiz de cada uma; o custo é de rede, não de quadro.
• Escova em sequência de imagens (experimental) — trocar o <video> por um <canvas> alimentado por webp numerados. Some o destravamento do iOS e some o GOP; entram dezenas de requisições e um pré-carregador.

Gotchas

• overflow num ancestral do sticky mata o sticky, em silêncio. A <section> e o .esc-trilho ficam em overflow:visible de propósito: qualquer outro valor prende o palco a um scrollport que não rola, e ele passa a descer junto com a página. Não há erro, não há aviso — só uma dobra que "não funciona". Quem recorta é o .esc-palco, que é o próprio elemento que gruda. Mesmo achado do midia/faixa-horizontal-pinada.

• Escrever currentTime a cada quadro engasga. Cada escrita é um pedido de seek ao decodificador, não um ponteiro que se move. Sessenta por segundo, a maioria pedindo o quadro que já está na tela, enfileiram trabalho que o motor não descarta: a imagem trava alguns décimos atrás do dedo e depois pula. O limiar é 0,025s — menos que um quadro a 30fps (0,033s) e a 25fps (0,04s), então nada que exista no arquivo é pulado; o que se corta é só o pedido redundante. As duas pontas (0 e 1) são exceção e escrevem sempre, senão a dobra abre e fecha com o quadro errado congelado.

• Nunca mire em duration cravado. A duração declarada no contêiner costuma passar alguns milissegundos do último quadro de vídeo, e um seek para lá devolve o elemento ao estado ended — que em alguns motores repinta o pôster. A dobra terminaria saltando para a foto. A mira é duration - 0,05s.

• Só escove depois de loadedmetadata, e confira que a duração é finita. Antes disso duration é NaN; em transmissão ao vivo é Infinity. O script usa isFinite e não Number.isFinite porque o §1 pede ES5-safe, e os dois só diferem ao coagir string — duration é sempre number. E os metadados podem já ter chegado antes de o script rodar (cache, preload="auto", script no fim do <body>): sem a conferência inicial o evento nunca mais dispararia e a peça ficaria no pôster para sempre.

• No iOS o vídeo só aceita ser escovado depois de um play()/pause(). Um <video> que nunca tocou não tem pipeline de decodificação montado no Safari de iPhone, e escrever currentTime nele não repinta nada: fica o pôster, e o console não diz uma palavra. O script tenta duas vezes — assim que os metadados chegam (com muted a política costuma permitir) e, se aquela foi recusada, no primeiro pointerdown dentro da seção, que é gesto de verdade. Falhando as duas, não há terceira e não há erro: fica o pôster parado com a copy inteira legível por cima. É caminho de falha desenhado, e é por isso que o pôster tem de ser um quadro do próprio filme.

• preload="auto", e as outras duas não servem. Escovar é pedir quadros fora de ordem: com metadata a agulha procura bytes que não chegaram, e o resultado é o pôster piscando no meio da dobra. O preço é o arquivo inteiro na rede — daí a duração cravada e o veto de economia de dados. O canto que fica pagando: sem JavaScript o script não roda e ninguém cancela o preload, então o arquivo é baixado para nunca ser usado. Não há conserto por markup (trocar o atributo quebraria o caminho principal), e é uma das razões de o orçamento do asset ser 2,5 MB e não 20. Sob movimento reduzido e sob economia de dados o script cancela — ali o desperdício não acontece.

• Não tem botão de pausa, e isso é decisão. A WCAG 2.2.2 exige um jeito de parar o que anda sozinho por mais de cinco segundos. Aqui nada anda sozinho: não há autoplay, não há loop, não há relógio; o vídeo só se move enquanto a pessoa move a página, e parar de rolar já é a pausa. Um botão que congelasse a escova só tiraria dela o controle que ela já tem. O caso em que ele passa a ser obrigatório: somar qualquer movimento automático a esta dobra — o vídeo voltando a tocar sozinho no fim do trilho, uma legenda em rodízio, um contador. Aí entra o .btn-play do core com o LIB.pausavel, como no hero/slideshow-cinematico.

• role="progressbar" e não região viva, e a escolha é sobre o que o leitor de tela faz com cada um. Este número muda a cada quadro de rolagem: um aria-live falaria por cima de tudo, sem parar, enquanto a pessoa desce a página — o pior tipo de anúncio, o que impede de ouvir o resto. O progressbar é consultado quando a pessoa quer, e o aria-valuenow fica sempre correto. O script só escreve quando o inteiro muda. A régua visível (Início · % · Fim) é aria-hidden por ser a duplicata do que o progressbar já reporta; a ressalva não é escondida.

• O modo estático é o padrão do CSS, não um fallback. .is-preso é opt-in por classe, escrita pelo script. Sem JavaScript — bloqueado, quebrado, ainda não executado — a seção é uma dobra comum com o pôster e a copy, em vez de 3,2 telas de vazio. É também por isso que não há @media(scripting:none) no estilo.css: não há portão de classe a destravar.

• A leitura de progresso nasce [hidden]. Sem script seria um mostrador travado em 0%, que é pior que mostrador nenhum. A regra .esc-leitura[hidden]{display:none} está lá pelo §6.5 — e a armadilha aqui chegaria pela porta de trás: basta alguém somar um display nessa classe para o bloco nascer visível e morto, sem nada acusar.

• O curso é trilho.offsetHeight - palco.offsetHeight, e não a altura da seção. Usar a altura do trilho sozinha faria o vídeo terminar antes de o palco soltar; usar a da seção erraria pelo padding. O salto apareceria justamente na emenda com a dobra seguinte, que é onde ninguém procura.

Movimento reduzido / toque

prefers-reduced-motion: reduce não escova. O script sai antes de pôr .is-preso: a seção vira uma dobra comum com o pôster, a copy inteira legível e a leitura de progresso escondida — um progresso sem o que ele mede é ruído. Prender a rolagem da página a uma agulha de vídeo é exatamente o movimento imposto que a preferência pede para evitar, e por isso não basta encurtar o trilho.

Há ainda um @media(prefers-reduced-motion:reduce) no estilo.css desligando o modo preso mesmo que a classe apareça: cinto e suspensório para quem colar .is-preso à mão ou escrever um script futuro que a ponha antes de consultar a preferência.

Economia de dados (navigator.connection.saveData, ou effectiveType 2G) tem o mesmo efeito, e por razão diferente: preload="auto" é o arquivo inteiro na rede, que é justamente o byte que a pessoa pediu para não gastar. O script cancela o preload e devolve a dobra estática.

Toque: o gesto é o mesmo de sempre — rolar. Não há hover, não há arrasto e não há alvo de toque nesta peça além dos links da página. No celular o trilho encurta para 2,6 telas, porque o arremesso de dedo é longo: com 2,2 telas de curso o filme de seis segundos raramente chegava ao fim antes de a pessoa passar direto.

O que foi medido

Chrome headless (node bin/medir.js), com um <video> de 6,00 s simulado no lugar do arquivo que a biblioteca não versiona.

Com --reduce e com --sem-js, nos dois tamanhos: sem .is-preso, palco static, trilho igual ao palco (823 px no desktop, 658 px no celular, contra 2880/2194 no modo preso), leitura de progresso display:none, título e prosa em opacity:1 sem filtro nem transform, pôster pintado. Sob --reduce o script ainda cancela o preload.

Histórico

Normalizações aplicadas na extração: prefixo esc- em toda classe; cor só por token (--dark-rgb no scrim e no véu, --accent-ink no realce do título); reveal pelos ganchos do core (data-rv, .ttl) em vez de observer próprio; um único laço de scroll (LIB.onScroll); primitivas do core em vez de cópia (.wrap, .eyebrow, .display-xl, .nota, .grain); copy reescrita para manifesto de assessoria.

O que a tradução acrescentou e o original não tinha: movimento reduzido desligando a escova inteira; modo estático como padrão do CSS, para a dobra sobreviver sem JavaScript; veto de economia de dados; role="progressbar" com aria-valuenow/aria-valuetext; a ressalva de compliance do percentual; e o limiar de escrita do currentTime, que é o que separa escovar de engasgar.

Divergências conhecidas vs. a referência: o original escova um filme com cortes e usa a mesma dobra para três blocos de copy em sequência; aqui a copy é uma só, porque escova não respeita corte e porque trocar texto no meio do trilho pediria um segundo mecanismo de rolagem dentro do primeiro.