Um presente Scrollytelling para a mãe no Dia das Mães de 2026

Minha mãe adorava lógica porque nasceu numa época em que nada fazia sentido. Ela nasceu em 1945, ano do fim da Segunda Guerra Mundial, então se esquivou literalmente de uma bala porque somos judeus. Mas desde o primeiro dia de sua vida, ela descobriu que a fome, o racismo e o infortúnio tentavam levá-la embora. Em 2011, o câncer a tirou de mim para sempre. Mas, de forma mais leve, neste Dia das Mães estou trazendo-a de volta à vida da única maneira que conheço: ciência louca da interface do usuário!

Explicarei como minha mãe inspirou este experimento de scrollytelling do Dia das Mães de 2026 – mas também como ela inspirou minha abordagem ao desenvolvimento e à vida. Ao longo do caminho, discutirei algumas das tecnologias envolvidas neste presente virtual do Dia das Mães. Eu normalmente escrevo posts inspiradores ou técnicos – mas para o Dia das Mães, você ganha dois.

Experimente o cartão interativo do Dia das Mães

Aqui está o CodePen, que usa eventos scroll-snap e consultas de estado de rolagem , portanto, só funcionará em navegadores baseados em Chromium no momento.

Como alternativa, aqui está um vídeo de demonstração com comentários do meu filho de oito anos. Foi agridoce perceber que isso foi o mais próximo que ele chegou de interagir com sua avó, porque ela faleceu antes de ele nascer.

Por que fiz isso

Mamãe nasceu em um hospital no Cazaquistão, onde pacientes civis dividiam enfermarias com soldados dispensados que sofriam de TEPT. Eles entravam e saíam das maternidades, aterrorizando as pacientes e dificultando ainda mais o trabalho de parto para minha avó.

Quando mamãe nasceu, ela não respirava. A equipe a mergulhou em água fria, depois em água quente e depois em água fria novamente – um chamado remédio na época, baseado em nenhuma ciência . Este foi o início de um padrão mais amplo em sua vida: ela continuou sobrevivendo não por causa da ajuda que recebeu, mas apesar do caos disfarçado de ajuda.

Então, quando adulta, mamãe aprendeu a sobreviver encontrando padrões e sentido no insondável. Ela conseguiu isso combinando suas três paixões:

• Na fotografia, ela enquadrou momentos em que o caos do ambiente se harmonizava temporariamente com a beleza.
• No ensino, ela usou essas imagens para ajudar a contar uma história que dividisse o caos em passos lógicos que as pessoas poderiam seguir.
• Na programação de computadores, ela encapsulou esses momentos de ensino ilustrados em experiências interativas. Ao contrário da vida real, se uma interação programada der errado, você poderá rastrear o motivo e resolver o problema.

Em outras palavras, ela me educou usando o conjunto de habilidades que hoje considero desenvolvimento web – antes da existência da web.

Gamificando a experiência de conhecer minha mãe

Inspirei-me na transição de fatia radial desconstruída de Roland Franke usando eventos scroll-snap . A Caneta de Roland apresenta transições atraentes acionadas por rolagem entre paisagens enquanto uma figura fica em primeiro plano observando. Isso me fez pensar na paciência que minha mãe tinha ao observar o mundo – mas depois ela resumia tudo em histórias curtas e interativas que eu conseguia digerir quando era criança.

Estou simbolizando essa experiência em meu jogo do Dia das Mães com a animação time-lapse acionada por rolagem do dia para a noite, estilizada com formas CSS. Usando um único gesto de rolagem, captamos a essência de um dia inteiro. Essa experiência é como a maneira como minha mãe poderia me explicar um grande assunto de uma forma que parecia uma brincadeira.

Minha mãe me ensinou que videogames não precisam ser sobre explodir coisas. Certa vez, ela usou QuickBASIC para construir um jogo de fotografia muito antes de Pokémon Snap existir. Lembro-me de passar por uma loja nos anos 90 com Armor Alley jogando em modo demo na vitrine. Obviamente fiquei fascinado, mas minha mãe disse: “Não gostei. O helicóptero deu partida”, depois foi para casa e construiu seu jogo fotográfico para eu jogar.

Certa vez, ela me contou uma história sobre fotografia de sua infância na União Soviética. Ela se lembrou de ter tirado uma foto de um prédio do governo só porque parecia legal, mas um soldado a viu e confiscou o rolo de filme de sua câmera. Talvez a lição tenha sido que expor a realidade de algo pode ser tão ameaçador quanto atirar em coisas no sentido militarista da palavra.

A violência comum em jogos é uma metáfora para a incerteza e a aleatoriedade que enfrentamos na vida, mas o jogo fotográfico da minha mãe me ensinou que a violência não é a única maneira de lidar com esse problema, mesmo em um jogo.

Como funciona o cartão de Dia das Mães com scrollytelling

Minha mãe inspirou a aleatoriedade dos OVNIs neste experimento com sua habilidade de usar uma câmera para capturar os momentos fugazes de sentido em um mundo caótico.

A combinação de animações determinísticas acionadas por rolagem com a aleatoriedade dos OVNIs e a física do texto é possível usando tecnologia alienígena que não vi muito usada na natureza: eventos de snap-rolagem . Este módulo emergente – disponível apenas no Chrome e Opera no momento em que este artigo foi escrito – fornece uma API JavaScript simples para que, quando estilizamos a página para alternar entre as cenas diurnas e noturnas, possamos acionar comportamentos que não são possíveis apenas em CSS, como as trajetórias de voo aleatórias dos OVNIs e o Pretext – efeito inspirado de os OVNIs repelindo letras enquanto as naves voam através do texto.

Sidenote: Aleatoriedade em CSS está chegando , mas só funciona no Safari por enquanto.

Aqui está o CSS para ativar o ajuste de rolagem:

/* The scroll container */
body {
  overflow-y: auto;
  scroll-snap-type: y mandatory;
}

/* Each snap target */
.snap-panel {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

…e o JavaScript para lidar com eventos de snap de rolagem:

// scrollsnapchanging fires while the user is scrolling —
// snapTargetBlock is the panel they are heading toward.
snapScroller.addEventListener('scrollsnapchanging', ({ snapTargetBlock }) => {
  markPanelStates({ active: selectedPanel, incoming: snapTargetBlock });
  if (snapTargetBlock === dayPanel)   onScrollingTowardDay();
  if (snapTargetBlock === nightPanel) onScrollingTowardNight();
});

// scrollsnapchange fires once a panel has snapped into place —
// snapTargetBlock is the panel now fully in view.
snapScroller.addEventListener('scrollsnapchange', ({ snapTargetBlock }) => {
  selectedPanel = snapTargetBlock;
  markPanelStates({ active: selectedPanel, incoming: null });
  if (snapTargetBlock === dayPanel)   onLandedOnDay();
  if (snapTargetBlock === nightPanel) onLandedOnNight();
});

Você pode ver que lidar com esses eventos nos permite criar transições sensíveis ao contexto entre as duas cenas, dependendo do estado da lógica do jogo quando o usuário desliza entre o dia e a noite e vice-versa. Minha mãe sempre me dava outra chance de acertar as coisas.

Caso você tenha encontrado isso enquanto procurava no Google por uma ideia convencional de presente para o Dia das Mães…

Palavras de despedida: No caso improvável de sua mãe não gostar de presentes virtuais caseiros de vanguarda que mostrem recursos emergentes do navegador, compre para ela um Kindle ou algo assim. Comprei um Kindle para minha mãe quando ela era viva. Líamos o mesmo romance separadamente em nossos Kindles e depois comparávamos anotações por telefone nos dias que eu não podia visitar.

Feliz Dia das Mães a todos!

Um presente Scrollytelling para a mãe no Dia das Mães de 2026 originalmente escrito à mão e publicado com amor em CSS-Tricks . Você realmente deveria receber o boletim informativo também.