SIX — Scrolling Immersive Xploration

O que SIX — Scrolling Immersive Xploration faz?

Produz uma página de destino onde a rolagem controla uma câmera: ela mergulha de fora de uma cena para seu interior, depois voa para fora e para dentro da próxima cena, continuamente, sem cortes visíveis. Os visuais são gerados por IA (MuAPI); a página apenas avança o vídeo pré-renderizado com base na posição da rolagem. Esta é a mesma técnica por trás das páginas de produto com rolagem da Apple — a câmera realmente se move, a rolagem apenas controla o tempo.

O que você gera: N imagens de cena → N clipes de câmera de "mergulho" → N-1 clipes "conector" que unem cenas consecutivas perfeitamente → um motor de rolagem portátil que reproduz toda a sequência como um único voo.

A única regra que define o sucesso ou fracasso: as emendas devem ser idênticas quadro a quadro. Leia A sequência contínua antes de gerar qualquer conector. Errar isso é a falha mais comum e produz um "pulo" visível entre as cenas.

Não presuma um framework frontend. O motor de rolagem em resources/scrub-engine.js é vanilla JS autossuficiente (ele constrói seu próprio DOM + injeta seu próprio CSS em um contêiner que você fornece, e se expõe como mountSIX), então funciona em HTML puro, Next.js, Vue, uma página servida por Python, qualquer coisa. O valor desta habilidade é o pipeline MuAPI, os prompts e o método de emenda — não o framework.

Mapa de arquivos: SKILL.md (este arquivo) → scripts/pipeline.md (comandos bash para copiar e colar para toda a execução de geração) + scripts/knockout.py (remoção de fundo) → references/prompts.md (lista de verificação de coleta + todos os modelos de prompt) + references/muapi-model-roster.md (mapeamento verificado de modelo/tier/endpoint — leia isto se algo abaixo precisar de auditoria) → resources/scrub-engine.js + resources/index-template.html (motor pronto para uso + página mínima).

---

Passo 0 — Inicialização

1. CLI MuAPI. Se muapi não estiver no $PATH, instale-o de acordo com o fluxo de pacotes do seu ambiente e execute muapi auth configure (escreve MUAPI_API_KEY/seu arquivo de configuração — interativo, você não pode executar o fluxo de autenticação se ele exigir um navegador). Confirme que funciona com muapi auth status. Não há um comando documentado de saldo de créditos na CLI; se um lote parar com um erro relacionado a créditos, verifique o painel muapi.ai diretamente.
2. ffmpeg / ffprobe no $PATH (extração e codificação de quadros).
3. Uma ferramenta de imagem para remoção de fundo se quiser cenas flutuantes: PIL (python3 -c "import PIL"), ou cwebp/sips. Opcional — veja o Passo 3.
4. jq no $PATH — usado em todo o pipeline para analisar respostas --output-json e extrair URLs de ativos enviados.
5. Advertências: macOS vem com bash 3.2 (sem declare -A); não use arrays associativas em scripts. As gerações MuAPI levam minutos — sempre execute-as em segundo plano e faça polling (--async + muapi predict wait <request_id>), nunca uma chamada bloqueante em primeiro plano. Os endpoints de vídeo/imagem do MuAPI aceitam URLs hospedadas, não caminhos de arquivos locais — isso é o oposto da convenção do Higgsfield e o erro de migração mais provável: toda imagem de referência local (uma imagem de cena, um quadro de limite extraído) deve passar por muapi upload file <path> --output-json --jq '.url' primeiro, e a URL retornada é o que é passado para --start-image/--end-image/--image-urls. Os nomes exatos das flags e opções de resolução/qualidade não são documentados uniformemente para todos os modelos — verifique com muapi video from-image --help / muapi image generate --help antes de criar lotes e veja references/muapi-model-roster.md para o que já foi verificado.

---

Passo 1 — Entreviste o usuário

O assunto é para o usuário declarar — pergunte como uma pergunta aberta em prosa simples, nunca uma múltipla escolha inventada. Uma lista inventada de setores os enviesa e parece que você está decidindo o negócio por eles; deixe-os responder com suas próprias palavras (seu negócio real, o de um cliente ou qualquer ideia). Reserve a múltipla escolha estruturada (AskUserQuestion no Claude Code; uma pergunta simples de ou/ou em outros lugares) para as escolhas genuinamente enumeráveis e de menor importância abaixo — direção de arte e abordagem do kit de marca — e mesmo assim, indique que eles podem seguir seu próprio caminho ("Outro"). Pergunte apenas o que você não pode definir de forma sensata. Cubra:

1. Assunto (pergunte abertamente, não múltipla escolha) — "Sobre o que deve ser este mundo? Seu negócio, o de um cliente ou qualquer ideia — uma palavra ou uma frase é o suficiente." Capture o setor/produto + um resumo de uma linha (por exemplo, "uma empresa de chá de bolhas, da folha ao último gole") e um nome de marca se eles tiverem um; caso contrário, você proporá um abaixo.
2. Kit de marca — ofereça três caminhos, escolha um:
   • Importar de uma URL: busque a página você mesmo (com uma busca web) e leia a paleta visível, o nome e o tom — não há um importador de kit de marca MuAPI dedicado documentado, então esta etapa é você fazendo a extração, não uma chamada CLI. Diga isso claramente se o usuário esperar um comando único de importação.
   • O usuário fornece a paleta + nome + tom diretamente.
   • Você propõe uma paleta + nome e deixa o usuário aprovar. Capture 4–6 valores hexadecimais nomeados, um nome de exibição e uma ou duas palavras de tom.
3. Direção de arte — o padrão é "diorama de argila soft matte low-poly, isométrico, miniatura com efeito tilt-shift, luz quente." Ofereça alternativas (papercraft plano, brinquedo brilhante, claymation, noite de néon, arquitetura fotorrealista). O que for escolhido se torna o preâmbulo de estilo compartilhado, reutilizado textualmente em cada prompt de cena (é isso que torna o mundo coeso).
4. A jornada (seções) — as cenas ordenadas pelas quais a câmera voa. Proponha um conjunto derivado da própria cadeia de valor do assunto e deixe o usuário editar. 5–7 funciona bem. Exemplo de bubble tea: fazendas → cozinha de pérolas → loja principal → entrega → praça da comunidade → o produto herói. Cada seção precisa de: uma descrição curta do assunto (o que está NO diorama), um título curto, um título principal, uma linha de corpo e 0–3 pills de tags. A última seção geralmente é o produto herói + a chamada para ação.
5. Versão móvel (beta) — SEMPRE pergunte isso; nunca gere ambas silenciosamente. Pergunte como uma escolha de duas opções (AskUserQuestion no Claude Code; uma pergunta simples em outros lugares): "Quer uma versão otimizada para dispositivos móveis também? O suporte móvel está em beta — o mecanismo de rolagem é nativo para desktop; em telefones você obtém codificações mais leves e endurecimento do motor, mas o retrato corta o quadro 16:9 e dispositivos de baixo custo ainda podem engasgar." Opções: "Apenas desktop" / "Desktop + móvel (beta)". A isenção de responsabilidade beta deve ser declarada ao usuário, não apenas implícita. O que a resposta controla:
   • Sim → produza as codificações móveis -m.mp4 (Passo 6) e conecte clipMobile/connectorsMobile (Passo 7); execute o QA móvel completo (Passo 8). Se o assunto focal de alguma cena estiver descentralizado, ofereça a saída de emergência de herói 9:16 (créditos MuAPI extras — diga isso).
   • Não → pule as codificações móveis e a fiação completamente. O endurecimento do motor para telefones (coalescência de busca, preparação para iOS, CSS de área segura) está sempre ativo independentemente — isso não é uma "versão móvel", é apenas a página não quebrar quando um telefone a visita — então uma construção apenas para desktop ainda degrada graciosamente.

O modelo de vídeo não é uma pergunta de entrevista — padrão seedance-2-first-last-frame (tier global) silenciosamente. Se o usuário nomear uma preferência, honre-a apenas se ela puder travar a emenda de quadro — ou seja, aceitar uma imagem inicial e, para conectores, também uma imagem final (references/muapi-model-roster.md tem a lista verificada). Esta skill só entrega saída contínua, então um modelo que não pode travar o quadro é recusado com um motivo de uma linha, não substituído — use um modelo da lista.

Mantenha o mecanismo de rolagem fixo (voo contínuo) — esse é o objetivo da skill. Veja references/prompts.md para a lista de verificação de coleta e estrutura de cópia.

---

Passo 2 — Gere as imagens das cenas

Uma imagem por seção, todas compartilhando o mesmo preâmbulo de estilo para coesão. Modelo padrão gpt-image-2-text-to-image (nítido, ótimo para ilustração isométrica; retorna um fundo sólido/branco que é perfeito para "ilhas" de diorama flutuantes). Use nano-banana-pro se o briefing for pesado em personagens/desenhos animados, ou google-imagen4-ultra para o estilo arquitetônico fotorrealista (veja references/muapi-model-roster.md para a tabela completa de modelos de imagem).

Forma do prompt (modelos completos em references/prompts.md):

<PREÂMBULO DE ESTILO, idêntico toda vez>. Em um fundo <bg> sólido e liso com uma sombra de contato suave. <HEXES DA PALETA>. Sem texto, sem letras, sem logotipos, centralizado, 3:2.
Assunto: <o que está NESTE diorama>.

• Execute todos N simultaneamente, em segundo plano. Comando por cena:

  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
  

• A URL resultante está em .result_url (ou .output_url/.url — a chave exata não é documentada uniformemente; inspecione uma resposta e ajuste) na saída de polling. Faça curl dela.
• Uma geração pode falhar transitoriamente — gere novamente essa individualmente; não reinicie o lote.
• Revise as imagens antes de continuar. Elas devem ser lidas como um mundo coeso (mesmo ângulo, paleta, luz). Se uma estiver fora do estilo, regenere-a com muapi image generate novamente (uma nova chamada, mesmo preâmbulo) — não use muapi image edit com uma imagem anterior como referência para "travar" o estilo; o modo de edição funde/clona o ambiente real dessa referência em vez de apenas combinar seu estilo.

Veja scripts/pipeline.md para o script de lote exato.

---

Passo 3 — (Opcional) Faça as cenas flutuarem

Se quiser que os dioramas flutuem sobre um fundo atmosférico em vez de ficarem em uma caixa sólida, remova o fundo sólido para transparência com scripts/knockout.py (preenchimento por inundação conectado à borda — preserva a cor interna que corresponde ao fundo, por exemplo, paredes creme). Em seguida, codifique para webp. Se preferir manter a simplicidade, apenas faça o fundo da página da mesma cor que o fundo da cena e pule esta etapa.

Essas imagens também servem como pôsteres de vídeo e substitutos de carregamento lento, então mantenha-as.

---

Passo 4 — Arquitetura da câmera (escolha uma — isso determina ou quebra a sensação)

Como a câmera se move entre as cenas é a maior alavanca de qualidade. Duas formas; escolha pela estética.

Modelo de vídeo — escolha UM para toda a sequência

Esta skill só entrega saída contínua, então os únicos modelos utilizáveis são aqueles que podem travar a emenda de quadro: cada clipe encadeado deve aceitar --start-image, e os conectores também precisam de --end-image. Essa capacidade — não a preferência — é a regra de seleção. Trilha de evidências completa em references/muapi-model-roster.md; resumida aqui:

Modelo	tier	imagem inicial/final	Notas
seedance-2-first-last-frame (padrão)	global	✓ / ✓	--mode first-last — uma imagem = um segmento/mergulho (sem final), duas imagens = um conector. O mesmo modelo cobre ambas as funções.
seedance-2-first-last-frame-fast	global	✓ / ✓	Mesmo modelo, variante de fila rápida — o tier barato de pré-visualização. Execute toda a sequência aqui primeiro para validar as emendas antes de gastar na renderização completa.
seedance-2-vip-first-last-frame	vip	✓ / ✓	Alternativa NSFW / filtro de conteúdo — a banda de filtro do VIP difere e documentada para tolerar rostos humanos realistas em referências, ao contrário do global/chinese. Use para um clipe teimoso, não para a sequência padrão.

O tier chinese não está na lista: first-last (condicionamento de duas imagens) não está disponível nele, apenas i2v de imagem única — então não pode segurar uma emenda. Pule qualquer coisa cujas entradas de mídia sejam apenas de imagem única pelo mesmo motivo (só pode condicionar uma geração, não continuar um plano).

Regras:

• Um modelo+tier para todos os clipes encadeados. Cada renderizador/tier tem seu próprio caráter de movimento/cor/grão; misturar no meio da sequência mantém a posição contínua (os quadros ainda se entregam), mas a mudança de caráter de renderização é lida como um pulo sutil. A única exceção sancionada é a alternativa NSFW para um único clipe teimoso (Armadilhas) — uma ligeira mudança de caráter em um conector de 5s é melhor do que um conector faltando.
• Padrão para seedance-2-first-last-frame em global; honre uma preferência declarada pelo usuário apenas se o modelo se qualificar (trava de quadro). Se não se qualificar, diga isso e use um modelo suportado — nunca entregue uma construção não contínua para satisfazer uma solicitação de modelo.
• Os scripts de pipeline usam o modelo/tier como $VMODEL/$VTIER com flags por tier já tratadas (scripts/pipeline.md).

A) Tomada contínua para frente — RECOMENDADO para fundamentado / realista / tour guiado

Uma câmera que apenas desliza para frente, da primeira à última cena, como uma única tomada. Gere os segmentos sequencialmente: segmento 0 a partir da imagem da cena 0 (deslize para dentro dela); em seguida, o --start-image de cada segmento = o ÚLTIMO QUADRO REAL do segmento anterior (extraia com ffmpeg, envie-o), prompt "continue deslizando suavemente PARA FRENTE em [cena i], nunca recuando" (ou um movimento expressivo no meio do segmento sob o contrato de transferência de movimento — veja Gramática da câmera abaixo), e sem --end-image — uma imagem final de um plano geral aberto força a câmera a recuar, que é a causa nº 1 de vibração. Extraia o último quadro de cada segmento para alimentar o próximo. Resultado: cada emenda é idêntica quadro a quadro e a câmera nunca inverte. Não há conectores (pule o Passo 5) — os segmentos SÃO a jornada. Conecte cada segmento como um clipe de seção com connectors: [] e um pequeno crossfade (~0.08). Mesmo sem um --end-image, os segmentos ainda chegam a salas distintas (o prompt orienta o conteúdo). Custo: estritamente sequencial (não pode paralelizar) e mais lento; os interiores são mais propensos a acionar o filtro de conteúdo, então inclua novas tentativas (3 tentativas/segmento).

B) Mergulho + conector aéreo — apenas para mundos diorama / miniatura / visão divina

Um clipe de "mergulho em cada cena" + um conector que puxa para cima e para fora e voa para a próxima cena (Passo 5). A puxada para fora inverte a direção da câmera em cada emenda (mergulho para frente → puxada para trás). Em um mundo miniatura/diorama isso é lido como um "zoom intencional

...

[truncado para tradução]