O vôo — roteiro de produção

Data: 2026-07-31 Spec: docs/superpowers/specs/2026-07-31-site-projeto-romeo-design.md Estado: escrito; aguardando o teste do trecho 3 antes de produzir a cadeia

Este é o documento que a geração de vídeo consome. O spec diz o que o site é; este diz o que a câmera faz, frame a frame, e o que está escrito na tela.

A gramática das passagens

A câmera sai pela janela de cada andar, sobe pela fachada e entra pela janela do andar de cima. Sempre para frente, sempre subindo.

Três motivos: a arquitetura A não admite recuo, e subir é o movimento para frente mais legível que existe; a subida pela fachada deixa claro que é um prédio só; e é a mesma gramática da saída final para o foguete, então o fecho já nasce plantado no primeiro trecho.

Cada trecho termina com a câmera atravessando a janela e começando a subir. O trecho seguinte começa subindo do lado de fora e entra pela janela do andar acima. O último frame real de um é a start_image do outro — nunca uma imagem gerada à parte.

Direção de câmera

"Sempre para frente" é a regra da emenda, não do trecho. Dentro de um clipe não existe emenda para quebrar — órbita, crane-up, tracking lateral e push-in que alivia são todos seguros. Reversão só é fatal atravessando uma emenda.

Isso vale dobrado aqui, porque a batida de transição cobre a emenda. A câmera pode ser dramática.

O contrato de handoff — literal em todo prompt

Duas frases, sem parafrasear:

ends by settling into a slow, steady forward drift toward the next destination in the final second

begins by continuing that same forward drift

Foi a ausência disso que fez o teste do trecho 3 terminar numa parede sem direção. Não foi excesso de movimento.

A gramática do nosso conceito

Da tabela do SKILL: imobiliário e hospitalidade → steadicam atravessando portas, crane-up suave em pé-direito alto. É a base. Sobre ela, cada andar ganha um movimento próprio, e a sequência escala em drama:

Calmo, órbita, crane, baixo-para-alto, órbita, drone, velocidade, escalada, quietude. Nenhum andar repete o movimento do anterior, e o filme tem curva.

O preço honesto disso

Movimento expressivo aumenta a chance de regeração — o modelo pode terminar uma manobra bonita num estado que não é deslocamento limpo para frente. As mitigações são as do SKILL:

1. Contrato de handoff literal, sempre.
2. Conferir o último frame antes de encadear o próximo. Se não parecer um frame de deslizamento suave para frente, regerar aquele trecho antes de gastar o seguinte.
3. Orçar uma regeração extra por trecho expressivo — seis dos nove são expressivos, então ~170 créditos de folga além dos 279 da cadeia.

Trecho onde a cena é o show por si só pode usar o deslize reto, que é risco zero.

A rolagem também anda para trás

Quem rola para cima faz o clipe tocar ao contrário. É de graça e esperado — mas é mais um motivo para a velocidade ser consistente na emenda: uma emenda que passa bem para frente engasga para trás se a velocidade inverter.

Regras que valem para todos os trechos

• Modelo: seedance_2_0, 720p, 16:9. Um só modelo na cadeia inteira.
• Sem end_image. Ele força a câmera a reverter no fim do plano.
• Cada trecho assenta num deslocamento para frente no último segundo, senão a emenda pula.
• Element obrigatório: <<<08ff5874-cc24-40ba-8d60-8b26e2faa197>>> no prompt.
• Romeo em plano médio, peito desobstruído. Isto foi medido: fora de plano médio o wordmark evapora, e com o braço na frente ele some igual. Se um trecho precisa de plano geral, o Romeo sai de quadro nesse pedaço e volta depois.
• Prompt completo = preâmbulo travado da seção de direção de arte do spec + o bloco CÂMERA/AÇÃO abaixo + o bloco de uniforme por extenso.

Os trechos

0 · TÉRREO — a imobiliária

7s · scroll 1.2 · linger 0.35 start_image: 0-terreo.png

Câmera: começa na calçada de tarde, empurra através da porta de vidro, atravessa o salão pela lateral da mesa comunitária e segue até a janela dos fundos, onde começa a subir.

Romeo: em pé ao lado da mesa; acompanha a câmera com o olhar quando ela passa e faz um gesto curto de "vem comigo".

A IMOBILIÁRIA

Cresce sem virar bagunça

Várias marcas sob o mesmo teto, cada uma com seu site e seu endereço. E cada pessoa da equipe enxergando só o que lhe cabe.

Multi-marca · Permissões por papel · Relatórios e BI · Régua de cobrança · Rede de parcerias

1 · 101 — o corretor

8s · scroll 1.8 · linger 0.55 — o trecho mais longo e mais lento; é o coração. start_image: último frame do trecho 0.

Câmera: entra pela janela do 101, cruza o apartamento vazio em direção ao Romeo, desacelera quase até parar quando chega nele — é aqui que a copy está no auge — e depois retoma, contorna e sai pela janela oposta, subindo.

Romeo: em pé no meio do vão, celular numa mão só, baixo, ao lado do corpo (a pose que libera o peito). Ergue o olhar para a câmera quando ela chega, sorri.

O CORRETOR

Você chega com o imóvel. O resto é com ele.

O CRM completo, de graça. A IA escreve o anúncio, sugere o preço e aponta o lead certo. E o imóvel sai publicado no seu site, no marketplace e nos portais.

Funil e leads · Agenda · Anúncio por IA · Preço sugerido · Microsite .broker · Portais em 1 clique · Assinatura digital · Vistoria

2 · 202 — quem procura para comprar

7s · scroll 1.4 · linger 0.45 start_image: último frame do trecho 1.

Câmera: entra pela janela, passa por trás do casal que olha a vista, gira suavemente para revelar o Romeo ao lado do sofá curvo, e segue para a janela seguinte, subindo.

Romeo: de braço aberto, apresentando o apartamento ao casal.

QUEM ESTÁ PROCURANDO

A conta inteira, antes de você se apaixonar

Condomínio, IPTU, taxa de incêndio — tudo na cara, sem surpresa no fim. Compare, favorite, simule o financiamento. E pergunte às duas da manhã.

Busca · Comparador · Favoritos · Custos transparentes · Imóvel na planta · Simulador · Sofia 24h

3 · 303 — quem mora de aluguel

8s · scroll 1.7 · linger 0.55 — o segundo mais importante: é o motor recorrente. start_image: último frame do trecho 2.

Câmera: entra pela janela do loft, aproxima-se em plano médio do Romeo junto à poltrona, para praticamente, e depois sobe e sai pela janela alta do mezanino.

Romeo: ao lado da poltrona de couro caramelo. O gato se esfrega na perna dele e ele abaixa a mão para o bicho, sem se agachar; o cachorro levanta a cabeça do tapete e volta a deitar. A interação é de passagem — se roubar a cena do argumento do cartão, está grande demais.

QUEM MORA DE ALUGUEL

Pague do jeito que der para você

Pix, boleto, débito — ou o cartão, parcelado em até 4x. O proprietário recebe à vista do mesmo jeito.

Cartão em 4x · Pix · Boleto · Contratos · Chamados de manutenção

4 · 406 — o proprietário

7s · scroll 1.3 · linger 0.45 start_image: último frame do trecho 3.

Câmera: entra pela janela da sala de jantar, contorna a mesa redonda passando por trás do proprietário sentado, encontra o Romeo em pé ao lado, e segue para a porta da varanda, subindo.

Romeo: em pé junto à mesa, tablet na mão baixa, virado levemente para o proprietário sentado.

O PROPRIETÁRIO

Você vê tudo, inclusive o que costumam te esconder

Desempenho do anúncio, propostas para aceitar ou recusar, repasse automático quando o aluguel entra. E você escolhe quem gerencia — com exclusividade, se quiser.

Propostas · Repasse automático · Desempenho · Exclusividade · Escolher o corretor · Avaliar a imobiliária

5 · COBERTURA — a temporada

7s · scroll 1.3 · linger 0.4 start_image: último frame do trecho 4.

Câmera: entra pela porta de vidro na manhã, atravessa o apartamento passando pela mala aberta, sai para o terraço junto à espreguiçadeira e começa a subir já com o mar ao fundo — a subida que não vai mais parar.

Romeo: perto das portas abertas, olhando a vista, e vira para a câmera quando ela passa.

A TEMPORADA

Short stay nativo, não puxadinho

Calendário, motor de reservas e sincronismo com Airbnb e Booking dentro do mesmo sistema. Preço que sobe no fim de semana sozinho.

Calendário · Channel manager · Preço dinâmico · Voucher e check-in

6 · O TÚNEL

6s · scroll 1.0 · linger 0 start_image: último frame do trecho 5.

Câmera: sobe da cobertura, o prédio some por baixo, o céu escurece de azul para preto e a subida vira um corredor de velocidade — nuvens, depois estrelas. Movimento sempre para cima e para frente.

Romeo: fora de quadro. Este trecho não tem personagem.

(sem copy — é a respiração antes do fecho)

7 · O FOGUETE

6s · scroll 1.1 · linger 0.3 start_image: último frame do trecho 6.

Câmera: o foguete aparece de baixo para cima, a câmera sobe ao longo do casco preto com o anel verde e ultrapassa o topo, continuando a subir.

A marca no foguete entra em DOM por cima, não renderizada. Modelo de vídeo escreve texto errado, e este é o pior lugar possível para errar o wordmark.

O MERCADO

450 mil corretores. 70 mil imobiliárias.

É de graça porque só ganhamos quando você ganha.

8 · A TERRA

6s · scroll 1.4 · linger 0.5 start_image: último frame do trecho 7.

Câmera: continua subindo e afastando, e a Terra entra em quadro por baixo. A câmera não gira — girar inverte a velocidade e reintroduz o defeito que a arquitetura A evita. O planeta apenas aparece, e a subida desacelera até parar.

Os pontinhos acendendo pelo globo são DOM, não vídeo — para acenderem no scroll e aceitarem legenda.

O PROJETO

Ainda não existe. Já dá para ver.

Protótipo navegável pronto, backend e pagamentos a construir.

E aqui o vôo termina, o motor solta a tela, e a página vira DOM sóbrio.

A coreografia — vídeo e página como uma coisa só

O vídeo não é fundo decorativo e a página não é legenda. A rolagem é a mesma para os dois: o mesmo gesto move a câmera e traz o texto. Isto é o que separa o site de um vídeo com scroll por cima.

O orçamento de rolagem

Somando os scroll dos nove trechos, o vôo ocupa 12,2 alturas de viewport. Depois dele vêm as seções sóbrias, em rolagem normal. Numa tela de 900px isso dá cerca de 11.000px de vôo — aproximadamente 15 segundos de rolagem confortável, ou 3 se a pessoa jogar o dedo. Os dois casos precisam funcionar.

A curva de cada andar

Dentro de um trecho, a rolagem se reparte assim:

O linger existe exatamente para isso: a câmera assenta onde o texto está no auge. Andar importante ganha linger maior — o 101 e o 303 têm 0.55, o túnel tem 0.

Os cartões que expandem

Sobem durante o platô, escalonados de 60ms, cada um com um verbo. Tocar expande.

Enquanto um cartão está aberto, a rolagem fica presa. O vídeo congela no currentTime em que estava e a câmera não anda. Sem isso, ler um cartão faria o prédio subir sozinho por baixo do texto. Fechou, a rolagem devolve o controle e o vôo continua exatamente de onde parou.

Isso tem um efeito narrativo que vale de graça: o vôo para para você ler. O site respeita quem quer se aprofundar sem punir quem quer só passar.

A regra que vale do primeiro ao último pixel

Nunca há só uma coisa se movendo. Em qualquer ponto da rolagem, pelo menos duas camadas andam em velocidades diferentes: o vídeo, que responde ao scrub, e o DOM, que responde com parallax, escala, máscara e cor.

Se em algum trecho a única coisa viva for o vídeo, a página virou papel de parede — e é assim que esse tipo de site fracassa.

O que acontece dentro de cada andar

A emenda é o acontecimento grande, mas o andar inteiro é coreografado:

Três camadas de parallax, sempre: o vídeo no fundo; o anel verde e as formas pop-art numa camada intermediária, a ~60% da velocidade da rolagem; a tipografia e os cartões na frente, a 100%. É a diferença entre as velocidades que dá profundidade — não a sombra.

O momento vazado, uma vez por andar

Em cada andar, num ponto só, o título aparece vazado dentro de um bloco de cor chapada — as letras são recortes por onde se vê o vídeo passando. O bloco cobre a tela, o texto é o buraco.

É o gesto mais pop-art do site e o mais memorável. Por isso acontece uma vez por andar e nunca duas — repetido, cansa em trinta segundos.

A cor não fica parada

O acento de cada andar não é um valor fixo: ele deriva de temperatura ao longo do andar, do mais frio na entrada ao mais quente no platô, e volta a esfriar na saída. Quem rola não percebe conscientemente, mas sente que a tela está viva.

A passagem de andar — o efeito é a engenharia

Sem evento de tela na emenda, o vôo vira papel de parede animado: o vídeo roda ao fundo e a página não acontece. A passagem precisa ser um acontecimento.

E ela resolve, de quebra, o problema que o teste do trecho 3 revelou: o modelo não obedece trajetória de câmera com precisão suficiente para costurar frame a frame. Se a página cobre a emenda, o vídeo não precisa mais de continuidade pixel-perfeita — o corte acontece atrás do efeito.

Isso muda o custo de risco do projeto inteiro. A emenda deixa de ser uma exigência de produção e vira uma decisão de interface.

Três batidas, ao longo de ~0.6 altura de viewport:

1 · Aproximação (últimos 15% do trecho). A cor de acento do andar começa a sangrar pelas bordas. A copy sai por cima. O scrub acelera de leve — o vídeo corre mais que a rolagem, e isso já sinaliza que algo vai virar.

2 · A batida (a emenda). Um bloco chapado toma a tela e o número do andar entra gigante, em caixa alta pop-art: 101, 202, 303. Segura por cerca de 0.2 de viewport. É aqui, escondido atrás do bloco, que o vídeo troca de arquivo.

3 · Entrada (primeiros 15% do próximo). O bloco varre e revela o andar novo já em movimento — nunca parado, senão parece carregamento. O eyebrow desce, o trilho do elevador dá o estalo para o andar novo.

A batida varia para não virar tique. A varredura alterna de direção a cada andar; duas das emendas usam persianas horizontais em vez de bloco; e a saída da cobertura para o túnel não tem bloco nenhum — ali a tela escurece e o vídeo toma tudo, porque é o único momento em que a interface deve sumir.

O vídeo não é sempre tela cheia

Outro jeito de a tela mudar de estado sem depender do vídeo: a moldura muda entre capítulos.

• Térreo, 202, 406 — tela cheia, sangrando.
• 101, 303 — o vídeo recolhe para um painel grande de cantos arredondados, com o acento do andar em volta e a copy no espaço que sobra. São os dois andares mais importantes, e a moldura os destaca.
• Cobertura, túnel, foguete, Terra — tela cheia de novo, e o header some no túnel.

Com isso a página respira em três formatos diferentes ao longo do vôo, em vez de ser um retângulo de vídeo do começo ao fim.

O elevador — o header e o trilho

O header é o mesmo elemento em três estados:

1. Antes do vôo — transparente, só o wordmark e um convite discreto a rolar.
2. Durante o vôo — barra fina, e do lado direito um trilho vertical de andares: TÉRREO · 101 · 202 · 303 · 406 · COBERTURA, com o atual aceso e um fio de #16A34A que preenche conforme se sobe. É o painel de elevador do prédio, e serve de navegação: tocar um andar salta para ele.
3. Depois do pouso — sólido, com a navegação das seções sóbrias e o CTA.

O trilho é o que amarra a metáfora: a interface não fala que é um prédio, ela se comporta como um.

Onde o pop-art entra

• A primeira dobra, antes do vôo: tipografia branca gigantesca em caixa alta, bloco chapado, o Romeo em pé. É o único momento de puro impacto.
• Os cartões: contorno grosso, sombra chapada, o acento do andar.
• As emendas de capítulo no DOM, depois do pouso.
• Nunca dentro do vídeo. As cenas são casa confortável e macia; o contraste entre elas e a interface por cima é o efeito. Pop-art na cena mataria os dois.

Cada andar tem seu accent dentro da família do verde, e o cartão, o eyebrow e o fio do trilho mudam junto — a página inteira muda de temperatura ao trocar de andar, sem trocar de marca.

O pouso

Quando o trecho 8 termina, a Terra fica. Ela não some: vira fundo fixo e escurecido, e as seções sóbrias — modelo, mercado, estágio do projeto, CTA — rolam por cima dela como página normal. O planeta atrás do texto é o que impede que o site pareça dois sites colados.

O logo em DOM vetorial entra no momento exato em que a subida para.

No telefone

Mesma coreografia, três ajustes: os cartões viram folha que sobe de baixo em vez de expandir no lugar; o trilho de andares encolhe para pontos na lateral; e o scroll de cada trecho cai ~20%, porque o polegar percorre mais rápido que a roda do mouse.

O endurecimento do motor já cobre o resto — seeks coalescidos, priming no primeiro toque, poster até o primeiro frame pintar, e prefers-reduced-motion caindo para os stills.

O que precisa dar certo para isso ser incrível

Três coisas, e nenhuma é o vídeo:

1. A emenda invisível. Se o olho pegar o corte entre andares, a ilusão do prédio único morre e viram seis vídeos empilhados.
2. O texto chegar no momento em que a câmera para. Se o linger estiver fora de fase com a copy, a pessoa lê correndo ou espera parada. É o ajuste mais fino do projeto e só se acerta olhando.
3. A rolagem presa no cartão aberto. Sem isso, o aprofundamento briga com o vôo, e é o tipo de defeito que ninguém sabe nomear — só sente que o site é confuso.

A conta

Saldo em 31/07/2026: 880. Sobra ~600 para regerar, e vai precisar.

A ordem de produção

Sequencial e inegociável: cada trecho depende do último frame do anterior. Não dá para paralelizar.

1. Gerar o trecho, conferir contra as quatro âncoras e contra o estilo.
2. Se reprovar, regerar antes de seguir — um trecho ruim contamina todos os seguintes, porque o frame final dele vira a entrada do próximo.
3. Aprovado, extrair o último frame: ffmpeg -sseof -0.15 -frames:v 1.
4. Esse frame é a start_image do trecho seguinte.

O teste que vem antes de tudo

Antes de produzir a cadeia, gerar só o trecho 3 e responder:

• O Seedance preserva o Romeo do Element em movimento?
• O wordmark do peito sobrevive a 720p em movimento?
• O estilo bate com os stills, ou o vídeo tem outra cara?
• O gato e o cachorro funcionam ou viram distração?
• Como o scrub se comporta de verdade no navegador?

Se o wordmark não sobreviver, o plano muda: ou sobe para 1080p, dobrando o custo, ou a marca passa a ser carregada só pelo DOM e o Romeo vira presença, não outdoor.