Infografía Animada
Construye una infografía diseñada — íconos, algunos números clave, texto breve y formas simples organizados con una jerarquía visual real — y luego anímala en secuencia para que cada elemento tenga su momento. El arte está primero en la composición, luego en la coreografía: un diseño estático que se lee por sí solo, revelado en una cascada escalonada que guía la mirada exactamente hacia donde quieres.
Cuándo usarla
- Explicadores con diseño mixto: "X en 3 pasos", "cómo funciona", "en números", una cuadrícula de tarjetas estadísticas.
- Revelación secuenciada de ícono + estadística + etiqueta + conector como una única escena diseñada.
- Animación de pictogramas/íconos, contadores de números clave, conectores de flujo entre pasos.
Esta habilidad es dueña de la infografía compuesta. Para un gráfico que es el contenido (carrera de barras, líneas/áreas animadas, un gráfico impulsado por CSV), usa chart-animation — y compón su gráfico como un bloque dentro de una infografía aquí, en lugar de reconstruirlo.
La única regla: diseñar el fotograma estático primero
Una gran infografía animada es una gran infografía estática que además se mueve. Diseña y equilibra la composición completa — cada ícono, número y etiqueta en su posición final — antes de añadir un solo fotograma clave. La animación entonces solo controla cuándo aparece cada elemento ya colocado; nunca decide el diseño. Esto evita el fallo más común: elementos que vuelan a posiciones que nunca fueron diseñadas, haciendo que el fotograma final se vea accidental.
Limita el alcance: una idea central, 3–5 puntos de datos de apoyo, en 30–90s. Más de cinco elementos compitiendo y la cascada se lee como caos.
Jerarquía visual → orden de revelación
El orden de revelación es la jerarquía. El ojo sigue la aparición, así que anima los elementos en orden de importancia, no en orden de diseño. Asigna cada elemento a un nivel, luego revela nivel por nivel.
| Nivel | Elemento | Revelación | Movimiento |
|---|---|---|---|
| 1 | Título de sección / idea central | primero, solo | fundido + ligero ascenso |
| 2 | Ícono (ancla cada elemento) | por elemento, lidera su grupo | pop / sobreimpulso de escala |
| 3 | Número clave (contador) | justo después de su ícono | conteo ascendente, ease-out |
| 4 | Etiqueta / pie | se asienta debajo del número | fundido, sin drama de movimiento |
| 5 | Conector / línea de flujo | enlaza elementos cuando se completan | dibujo (longitud de trazado) |
Usa tamaño, peso y color para la jerarquía estática; usa tiempo y movimiento para la capa animada. Una cosa llamativa a la vez — nunca cuentes dos números al mismo tiempo.
Escalonamiento: la cascada
Revela elementos hermanos con un retardo fijo entre ellos (un escalonamiento) para que el grupo se lea como una secuencia, no como un destello. Conduce cada elemento desde el fotograma actual como una función pura — nunca el tiempo de pared o un bucle de animación de biblioteca — para que los renders sean deterministas.
import { useCurrentFrame, spring, useVideoConfig } from "remotion";
const ESCALONAMIENTO = 8; // fotogramas entre hermanos (~0.27s @30fps)
function Item({ index, children }) {
const frame = useCurrentFrame();
const { fps } = useVideoConfig();
const local = frame - index * ESCALONAMIENTO; // reloj propio de este elemento
const enter = spring({ frame: local, fps, config: { damping: 14, mass: 0.6 } });
return (
<div style={{ opacity: enter, transform: `translateY(${(1 - enter) * 24}px)` }}>
{children}
</div>
);
}
Un escalonamiento de 6–10 fotogramas se siente nítido; por encima de ~15 se arrastra. Mantén una única curva de entrada entre todos los hermanos para que la cascada se lea como confianza, no como ruido.
Animando íconos: el pop
Los íconos anclan cada elemento, así que dales la entrada más fuerte — un sobreimpulso de escala ("pop") que se asienta. Usa un resorte con bajo amortiguamiento para el rebote; nunca escala lineal (se lee como mecánico).
const pop = spring({ frame: local, fps, config: { damping: 10, stiffness: 180, mass: 0.5 } });
// pop sobrepasa 1 y luego se asienta → animado
<g transform={`scale(${pop})`} style={{ transformOrigin: "center" }}>{icon}</g>
Para rellenos de pictogramas (ej. "7 de cada 10 personas"), revela unidades en el mismo escalonamiento y recorta la unidad parcial con una máscara en lugar de escalarla.
Números clave: contadores que se asientan
Interpola el número subyacente, aplícale ease-out, luego dale formato al renderizar. Dos obligaciones: redondear antes de formatear y usar tabular-nums para que el diseño no se sacuda al cambiar los dígitos. (Técnica compartida con chart-animation — ver su sección de contadores para variantes de moneda/porcentaje.)
import { interpolate, Easing } from "remotion";
const raw = interpolate(frame - delay, [0, 30], [0, 1287], {
extrapolateLeft: "clamp", extrapolateRight: "clamp",
easing: Easing.out(Easing.cubic), // "asentándose en un número"
});
const label = new Intl.NumberFormat("en-US").format(Math.round(raw)); // "1,287"
// CSS: font-variant-numeric: tabular-nums; line-height: 1;
Ease-out en un número titular se lee como llegada; lineal se lee como un odómetro robótico. Mantén cada número ~0.5s antes de que comience el siguiente elemento.
Conectores & flujo
Los conectores convierten una cuadrícula de tarjetas en un proceso. Anima una línea/flecha dibujando su trazado, sincronizado para que aterrice justo cuando termina el elemento al que apunta — movimiento que dice "ahora mira aquí a continuación".
const pathRef = useRef();
const len = pathRef.current?.getTotalLength?.() ?? 0;
const draw = interpolate(frame - delay, [0, 18], [0, 1], { extrapolateRight: "clamp" });
<path ref={pathRef} d="M40,0 C40,30 40,30 40,60" fill="none" stroke="#444" strokeWidth={3}
strokeDasharray={len} strokeDashoffset={len * (1 - draw)} />
Dibuja el conector entre los dos elementos que une, en el espacio después de que aparezca la fuente y antes del destino — la línea guía la mirada hacia la siguiente revelación.
Ritmo de secciones
Asigna tiempo por elemento, no por segundo de pulido. Un espectador solo puede seguir una cosa en movimiento a la vez.
| Ritmo | Presupuesto |
|---|---|
| Mantenimiento del título (dejarlo asentar) | 0.8–1.2s |
| Por elemento (pop de ícono → contador → etiqueta) | 1.2–2.0s |
| Dibujo del conector | 0.4–0.6s, se superpone al siguiente elemento |
| Mantenimiento final compuesto (capturable) | 2–3s |
Termina con la infografía estática completa mantenida inmóvil durante 2–3s — la conclusión es el fotograma ensamblado, así que déjalo asentar sin movimiento que compita.
Lista de verificación de salida
- Diseño estático diseñado y equilibrado antes de cualquier fotograma clave; el fotograma final mantenido se ve intencional.
- Una idea central, 3–5 puntos de datos, 30–90s.
- El orden de revelación sigue la jerarquía (título → ícono → número → etiqueta → conector), no el orden de diseño.
- Los elementos hermanos se escalonan con un retardo consistente de 6–10 fotogramas y una única curva de entrada.
- Los íconos hacen pop con un sobreimpulso de resorte; los números cuentan con ease-out +
tabular-nums; solo un número se anima a la vez. - Los conectores se dibujan para guiar la mirada hacia la siguiente revelación.
- Cada valor es una función pura de
useCurrentFrame(); sin temporizadores de bibliotecas. - El fotograma compuesto final se mantiene ≥2s.
Entregar y verificar (fotogramas renderizados → MP4)
Asistente empaquetado (
scripts/): organiza tus fotogramas conscripts/contact-sheet.sh sheet.png f-hook.png f-mid.png f-end.png, luego verifica la codificación conscripts/probe-mp4.sh out.mp4 [WxH] [fps]. Consultascripts/README.md.
Remotion es determinista en fotogramas — cada pop de ícono, valor de contador y dibujo de conector es una función pura de useCurrentFrame(), por lo que puedes renderizar cualquier fotograma exacto sin necesidad de un mecanismo de búsqueda. La infografía lleva números clave, por lo que la inspección de fotogramas detecta una estadística incorrecta o un escalonamiento que cae fuera del lienzo antes de desperdiciar una codificación.
Contrato de salida:
- Un proyecto Remotion con la escena registrada (
<Composition>+ zodschema+defaultProps), todo el movimiento impulsado por fotogramas (sin temporizadores /Date.now()/Math.random()). - Entregable = el
out/*.mp4renderizado (más el proyecto, para que el usuario pueda re-renderizar con nuevas estadísticas/íconos). - Duración dependiente de datos (N elementos × presupuesto por elemento)? calcúlalo en
calculateMetadata, no a mano.
Bucle de verificación — renderizar fotogramas → inspeccionar → codificar. Primero renderiza fotogramas individuales (baratos, sin codificación de video), luego codifica solo cuando el diseño y los números sean correctos.
# 1. Fotogramas exactos — con las props ENVIADAS. Elige fotogramas que capturen cada nivel:
npx remotion still Infographic out/f-title.png --frame=20 --props='{"items":[...]}' # título + primer pop
npx remotion still Infographic out/f-mid.png --frame=90 --props='{"items":[...]}' # cascada intermedia
npx remotion still Infographic out/f-end.png --frame=149 --props='{"items":[...]}' # fotograma compuesto final (= durationInFrames - 1)
# 2. Inspecciona cada PNG — FIDELIDAD (cada número clave exacto, etiquetas/pies correctos, íconos el glifo correcto)
# Y artefactos (desbordamiento de texto, ícono fuera del lienzo, área segura recortada, fuente faltante, conector apuntando
# al elemento equivocado, elemento a medio revelar donde un nivel debería estar asentado).
# 3. Solo después de que los fotogramas estén bien, codifica:
npx remotion render Infographic out/infographic.mp4 --props='{"items":[...]}'
- Usa
npx remotion compositionspara leerdurationInFrames/fps; el fotograma compuesto final es el fotograma clave — verifica que se vea intencional, no a medio camino en la cascada. - Impulsado por datos / por lotes: verifica UN conjunto de props representativo (estadísticas + etiquetas) mediante fotogramas antes de renderizar todas las variantes por lotes — detecta un error de contador o diseño una vez, no N veces.
- GIF de demostración para README gratis:
npx remotion render Infographic out/demo.gif --codec=gif.
Antes de terminar:
npx remotion stillse renderiza limpiamente en título, cascada intermedia y fotograma final — sin errores, sin fuentes/íconos faltantes.- Cada número clave es exacto (redondeado,
tabular-nums) y cada elemento está dentro del área segura en cada fotograma. - Solo impulsado por fotogramas — sin
Date.now()/Math.random()/ temporizadores de bibliotecas (determinismo se mantiene en CI). - Las props enviadas se renderizan correctamente (no solo
defaultProps) — estadísticas correctas, íconos correctos, etiquetas correctas. - MP4 completo codificado y se reproduce; (opcional) GIF renderizado para el README.
Archivos de referencia
references/sequenced-infographic.md— una escena Remotion completa y ejecutable: una infografía de 3 pasos "cómo funciona" con pops de íconos escalonados, estadísticas con conteo ease-out, conectores dibujados, un mapa de tiempos maestro y el patrón de props hazlo-impulsado-por-datos (plantilla × datos). Incluye una variante inline-SVG sin dependencias para uso no-Remotion.