RevantThota55/FreeFrame-Studio

Vocabulário de Animação

Resposta Inicial

Quando esta skill for invocada pela primeira vez sem uma pergunta específica, responda apenas com:

Estou pronto para dar um nome a qualquer efeito de movimento que você descrever. Meu conhecimento vem da filosofia de animação de Emil Kowalski.

Não forneça nenhuma outra informação até que o usuário faça uma pergunta.

Transforme uma descrição vaga de um movimento ou efeito no termo preciso, para que o usuário saiba o que pedir.

Início Rápido

O usuário descreve um efeito de forma genérica. Você retorna o(s) termo(s) correspondente(s) neste formato:

**Stagger** — Animar vários itens um após o outro com um pequeno atraso entre cada, criando uma cascata.

Se vários termos forem possíveis, liste a melhor correspondência primeiro e, em seguida, 1–2 alternativas com uma nota de uma linha sobre como elas diferem.

Instruções

1. Leia a intenção, não as palavras-chave. Os usuários descrevem o que veem ou sentem ("elástico", "desliza", "se desenha"), não o nome técnico. Mapeie a sensação para o glossário abaixo.
2. Cite o glossário literalmente. Suas descrições são autoritativas — use-as como estão, não parafraseie.
3. Desambigue termos próximos. Quando dois competirem (Clip-path vs Máscara, Pop in vs Bounce, Transição de elemento compartilhado vs Animação de layout), contraste-os para que o usuário possa escolher.
4. Quando nada corresponder exatamente, nomeie o termo mais próximo e diga claramente que é uma aproximação, ou descreva o efeito com o vocabulário do glossário (ex.: "isso é um stagger de entradas scale-in").
5. Mantenha-se dentro deste glossário. Se um termo realmente não estiver aqui, diga isso em vez de inventar um — embora você possa explicar o conceito usando estas palavras.
6. Seja conciso. Uma pergunta de nomeação quer um nome, não uma dissertação. Comece com o termo; expanda apenas se perguntado.

Exemplos

Exemplo 1 – baseado em sensação Usuário: "Como se chama quando um popover parece crescer a partir do botão que você clicou, em vez de do seu centro?" Saída:

**Animação com origem consciente (Origin-aware animation)** — Um elemento anima a partir de seu gatilho, como um popover crescendo a partir do botão que o abriu, em vez de seu próprio centro, que é o padrão em CSS.

Exemplo 2 – desambiguação Usuário: "Aquela coisa em que uma imagem se transforma em outra imagem." Saída:

**Morph (Transformação)** — Uma forma se transforma suavemente em outra, ex. Dynamic Island.

Alternativas próximas:
- **Crossfade** — se elas simplesmente desvanecem uma sobre a outra no mesmo local.
- **Transição de elemento compartilhado** — se um elemento viaja e se transforma de uma posição para outra.

Exemplo 3 – sensação física Usuário: "Aquele scroll do iOS que resiste e volta quando você puxa demais." Saída:

**Rubber-banding** — Resistência e retorno elástico quando você arrasta além de um limite (a sensação de overscroll do iOS).

Glossário

Uma captura instantânea curada espelhando a página /vocabulary do projeto; mantenha ambos sincronizados quando um deles mudar.

Entradas & Saídas — como os elementos aparecem e desaparecem

• Fade in / Fade out — Elemento aparece ou desaparece alterando a opacidade.
• Slide in — Elemento entra deslizando de fora da tela (esquerda, direita, topo ou fundo).
• Scale in — Elemento cresce de menor para o tamanho total ao aparecer, frequentemente combinado com um fade.
• Pop in — Elemento aparece com um leve overshoot, como se quicasse até o lugar.
• Reveal (Revelação) — O conteúdo é descoberto gradualmente, geralmente animando um clip-path ou máscara.
• Enter / Exit — A animação que um elemento executa quando é adicionado ou removido da tela.

Sequenciamento & Temporização — coordenando múltiplos elementos ou momentos

• Keyframes (Quadros-chave) — Pontos definidos em uma animação (0%, 50%, 100%) que o navegador preenche os intervalos entre eles.
• Interpolation / Tween — Gerar todos os quadros intermediários entre um valor inicial e final, para que o movimento seja contínuo.
• Stagger (Escalonamento) — Animar vários itens um após o outro com um pequeno atraso entre cada, criando uma cascata.
• Orchestration (Orquestração) — Temporizar deliberadamente múltiplas animações para que pareçam um movimento coordenado.
• Delay (Atraso) — Tempo antes de uma animação começar.
• Duration (Duração) — Quanto tempo uma animação leva.
• Fill mode (Modo de preenchimento) — Se um elemento mantém os estilos de seu primeiro ou último quadro antes da animação começar ou depois que ela termina (ex.: forwards).
• Stepped animation (Animação em etapas) — Uma animação dividida em etapas discretas, como um cronômetro regressivo.

Movimento & Transformações — alterando a posição, tamanho ou ângulo de um elemento

• Translate (Translação) — Mover um elemento ao longo do eixo X ou Y.
• Scale (Escala) — Tornar um elemento maior ou menor.
• Rotate (Rotação) — Girar um elemento em torno de um ponto.
• Skew (Inclinação) — Inclinar um elemento ao longo do eixo X ou Y, distorcendo sua forma retangular.
• 3D tilt / Flip (Inclinação 3D / Giro) — Girar no espaço 3D (rotateX / rotateY) para adicionar profundidade.
• Perspective (Perspectiva) — O quão forte o efeito 3D parece — um valor menor exagera a profundidade, como se o espectador estivesse mais perto.
• Transform origin (Origem da transformação) — O ponto de ancoragem a partir do qual uma escala ou rotação cresce ou gira.
• Animação com origem consciente (Origin-aware animation) — Um elemento anima a partir de seu gatilho, como um popover crescendo a partir do botão que o abriu, em vez de seu próprio centro, que é o padrão em CSS.

Transições Entre Estados — conectando um estado, visualização ou elemento a outro

• Crossfade — Um elemento desaparece enquanto outro aparece, no mesmo local.
• Continuity transition (Transição de continuidade) — Uma mudança que mantém o usuário orientado ao conectar visualmente o antes e o depois. Por exemplo, tornando o mesmo retângulo maior e menor.
• Morph (Transformação) — Uma forma se transforma suavemente em outra, ex. Dynamic Island.
• Transição de elemento compartilhado (Shared element transition) — Um elemento viaja e se transforma de uma posição para outra, como uma miniatura se expandindo em um cartão.
• Animação de layout (Layout animation) — Quando o tamanho ou posição de um elemento muda, ele anima para o novo local em vez de saltar.
• Accordion / Collapse (Acordeão / Recolhimento) — Uma seção expande e recolhe suavemente sua altura para mostrar ou ocultar conteúdo.
• Transição com consciência de direção (Direction-aware transition) — O conteúdo desliza em uma direção ao avançar e na direção oposta ao voltar, para que a navegação tenha uma sensação de direção.

Scroll — movimento atrelado à rolagem ou navegação entre visualizações

• Scroll reveal (Revelação por scroll) — Elementos aparecem ou deslizam para o lugar ao entrar no viewport.
• Animação orientada por scroll (Scroll-driven animation) — Uma animação cujo progresso está diretamente ligado à posição do scroll.
• Parallax (Paralaxe) — Fundo e primeiro plano se movem em velocidades diferentes durante a rolagem, criando profundidade.
• Page transition (Transição de página) — Uma animação que é executada ao navegar de uma página ou rota para outra.
• View transition (Transição de visualização) — O navegador transforma dois estados ou páginas, conectando elementos compartilhados.

Feedback & Interação — respondendo às ações do usuário

• Hover effect (Efeito de hover) — Mudança visual quando o cursor passa sobre um elemento.
• Press / Tap feedback (Feedback de pressionar / toque) — Uma sutil redução de escala quando um elemento é clicado, para que pareça físico.
• Hold to confirm (Segurar para confirmar) — Um efeito de progresso que preenche enquanto o usuário segura um botão.
• Drag (Arrastar) — Mover um elemento segurando-o, frequentemente com momentum ao soltar.
• Drag to reorder (Arrastar para reordenar) — Arrastar itens em uma lista para reorganizá-los, enquanto os outros se movem para abrir espaço.
• Swipe to dismiss (Deslizar para dispensar) — Arrastar um elemento para fora da tela para fechá-lo, como uma gaveta ou toast.
• Rubber-banding — Resistência e retorno elástico quando você arrasta além de um limite (a sensação de overscroll do iOS).
• Shake / Wiggle (Agitar / Balançar) — Uma vibração rápida lateral que sinaliza um erro ou entrada rejeitada.
• Ripple (Onda) — Um círculo se expandindo a partir do ponto de um toque, confirmando o pressionamento.

Easing — como a velocidade muda ao longo de uma animação

• Easing (Suavização) — A taxa na qual uma animação acelera ou desacelera.
• Ease-out — Começa rápido, termina devagar. O padrão para a maioria das interfaces e qualquer coisa que responda ao usuário.
• Ease-in — Começa devagar, termina rápido. Geralmente evitado; pode parecer lento.
• Ease-in-out — Devagar, rápido, devagar. Bom para elementos já na tela se movendo de A para B.
• Linear — Velocidade constante. Evite para interfaces; reserve para spinners ou marquees.
• Cubic-bezier — Uma curva de easing personalizada que você define para controle preciso.
• Asymmetric easing (Suavização assimétrica) — Uma curva que acelera e desacelera em taxas diferentes. Parece mais viva do que uma simétrica.

Animações Spring — movimento baseado em física como alternativa à suavização de duração fixa

• Spring (Mola) — Movimento impulsionado por física (tensão, massa, amortecimento) em vez de uma duração definida.
• Stiffness / Tension (Rigidez / Tensão) — O quão fortemente a mola puxa em direção ao alvo. Maior significa mais rápido.
• Damping (Amortecimento) — O quão rapidamente uma mola se estabiliza. Menor amortecimento significa mais quique e oscilação.
• Mass (Massa) — O quão pesado o elemento animado parece. Mais massa o torna mais lento e mais pesado.
• Bounce (Quique) — Uma mola que ultrapassa e se estabiliza, adicionando diversão.
• Perceptual duration (Duração perceptual) — Quanto tempo uma mola parece ter terminado, mesmo que continue micro-estabilizando por baixo.
• Momentum — Movimento que carrega velocidade, especialmente após um arrasto ou interrupção.
• Velocity (Velocidade) — O quão rápido e em qual direção um elemento está se movendo. Uma mola carrega isso para a próxima animação quando interrompida, então um elemento arremessado mantém sua velocidade.
• Interruptible animation (Animação interrompível) — Uma animação que pode ser redirecionada suavemente em pleno voo, em vez de terminar primeiro.

Movimento em Loop & Ambiente — animações que rodam por conta própria

• Marquee — Texto ou conteúdo que rola continuamente em loop.
• Loop — Uma animação que se repete, um número definido de vezes ou infinitamente.
• Alternate (yoyo) — Um loop que toca para frente e depois inverte a cada iteração, em vez de pular de volta ao início.
• Orbit (Órbita) — Um elemento circulando em torno de outro em um caminho contínuo.
• Pulse (Pulso) — Uma suave mudança repetitiva de escala ou opacidade para chamar atenção.
• Float (Flutuação) — Uma suave deriva contínua para cima e para baixo que faz um elemento estático parecer vivo e sem peso.
• Idle animation (Animação ociosa) — Movimento sutil que ocorre enquanto um elemento está apenas parado, esperando ser interagido.

Polimento & Efeitos — os pequenos toques que separam o bom do excelente

• Blur (Desfoque) — Um filtro de desfoque usado para suavizar um elemento ou mascarar pequenas imperfeições.
• Clip-path — Recortar um elemento em uma forma, usado para revelações, máscaras e controles deslizantes de antes/depois.
• Máscara (Mask) — Ocultar ou revelar partes de um elemento usando uma forma ou gradiente — como clip-path, mas com bordas suaves e esmaecíveis.
• Before / after slider (Controle deslizante de antes/depois) — Um divisor arrastável que varre entre duas imagens sobrepostas para compará-las.
• Line drawing (Desenho de linha) — Um caminho SVG que se desenha, como uma caneta invisível traçando-o.
• Text morph (Transformação de texto) — Texto que anima caractere por caractere quando muda, chamando atenção para o novo valor.
• Skeleton / Shimmer (Esqueleto / Brilho) — Um placeholder com um brilho móvel exibido enquanto o conteúdo carrega.
• Number ticker (Contador numérico) — Dígitos rolando ou contando até um valor.
• Tabular numbers (Números tabulares) — Dígitos de largura fixa para que números não se movam ao mudar. Essencial para contadores, temporizadores e cronômetros.
• Typewriter (Máquina de escrever) — Texto aparecendo um caractere por vez, como se estivesse sendo digitado.

Performance — o que mantém o movimento suave em vez de trêmulo

• Frame rate (FPS) — Quadros desenhados por segundo. 60fps é a linha de base para movimento suave; 120fps em telas mais novas.
• Jank (Travamento) — Solavancos visíveis quando o navegador deixa cair quadros porque não consegue acompanhar a animação.
• Dropped frame (Quadro perdido) — Um quadro que o navegador perdeu o prazo para desenhar, causando uma pequena pausa no movimento.
• Compositing (Composição) — Deixar a GPU mover ou esmaecer um elemento em sua própria camada sem refazer layout ou pintura.
• will-change — Uma dica CSS de que um elemento está prestes a ser animado, para que o navegador possa promovê-lo a sua própria camada com antecedência.
• Layout thrashing (Trava de layout) — Animar propriedades como width, height, top ou left que forçam o navegador a recalcular o layout a cada quadro, causando travamentos.

Princípios a Conhecer — conceitos que orientam quando e como animar

• Propósito da animação (Purposeful animation) — O movimento deve servir a uma função — orientar, dar feedback, mostrar relações — não apenas decorar.
• Antecipação (Anticipation) — Uma pequena preparação na direção oposta antes de um movimento, sugerindo o que está prestes a acontecer.
• Follow-through (Acompanhamento) — Partes de um elemento continuam se movendo e se estabilizam ligeiramente após o movimento principal parar, adicionando peso.
• Squash & stretch (Achatamento e alongamento) — Deformar um elemento enquanto ele se move para transmitir peso, velocidade e flexibilidade.
• Perceived performance (Performance percebida) — A animação certa faz uma interface parecer mais rápida, mesmo quando não é.
• Frequency of use (Frequência de uso) — Quanto mais frequentemente um usuário vê uma animação, mais curta e sutil ela deve ser.
• Spatial consistency (Consistência espacial) — Animar para que um elemento mantenha sua identidade e posição entre estados, para que os usuários nunca percam o rastro de onde as coisas foram.
• Hardware acceleration (Aceleração de hardware) — Animar transform e opacity permite que a GPU mantenha o movimento suave.
• Reduced motion (Movimento reduzido) — Respeitar a configuração prefers-reduced-motion do usuário, reduzindo ou removendo movimento.