Tipografía Cinética

¿Qué hace Tipografía Cinética?

El texto en movimiento tiene un trabajo antes que cualquier otro: debe ser legible. El fallo más común en el tipo animado no es la fealdad, sino el texto que pasa rápidamente antes de que el espectador termine la primera palabra, o el texto que se anima tanto que el ojo persigue el movimiento en lugar de leer las palabras. Esta es la capa de artesanía. Decide cuánto tiempo se queda cada línea, cómo entra y sale, y qué se permite mover - y entrega un presupuesto de fotogramas concreto a remotion-compose, que escribe el React/TypeScript que realmente lo renderiza.

La regla fundamental: animar para servir a la lectura, nunca para decorarla. El movimiento gana su lugar solo cuando dirige la mirada, establece jerarquía o marca un compás. Todo lo siguiente lo refuerza.

Trabaja con un ejemplo único a lo largo de todo: una tarjeta de título en 16:9 que dice "Envía video en un solo prompt" (5 palabras), a 30fps, más una pista de subtítulos animada en el tercio inferior.

Flujo de trabajo

Ejecuta en este orden. No elijas una animación de entrada antes de tener el presupuesto de permanencia: el presupuesto te dice si siquiera tienes espacio para animar.

Paso 1 - Calcula el presupuesto de tiempo de lectura por palabra primero

El texto debe permanecer en pantalla el tiempo suficiente para leerse a un ritmo relajado, más el tiempo que consumen su entrada y salida. Presupuesta el tiempo de permanencia antes de tocar cualquier animación.

• La velocidad de lectura base para video en pantalla es más lenta que para impresión: asume ~3.5 palabras/segundo de lectura cómoda (≈ 200 ppm). La convención de subtítulos es similar: nunca bajes de ~0.3s de permanencia legible por palabra.
• Permanencia mínima en pantalla = palabras ÷ 3.5 segundos, con un mínimo de 0.8s para cualquier línea (incluso una sola palabra necesita un instante para registrarse) y un impuesto de +0.3s para términos desconocidos, números o nombres que el ojo no puede predecir.
• El tiempo de entrada y salida es adicional - no cuenta como tiempo de lectura, porque el texto no es completamente legible durante la transición. Duración total = entrada + permanencia + salida.

Ejecuta type_budget.js (abajo) para convertir una línea de texto en un presupuesto de fotogramas. Para la tarjeta de título, devuelve una permanencia de ~43 fotogramas; ese es el número que entregas a remotion-compose como la ventana legible de la Secuencia, con la entrada y salida añadidas encima.

Paso 2 - Elige la temporización de entrada/salida para que coincida con el corte, no con un valor predeterminado

Las entradas y salidas son puntuación, no la oración. Mantenlas cortas y deja que la permanencia haga el trabajo.

• Entrada: 8-15 fotogramas (0.25-0.5s) @ 30fps. Lo suficientemente rápida para sentirse ágil, lo suficientemente lenta para leerse como deliberada. Una tarjeta de título puede tomar el extremo largo; una pista de subtítulos rápida toma el extremo corto.
• Salida: igual o más corta que la entrada. Las salidas nunca deben prolongarse: una vez leído, el texto debe desaparecer. 6-12 fotogramas.
• Empareja la salida con lo que sigue. Corte directo a la siguiente escena → saca el texto en el corte (sin fundido, deja que el corte lo haga). Disolución cruzada → desvanece el texto durante la disolución. Nunca animes una salida elaborada hacia un corte directo; lucha contra la edición. Esta es la costura donde motion-design-principles (el corte y la suavización) y esta habilidad se encuentran: toma la curva de suavización de allí, aplícala al texto aquí.
• Escalonar las revelaciones de múltiples elementos, no los animes al unísono. Un título + subtítulo se lee mejor cuando el subtítulo entra 4-8 fotogramas después de que el título se asienta, para que la mirada sea dirigida de arriba a abajo.

Paso 3 - Elige UNA técnica de entrada por línea y anima una propiedad

Cuantas más propiedades se muevan a la vez, más difícil es leer el texto durante la transición. Por defecto, anima una sola propiedad; combina dos solo con intención (por ejemplo, opacidad + un pequeño desplazamiento).

• Fundido (opacidad 0→1) - más seguro, siempre legible, el valor predeterminado correcto para pistas de subtítulos y líneas de cuerpo.
• Elevación / deslizamiento (pequeño desplazamiento, 20-60px, emparejado con fundido) - añade dirección y vida; el caballo de batalla para tarjetas de título. Mantén la distancia pequeña: los grandes desplazamientos hacen que el ojo siga el viaje en lugar de leer.
• Revelado palabra por palabra - cada palabra se funde/eleva en secuencia con su propio escalonamiento corto. Úsalo para líneas de énfasis y piezas de estilo lírico, no para subtítulos densos (la lectura se vuelve entrecortada). Presupuesta que la revelación de toda la línea termine bien dentro de la permanencia.
• Escala / pop (resorte de 0.85→1) - enérgico, bueno para una sola palabra heroica o un número destacado. Nunca escales una oración completa; el reajuste es ilegible.
• Máscara / revelación por barrido - premium, direccional, excelente para un solo título principal. Más caro de construir; resérvalo para el único título que importa.

Sea cual sea la que elijas, la propiedad se anima; el texto mismo nunca se reajusta durante la animación. Anima opacity y transform (translate/scale/clip) - nunca font-size, width o letter-spacing de una manera que reordene los glifos, porque la animación basada en diseño tiembla y es ilegible.

Paso 4 - Anima peso y tamaño como transiciones, no como ruido

El peso y el tamaño son cómo el tipo expresa énfasis en movimiento, pero son transiciones entre estados mantenidos, no oscilación continua.

• Transición de peso: una palabra puede asentarse desde un peso más ligero a uno más pesado para aterrizar el énfasis (por ejemplo, 400→700 en 8 fotogramas mientras se asienta). Usa un eje de peso de fuente variable real o dos cortes de la familia; nunca falsifiques negrita escalando.
• Transición de tamaño: un número o palabra clave puede escalar una vez para reclamar jerarquía, luego mantenerse. Escalar-y-mantener, no escalar-y-pulsar. Un pulso en bucle en el texto se lee como un renderizado roto, no como énfasis.
• Estos son acentos. Como máximo un acento de peso/tamaño por línea, en la palabra más importante. Si todo enfatiza, nada lo hace.

Paso 5 - Establece la jerarquía tipográfica en movimiento (orden, tamaño, peso, temporización)

La jerarquía en movimiento se construye a partir de cuatro señales; úsalas juntas para que el ojo sepa dónde mirar y en qué orden.

1. Orden de entrada - lo primero que se anima se lee primero. Lidera con el titular, sigue con el subtítulo, termina con la llamada a la acción.
2. Contraste de tamaño - mantén una relación clara (titular ≥ 1.6× subtítulo). El movimiento no rescata una jerarquía estática débil.
3. Contraste de peso - más pesado = más importante. Máximo dos pesos en pantalla a la vez.
4. Temporización - la línea más importante tiene la permanencia más larga y, si acaso, la entrada con más presencia. La menos importante (un tercio inferior persistente, una marca de agua) no se anima después de su única entrada.

Rellena la plantilla motion-type-spec (abajo) con el presupuesto por línea, técnica y rol jerárquico. Esa especificación rellena es la entrega a remotion-compose.

Paso 6 - Decide DÓNDE NO animar

El movimiento senior es la moderación. Antes de finalizar, elimina la animación de cualquier cosa en la lista "NO" a continuación. Una tarjeta de título con una elevación bien presupuestada se lee mejor que una donde cada palabra hace algo.

Barra de calidad

Una especificación de tipo en movimiento terminada es A+ solo cuando se cumple todo:

• Cada línea pasa el presupuesto de tiempo de lectura - permanencia ≥ max(0.8s, palabras ÷ 3.5 + impuesto de término), calculado por type_budget.js, con entrada/salida añadidas encima, nunca restadas de él.
• Cada línea anima una propiedad (dos solo con intención explícita), y ninguna línea reordena sus glifos durante la animación - solo opacity/transform.
• Las entradas son 8-15 fotogramas, las salidas ≤ entrada, y la salida se empareja con la edición siguiente (corte vs. disolución), no por defecto.
• La jerarquía se lee en orden: orden de entrada, relación de tamaño (≥1.6×) y peso apuntan a la misma línea más importante.
• Como máximo un acento de peso/tamaño por línea, y nada se repite o pulsa.
• La especificación nombra los números de fotograma (entrada, inicio de permanencia, fin de permanencia, salida) para que remotion-compose pueda escribir Secuencias sin adivinar.

NO

• No publiques texto que se mantenga menos del presupuesto de lectura - el fallo más común en tipografía cinética. Si no hay espacio para mantenerlo, recorta palabras, no tiempo de permanencia.
• No animes font-size, width, letter-spacing o cualquier cosa que reordene glifos; el desorden de diseño es ilegible. Escala mediante transform en su lugar.
• No animes más de una o dos propiedades por línea, y nunca palabra por palabra en un subtítulo denso - la lectura se vuelve entrecortada.
• No repitas, pulses, rebotes repetidamente o mantengas el texto en movimiento continuo; el movimiento que no se detiene no se puede leer.
• No animes cada elemento. Los tercios inferiores, marcas de agua, etiquetas persistentes y texto legal tienen una sola entrada y luego se quedan quietos. No animes texto de cuerpo/subtítulos con entradas elaboradas - el fundido es correcto.
• No decidas la curva de suavización subyacente o el corte de escena aquí - eso es motion-design-principles. No escribas el componente de Remotion aquí - entrega la especificación rellena a remotion-compose.
• No inventes el texto. Anima las palabras que el usuario te dio; si una línea es demasiado larga para mantenerse, pídeles que la acorten.

Habilidades hermanas - entrega, no absorbe

Esta habilidad posee la temporización del texto y la lectura. Las decisiones adyacentes pertenecen a las hermanas; tira de ellas, no rehagas su trabajo aquí.

• motion-design-principles - el corte, el ritmo del movimiento no textual y la curva de suavización (la forma de aceleración). Toma la curva de allí y aplícala al texto aquí.
• video-storyboard - qué escenas y tomas existen, y en qué orden. Consigue la lista de escenas primero; esta habilidad solo temporiza el texto dentro de una escena.
• motion-color-and-light - el color, contraste y legibilidad del tipo contra su fondo. Si el texto es difícil de leer por el color, ese es trabajo para esa habilidad, no un cambio de temporización aquí.
• product-demo-director - la narrativa general y la lista de compases de una demostración de producto. Decide qué dicen las tarjetas de título y cuándo aparecen; esta habilidad temporiza cómo se anima cada una.
• sound-and-music-sync - aterrizar las revelaciones de texto en un compás o tiempo fuerte. Entrégale los números de fotograma holdStart@ / de entrada para que una revelación pueda sincronizarse con la pista.
• social-video-formatter - redimensionar y recortar la pista de subtítulos para una plataforma (9:16 TikTok, 1:1 feed, áreas seguras). Autoriza la temporización una vez aquí; deja que esa habilidad la refluya por plataforma.

Calculadora

Script Node autónomo. Guárdalo como type_budget.js y ejecútalo con node type_budget.js. Sin dependencias. Edita el array lines con tu texto real; devuelve el presupuesto de fotogramas para cada línea a tus fps.

// Presupuesto de lectura para tipo cinético. Edita lines + fps, luego: node type_budget.js
const fps = 30
const WORDS_PER_SEC = 3.5   // lectura cómoda en pantalla (~200 ppm)
const FLOOR_SEC = 0.8       // permanencia mínima para cualquier línea, incluso una palabra
const TERM_TAX_SEC = 0.3    // por línea que contenga un número/nombre/término técnico
const ENTRANCE_FRAMES = 12  // entrada de 0.4s
const EXIT_FRAMES = 9       // salida <= entrada

const lines = [
  { text: 'Envía video en un solo prompt', hasUnfamiliarTerm: false }, // tarjeta de título
  { text: 'Renderizado headless en 4K',    hasUnfamiliarTerm: true  }, // subtítulo: '4K'
  { text: 'Ve',                             hasUnfamiliarTerm: false }, // palabra heroica
]

const sec2frames = (s) => Math.ceil(s * fps)

function budget(line) {
  const words = line.text.trim().split(/\s+/).length
  const raw = words / WORDS_PER_SEC + (line.hasUnfamiliarTerm ? TERM_TAX_SEC : 0)
  const holdSec = Math.max(FLOOR_SEC, raw)
  const holdFrames = sec2frames(holdSec)
  const totalFrames = ENTRANCE_FRAMES + holdFrames + EXIT_FRAMES
  return { words, holdSec, holdFrames, totalFrames }
}

let cursor = 0
for (const line of lines) {
  const b = budget(line)
  const enterIn = cursor
  const holdStart = enterIn + ENTRANCE_FRAMES
  const holdEnd = holdStart + b.holdFrames
  const exitOut = holdEnd + EXIT_FRAMES
  console.log(`"${line.text}" (${b.words}w)`)
  console.log(`  permanencia: ${b.holdSec.toFixed(2)}s = ${b.holdFrames} fotogramas`)
  console.log(`  duración total: ${b.totalFrames} fotogramas (entrada ${ENTRANCE_FRAMES} + permanencia ${b.holdFrames} + salida ${EXIT_FRAMES})`)
  console.log(`  Secuencia:    enter@${enterIn}  holdStart@${holdStart}  holdEnd@${holdEnd}  exitOut@${exitOut}`)
  cursor = exitOut
}
console.log(`Duración total de la pista: ${cursor} fotogramas (${(cursor / fps).toFixed(2)}s)`)

Ejemplo de salida

"Envía video en un solo prompt" (5w)
  permanencia: 1.43s = 43 fotogramas
  duración total: 64 fotogramas (entrada 12 + permanencia 43 + salida 9)
  Secuencia:    enter@0  holdStart@12  holdEnd@55  exitOut@64
"Renderizado headless en 4K" (4w)
  permanencia: 1.44s = 44 fotogramas
  duración total: 65 fotogramas (entrada 12 + permanencia 44 + salida 9)
  Secuencia:    enter@64  holdStart@76  holdEnd@120  exitOut@129
"Ve" (1w)
  permanencia: 0.80s = 24 fotogramas
  duración total: 45 fotogramas (entrada 12 + permanencia 24 + salida 9)
  Secuencia:    enter@129  holdStart@141  holdEnd@165  exitOut@174
Duración total de la pista: 174 fotogramas (5.80s)

Léelo: el título de 5 palabras necesita 43 fotogramas de tiempo mantenido, completamente legible - y eso es además de la entrada de 12 fotogramas y la salida de 9, por lo que su duración real es de 64 fotogramas. El subtítulo de 4 palabras parece más corto pero lleva un número (4K), por lo que el impuesto de término empuja su permanencia a 44 fotogramas - ligeramente más larga que el título a pesar de tener menos palabras. La palabra única Ve alcanza el mínimo de 0.8s: incluso una palabra recibe un instante. Esos números de fotograma enter@ / holdStart@ / holdEnd@ / exitOut@ se insertan directamente en remotion-compose como límites de <Sequence from={…} durationInFrames={…}> - sin adivinar cuánto tiempo debe quedarse el texto.

Plantilla: motion-type-spec

Rellena esto y entrégalo a remotion-compose. Un bloque por línea de texto.

ESPECIFICACIÓN DE TIPO EN MOVIMIENTO. [RELLENAR: nombre de la composición].  fps: [RELLENAR]  lienzo: [RELLENAR: 1920x1080 / 1080x1920]

LÍNEA 1
  Texto (literal):     [RELLENAR]
  Rol jerárquico:      [RELLENAR: titular / subtítulo / subtítulo / tercio inferior / CTA / palabra heroica]
  Tamaño:              [RELLENAR]px        Peso: [RELLENAR: 400 / 700 / eje variable]
  Presupuesto de lectura: [RELLENAR]w -> permanencia [RELLENAR]s = [RELLENAR] fotogramas   (de type_budget.js)
  Entrada:             [RELLENAR: fundido / elevación+fundido / palabra por palabra / pop / barrido]  en [RELLENAR: 8-15] fotogramas
  Salida:              [RELLENAR: fundido / corte-en-edición]  en [RELLENAR: <=entrada] fotogramas
  Propiedad animada:   [RELLENAR: opacity / opacity+translateY / scale]   (NO font-size/width)
  Acento (máximo uno): [RELLENAR: ninguno / peso 400->700 en palabra "X" / escala en "X"]
  Números de fotograma: enter@[RELLENAR]

[truncado para traducción]