dricosnyman/kinetic-type-skills

Tipo cinético

Quando as palavras aparecem na tela de um vídeo, os primeiros movimentos que vêm à mente são fade, slide e pop. Eles são aceitáveis, mas são o padrão, não uma escolha. Esta habilidade coloca toda a gama diante de você, cerca de 80 técnicas em 18 famílias, para que a escolha seja real.

Ela lembra; não direciona. Ela não adiciona etapas, páginas ou aprovações ao trabalho que você foi solicitado a fazer.

Liberdade criativa em primeiro lugar

Tudo aqui é um padrão ou uma sugestão, nunca uma regra. Quando um momento pedir outra coisa, quebre o padrão e explique o porquê em uma frase (em seu plano, um comentário de código ou sua resposta). Técnicas que não estão no menu também são válidas. O menu existe para ampliar suas opções, não para limitá-lo.

Escolha por momento, pelo significado

Leia as palavras antes de decidir como elas se movem. Pergunte o que a linha está fazendo, então escolha a técnica cujo significado combine:

As palavras...	Use
dividir, quebrar ou separar algo	slice, shatter
descobrir uma resposta ou revelar um segredo	scramble
pousar com força, ou fazer uma contagem regressiva	stomp
definir ou escrever um termo pela primeira vez	stroke-write-on, marker-highlight
mostrar um número mudando	odometer
descrever algo desaparecendo	disintegrate, smoke-dissolve
seguir um gráfico ou equação	text-on-a-path, sine-wave-type

A coluna "Use quando" no menu foi escrita exatamente para essa pergunta.

Quanta variedade

• Modo de ensino (o padrão para aulas e explicadores, e sempre que a solicitação não disser o contrário): um estilo da casa para cada linha comum, escolhido entre as técnicas marcadas com calm, além de alguns acentos reservados para os momentos que importam: um termo-chave, a resposta, um aviso. Técnicas marcadas com teach são bons acentos. Poucos acentos causam mais impacto do que muitos.
• Rédea solta quando o usuário pedir ("seja criativo", "solte-se", "me surpreenda"): qualquer coisa no menu está aberta, ainda escolhida pelo significado. Liberdade não significa usar muitas. Uma técnica ousada e bem escolhida pode ser melhor que dez.
• Se o vídeo claramente não for uma aula (um videoclipe, um trailer) e nenhum modo for nomeado, escolha o que se encaixa e diga qual caminho você seguiu.

Acabamentos e verificações

• Desfoque de movimento em movimentos rápidos. A animação por computador é perfeitamente nítida, então letras rápidas podem parecer instáveis. Um pouco de desfoque ao longo da direção do movimento faz parecer que foi filmado. O Remotion tem ferramentas de motion blur (@remotion/motion-blur); instale exatamente na versão do Remotion do projeto, da mesma forma que os pacotes em "Construindo no Remotion" (npm i -E @remotion/motion-blur@<versão>). Use como acabamento em movimentos rápidos; em deslocamentos lentos, parece apenas desfocado.
• Scripts conectados quebram efeitos no nível da letra. Em árabe, persa e outros scripts onde a forma de uma letra depende de suas vizinhas, dividir uma palavra em letras (cascata, scramble, anagrama, pop-on em ordem aleatória, flip-in 3D) quebra as formas das letras. Anime palavras ou linhas inteiras.
• Verifique se a fonte tem seus acentos. Para texto em africâner e outros latinos acentuados, certifique-se de que a fonte tenha as letras necessárias (ê, ë, ô, ï...) antes de animá-las.

Usando o menu

Abra references/menu.md (na pasta desta habilidade) antes de escolher. Ele lista cada técnica, agrupadas em famílias, com:

• seu nome e id (a chave em KT_COMPONENTS)
• uma aparência de uma linha e uma dica de use quando
• tags: calm (um bom estilo da casa), teach (um bom acento de ensino), exit (termina com as palavras sumidas, adequado para o fim de uma linha ou cena), ✚ novo
• como é construído: component (pronto para uso) ou example (uma cena anotada para adaptar, com o caminho fornecido)

Folheie os títulos das famílias e leia as linhas nas famílias que se encaixam no momento.

references/catalogue.md é leitura de apoio: a pesquisa por trás do menu, com fontes, história e o quão difícil cada técnica é de construir. Abra apenas quando quiser aprofundamento.

Construindo no Remotion

1. Copie a pasta remotion/ da pasta desta habilidade para o projeto como src/kinetic-type/.
2. Certifique-se de que o projeto tenha remotion, @remotion/google-fonts e @remotion/layout-utils, todos exatamente na versão do Remotion do projeto (o Remotion espera que todos os seus pacotes estejam em uma única versão). Por exemplo, na 4.0.536: npm i -E @remotion/[email protected] (-E salva a versão exata em vez de ^4.0.536).
3. Consulte um componente pelo seu id do menu e renderize-o dentro de um <Sequence>:

import { Sequence } from "remotion";
import { KT_COMPONENTS } from "./kinetic-type";

const House = KT_COMPONENTS["tracking-in"];
const Accent = KT_COMPONENTS["slice"];

export const Intro: React.FC = () => (
  <>
    <Sequence durationInFrames={75}>
      <House text="Every whole can be shared" />
    </Sequence>
    <Sequence from={75} durationInFrames={60}>
      <Accent text="Split it in half" keyWord="half" />
    </Sequence>
  </>
);

• Props (KTProps): text (obrigatório), keyWord (recebe o tratamento de acento), fontFamily (padrão Poppins), color, accent, fontSize (padrão ajusta à largura do quadro).
• Cada componente começa no frame 0 de seu <Sequence> e se estabiliza em cerca de um segundo, então a duração do Sequence define quanto tempo as palavras ficam. Dois tipos se comportam de forma diferente: técnicas exit terminam com as palavras sumidas no último frame do Sequence, e as baseadas em som (família 15) espalham as palavras por todo o Sequence, então sua duração define seu ritmo.
• Para técnicas example, abra o arquivo nomeado no menu e adapte a cena.
• Outras ferramentas de vídeo: o menu e a forma de escolher ainda se aplicam; os componentes prontos são apenas para Remotion.

Veja-as, ou dirija um vídeo inteiro

• Galeria: cada técnica com uma prévia ao vivo, em https://dricosnyman.github.io/kinetic-type-skills/
• Um vídeo inteiro, ou direção linha por linha: quando o trabalho for um vídeo inteiro de tipografia cinética feito a partir de um roteiro, ou o usuário quiser planejar, revisar e aprovar a tipografia de cada linha antes de qualquer coisa ser construída, use a habilidade kinetic-type-director. Ela executa o processo completo e se baseia nesta habilidade: ela elabora um roteiro de tipo, mostra-o em uma página que o usuário pode editar e, em seguida, constrói a versão aprovada com esses componentes.