tee.business insights

THE INTERACTION LIBRARY   /   VOL. 02

Web Motion Atlas / Atlas de movimento web

Dê um nome ao movimento.motion.

Experimente 24 efeitos. Encontre o uso certo e leve um prompt para IA ou HTML funcional.

Explorar efeitos↘Dicionário de design ↗

EXPLORE THE COLLECTION

Explorar efeitos / 24

24 / 24

01Rolagem↗
012024
022025
032026
50%

Role a página ou compare estados com o controle.

Linha do tempo na rolagem

Timeline on scroll

A linha cresce com a rolagem e revela os marcos em ordem.

Onde usarHistória, etapas e integração

Prompt e uso

Antes de usar Mantenha o conteúdo legível e a rolagem normal. Com movimento reduzido, mostre o estado completo.

scroll + transform
Implemente este efeito com HTML, CSS e JavaScript.
Linha do tempo na rolagem / Timeline on scroll
A linha cresce com a rolagem e revela os marcos em ordem.
Onde usar: História, etapas e integração
scroll + transform
Mantenha o conteúdo legível e a rolagem normal. Com movimento reduzido, mostre o estado completo.
Siga o alvo, gatilho e comportamento. Suporte 320px, teclado e prefers-reduced-motion; preserve a ordem e o foco.

02Rolagem↗
READ / FEEL / REMEMBER
50%

Role a página ou compare estados com o controle.

Revelação de texto

Scroll text reveal

As palavras ganham cor conforme a leitura avança.

Onde usarMensagens curtas e apresentação da marca

Prompt e uso

Antes de usar Mantenha o conteúdo legível e a rolagem normal. Com movimento reduzido, mostre o estado completo.

scroll + opacity
Implemente este efeito com HTML, CSS e JavaScript.
Revelação de texto / Scroll text reveal
As palavras ganham cor conforme a leitura avança.
Onde usar: Mensagens curtas e apresentação da marca
scroll + opacity
Mantenha o conteúdo legível e a rolagem normal. Com movimento reduzido, mostre o estado completo.
Siga o alvo, gatilho e comportamento. Suporte 320px, teclado e prefers-reduced-motion; preserve a ordem e o foco.

03Rolagem↗
01 / FORM
02 / FLOW
03 / FEELING
50%

Role a página ou compare estados com o controle.

Cartões empilhados

Stacking cards

O próximo cartão sobe e o anterior recua.

Onde usarServiços e sequência de casos

Prompt e uso

Antes de usar Mantenha o conteúdo legível e a rolagem normal. Com movimento reduzido, mostre o estado completo.

scroll + transform
Implemente este efeito com HTML, CSS e JavaScript.
Cartões empilhados / Stacking cards
O próximo cartão sobe e o anterior recua.
Onde usar: Serviços e sequência de casos
scroll + transform
Mantenha o conteúdo legível e a rolagem normal. Com movimento reduzido, mostre o estado completo.
Siga o alvo, gatilho e comportamento. Suporte 320px, teclado e prefers-reduced-motion; preserve a ordem e o foco.

04Rolagem↗
COLOR
STORIES.01 — 02 — 03
50%

Role a página ou compare estados com o controle.

Mudança de cor do fundo

Background color change

A paleta do fundo acompanha a posição de leitura.

Onde usarDivisão de capítulos e temas

Prompt e uso

Antes de usar Mantenha o conteúdo legível e a rolagem normal. Com movimento reduzido, mostre o estado completo.

scroll + background-color
Implemente este efeito com HTML, CSS e JavaScript.
Mudança de cor do fundo / Background color change
A paleta do fundo acompanha a posição de leitura.
Onde usar: Divisão de capítulos e temas
scroll + background-color
Mantenha o conteúdo legível e a rolagem normal. Com movimento reduzido, mostre o estado completo.
Siga o alvo, gatilho e comportamento. Suporte 320px, teclado e prefers-reduced-motion; preserve a ordem e o foco.

06Rolagem↗
01 / FORM
50%

Role a página ou compare estados com o controle.

Seção ativa no índice

Scrollspy

O índice destaca a seção que está sendo lida.

Onde usarGuias longos e especificações

Prompt e uso

Antes de usar Mantenha o conteúdo legível e a rolagem normal. Com movimento reduzido, mostre o estado completo.

scroll position + aria-current
Implemente este efeito com HTML, CSS e JavaScript.
Seção ativa no índice / Scrollspy
O índice destaca a seção que está sendo lida.
Onde usar: Guias longos e especificações
scroll position + aria-current
Mantenha o conteúdo legível e a rolagem normal. Com movimento reduzido, mostre o estado completo.
Siga o alvo, gatilho e comportamento. Suporte 320px, teclado e prefers-reduced-motion; preserve a ordem e o foco.

07Rolagem↗
50%

Role a página ou compare estados com o controle.

Botão voltar ao topo

Back to top

Aparece após rolar e permite voltar ao início.

Onde usarListas longas e nova exploração

Prompt e uso

Antes de usar Mantenha o conteúdo legível e a rolagem normal. Com movimento reduzido, mostre o estado completo.

scrollTo + focus
Implemente este efeito com HTML, CSS e JavaScript.
Botão voltar ao topo / Back to top
Aparece após rolar e permite voltar ao início.
Onde usar: Listas longas e nova exploração
scrollTo + focus
Mantenha o conteúdo legível e a rolagem normal. Com movimento reduzido, mostre o estado completo.
Siga o alvo, gatilho e comportamento. Suporte 320px, teclado e prefers-reduced-motion; preserve a ordem e o foco.

08Rolagem↗
A CLOSER LOOK
50%

Role a página ou compare estados com o controle.

Zoom na rolagem

Scroll zoom

A cena aumenta para aproximar o assunto.

Onde usarDetalhes de produto e imagens de destaque

Prompt e uso

Antes de usar Mantenha o conteúdo legível e a rolagem normal. Com movimento reduzido, mostre o estado completo.

scroll + scale
Implemente este efeito com HTML, CSS e JavaScript.
Zoom na rolagem / Scroll zoom
A cena aumenta para aproximar o assunto.
Onde usar: Detalhes de produto e imagens de destaque
scroll + scale
Mantenha o conteúdo legível e a rolagem normal. Com movimento reduzido, mostre o estado completo.
Siga o alvo, gatilho e comportamento. Suporte 320px, teclado e prefers-reduced-motion; preserve a ordem e o foco.

09Ponteiro e entrada↗

Passe o ponteiro, toque ou use Tab

Inclinação 3D

3D tilt

O cartão se inclina conforme a posição do ponteiro.

Onde usarPortfólios e produtos

Prompt e uso

Antes de usar Não dependa do ponteiro: permita toque e teclado. Os formulários não enviam dados.

pointermove + perspective
Implemente este efeito com HTML, CSS e JavaScript.
Inclinação 3D / 3D tilt
O cartão se inclina conforme a posição do ponteiro.
Onde usar: Portfólios e produtos
pointermove + perspective
Não dependa do ponteiro: permita toque e teclado. Os formulários não enviam dados.
Siga o alvo, gatilho e comportamento. Suporte 320px, teclado e prefers-reduced-motion; preserve a ordem e o foco.

10Ponteiro e entrada↗

Passe o ponteiro, toque ou use Tab

Luz no ponteiro

Spotlight hover

Uma luz acompanha o ponteiro e ilumina a borda.

Onde usarEscolha de recursos e itens

Prompt e uso

Antes de usar Não dependa do ponteiro: permita toque e teclado. Os formulários não enviam dados.

radial-gradient + Pointer Events
Implemente este efeito com HTML, CSS e JavaScript.
Luz no ponteiro / Spotlight hover
Uma luz acompanha o ponteiro e ilumina a borda.
Onde usar: Escolha de recursos e itens
radial-gradient + Pointer Events
Não dependa do ponteiro: permita toque e teclado. Os formulários não enviam dados.
Siga o alvo, gatilho e comportamento. Suporte 320px, teclado e prefers-reduced-motion; preserve a ordem e o foco.

11Ponteiro e entrada↗

Passe o ponteiro, toque ou use Tab

Troca de imagem ao passar

Image swap on hover

Passe o ponteiro ou toque para ver outra cor ou vista.

Onde usarVariantes e comparação de lados

Prompt e uso

Antes de usar Não dependa do ponteiro: permita toque e teclado. Os formulários não enviam dados.

opacity + :focus-visible
Implemente este efeito com HTML, CSS e JavaScript.
Troca de imagem ao passar / Image swap on hover
Passe o ponteiro ou toque para ver outra cor ou vista.
Onde usar: Variantes e comparação de lados
opacity + :focus-visible
Não dependa do ponteiro: permita toque e teclado. Os formulários não enviam dados.
Siga o alvo, gatilho e comportamento. Suporte 320px, teclado e prefers-reduced-motion; preserve a ordem e o foco.

12Ponteiro e entrada↗

Passe o ponteiro, toque ou use Tab

Texto em rolagem

Text roll

O texto sobe e o próximo aparece por baixo.

Onde usarLinks curtos e menus

Prompt e uso

Antes de usar Não dependa do ponteiro: permita toque e teclado. Os formulários não enviam dados.

overflow + translateY
Implemente este efeito com HTML, CSS e JavaScript.
Texto em rolagem / Text roll
O texto sobe e o próximo aparece por baixo.
Onde usar: Links curtos e menus
overflow + translateY
Não dependa do ponteiro: permita toque e teclado. Os formulários não enviam dados.
Siga o alvo, gatilho e comportamento. Suporte 320px, teclado e prefers-reduced-motion; preserve a ordem e o foco.

13Ponteiro e entrada↗

Passe o ponteiro, toque ou use Tab

Prévia de imagem

Hover image preview

Toque em um item para ver a imagem daquele lugar.

Onde usarPortfólios e destinos

Prompt e uso

Antes de usar Não dependa do ponteiro: permita toque e teclado. Os formulários não enviam dados.

pointermove + focus
Implemente este efeito com HTML, CSS e JavaScript.
Prévia de imagem / Hover image preview
Toque em um item para ver a imagem daquele lugar.
Onde usar: Portfólios e destinos
pointermove + focus
Não dependa do ponteiro: permita toque e teclado. Os formulários não enviam dados.
Siga o alvo, gatilho e comportamento. Suporte 320px, teclado e prefers-reduced-motion; preserve a ordem e o foco.

14Ponteiro e entrada↗

Teste de formato. Não envia nem salva dados.

Passe o ponteiro, toque ou use Tab

Rótulo flutuante

Floating label

O rótulo sobe e permanece visível durante a digitação.

Onde usarFormulários de contato e inscrição

Prompt e uso

Antes de usar Não dependa do ponteiro: permita toque e teclado. Os formulários não enviam dados.

label + :placeholder-shown
Implemente este efeito com HTML, CSS e JavaScript.
Rótulo flutuante / Floating label
O rótulo sobe e permanece visível durante a digitação.
Onde usar: Formulários de contato e inscrição
label + :placeholder-shown
Não dependa do ponteiro: permita toque e teclado. Os formulários não enviam dados.
Siga o alvo, gatilho e comportamento. Suporte 320px, teclado e prefers-reduced-motion; preserve a ordem e o foco.

15Ponteiro e entrada↗

Teste de formato. Não envia nem salva dados.

Passe o ponteiro, toque ou use Tab

Validação em linha

Inline validation

O erro e a correção aparecem junto ao campo.

Onde usarVerificar o formato de e-mail

Prompt e uso

Antes de usar Não dependa do ponteiro: permita toque e teclado. Os formulários não enviam dados.

ValidityState + aria-invalid
Implemente este efeito com HTML, CSS e JavaScript.
Validação em linha / Inline validation
O erro e a correção aparecem junto ao campo.
Onde usar: Verificar o formato de e-mail
ValidityState + aria-invalid
Não dependa do ponteiro: permita toque e teclado. Os formulários não enviam dados.
Siga o alvo, gatilho e comportamento. Suporte 320px, teclado e prefers-reduced-motion; preserve a ordem e o foco.

16Ponteiro e entrada↗

Teste de formato. Não envia nem salva dados.

Passe o ponteiro, toque ou use Tab

Botão de carregamento

Loading button

Mostra o progresso e o resultado e evita ações repetidas.

Onde usarRetorno ao salvar ou enviar

Prompt e uso

Antes de usar Não dependa do ponteiro: permita toque e teclado. Os formulários não enviam dados.

disabled + aria-busy
Implemente este efeito com HTML, CSS e JavaScript.
Botão de carregamento / Loading button
Mostra o progresso e o resultado e evita ações repetidas.
Onde usar: Retorno ao salvar ou enviar
disabled + aria-busy
Não dependa do ponteiro: permita toque e teclado. Os formulários não enviam dados.
Siga o alvo, gatilho e comportamento. Suporte 320px, teclado e prefers-reduced-motion; preserve a ordem e o foco.

17Apresentação↗

Use os controles do exemplo

Transição de visualização

View transition

A mesma imagem conecta o cartão aos seus detalhes.

Onde usarPassar da lista aos detalhes

Prompt e uso

Antes de usar Mantenha o acesso ao conteúdo e ofereça pausa ou fechamento, mesmo sem suporte ao efeito.

document.startViewTransition
Implemente este efeito com HTML, CSS e JavaScript.
Transição de visualização / View transition
A mesma imagem conecta o cartão aos seus detalhes.
Onde usar: Passar da lista aos detalhes
document.startViewTransition
Mantenha o acesso ao conteúdo e ofereça pausa ou fechamento, mesmo sem suporte ao efeito.
Siga o alvo, gatilho e comportamento. Suporte 320px, teclado e prefers-reduced-motion; preserve a ordem e o foco.

19Apresentação↗

Use os controles do exemplo

Pontos interativos

Hotspots

Selecione um ponto no desenho para ler sobre aquela parte.

Onde usarEstrutura de produtos e locais

Prompt e uso

Antes de usar Mantenha o acesso ao conteúdo e ofereça pausa ou fechamento, mesmo sem suporte ao efeito.

button + aria-expanded
Implemente este efeito com HTML, CSS e JavaScript.
Pontos interativos / Hotspots
Selecione um ponto no desenho para ler sobre aquela parte.
Onde usar: Estrutura de produtos e locais
button + aria-expanded
Mantenha o acesso ao conteúdo e ofereça pausa ou fechamento, mesmo sem suporte ao efeito.
Siga o alvo, gatilho e comportamento. Suporte 320px, teclado e prefers-reduced-motion; preserve a ordem e o foco.

20Apresentação↗
Demo de 10 segundos

Use os controles do exemplo

Contagem regressiva

Countdown timer

O tempo restante diminui até zero e então para.

Onde usarPrazos e início de eventos

Prompt e uso

Antes de usar Mantenha o acesso ao conteúdo e ofereça pausa ou fechamento, mesmo sem suporte ao efeito.

performance.now + timeout
Implemente este efeito com HTML, CSS e JavaScript.
Contagem regressiva / Countdown timer
O tempo restante diminui até zero e então para.
Onde usar: Prazos e início de eventos
performance.now + timeout
Mantenha o acesso ao conteúdo e ofereça pausa ou fechamento, mesmo sem suporte ao efeito.
Siga o alvo, gatilho e comportamento. Suporte 320px, teclado e prefers-reduced-motion; preserve a ordem e o foco.

21Apresentação↗
MAKE
WAVES.
50%

Use os controles do exemplo

Divisor animado

Animated shape divider

Uma onda em movimento conecta duas seções.

Onde usarLimites da capa e dos capítulos

Prompt e uso

Antes de usar Mantenha o acesso ao conteúdo e ofereça pausa ou fechamento, mesmo sem suporte ao efeito.

SVG path + transform
Implemente este efeito com HTML, CSS e JavaScript.
Divisor animado / Animated shape divider
Uma onda em movimento conecta duas seções.
Onde usar: Limites da capa e dos capítulos
SVG path + transform
Mantenha o acesso ao conteúdo e ofereça pausa ou fechamento, mesmo sem suporte ao efeito.
Siga o alvo, gatilho e comportamento. Suporte 320px, teclado e prefers-reduced-motion; preserve a ordem e o foco.

22Apresentação↗

Use os controles do exemplo

Animação de curtida

Like animation

O coração salta brevemente quando a seleção muda.

Onde usarFavoritos e retorno ao salvar

Prompt e uso

Antes de usar Mantenha o acesso ao conteúdo e ofereça pausa ou fechamento, mesmo sem suporte ao efeito.

aria-pressed + Web Animations
Implemente este efeito com HTML, CSS e JavaScript.
Animação de curtida / Like animation
O coração salta brevemente quando a seleção muda.
Onde usar: Favoritos e retorno ao salvar
aria-pressed + Web Animations
Mantenha o acesso ao conteúdo e ofereça pausa ou fechamento, mesmo sem suporte ao efeito.
Siga o alvo, gatilho e comportamento. Suporte 320px, teclado e prefers-reduced-motion; preserve a ordem e o foco.

23Apresentação↗
Além do comum.

Use os controles do exemplo

Indicação de rolagem

Scroll cue

Um movimento para baixo indica mais conteúdo; toque para ir.

Onde usarLevar da primeira tela ao artigo

Prompt e uso

Antes de usar Mantenha o acesso ao conteúdo e ofereça pausa ou fechamento, mesmo sem suporte ao efeito.

scrollIntoView + focus
Implemente este efeito com HTML, CSS e JavaScript.
Indicação de rolagem / Scroll cue
Um movimento para baixo indica mais conteúdo; toque para ir.
Onde usar: Levar da primeira tela ao artigo
scrollIntoView + focus
Mantenha o acesso ao conteúdo e ofereça pausa ou fechamento, mesmo sem suporte ao efeito.
Siga o alvo, gatilho e comportamento. Suporte 320px, teclado e prefers-reduced-motion; preserve a ordem e o foco.

24Apresentação↗
Além do comum.

Use os controles do exemplo

Vídeo de fundo

Background video

Reproduz uma cena atrás de uma mensagem legível.

Onde usarViagens, espaços e marcas

Prompt e uso

Antes de usar Mantenha o acesso ao conteúdo e ofereça pausa ou fechamento, mesmo sem suporte ao efeito.

video + muted + playsinline
Implemente este efeito com HTML, CSS e JavaScript.
Vídeo de fundo / Background video
Reproduz uma cena atrás de uma mensagem legível.
Onde usar: Viagens, espaços e marcas
video + muted + playsinline
Mantenha o acesso ao conteúdo e ofereça pausa ou fechamento, mesmo sem suporte ao efeito.
Siga o alvo, gatilho e comportamento. Suporte 320px, teclado e prefers-reduced-motion; preserve a ordem e o foco.

FROM INSPIRATION TO IMPLEMENTATION

Encontre, experimente, descreva.

Descreva o que muda, quando e como. Alguns nomes são informais. Os exemplos são originais: escolha conforme conteúdo, dispositivos e público.

Salvar HTML funcional

Salve o atlas em um HTML. Abra no computador e edite HTML, CSS e JavaScript. Licença MIT.

MIT
Especificações e referências
01 / 03