SIX — Scrolling Immersive Xploration

¿Qué hace SIX — Scrolling Immersive Xploration?

Genera una página de aterrizaje donde el desplazamiento impulsa una cámara: se sumerge desde fuera de una escena hacia su interior, luego sale volando y entra en la siguiente escena, de forma continua, sin cortes visibles. Las imágenes son generadas por IA (MuAPI); la página solo reproduce el video prerenderizado según la posición de desplazamiento. Es la misma técnica detrás de las páginas de desplazamiento de productos de Apple: la cámara se mueve realmente, el desplazamiento solo controla el tiempo.

Qué generas: N fotogramas de escena → N clips de cámara de "inmersión" → N-1 clips "conectores" que unen escenas consecutivas sin problemas → un motor de desplazamiento portátil que reproduce toda la cadena como un solo vuelo.

La única regla que lo hace o lo rompe: las uniones deben ser idénticas en fotograma. Lee La cadena sin costuras antes de generar cualquier conector. Hacer esto mal es el fallo más común y produce un "salto" visible entre escenas.

No asumas un framework de frontend. El motor de desplazamiento en resources/scrub-engine.js es vanilla JS autónomo (construye su propio DOM e inyecta su propio CSS en un contenedor que le proporcionas, y se expone como mountSIX), por lo que funciona en HTML plano, Next.js, Vue, una página servida con Python, cualquier cosa. El valor de esta habilidad es el pipeline de MuAPI, los prompts y el método de unión, no el framework.

Mapa de archivos: SKILL.md (este archivo) → scripts/pipeline.md (bash para copiar y pegar para toda la generación) + scripts/knockout.py (eliminación de fondo) → references/prompts.md (lista de verificación + plantillas de prompts) + references/muapi-model-roster.md (mapeo verificado de modelos/niveles/endpoints — léelo si algo necesita auditoría) → resources/scrub-engine.js + resources/index-template.html (motor integrable + página mínima).

---

Paso 0 — Inicialización

1. CLI de MuAPI. Si muapi no está en $PATH, instálalo según el flujo de paquetes habitual de tu entorno, luego ejecuta muapi auth configure (escribe MUAPI_API_KEY/su archivo de configuración — interactivo, no puedes ejecutar el flujo de autenticación si requiere un navegador). Confirma que funciona con muapi auth status. No hay un comando documentado de saldo de créditos; si un lote se detiene con un error de créditos, verifica directamente en el panel de muapi.ai.
2. ffmpeg / ffprobe en $PATH (extracción y codificación de fotogramas).
3. Una herramienta de imágenes para eliminar el fondo si quieres escenas flotantes: PIL (python3 -c "import PIL") o cwebp/sips. Opcional — ver Paso 3.
4. jq en $PATH — se usa en todo el pipeline para analizar respuestas --output-json y extraer URLs de activos subidos.
5. Advertencias: macOS incluye bash 3.2 (sin declare -A); no uses arrays asociativos en scripts. Las generaciones de MuAPI tardan minutos — siempre ejecútalas en segundo plano y consulta (--async + muapi predict wait <request_id>), nunca una llamada bloqueante en primer plano. Los endpoints de video/imagen de MuAPI toman URLs alojadas, no rutas de archivos locales — esto es lo contrario de la convención de Higgsfield, y el error de migración más común: cada imagen de referencia local (un fotograma de escena, un fotograma de borde extraído) debe pasar primero por muapi upload file <path> --output-json --jq '.url', y la URL devuelta es la que se pasa a --start-image/--end-image/--image-urls. Los nombres exactos de las banderas y las opciones de resolución/calidad no están documentados de manera uniforme en todos los modelos — verifica con muapi video from-image --help / muapi image generate --help antes de hacer lotes, y consulta references/muapi-model-roster.md para lo que ya se ha verificado.

---

Paso 1 — Entrevista al usuario

El tema es del usuario — pregúntalo como una pregunta abierta en prosa simple, nunca una opción múltiple inventada. Una lista inventada de industrias los sesga y parece que estás decidiendo su negocio por ellos; deja que respondan con sus propias palabras (su negocio real, el de un cliente, o cualquier idea). Reserva la opción múltiple estructurada (AskUserQuestion en Claude Code; una pregunta simple de una u otra opción en otros lugares) para las opciones genuinamente enumerables y de menor riesgo a continuación — la dirección de arte y el enfoque del kit de marca — e incluso allí, indica que pueden seguir su propio camino ("Otro"). Pregunta solo lo que no puedas establecer de forma sensata por defecto. Cubre:

1. Tema (pregunta abierta, no opción múltiple) — "¿De qué debería tratar este mundo? Tu negocio, el de un cliente, o cualquier idea — una palabra o una frase está bien." Captura la industria/producto + una descripción de una línea (ej. "una empresa de té de burbujas, desde la hoja hasta el último sorbo"), y un nombre de marca si lo tienen; de lo contrario, propondrás uno a continuación.
2. Kit de marca — ofrece tres caminos, elige uno:
   • Importar desde una URL: obtén la página tú mismo (con web-fetch) y extrae la paleta visible, el nombre y el tono — no hay un importador de kit de marca dedicado de MuAPI documentado, por lo que este paso consiste en que hagas la extracción, no una llamada CLI. Dilo claramente si el usuario espera una importación con un solo comando.
   • El usuario te entrega la paleta + el nombre + el tono directamente.
   • Tú propones una paleta + un nombre y dejas que el usuario los apruebe. Captura 4–6 valores hex con nombre, un nombre para mostrar y una o dos palabras de tono.
3. Dirección de arte — el valor predeterminado es "diorama de arcilla suave mate low-poly, isométrico, miniatura con efecto tilt-shift, luz cálida." Ofrece alternativas (papercraft plano, juguete brillante, claymation, noche de neón, arquitectónico fotorrealista). Lo que se elija se convierte en el preámbulo de estilo compartido que se reutiliza textualmente en cada prompt de escena (esto es lo que hace que el mundo sea cohesivo).
4. El viaje (secciones) — las escenas ordenadas por las que vuela la cámara. Propón un conjunto derivado de la propia cadena de valor del tema y deja que el usuario lo edite. 5–7 funciona bien. Ejemplo de té de burbujas: granjas → cocina de perlas → tienda insignia → entrega → plaza comunitaria → el producto estrella. Cada sección necesita: una descripción corta del tema (qué hay EN el diorama), una ceja, un título, una línea de cuerpo y 0–3 píldoras de etiqueta. La última sección suele ser el producto estrella + el CTA.
5. Versión móvil (beta) — PREGUNTA SIEMPRE; nunca generes ambas en silencio. Pregunta como una elección de dos opciones (AskUserQuestion en Claude Code; una pregunta simple en otros lugares): "¿Quieres también una versión optimizada para móvil? El soporte para móvil está en beta — el mecanismo de desplazamiento es nativo de escritorio; en teléfonos obtienes codificaciones más ligeras y un motor reforzado, pero el retrato recorta el fotograma 16:9 y los dispositivos de gama baja pueden tener tirones." Opciones: "Solo escritorio" / "Escritorio + móvil (beta)". El descargo de responsabilidad beta debe ser declarado al usuario, no solo implícito. Lo que la respuesta controla:
   • Sí → produce las codificaciones móviles -m.mp4 (Paso 6) y conecta clipMobile/connectorsMobile (Paso 7); ejecuta el QA móvil completo (Paso 8). Si el tema focal de alguna escena está descentrado, ofrece la opción de escape de variante héroe 9:16 (créditos MuAPI extra — dilo).
   • No → salta las codificaciones móviles y la conexión por completo. El refuerzo del motor para teléfonos (coalescencia de búsqueda, preparación de iOS, CSS de zona segura) siempre está activo independientemente — eso no es una "versión móvil", es solo que la página no se rompe cuando un teléfono la visita — por lo que una compilación solo de escritorio sigue degradándose con elegancia.

El modelo de video no es una pregunta de la entrevista — por defecto seedance-2-first-last-frame (nivel global) en silencio. Si el usuario nombra una preferencia, respétala solo si puede fijar una unión — es decir, acepta una imagen de inicio y, para los conectores, también una imagen de fin (references/muapi-model-roster.md tiene el catálogo verificado). Esta habilidad solo produce resultados sin costuras, por lo que un modelo que no pueda fijar la unión se rechaza con una breve explicación del motivo, no se sustituye — usa un modelo del catálogo en su lugar.

Mantén el mecanismo de desplazamiento fijo (vuelo continuo) — ese es el objetivo de la habilidad. Consulta references/prompts.md para la lista de verificación de la entrevista y la estructura de copia.

---

Paso 2 — Generar los fotogramas de las escenas

Una imagen por sección, todas compartiendo el mismo preámbulo de estilo para la cohesión. Modelo predeterminado gpt-image-2-text-to-image (nítido, excelente para ilustraciones isométricas; devuelve un fondo sólido/blanco que es perfecto para "islas" de diorama flotantes). Usa nano-banana-pro si el resumen tiene muchos personajes/dibujos animados, o google-imagen4-ultra para el estilo arquitectónico fotorrealista (consulta references/muapi-model-roster.md para la tabla completa de modelos de imagen).

Forma del prompt (plantillas completas en references/prompts.md):

<PREÁMBULO DE ESTILO, idéntico cada vez>. Sobre un fondo sólido <bg> con una sombra de contacto suave. <PALETA hex>. Sin texto, sin letras, sin logotipos, centrado, 3:2.
Tema: <qué hay EN ESTE diorama>.

• Ejecuta las N concurrentemente, en segundo plano. Comando por escena:

  muapi image generate --model gpt-image-2-text-to-image --prompt "$(cat scene_i.txt)" \
    --aspect-ratio 3:2 --async --output-json scene_i.job.json
  id=$(jq -r '.request_id' scene_i.job.json)
  muapi predict wait "$id" --json > scene_i.json
  

• La URL del resultado está en .result_url (o .output_url/.url — la clave exacta no está documentada de manera uniforme; inspecciona una respuesta y ajústala) en la salida de la consulta. Descárgala con curl.
• Una generación puede fallar de forma transitoria — vuelve a generar solo esa individualmente; no reinicies el lote.
• Revisa los fotogramas antes de continuar. Deben leerse como un mundo cohesivo (mismo ángulo, paleta, luz). Si uno está fuera de estilo, regenéralo con muapi image generate nuevamente (una nueva llamada, mismo preámbulo) — no uses muapi image edit con un fotograma anterior como referencia para "fijar" el estilo; el modo de edición fusiona/clona la habitación real de esa referencia en lugar de solo igualar su estilo.

Consulta scripts/pipeline.md para el script de lote exacto.

---

Paso 3 — (Opcional) Escenas flotantes

Si quieres que los dioramas floten sobre un fondo atmosférico en lugar de estar en una caja sólida, elimina el fondo plano a transparencia con scripts/knockout.py (relleno por inundación conectado al borde — conserva el color interior que coincide con el fondo, ej. paredes color crema). Luego codifica a webp. Si prefieres mantenerlo simple, simplemente haz que el fondo de la página sea del mismo color que el fondo de la escena y omite esto.

Estos fotogramas también sirven como pósteres de video y respaldos de carga diferida, así que consérvalos.

---

Paso 4 — Arquitectura de cámara (elige una — esto determina la sensación)

Cómo se mueve la cámara entre escenas es la palanca de calidad más importante. Dos formas; elige por estética.

Modelo de video — elige UNO para toda la cadena

Esta habilidad solo produce resultados sin costuras, por lo que los únicos modelos utilizables son aquellos que pueden fijar una unión: cada clip encadenado debe aceptar --start-image, y los conectores también necesitan --end-image. Esa capacidad — no la preferencia — es la regla de selección. Evidencia completa en references/muapi-model-roster.md; resumido aquí:

Modelo	nivel	imagen inicio/fin	Notas
seedance-2-first-last-frame (predeterminado)	global	✓ / ✓	--mode first-last — una imagen = un segmento/inmersión (sin fin), dos imágenes = un conector. El mismo modelo cubre ambos roles.
seedance-2-first-last-frame-fast	global	✓ / ✓	Mismo modelo, variante de cola rápida — el nivel económico de previz. Ejecuta toda la cadena aquí primero para validar las uniones antes de gastar en el renderizado completo.
seedance-2-vip-first-last-frame	vip	✓ / ✓	Respaldo NSFW / filtro de contenido — la banda de filtro de VIP difiere y está documentada para tolerar rostros humanos realistas en referencias, a diferencia de global/chinese. Úsalo para un clip problemático, no para la cadena predeterminada.

El nivel chinese no está en el catálogo: first-last (condicionamiento de dos imágenes) no está disponible en él, solo i2v de una sola imagen — por lo tanto, no puede mantener una unión. Omite cualquier cosa cuyas entradas de medios sean solo de una imagen por la misma razón (solo puede condicionar una generación, no continuar una toma).

Reglas:

• Un modelo+nivel para todos los clips encadenados. Cada renderizador/nivel tiene su propio carácter de movimiento/color/grano; mezclar en medio de la cadena mantiene la posición continua (los fotogramas aún se transfieren), pero el cambio de carácter del renderizado se lee como un sutil salto. La única excepción sancionada es el respaldo NSFW para un solo clip problemático (Errores) — un cambio de carácter leve en un conector de 5s es mejor que un conector faltante.
• Por defecto seedance-2-first-last-frame en global; respeta la preferencia declarada del usuario solo si el modelo califica (fijación de unión). Si no califica, dilo y usa un modelo compatible — nunca entregues una compilación no continua para satisfacer una solicitud de modelo.
• Los scripts del pipeline toman el modelo/nivel como $VMODEL/$VTIER con banderas por nivel ya clasificadas (scripts/pipeline.md).

A) Toma continua hacia adelante — RECOMENDADA para estilos realistas / con los pies en la tierra / recorrido guiado

Una cámara que solo se desliza hacia adelante, desde la primera escena hasta la última, como una sola toma. Genera los segmentos secuencialmente: segmento 0 desde el fotograma de la escena 0 (deslízate hacia adelante dentro de ella); luego, --start-image de cada segmento = el ÚLTIMO FOTOGRAMA REAL del segmento anterior (extráelo con ffmpeg, súbelo), prompt "continúa deslizándote suavemente HACIA ADELANTE hacia [escena i], nunca retrocedas" (o un movimiento expresivo a mitad del segmento bajo el contrato de transferencia de movimiento — consulta Gramática de cámara a continuación), y sin --end-image — una imagen de fin de una toma de establecimiento amplia obliga a la cámara a retroceder, que es la causa #1 de tirones. Extrae el último fotograma de cada segmento para alimentar el siguiente. Resultado: cada unión es idéntica en fotograma y la cámara nunca invierte. No hay conectores (salta el Paso 5) — los segmentos SON el viaje. Conecta cada segmento como un clip de sección con connectors: [] y un pequeño crossfade (~0.08). Incluso sin una --end-image, los segmentos aún llegan a habitaciones distintas (el prompt dirige el contenido). Coste: estrictamente secuencial (no se puede paralelizar) y más lento; los interiores tienen más probabilidades de activar el filtro de contenido, así que incluye reintentos (3 intentos/segmento).

B) Inmersión + conector aéreo — solo para mundos de diorama / miniatura / vista de dios

Un clip de "inmersión en cada escena" + un conector que se eleva hacia arriba y hacia afuera y vuela a la siguiente escena (Paso 5). La elevación invierte la dirección de la cámara en cada unión (inmersión hacia adelante → elevación hacia atrás). En un mundo de miniatura/diorama, eso se lee como un "zoom intencional para obtener contexto" — el ojo humano espera cambios de ángulo en la animación stop-motion, por lo que la inversión no se siente como un fallo. Sin embargo, en un escenario realista/arquitectónico, un retroceso repentino es discordante (la cámara del ojo humano nunca se aleja para reorientarse).

Elige esta solo si el mundo es claramente un diorama, una miniatura, claymation, papercraft o una maqueta arquitectónica. Para todo lo demás, usa una toma continua (A).

---

Paso 5 — Conectores (Arquitectura B solamente)

Si elegiste la toma continua (A), omite este paso.

Los conectores unen escenas consecutivas. Empieza desde el último fotograma de la inmersión de la escena i y termina en el primer fotograma de la inmersión de la escena i+1. La exigencia: el último fotograma de la inmersión DEBE coincidir exactamente con la imagen de inicio del conector, y la imagen de fin del conector DEBE coincidir exactamente con el primer fotograma de la inmersión de i+1. De lo contrario, la unión tendrá un salto.

Proceso:

1. Extrae el último fotograma de la inmersión de la escena i: ffmpeg -sseof -1 -i clip_i.mp4 -update 1 -q:v 1 last_frame_i.jpg
2. Súbelo: muapi upload file last_frame_i.jpg --output-json --jq '.url'
3. Extrae el primer fotograma de la inmersión de la escena i+1: ffmpeg -i clip_i+1.mp4 -vframes 1 -q:v 1 first_frame_i+1.jpg
4. Súbelo.
5. Genera el conector:

   muapi video from-image --model $VMODEL --tier $VTIER \
     --prompt "La cámara se eleva suavemente hacia arriba y se desliza hacia la derecha, revelando la siguiente área del diorama. Transición fluida, movimiento continuo." \
     --start-image <url_del_último_fotograma_de_i> \
     --end-image <url_del_primer_fotograma_de_i+1> \
     --mode first-last --duration 3 --async --output-json connector_i.job.json
   muapi predict wait "$(jq -r '.request_id' connector_i.job.json)" --json > connector_i.json
   

6. Repite para cada unión.
7. Regla de oro: si el conector no llega exactamente al fotograma de destino visualmente (incluso después de 3 intentos), reduce la duración a 2 segundos — los saltos se notan menos en transiciones más cortas.

---

Paso 6 — Codificar y empaquetar

Renderiza todos los clips y conectores en un solo video de reproducción continua (método A: solo segmentos; método B: segmentos + conectores intercalados).

1. Crea una lista de archivos (concat_list.txt) con el orden correcto de reproducción.
2. Concatena:

   ffmpeg -f concat -safe 0 -i concat_list.txt -c copy output_full.mp4
   

3. Genera una versión de vista previa de baja resolución para pruebas rápidas.
4. Si se solicitó la versión móvil, repite para las codificaciones móviles (-m.mp4), posiblemente con una máscara de recorte 9:16.

---

Paso 7 — Integrar en la página

Usa resources/scrub-engine.js (exponer mountSIX) y resources/index-template.html como punto de partida.

La estructura de datos del motor espera:

• clips: lista de objetos de clip, cada uno con la URL del video, duración y metadatos (sección, título, etc.)
• connectors: (opcional) lista de objetos de conector, cada uno con la URL del video y la duración.
• Móvil: clipMobile y connectorsMobile si se generaron codificaciones para móvil.

El motor se encarga de:

• Reproducción síncrona con el desplazamiento (sin controles de reproducción visibles)
• Precarga de video
• Transiciones suaves en las uniones
• Degradación elegante para móvil (coalescencia de búsqueda, zona segura CSS)

---

Paso 8 — QA

Verifica la experiencia de desplazamiento completa antes de entregar:

• No debe haber saltos visibles entre escenas.
• La cámara debe moverse suavemente; no debe temblar ni detenerse.
• La duración total del video debe coincidir con el espacio de desplazamiento anticipado.
• En móvil, el recorte 9:16 debe centrar el tema principal; si no es así, ofrece la variante héroe 9:16.
• La página debe cargarse rápidamente; considera la carga diferida para videos largos.

---

Errores comunes

• Uniones con saltos: el fallo más común. Vuelve a verificar que los fotogramas de inicio/fin coincidan exactamente. Si el problema persiste, acorta los conectores o usa el modo de toma continua.
• Filtro de contenido (NSFW): las escenas interiores a veces activan el filtro. Si se rechaza un clip, reintenta con el modelo VIP (seedance-2-vip-first-last-frame) como respaldo.
• Errores de créditos: verifica el saldo en el panel de muapi.ai; no hay comando CLI para esto.
• Generación lenta: las generaciones de MuAPI tardan minutos. Siempre usa --async y consulta; no bloquees.

---

Referencias

• scripts/pipeline.md — script bash para la generación completa.
• references/prompts.md — lista de verificación de la entrevista y todas las plantillas de prompts.
• references/muapi-model-roster.md — mapeo de modelos/niveles/endpoints.
• resources/scrub-engine.js — motor de desplazamiento vanilla JS.
• resources/index-template.html — página de inicio mínima.