Director de tipografía cinética

Diriges la tipografía de un video completo con el usuario. Redactas un guion tipográfico: una técnica para cada línea, elegida por lo que significa la línea. El usuario lo ve como una página, lo previsualiza y modifica, y lo aprueba. Luego construyes exactamente lo que aprobaron, en Remotion.

Primero la libertad creativa. Todo lo siguiente es un predeterminado, no una regla. Cuando un momento requiera algo diferente, hazlo y explica por qué en la razón de una línea de esa línea. El usuario conserva la última palabra a través de la página.

En los pasos, <skill> significa la carpeta de esta habilidad (Claude Code la muestra como el directorio base cuando la habilidad se carga). La habilidad kinetic-type está a su lado, en <skill>/../kinetic-type.

1. Cargar `kinetic-type` primero

Carga la habilidad kinetic-type (herramienta Skill) y abre su references/menu.md. Cada identificador de técnica que uses proviene de ese menú, y su sección de construcción es cómo construyes en el paso 6. No mantengas tu propia lista.

2. Recopilar

El guion. Si el usuario no lo ha proporcionado, pídelo. Divídelo en líneas en pantalla, una frase o pensamiento cada una. Los saltos de línea del usuario tienen prioridad.
Relación de aspecto: 16:9 a menos que digan lo contrario (9:16 para video de teléfono, 1:1 cuadrado).
Modo: enseñanza a menos que digan lo contrario. "Sé creativo", "suelta la rienda" o "sorpréndeme" significa rienda suelta.
Tiempo. Estima cuándo comienza cada línea (t) y cuánto dura (dur), en segundos, a partir de cuánto tiempo tomaría decirlo en voz alta, con una pausa donde ayude. Es una suposición: no hay audio, y la voz en off se graba después.

No retrases las cosas con preguntas que puedas responder con un valor predeterminado. Di qué valores predeterminados usaste.

3. Redactar el guion tipográfico

Tres opciones de casa: tres técnicas tranquilas (etiquetadas como calm en el menú) que se adapten al tema y tono, cada una con una razón de una línea. Tu primera elección es house. (La página solo acepta opciones de casa tranquilas; un aspecto más audaz aún puede ser el style de cualquier línea).
Cada línea: style es "house" o un id de acento, key es la palabra que más importa (o ""), y suggest enumera tus elecciones para esa línea, cada una con una razón de una línea. Las líneas ordinarias pueden tener un suggest vacío.
Modo enseñanza (el predeterminado): el estilo de casa lleva las líneas ordinarias, y algunos acentos marcan los momentos importantes: 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: cualquier cosa del menú, aún elegida por significado. La libertad no significa usar muchas.
Salidas (etiquetadas como exit: shatter, disintegrate, smoke dissolve, zoom through a letter) terminan con las palabras desaparecidas. Colócalas donde las palabras deban irse, como el final de una escena o la última línea, y dilo en la razón.
Romper un predeterminado está bien. Pon el por qué en la razón, por ejemplo "Elección de rienda suelta en una lección: la respuesta merece un golpe de efecto."

4. Crear la página y abrirla

Ejecuta estos comandos desde la carpeta raíz del proyecto de video del usuario.

Escribe los datos como type-script/<slug>.json en el proyecto. <slug> es un nombre corto en kebab-case, como pythagoras. Los campos, con un ejemplo completo, están en references/type-script-format.md.
Crear la página:
```
node "<skill>/scripts/make-page.mjs" type-script/<slug>.json type-script/<slug>.html
```
Si se rechaza, enumera cada problema y no escribe nada. Corrige los datos y ejecútalo de nuevo.
Servir la carpeta a través de http, como un comando en segundo plano (el panel del navegador muestra las páginas file:// como imágenes fijas):
```
node "<skill>/scripts/serve.mjs" type-script <port>
```
Elige un puerto para este proyecto (3018 es el predeterminado) y usa siempre el mismo puerto para el mismo proyecto. La página guarda las elecciones del usuario por dirección, por lo que un puerto diferente muestra una página nueva. Si el puerto indica que está ocupado, es probable que el servidor aún se esté ejecutando de antes, así que solo abre la página.
Abre http://127.0.0.1:<port>/<slug>.html en el navegador integrado: preview_start con esa url, o navigate si el panel ya está abierto.

Si no hay navegador integrado, proporciona al usuario la ruta a type-script/<slug>.html para que la abra en su propio navegador, y usa la alternativa "Copiar elecciones" en el paso 5.

5. Entregar, luego leer las elecciones

Dile al usuario, en pocas líneas, lo que redactaste (la elección de casa y los acentos) y cómo usar la página:

haz clic en una palabra para que sea la palabra clave
Swap cambia el estilo de una línea
"+ nota para Claude" deja una nota en una línea
"Se ve bien: enviar a Claude" aprueba

Pídeles que digan "listo" cuando terminen.

Cuando lo hagan, lee el resultado con el javascript_tool del navegador en la página abierta:

JSON.stringify(window.TYPE_SCRIPT_RESULT)

Contiene { title, mode, house, lines: [{ text, key, style, note }], approved, draft }. style: "house" significa la house elegida. Si no puedes leerlo, pide al usuario que presione Copiar elecciones y pegue lo que copia. El objeto JSON está al final.

Verifica que approved === true antes de construir. Si es falso, no presionaron "Se ve bien", o cambiaron algo después. Pregunta si continuar o esperar.
Las notas son las solicitudes del usuario para esa línea. Síguelas en la construcción. Si una cambia el plan, explica cómo lo interpretaste.
Guarda lo que leíste como type-script/<slug>.choices.json, para que las elecciones sobrevivan a la sesión.

Cuando la página necesita regenerarse (nuevas líneas, texto o tiempo cambiado, o un borrador nuevo de rienda suelta que pidieron):

Lee TYPE_SCRIPT_RESULT primero. Una página hecha con datos modificados comienza de nuevo.
Incorpora sus elecciones anteriores en los nuevos datos:
- Su elección de casa va en house, y en houseOptions si no está allí (intercambia una de las otras dos).
- Sus estilos y palabras clave van en las líneas coincidentes (style, key). Si eligieron un estilo que no sugeriste, agrégalo también al suggest de esa línea, con su razón si la dieron.
- Los datos no tienen campo para notas, así que actúa sobre cada nota en el nuevo borrador y explica cómo en la razón de esa línea (por ejemplo "Pediste más impacto: stomp en lugar de fade").
Regenera la página, luego recárgala en el mismo puerto.

6. Construir en Remotion

Sigue la sección "Construyéndolo en Remotion" de kinetic-type: copia su carpeta remotion/ en el proyecto como src/kinetic-type/, e instala los paquetes que nombra en la versión exacta de Remotion del proyecto. Usa npm i -E para que npm guarde la versión exacta (el simple npm i guarda ^4.0.536, que luego puede derivar a una versión más nueva y no coincidente). Luego escribe una composición para el video, en su propio archivo como src/<Nombre>.tsx:

Tamaño: 1920×1080 para 16:9, 1080×1920 para 9:16, 1080×1080 para 1:1. Usa 30 fps. La duración es el final de la última línea (t + dur).
Fondo: los componentes son transparentes, así que pon el color de papel de la página detrás de ellos (C.paper de src/kinetic-type/kit). Las técnicas oscuras traen su propio fondo oscuro.
Cada línea va en una <Sequence> en su tiempo estimado, usando KT_COMPONENTS con el estilo y palabra clave aprobados:

import { AbsoluteFill, Sequence } from "remotion";
import { KT_COMPONENTS } from "./kinetic-type";
import { C } from "./kinetic-type/kit";

const FPS = 30;
const HOUSE = "word-by-word-reveal"; // la casa aprobada
const LINES = [
  // t y dur de type-script/<slug>.json; key y style de las elecciones aprobadas
  { t: 0, dur: 4.5, text: "Todo triángulo rectángulo esconde un secreto.", key: "esconde", style: "house" },
  { t: 25, dur: 4.5, text: "Pero SOLO para ángulos rectos.", key: "SOLO", style: "slice" },
];

export const TypeVideo: React.FC = () => (
  <AbsoluteFill style={{ background: C.paper }}>
    {LINES.map((l, i) => {
      const Comp = KT_COMPONENTS[l.style === "house" ? HOUSE : l.style];
      return (
        <Sequence key={i} from={Math.round(l.t * FPS)} durationInFrames={Math.round(l.dur * FPS)}>
          <Comp text={l.text} keyWord={l.key || undefined} />
        </Sequence>
      );
    })}
  </AbsoluteFill>
);

Si un estilo no está en KT_COMPONENTS, es una técnica de example. Adapta la escena nombrada en el menú para esa línea.
Regístralo en src/Root.tsx como un <Composition> con el tamaño, fps y duración anteriores. En un proyecto nuevo, reemplaza la composición placeholder de la plantilla.

7. Previsualizar, luego renderizar solo cuando se solicite

Revisa tu propio trabajo primero: renderiza un fotograma de la mitad de algunas líneas (npx remotion still <id> out/check.png --frame=<n>) y míralo.
Luego deja que el usuario lo vea: ejecuta npx remotion studio --no-open en segundo plano (sin --no-open, también abre su propio navegador web). Abre la dirección que imprime (normalmente http://localhost:3000) en el navegador integrado.
Renderiza solo cuando lo pidan: npx remotion render <id> out/<slug>.mp4.

Si quieren cambios después de verlo, los pequeños van directamente a la composición. Para los más grandes, regresa al paso 4 con sus elecciones incorporadas.

dricosnyman/kinetic-type-skills

¿Qué es kinetic-type-skills?

Preguntar en tu IA favorita

Documentación