# DIRECAO DE MOTION — CASE PIECE SQUAD FILM
## so efeitos, animacoes, micro-animacoes, transicoes e comportamento visual

---

## CONFIGURACAO GLOBAL

**fps:** 30
**formato:** 1080 x 1920 (9:16)
**easing padrao:** cubic-bezier(0.16, 1, 0.3, 1) — exponential ease-out
**spring padrao:** damping 20, stiffness 180, mass 1
**grain:** SVG fractal noise, tile 128px, opacidade 3.5% fundo escuro / 2% fundo claro, mix-blend-mode overlay, loop continuo em todas as cenas, nunca desliga
**paleta de motion:** preto #0A0A0A, branco rgba(255,255,255,0.90), cyan #1AA7D4 so em glow e acentos cirurgicos

---

## ENTRADAS DE TEXTO

### mask reveal horizontal
- clip-path: inset(0 100% 0 0) interpola para inset(0 0% 0 0)
- duracao: 12 frames (0.4s)
- easing: exponential ease-out
- direcao: sempre esquerda para direita
- usar para: titulos principais, frases de tese, nomes de projeto

### fade in vertical (ascendente)
- translateY de +16px para 0 + opacity de 0 para 1
- duracao: 10 frames (0.33s)
- easing: exponential ease-out
- usar para: subtitulos, creditos, textos de apoio, tags de categoria

### fade in vertical (descendente)
- translateY de -12px para 0 + opacity de 0 para 1
- duracao: 10 frames
- usar para: labels de topo, categorias, elementos que "caem" para posicao

### stagger sequencial
- cada item de uma lista recebe delay = index * 6 frames
- nunca animar todos os itens ao mesmo tempo
- o item mais recente entra com opacidade 90%, o anterior reduz para 75% por 3 frames e volta para 80%
- cria efeito de foco rolante: o olho persegue o item mais novo
- usar para: listas de servicos, features, nomes de cases

### word build com pesos diferentes
- a frase se monta palavra por palavra
- cada palavra entra com mask reveal individual
- palavras dominantes: opacidade 92%, escala 1.0
- palavras de apoio: opacidade 65%, escala 1.0
- stagger entre palavras: 4 frames
- usar para: frases de manifesto onde 1-2 palavras precisam pesar mais

---

## SAIDAS DE TEXTO

### fade out + push vertical
- opacity de 1 para 0 + translateY de 0 para -20px
- duracao: 12 frames
- easing: ease-in suave (cubic-bezier 0.4, 0, 1, 1)
- usar para: saida padrao de qualquer bloco de texto

### fade out rapido
- opacity de 1 para 0, sem translate
- duracao: 6-8 frames
- usar para: transicoes entre frases dentro da mesma cena (substituicao de bloco)

### hold limpo
- nenhuma animacao de saida. elementos permanecem em tela ate o corte
- usar para: cena final / CTA / ultimo frame que vira thumbnail

---

## TRANSICOES ENTRE CENAS

### push vertical suave
- cena atual: todo o conteudo sobe 20px + fade out em 12 frames
- proxima cena: conteudo entra de baixo (+20px para 0) + fade in em 12 frames
- overlap: 8 frames (as duas cenas coexistem brevemente)
- usar para: transicao padrao entre cenas de mesma temperatura (escuro para escuro)

### mask reveal expandindo
- um retangulo solido (cor do fundo da proxima cena) nasce do centro do viewport
- scale de 0.01 para 1.0 (cobre todo o frame)
- duracao: 12 frames
- easing: exponential ease-out
- a proxima cena esta por tras da mask, revelada conforme ela cresce
- usar para: mudanca de temperatura (escuro para claro ou claro para escuro)

### overlay escurecendo
- um layer preto sobe de baixo do frame (translateY de 100% para 0%)
- duracao: 10 frames
- simultaneamente, conteudo da cena atual faz push vertical + fade
- usar para: saida de cena clara voltando para fundo escuro

### cut suave
- fade to black em 8 frames + fade from black em 8 frames
- total: 16 frames (0.53s)
- nao e corte seco, mas quase. guarda 8 frames de grace para nao ser agressivo
- usar para: quebra de ritmo entre blocos de manifesto

### sem transicao (hold)
- ultimo frame permanece congelado
- usar para: fim do video. o frame final e o frame de thumbnail

---

## MICRO-ANIMACOES

### glow de destaque
- uma palavra especifica recebe box-shadow com cor cyan #1AA7D4
- blur: 40px
- opacidade do glow: 12-15%
- fade in: 10 frames
- a cor do texto NAO muda. so o glow atras
- usar no maximo 2x por video inteiro
- usar para: a palavra mais importante da tese (ex: "desejo", "resultado", "sente")

### glow respiratorio no logo
- a sombra cyan do logo oscila em opacidade
- de 8% para 12% e volta
- duracao do ciclo: 40 frames (1.33s) ida e volta
- easing: sine (suave, organico)
- quase invisivel, mas cria vida
- usar para: logo na cena final

### settling de escala (counter)
- apos o counter parar de animar, o numero faz scale de 1.02 para 1.0
- duracao: 6 frames
- easing: spring com damping alto (30)
- simula peso fisico do numero "pousando"
- usar para: numeros grandes, KPIs, metricas de impacto

### linha que se desenha
- uma linha horizontal ou vertical que cresce de um ponto
- horizontal: width de 0 para 60px, height fixo 1px
- vertical: height de 0 para a altura da lista, width fixo 2px
- duracao: 10-15 frames
- easing: exponential ease-out
- cor: branco 15% para separadores, cyan para acentos
- usar para: separar blocos de informacao, acentuar listas, marcar hierarquia

### separador ritmico
- uma linha vertical centralizada (1px, 24px, branco 20%)
- aparece com fade in de 4 frames, segura 6 frames, fade out de 4 frames
- total: 14 frames
- usar para: pausa visual entre duas frases que se substituem na mesma cena

### pill stagger
- tags/pills de servicos entram um a um
- cada pill: fade in + translateY de +8px para 0
- duracao por pill: 6 frames
- stagger entre pills: 4 frames
- os pills tem micro-pulse de opacidade apos estabilizar (oscila de 55% para 60% em loop lento de 60 frames)
- usar para: listas de servicos, categorias, features

### sombra que respira em card
- um bloco retangular (placeholder de footage, card de case)
- box-shadow entra suave: de 0 4px 20px rgba(0,0,0,0.04) para 0 8px 30px rgba(0,0,0,0.08)
- duracao: 30 frames apos o card aparecer
- easing: linear (quase imperceptivel)
- usar para: blocos de conteudo visual, cards de projeto

### foco rolante em lista
- conforme cada item novo entra na lista, o item anterior reduz opacidade de 88% para 70% por 3 frames, depois sobe para 80%
- o item mais recente fica a 90%
- o ultimo item da lista fica a 92%
- cria hierarquia temporal: o mais novo e o mais vivo
- usar para: qualquer lista que entra com stagger

---

## ANIMACAO DE ELEMENTOS

### counter numerico
- interpola de 0 ao valor alvo
- duracao: 36 frames (1.2s)
- easing: exponential ease-out (rapido no comeco, desacelera no final)
- arredonda com Math.round() em cada frame
- o prefixo (+ ou outro) e estatico, nao anima
- apos parar: settling de escala (1.02 para 1.0 em 6 frames)
- usar para: numeros de impacto, KPIs, metricas

### build de logo (Squad Film wordmark)
- fase 1: letras SQUAD em cyan fazem mask reveal horizontal (esquerda para direita, 10 frames)
- fase 2: as 3 barras diagonais (///) entram com stagger de 3 frames cada, fade in + scale de 0.8 para 1.0
- fase 3: letras FILM em branco fazem mask reveal horizontal logo apos as barras
- total do build: ~24 frames (0.8s)
- usar para: cena final, assinatura

### entrada de bloco visual (card/footage)
- scale de 0.96 para 1.0 + opacity de 0 para 1
- duracao: 12 frames
- easing: exponential ease-out
- border-radius: 8px
- usar para: placeholders de footage, thumbnails de case, blocos visuais

### tag de categoria
- fade in vertical descendente (-12px para 0)
- duracao: 8 frames
- sempre precede o titulo principal (entra 8-10 frames antes)
- cor: cyan em fundo claro, branco 45% em fundo escuro
- usar para: labels como CASE, CINEMA DE PERFORMANCE, O QUE ENTREGAMOS

---

## COMPORTAMENTO DE TIPOGRAFIA

### titulos principais (Inter 900, 38-52px, lowercase)
- sempre entram com mask reveal horizontal
- tracking: -0.03em
- line-height: 0.95
- opacidade maxima: 90-92% (nunca branco puro 100%)
- quebra de linha e semantica (nao deixa a engine quebrar sozinha)

### textos de apoio (Inter 400, 13-16px)
- sempre entram com fade in vertical ascendente
- opacidade: 50-65%
- line-height: 1.5
- nunca competem com o titulo da mesma cena

### numeros (Inter 900, 72-96px)
- sempre entram com counter animado
- settling de escala ao final
- opacidade: 92%
- tracking: -0.04em

### tags (Inter 500, 9-10px, uppercase, tracking +0.15em)
- entram com fade in vertical descendente
- opacidade: 45-60%
- sempre sao o primeiro elemento a entrar na cena

---

## COMPORTAMENTO DE COR

### cyan #1AA7D4
- NUNCA como cor de texto
- NUNCA como fundo
- SOMENTE em: glow atras de palavra, barra lateral de lista, tag de categoria em fundo claro, logo Squad Film
- aparicoes maximas por video: 4-5
- funcao: pontuar, nao dominar

### branco
- nunca 100% opacidade em texto sobre fundo escuro (maximo 92%)
- a variacao de opacidade (90%, 80%, 65%, 55%, 45%) e o unico sistema de hierarquia necessario
- hierarquia por opacidade substitui hierarquia por tamanho na maioria dos apoios

### preto #0A0A0A
- nunca #000000 puro (muito duro)
- fundo padrao de 4 das 6 cenas
- com grain sempre

---

## COMPORTAMENTO DE TEXTURA

### grain
- SVG fractal noise inline (nao imagem externa)
- tile size: 128px
- opacidade: 3.5% sobre fundo escuro, 2% sobre fundo claro
- mix-blend-mode: overlay
- z-index: acima do fundo, abaixo de todo conteudo
- roda em loop continuo
- nao e opcional. e parte da identidade. sem grain a peca morre

---

## REGRAS DE TIMING

- nenhum texto fica em tela por menos de 1.2 segundos (36 frames)
- nenhuma transicao entre cenas dura menos de 10 frames ou mais de 16 frames
- a tag de categoria sempre entra 8-10 frames antes do titulo
- o texto de apoio sempre entra 16-24 frames apos o titulo estabilizar
- o settling (micro scale/bounce) nunca excede 6 frames
- o glow nunca aparece antes do texto estar 100% revelado (minimo 10 frames depois)

---

## O QUE NAO EXISTE NESTE SISTEMA

- bounce / overshoot / rubber band
- glitch / RGB split / chromatic aberration
- zoom louco / whip pan / camera shake
- parallax multiplas camadas (permitido no maximo 1 layer de parallax sutil)
- particle effects / confetti / sparkle
- 3D rotation ou perspective transform
- blur de transicao (motion blur entre cenas)
- presets de pack (light leaks, lens flare, bokeh overlay)
- som de whoosh (se som for adicionado depois, usar hits secos e sub graves pontuais)
- qualquer efeito que nao tenha funcao narrativa

---

## RESUMO DO VOCABULARIO DE MOTION

| Tipo | Tecnica | Duracao | Uso |
|------|---------|---------|-----|
| Entrada titulo | mask reveal horizontal | 12f | titulos, nomes |
| Entrada apoio | fade in vertical +16px | 10f | subtitulos, creditos |
| Entrada tag | fade in vertical -12px | 8f | labels, categorias |
| Entrada lista | stagger 6f + foco rolante | 6f por item | listas, servicos |
| Entrada card | scale 0.96>1.0 + fade | 12f | blocos visuais |
| Entrada numero | counter + settling | 36f + 6f | KPIs, metricas |
| Entrada logo | build 3 fases | 24f | assinatura final |
| Saida padrao | fade + push -20px | 12f | qualquer bloco |
| Saida rapida | fade puro | 6-8f | substituicao na mesma cena |
| Transicao padrao | push vertical overlap | 12f + 8f overlap | cena a cena mesma temp |
| Transicao mudanca | mask reveal expandindo | 12f | escuro > claro ou claro > escuro |
| Transicao escurecer | overlay subindo | 10f | claro voltando pra escuro |
| Transicao corte | fade to/from black | 8f + 8f | quebra ritmica |
| Micro glow | box-shadow cyan 40px blur | fade 10f | palavra destaque (max 2x) |
| Micro settling | scale 1.02>1.0 | 6f | numeros apos counter |
| Micro linha | width ou height de 0 ao alvo | 10-15f | separadores, acentos |
| Micro separador | fade in > hold > fade out | 14f | pausa entre frases |
| Micro pulse | opacidade oscila 55-60% | loop 60f | pills apos estabilizar |
| Micro sombra | box-shadow cresce sutil | 30f | cards de case |
| Micro foco | opacidade anterior cai e volta | 3f+3f | listas com stagger |
| Micro glow logo | sombra cyan oscila 8-12% | loop 40f | logo final |
| Textura | grain SVG fractal noise | continuo | todas as cenas |