Diagnóstico de Flicker

Cada caso abaixo usa a mesma imagem. Role lentamente até cada bloco e observe: o bloco pisca (aparece do nada) ou apenas desliza suavemente? Casos A e B são o grupo de controle — nunca devem piscar.

Causa raiz identificada: INTENSITY_PRESETS.subtle.initialOpacity = 0. Cada <Reveal> começava invisível (opacity 0) e animava para opacity 1 ao entrar na viewport — cada seção "piscava" (aparecia do nada). Correção: initialOpacity = 1 (sem flash de opacity, apenas deslize suave).

A) <img> simples (sem Reveal)

Grupo de controle. Imagem sempre visível, sem animação. Nunca deve piscar.

Teste A

B) <SafeImg> (sem Reveal)

Grupo de controle. SafeImg tem fallback de erro mas sem animação. Nunca deve piscar.

Teste B

C) <SafeImg> dentro de <Reveal>

ANTES: piscava (opacity 0 → 1). DEPOIS: apenas desliza (y=18 → 0), sem flash.

Teste C

D) <img> simples dentro de <Reveal>

ANTES: piscava (opacity 0 → 1). DEPOIS: apenas desliza, sem flash.

Teste D

E) background CSS dentro de <Reveal>

ANTES: piscava (opacity 0 → 1). DEPOIS: apenas desliza, sem flash.

F) <Reveal> com delay (cards em sequência)

ANTES: cada card piscava separadamente. DEPOIS: cada card desliza em sequência, sem flash.

Teste F-0
Teste F-1
Teste F-2

Como interpretar

  • • Se A e B não piscam, mas C/D/E piscavam antes → a causa era o Reveal (opacity 0 → 1).
  • • Se C/D/E agora apenas deslizam sem flash → a correção funcionou.
  • • Se algum caso ainda pisca após a correção, há uma segunda causa a investigar.