Communitygithub.com

Justice219/video-cinematográfico-para-apps-móviles

Crea videos cinematográficos de walkthroughs para apps móviles con teléfonos 3D reales, capturas auténticas de la app, acciones narradas, resaltados sincronizados, texto mínimo, partículas y diseño de sonido. Ideal para editoriales de apps o demostraciones de funcionalidades y sus revisiones.

¿Qué es video-cinematográfico-para-apps-móviles?

Esta habilidad convierte un flujo de trabajo real de una aplicación en una película 3D dirigida, utilizando un pipeline de producción basado en código que incluye Three.js, Playwright, FFmpeg y Python. A diferencia de proyectos de After Effects, este flujo de trabajo es completamente editable y permite capturar componentes reales de la app, medir objetivos táctiles y desplazamientos, y sincronizar narración, resaltados y efectos de sonido. Es compatible con la creación de nuevos proyectos mediante un scaffold que genera pantallas sintéticas de demostración, y con la edición directa de proyectos existentes. La habilidad garantiza invariantes críticas como el uso de texturas sRGB, interpolación de desplazamiento medida, y sincronización precisa de la cámara y las partículas. Además, integra servicios externos como ElevenLabs para la generación de voz y utiliza bibliotecas de sonido autorizadas, manteniendo la seguridad al no incluir credenciales ni datos del cliente en el código fuente.

Compatible con~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/Justice219/mobile-app-cinematic-video/tree/main

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

Documentación

Video cinematográfico para app móvil

Convierte un flujo de trabajo real de una aplicación en una película 3D dirigida utilizando la plantilla de producción incluida con Three.js, Playwright, FFmpeg y Python. Este es un flujo de trabajo de video basado en código editable, no un proyecto de After Effects.

Comienza desde la app y la dirección existente

  • Inspecciona las exportaciones existentes, el código fuente del proyecto, los comentarios actuales del usuario, el tema en tiempo de ejecución y los datos disponibles de la app antes de la creación. Conserva las decisiones aprobadas. Para un proyecto nuevo, establece la funcionalidad demostrada, la audiencia, el formato y las capturas disponibles.
  • Captura componentes reales de la app utilizando accesorios ficticios o grabaciones autorizadas. Mide los objetivos táctiles reales, los desplazamientos de scroll y los límites resaltados. Nunca reemplaces el comportamiento real de la funcionalidad con pantallas inventadas y lo llames auténtico. Etiqueta las visualizaciones nativas solo simuladas en la procedencia de entrega.
  • Iguala los colores del tiempo de ejecución. La paleta de muestra incluida es solo un valor predeterminado; no es la marca de otra aplicación. El modo oscuro general, el texto editorial escaso y una revelación de salida del teléfono/marca son las preferencias del proyecto original, configurables cuando el usuario solicite lo contrario.

Secuencia de producción

Lee references/workflow.md para conocer el método de producción y los detalles frágiles de tiempo/geometría. Lee references/capture.md al realizar o actualizar capturas de pantalla. Lee references/timeline.md al crear acciones, posiciones de cámara, desplazamientos o texto.

  1. Para un proyecto nuevo, ejecuta python3 scripts/scaffold.py /absolute/new/project desde esta carpeta de habilidad. Copia assets/template y crea pantallas de demostración sintéticas claramente etiquetadas. Reemplaza esas pantallas antes de una entrega real. Para una película existente, edita su proyecto directamente en lugar de volver a hacer scaffold.
  2. En el proyecto generado, instala las dependencias de Node/Python y Chromium según lo documentado en el README del repositorio. Configura project.json con el tema real de la app, fuentes opcionales propias e imagen/recorte de marca. El renderizador actual apunta a 1080×1920 a 30 fps, con capturas de app CSS de 430×860 a DPR 3; cambiar las relaciones de aspecto requiere cambios coordinados en la geometría y las coordenadas.
  3. Captura el flujo de trabajo y escribe source/films.json. Usa una acción de cámara principal a la vez, respuesta táctil rápida y ritmos claros de configuración → acción → resultado. Mantén visible la funcionalidad narrada cuando se hable. Usa texto corto añadido para énfasis; los subtítulos laterales son una entrega separada.
  4. Escribe source/narration.json y genera la narración faltante con python3 source/narrate.py solo cuando la generación de voz esté autorizada. Proporciona ELEVENLABS_API_KEY y ELEVENLABS_VOICE_ID a través del entorno del proceso. Almacena en caché el par MP3/alineación; nunca pongas secretos en el código fuente, capturas de pantalla, registros o ZIP. Las solicitudes fallidas pagadas se detienen sin reintento automático. Usa audio en caché para la iteración.
  5. Usa las marcas de tiempo de los caracteres devueltas más el desplazamiento de mezcla de 0.65 segundos para dirigir los resaltados, toques, enfoque de cámara, texto y final. Renderiza fotogramas de vista previa, inspecciónalos, luego renderiza la película. La plantilla admite --preview, --only INDEX y --manifest PATH; mezcla/verifica/empaqueta usando source/films.json.
  6. Ejecuta python3 source/mix.py. Prefiere muestras de biblioteca de sonido autorizadas en assets/audio/sfx; las muestras ausentes usan procedimientos alternativos originales. Mantén los efectos inteligibles debajo de la voz. La plantilla alinea los picos transitorios con las acciones y atenúa los efectos debajo de la narración.
  7. Ejecuta python3 source/verify.py, inspecciona visualmente las transiciones críticas y los momentos narrados, y escucha la mezcla final. Las comprobaciones automatizadas de fotogramas oscuros/volumen no determinan que se muestre la funcionalidad correcta. Revisa los subtítulos y todo el texto prometido.
  8. Ejecuta python3 source/package.py después de que las exportaciones pasen. Inspecciona el contenido explícito del archivo y los derechos de los medios antes de compartir. Entrega MP4, SRT/VTT opcional, vistas previas, código fuente editable y procedencia. La publicación, el despliegue y la publicación permanecen dentro del alcance solicitado por el usuario.

Conserva estas invariantes

  • La textura de la app usa sRGB y toneMapped:false; la iluminación de la escena no debe recolorizar la app.
  • Los píxeles de resaltado y desplazamiento usan la misma interpolación de desplazamiento medida. Un atlas permanece activo después de que el desplazamiento termina; de lo contrario, las duraciones cortas de desplazamiento pueden exponer una región en blanco.
  • El enfoque de la cámara se calcula antes de la transformación de salida para que la cámara no siga al teléfono que se aleja. Comienza la revelación de la marca rápidamente durante la narración de cierre; no dejes una pausa vacía.
  • Las partículas en el espacio mundial tienen prueba de profundidad y tamaño en perspectiva. Mantenlas subordinadas al contenido de la app.
  • Usa la GPU explícitamente en macOS (--enable-gpu --use-angle=metal), renderiza tiempos deterministas frame / 30 y canaliza fotogramas con contrapresión hacia FFmpeg.
  • No copies archivos de credenciales, código fuente de aplicaciones propietarias, fuentes/SFX sin licencia ni datos del cliente en una habilidad reutilizable o repositorio público.

El scripts/demo_audio.py opcional crea un tono sintético para una prueba de humo sin conexión del pipeline. Es explícitamente no narración y nunca debe presentarse como una voz en off terminada.

Skills relacionados