dricosnyman/kinetic-type-skills

Tipo cinético

Cuando las palabras aparecen en pantalla en un video, los primeros movimientos que vienen a la mente son fundido, deslizamiento y aparición repentina. Son aceptables, pero son el valor predeterminado, no una elección. Esta habilidad pone a tu alcance todo el abanico, alrededor de 80 técnicas en 18 familias, para que la elección sea real.

Recuerda; no dirige. No añade pasos, páginas ni aprobaciones al trabajo que te pidieron hacer.

Libertad creativa primero

Todo aquí es un valor predeterminado o una sugerencia, nunca una regla. Cuando un momento requiera otra cosa, rompe el valor predeterminado y explica por qué en una frase (en tu plan, un comentario de código o tu respuesta). Las técnicas que no están en el menú también son válidas. El menú existe para ampliar tus opciones, no para encasillarte.

Elige por momento, según el significado

Lee las palabras antes de decidir cómo se mueven. Pregunta qué hace la línea, luego elige la técnica cuyo significado coincida:

Las palabras...	Recurre a
dividir, romper o separar algo	slice, shatter
resolver una respuesta o revelar un secreto	scramble
aterrizar con fuerza, o contar hacia atrás	stomp
definir o escribir un término por primera vez	stroke-write-on, marker-highlight
mostrar un número cambiando	odometer
describir algo que desaparece	disintegrate, smoke-dissolve
seguir un gráfico o ecuación	text-on-a-path, sine-wave-type

La columna "Recurre a ello cuando" en el menú está escrita para esta misma pregunta.

Cuánta variedad

• Modo enseñanza (el valor predeterminado para lecciones y explicaciones, y siempre que la solicitud no lo especifique): un estilo de casa para cada línea ordinaria, elegido entre las técnicas etiquetadas como calm, más unos pocos acentos reservados para los momentos que importan: un término clave, la respuesta, una advertencia. Las técnicas etiquetadas como teach son buenos acentos. Pocos acentos impactan más que muchos.
• Rienda suelta cuando el usuario lo solicite ("sé creativo", "dale rienda suelta", "sorpréndeme"): cualquier cosa del menú está disponible, siempre elegida por significado. Libertad no significa usar muchas. Una técnica audaz y bien elegida puede superar a diez.
• Si el video claramente no es una lección (un video musical, un tráiler) y no se nombra ningún modo, elige lo que encaje y di qué camino tomaste.

Toques finales y comprobaciones

• Desenfoque de movimiento en movimientos rápidos. La animación por computadora es perfectamente nítida, por lo que el texto rápido puede verse entrecortado. Un poco de desenfoque en la dirección del movimiento hace que parezca filmado. Remotion tiene herramientas de desenfoque de movimiento (@remotion/motion-blur); instálalo exactamente en la versión de Remotion del proyecto, de la misma manera que los paquetes en "Construyéndolo en Remotion" (npm i -E @remotion/motion-blur@<versión>). Úsalo como toque final en movimientos rápidos; en desplazamientos lentos solo se ve desenfocado.
• Los guiones unidos rompen los efectos a nivel de letra. En árabe, persa y otros guiones donde la forma de una letra depende de sus vecinas, dividir una palabra en letras (cascade, scramble, anagram, random-order pop-on, 3D flip-in) rompe las formas de las letras. Anima palabras completas o líneas completas.
• Comprueba que la fuente tenga tus acentos. Para texto latino acentuado (afrikáans y otros), asegúrate de que la fuente tenga las letras que necesitas (ê, ë, ô, ï...) antes de animarlas.

Usando el menú

Abre references/menu.md (en la carpeta de esta habilidad) antes de elegir. Enumera cada técnica, agrupada en familias, con:

• su nombre e id (la clave en KT_COMPONENTS)
• un aspecto de una línea y una pista de recurre a ello cuando
• etiquetas: calm (un buen estilo de casa), teach (un buen acento de enseñanza), exit (termina con las palabras desaparecidas, por lo que se adapta al final de una línea o escena), ✚ nuevo
• cómo está construido: component (listo para usar), o example (una escena anotada para adaptar, ruta indicada)

Hojea los encabezados de las familias, luego lee las filas de las familias que encajan con el momento.

references/catalogue.md es lectura de fondo: la investigación detrás del menú, con fuentes, historia y lo difícil que es construir cada técnica. Ábrelo solo cuando quieras profundizar.

Construyéndolo en Remotion

1. Copia la carpeta remotion/ de la carpeta de esta habilidad al proyecto como src/kinetic-type/.
2. Asegúrate de que el proyecto tenga remotion, @remotion/google-fonts y @remotion/layout-utils, todos exactamente en la misma versión de Remotion del proyecto (Remotion espera todos sus paquetes en una versión). Por ejemplo, en 4.0.536: npm i -E @remotion/[email protected] (-E guarda la versión exacta en lugar de ^4.0.536).
3. Busca un componente por su id del menú y renderízalo dentro de un <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 (obligatorio), keyWord (recibe el tratamiento de acento), fontFamily (predeterminado Poppins), color, accent, fontSize (predeterminado se ajusta al ancho del fotograma).
• Cada componente comienza en el fotograma 0 de su <Sequence> y se estabiliza en aproximadamente un segundo, por lo que la duración del Sequence establece cuánto tiempo permanecen las palabras. Dos tipos se comportan de manera diferente: las técnicas exit terminan con las palabras desaparecidas en el último fotograma del Sequence, y las pautadas por sonido (familia 15) distribuyen las palabras a lo largo de todo el Sequence, por lo que su duración establece su ritmo.
• Para técnicas example, abre el archivo nombrado en el menú y adapta la escena.
• Otras herramientas de video: el menú y la forma de elegir siguen aplicándose; los componentes listos para usar son solo para Remotion.

Véalos, o dirija un video completo

• Galería: cada técnica con una vista previa en vivo, en https://dricosnyman.github.io/kinetic-type-skills/
• Un video completo, o dirección línea por línea: cuando el trabajo sea un video completo de tipografía cinética a partir de un guion, o el usuario quiera planificar, revisar y aprobar la tipografía de cada línea antes de construir nada, use la habilidad kinetic-type-director. Ejecuta el proceso completo y se basa en esta habilidad: redacta un guion tipográfico, lo muestra en una página que puedan editar, luego construye la versión aprobada con estos componentes.