6space7/autozoom-demo-scenes

Vídeos demo AutoZoom

Estás dentro del proyecto del usuario. Lee el código real de la funcionalidad, reconstruye su pantalla como un componente de React en un proyecto Remotion, y grábala como AutoZoom graba una captura de pantalla: la cámara aplica zoom automático sobre cada acción. Las pantallas construidas con código superan a las capturas de pantalla: el texto se escribe en el campo real, las filas aparecen deslizándose, los botones cambian de estado, y todo se mantiene nítido a cualquier nivel de zoom.

Archivos de este skill:

• scripts/setup.mjs crea el proyecto Remotion y lo instala (Remotion + React).
• assets/remotion-template/ es lo que copia: la cámara de zoom automático, ventana, cursor, focos, superposiciones y una pantalla e historia de ejemplo. Solo src/story.tsx y src/screens/* cambian por demo.
• references/story-api.md documenta cada campo de la historia, los hooks de pantalla y cómo medir posiciones. Léelo antes de escribir una historia.
• references/style.md es la apariencia AutoZoom: marco, movimiento y superposiciones.

Flujo de trabajo

1. Definir la historia

Acuerda una cosa que el espectador debe aprender, en una frase ("Busca cualquier métrica, luego compártela con un solo clic"). Limítalo a 6–15 segundos y 2–4 momentos. Una idea por vídeo: si hay dos funcionalidades, haz dos vídeos. Pregunta solo si no está clara la funcionalidad a mostrar; en caso contrario, elige el flujo más impactante.

2. Leer el proyecto

Encuentra lo que muestra la demo:

• la ruta, página o componente y sus hijos;
• tokens de diseño: configuración de Tailwind, variables CSS, archivos de tema;
• fuentes, la librería de iconos, logotipo;
• datos de muestra realistas: fixtures, seeds, historias de Storybook, mocks, tests.

Nunca inventes una apariencia diferente. La demo debe verse como su producto.

3. Configurar Remotion

node <directorio-del-skill>/scripts/setup.mjs demo     # crea ./demo y lo instala

Volver a ejecutarlo es seguro. Añade demo/ al espacio de trabajo del proyecto o déjalo independiente.

4. Construir la pantalla (demo/src/screens/<Nombre>.tsx)

Dibújala en el viewport de la historia (por defecto 1440 × 900, como una ventana del navegador). Elige la ruta que se ajuste al proyecto:

• A. Importar los componentes reales (proyectos React). Mejor fidelidad. Funciona cuando los componentes son presentacionales. Pásales props y datos estáticos, y envuélvelos en los proveedores que necesiten (tema, enrutador, cliente de consultas, i18n) con valores simulados. No permitas que obtengan datos de la red ni lean autenticación. Haz que los alias resuelvan y carguen sus estilos; consulta references/story-api.md › "Usando los componentes propios del proyecto".
• B. Reconstruirlo (cualquier stack: Svelte, Vue, Angular, nativo, o React con dependencias de ejecución pesadas). Porta la página a React con la misma estructura, nombres de clase o valores, colores, radios, espaciado, fuente, iconos y texto, leídos directamente de la fuente. Incluye solo lo que es visible en pantalla.

En cualquier caso:

• Usa datos realistas del proyecto (nombres, números, estados), nunca lorem ipsum.
• Coloca los elementos a los que apunta la historia en posiciones conocidas. Dispónlos para poder indicar sus cuadros, o mídelos con la cuadrícula de depuración (paso 6).
• Haz que la pantalla se anime a sí misma con los hooks de src/lib/hooks.ts (useTyped, useAfter, useProgress, usePop, useCount). Pasa los números de fotograma como props desde la historia, para que la línea de tiempo viva en un solo lugar. src/screens/MockDashboard.tsx es el ejemplo práctico.

5. Escribir la historia (demo/src/story.tsx)

Comienza con la línea de tiempo como comentario, en fotogramas (fps 60):

0–60     visión general; cursor se dirige a la búsqueda, hace clic (58)
60–130   la cámara enfoca la búsqueda
140–260  la consulta se escribe sola; leyenda 1
268      ↵; los resultados se actualizan
280–345  la cámara se aleja hacia el resultado
...      cámara + cursor viajan → clic → resultado → notificación; leyenda 2
520–600  la cámara se aleja suavemente

Luego completa camera, cursor, clicks, keys, captions, toasts y spotlights, todo en píxeles de pantalla. Deja rec desactivado: las superposiciones en las esquinas se sitúan sobre la aplicación cuando se hace zoom. La referencia de campos está en references/story-api.md.

6. Verificar fotogramas fijos, luego renderizar

cd demo
npx remotion still Demo out/f.png --frame=150    # mira los fotogramas clave (lee el PNG)
npm run studio                                   # vista previa en vivo para el usuario
npm run render                                   # → out/demo.mp4

Establece debug: true en la historia para dibujar una cuadrícula etiquetada de 100px sobre la pantalla, de modo que se puedan leer las posiciones a partir de un fotograma fijo. Desactívala antes de renderizar. Comprueba un fotograma fijo en cada momento clave: el sujeto está completamente encuadrado al hacer zoom, la punta del cursor se sitúa sobre el objetivo, el texto es legible y las superposiciones no cubren la acción.

7. Entregar

Proporciona al usuario la ruta del MP4 y muestra uno o dos fotogramas. Opcionalmente, incrusta la composición en vivo en su sitio con @remotion/player (consulta references/story-api.md).

Reglas de movimiento (la sensación AutoZoom)

• Cámara de zoom automático: toda la ventana (1×) o un primer plano nítido (1.6–2.2×), nunca intermedio: un zoom de 1.1–1.5× solo recorta la ventana y se ve mal. Acerca el zoom a lo que importa, mantén la posición, viaja directamente al siguiente elemento y termina de nuevo en 1×. Los movimientos duran entre 60 y 100 fotogramas; las pausas duran al menos 50 fotogramas. Usa ease: 'smooth' (el valor por defecto) para los desplazamientos y 'snap' solo para llegadas rápidas. Sin desenfoque de movimiento.
• Cursor: llega primero, luego hace clic (presión + ondulación, automático en cada fotograma en clicks), luego el resultado aparece 2–6 fotogramas después. Mientras escribe, muévelo ligeramente a un lado para que no cubra el texto.
• Orden de un momento: la cámara comienza a moverse → el cursor llega → clic → cambio de estado → notificación o tecla → la leyenda transmite el significado.
• Leyendas: lo que diría un presentador, de 3 a 6 palabras por línea, máximo dos líneas por vídeo.
• Superposiciones (leyendas, teclas, notificaciones, REC) permanecen fuera de la cámara: no hacen zoom y nunca cubren la acción.
• Contención: un color de acento, sin confeti, sin giros, sin texto rebotante. El producto es la estrella.

Lista de verificación de calidad

• Se ve como su producto: misma fuente, colores, texto y datos.
• Comentario de línea de tiempo al inicio de story.tsx; los números de fotograma provienen de un solo lugar.
• Cada momento verificado con un fotograma fijo; nada importante recortado al hacer zoom o cubierto por superposiciones.
• El cursor aterriza exactamente sobre los objetivos; los clics ocurren antes que los resultados.
• Texto legible a 1080p; leyendas cortas.
• debug está desactivado, y el renderizado finaliza sin errores.