Constrói · Software & Sistemas
Seu site tem a sua cara ou a de mais mil empresas?
Gesto: o traço se desenha e vira forma chapada. Curva: desenhar. Destaque: o botão.
Três verbos
Constrói. Atrai. Protege.
As frases são as das campanhas do manifesto. A barra acima controla as peças quadro a quadro, a 30 quadros por segundo: o que se vê aqui é exatamente o que o Remotion renderiza.
Atrai · Gestão de Tráfego
Curtida não paga boleto.
Gesto: as barras sobem e a linha encontra o ponto que converte. Curva: subir. Destaque: a conversão.
Protege · Registro de Marcas
Quem registra primeiro é o dono.
Gesto: o selo desce, assenta com peso e a moldura fecha. Curva: assentar. Destaque: o número do registro.
Pausa e virada
O Sábio fala; o Irreverente corta
A primeira frase entra calma. Vem uma pausa de 0,4 segundo (12 quadros). A segunda entra em corte seco, sem transição, e assenta. Em proposta comercial não há virada; nos reels, ela é forte.
Existem milhões de pardais.
Este existe uma vez.
Nº 0001Vinheta
Dois segundos de marca
Abre e fecha vídeos. O círculo se desenha a partir da bola, o logo aparece por dentro dele sem nunca ser deformado ou girado, e a assinatura entra um verbo por vez, em corte seco. Depois do quadro 60, tudo fica parado.
Constrói.Atrai.Protege.
Regras da vinheta
- O logo só se revela: máscara, nunca deformação, giro ou troca de cor.
- O círculo vem primeiro e nunca some, nem por um quadro.
- Quadros 0 a 24: o traço do círculo (desenhar). Quadros 18 a 42: o logo aparece por dentro. Quadros 44, 50 e 56: um verbo em cada.
- Sem som de efeito no carimbo; se houver trilha, o corte cai no tempo dela.
Curvas e tempos
Três curvas e quatro durações
Nada de ricochete nem de elástico. Cada verbo tem a sua curva, e o ponto coral de cada gráfico corre junto com a barra de quadros.
Desenhar
Suave na entrada e na saída. Para traços, formas e telas: Constrói.
Subir
Arranca rápido e desacelera. Para números, barras e escala: Atrai.
Assentar
Ganha peso e freia seco no fim, sem quicar. Para selos e fechamentos: Protege.
| Duração | Segundos | Quadros (30 por segundo) | Uso |
|---|---|---|---|
| Rápido | 0,2 | 6 | Interação no site: passar o mouse, foco, clique. |
| Médio | 0,5 | 15 | Entrada de bloco e de texto. |
| Lento | 0,9 | 27 | Gesto principal da peça (o verbo). |
| Pausa da virada | 0,4 | 12 | Silêncio antes do corte seco. |
Remotion e site
A mesma função nos dois lugares
Toda animação desta página é uma função do quadro. No site, o quadro vem do tempo da página; no Remotion, de useCurrentFrame(). O desenho não muda.
// curvas da marca: recebem e devolvem um valor de 0 a 1 export const desenhar = (t: number) => (t < .5 ? 4 * t ** 3 : 1 - (-2 * t + 2) ** 3 / 2); export const subir = (t: number) => 1 - (1 - t) ** 3; export const assentar = (t: number) => t ** 2.6; // progresso local de um gesto, a partir do quadro export const trecho = (quadro: number, inicio: number, duracao: number) => Math.min(1, Math.max(0, (quadro - inicio) / duracao)); // no Remotion const quadro = useCurrentFrame(); const queda = assentar(trecho(quadro, 30, 27)); // selo do Protege: 0,9 s const y = -260 + 260 * queda;
Aprovado em 17/10/2026
Gestos, curvas e vinheta
- Os três gestos e as três curvas.
- O ritmo da pausa e virada.
- A vinheta de dois segundos.
Pronto
Biblioteca
- Componentes React com useQuadro() para o site, em animacoes/biblioteca.
- Composições Remotion (três verbos, virada e vinheta) com render de teste.