longtake

O que longtake faz?

Baseado em onetake por Patrick, modificado para plataformas de vídeo curto verticais (9:16). O que mudou e por quê: CHANGES.md. Método vertical: references/vertical.md.

Filmes curtos de movimento sobre um produto, construídos a partir do produto. Não é um editor de vídeo, nem um gerador de slideshow: é uma composição (um arquivo HTML, window.__seek(t)), uma biblioteca de movimentos (lib/motion.js), gravações do produto real, uma paleta sonora que compartilha o mesmo espaço, e um oráculo que diz se o corte tem ritmo e se ele se sustenta, antes de um humano precisar assistir.

Seis filmes o ensinaram. motion-web teve três cortes: o primeiro e o segundo foram rejeitados como 「PPT 式一个一个展示」 por uma cadência uniforme — a metade do ritmo. Pocket Weather Club tinha o ritmo e ainda era PPT: sua v1 passou em todas as verificações de ritmo e foi rejeitada, porque cada batida substituía a anterior. A v3 foi aceita quando cada batida crescia a partir da última — o personagem pousa no título, a página cresce a partir do seu cartão, um palco se abre a partir do personagem. Essa é a metade da continuidade. One dot adicionou o operador: com uma câmera parada era 「就缺灵动的跟踪运镜」; com uma câmera que persegue o que cada batida enquadra — atrasando, inclinando, estabilizando — foi 「运镜、镜头和物理都没问题」. knockon se sustentou por causa: uma máquina de mesa leve onde cada batida é a colisão que inicia a próxima. clearing se sustentou por escala: uma única tomada de um ano para meia hora livre e de volta, uma câmera que persegue a âncora na tela para que ela pouse no mesmo lugar em 1× e 300×. overlap foi a lição de significado: seu primeiro corte foi 「美术挺棒但没看出来啥意思」, e adicionar cursores rotulados piorou; só foi lido quando a ideia foi incorporada à arte — um & escondido em duas placas de ruído que aparece no instante em que os passes entram em registro. Tudo aqui existe para que o próximo filme comece onde esses filmes terminaram.

O que o protocolo não pode lhe dar (leia primeiro)

As regras abaixo são principalmente rejeições escritas: elas impedem que um filme seja um slideshow. Elas são um piso. Um filme pode passar em todas as regras e em todas as pernas do oráculo e ainda assim estar morto — W1 (um promo vertical, 2026-11) fez: carry 1.00, VERDICT PASS, e o veredito foi 「很死板，没到参考片的 70%」. O que faltava é o que os filmes aceitos tinham:

• Material digno de ser visto em cada batida. O filme de lançamento do onetake (a referência usual) é v8: três prompts, cada um se tornando um mini-filme completo e projetado em sua própria paleta e linguagem de movimento. O espectador vê trabalho, não rótulos sobre trabalho. Pergunte primeiro: qual é a coisa mais bonita que possuímos (gravações, filmes finalizados, UI real)? Construa o filme a partir disso, em tela cheia. Um conceito que explica um processo com cartões e chips é um diagrama, e um diagrama bem movimentado ainda é um diagrama.
• Um relógio. Todo caso forte corta para uma grade musical — envia em downbeats, o trecho mais rápido no drop, uma parada em uma batida silenciosa. Sem narração, a música é a linha do tempo, não decoração. Temporizar batidas por "tempo suficiente para ler" dá um ritmo uniforme que parece rígido. Se o projeto do usuário proíbe música, diga o que isso custa e pergunte.
• Um arco. Densidade e velocidade constroem em direção a um pico, depois liberam. Cinco estações iguais é uma lista.
• Mudança como conteúdo. Na referência, a própria coisa se transforma (uma janela se reformata em um telefone, uma barra se abre em um filme). Movimento que apenas viaja entre batidas estáticas são transições em torno de slides.
• Rodadas de revisão. A referência levou oito cortes revisados. Mostre stills do gancho e do pico antes do primeiro render e um rascunho antes do polimento; nunca apresente uma passagem não revisada como final.

Quando usar esta skill, e quando não usar

• Um clipe de lançamento / teaser / introdução para um app, uma página, uma skill, um recurso — sim.
• Uma demonstração de recurso narrada (30–60 s) que mostra o produto sendo usado, possivelmente em vários idiomas — sim: reconstrua a UI em vez de gravá-la (§4, references/product-demo.md).
• O usuário tem um clipe de referência do qual deseja a sensação — sim, comece em §1.
• Formato longo, cabeças falantes, edição de filmagens existentes com transições — não.
• O usuário menciona HyperFrames ou Remotion explicitamente — use o que eles mencionarem. Caso contrário, este pipeline.

O protocolo — nesta ordem, sem pular

1 · Desconstruir a referência antes de tocar em qualquer coisa (硬规则)

python3 scripts/analyze_ref.py ref.mp4 --out ana/     # mapa de energia, cortes, imobilidade, folhas de contato, linha de movimento

Leia o mapa de energia e as folhas e anote os números que o filme precisa igualar. O mapa de energia diz quando o filme se move; a linha motion: diz como — mediana t80 (snaps ou curvas S) e smear (renderizado com motion blur ou não). O que decidiu o filme motion-web: a referência era 34 % completamente parada, tinha 7 cortes abruptos em duas rajadas, e mantinha cada elemento pequeno com muito espaço em branco. Nada disso é óbvio ao assistir uma vez, e um filme construído sem medi-lo saiu em uma cadência uniforme — duas vezes. references/reference-deconstruction.md.

Os números da referência superam as regras de gênero abaixo. "Elementos pequenos, fundo grande" e "parado um terço do tempo" foram medidos a partir do motion-web. O filme de lançamento do onetake é ~10 % parado e principalmente em tela cheia; W1 seguiu as regras de gênero contra ele (still 0.50, fundo vazio) e saiu vazio e lento. Anote a % de parado, quanto do quadro é preenchido, a contagem de cortes e onde está o trecho mais denso, e iguale esses. Observe também do que as batidas da referência são feitas (peças finalizadas e projetadas? UI real? tipo?) e se corta para música — isso é entrada para §2.

2 · Conceito — três ideias centrais antes de qualquer folha de batidas (硬规则)

Um conceito é uma frase sobre a imagem, não sobre o produto: a ideia única da qual o filme é feito. Escreva três que diferem nessa ideia — não três histórias contadas com os mesmos cartões:

• um elemento se transforma através de tudo — um ponto é o cursor, se divide na lista de skills, se oco em um anel de carregamento, se desenrola em uma curva de mola, pousa como o ponto no i da marca;
• um movimento de câmera através da escala — comece dentro do cursor, puxe para o campo de entrada, mergulhe pelo botão de envio para o trabalho, saia através do filme finalizado (cases/clearing-15s: um ano → um dia → meia hora → de volta);
• uma divisão antes/depois — as mesmas batidas como um slideshow à esquerda e contínuo à direita, até que o lado direito invade o esquerdo;
• uma reação em cadeia — cada batida é a colisão que inicia a próxima (cases/knockon-15s);
• ou uma metáfora física, uma superfície contínua, um sistema tipográfico…

Para cada: o quadro do gancho, o que carrega cada limite, o que ele descarta (sem cartões? sem cortes?), e sua aparência — um preset de looks/ (python3 scripts/look.py sheet → gallery/sheets/looks.png: papel, crepúsculo, mesa, ultramarino, riso, brasa, cada um medido a partir de um filme aceito), as próprias cores do produto (look.py from-shot shots/*.png --out look.json), ou uma feita para este filme. Mostre os três e deixe o usuário escolher. A história do modelo — palavras cinéticas → prompt digitado → checklist com tique → resultado → batidas staccato → marca preta — é um conceito, nunca o padrão: uma demonstração de operação construída sobre ele passou em todas as pernas do oráculo (carry 1.00) e foi devolvida como 「和 motion web 很像…没有创造力」. O mesmo vale para os exemplos na lista acima e para cada caso: escolher "um ponto" porque é o primeiro exemplo é copiar, não um conceito (W1 fez, e leu como um diagrama). Teste cada conceito com duas perguntas: o que o espectador está vendo no segundo mais movimentado? (deve ser algo bonito, não um rótulo) e no que a própria coisa se transforma?

Filmes verticais (9:16) não são filmes paisagem rotacionados: o quadro é uma coluna alta, então preencha-o de cima a baixo, deixe o material correr para fora das bordas e mantenha as zonas seguras da plataforma (legendas e botões cobrem os ~20 % inferiores e a borda direita). stills.py --width 1080 --height 1920 mantém a proporção em sua folha. O método, com o mergulho de portal aninhado e seus números: references/vertical.md, caso cases/huazhong-dongtian-22s/.

3 · Storyboard como ritmo e continuidade

Escreva o conceito escolhido como uma folha de batidas: t · batida · o que se move · o que está parado · o que carrega para a próxima batida.

Ritmo. Varie a duração do plano em ≥ 4× (palavras de 0,25 s próximas a pausas de 2,5 s). Pelo menos um trecho de quase-silêncio na imagem e no som. Uma história — a do conceito —, não um catálogo. O tamanho do elemento e o fundo seguem a referência (§1).

Arco e relógio. Escolha a música antes da folha de batidas, encontre seus downbeats, seus intervalos silenciosos e seu drop (scripts/beat_grid.py), e escreva cada t na folha como uma batida dessa faixa. O pico da imagem fica no drop.

Continuidade. Em cada limite de seção, nomeie a coisa que sobrevive e se move: a mão, o assunto, um contêiner que se torna a próxima cena (morphRect), um palco que se abre a partir do assunto (iris), uma câmera que empurra para dentro de um cartão até que ele seja a cena (zoomThrough), um elenco que se dobra no lockup (gather → seal). Se nada sobrevive, é uma mudança de slide, seja qual for o ritmo. Cortes nus pertencem a rajadas de hits e ao cartão final, quando o conceito os tem. references/rhythm.md.

4 · Gravações da coisa real — ou a UI reconstruída a partir de screenshots

python3 scripts/record_footage.py footage.json --out footage/

Páginas reais, dirigidas em tempo real por Playwright (varreduras com ritmo de relógio de parede, passos de roda, cliques), gravadas no tamanho em que serão mostradas, com um marcador magenta injetado no instante em que a entrada começa para que o quadro da ação seja encontrável depois. Os quadros saem a 30 fps como JPEG; o caminho do ponteiro é salvo para que a composição possa desenhar a mão de volta — o espectador deve ver a causa, não apenas o efeito. Formato de configuração no docstring do script.

Ou reconstrua-a. Quando o filme percorre os recursos de um app (e acima de tudo quando tem uma voz ou outros idiomas), o usuário faz screenshot ou grava apenas tomadas de referência, e a UI é reconstruída em HTML no quadro de pixel da própria referência. Cada string vive em uma tabela, cada estado é escrito por um set(state) puro, e a réplica fica no plano onde a câmera pode se aproximar em qualquer zoom. Destaques são medidos a partir do seu DOM (lib/ui_kit.js). A narração vem de scripts/vo_tools.py: audição, falas, tempos de palavras, legendas. Um segundo idioma é ?lang= na mesma composição, seu VO mapeado na linha do tempo autoral por nós UIK.timeWarp em palavras que significam a mesma coisa, verificado pixel-idêntico para o idioma de origem com scripts/frame_diff.py. O conteúdo permanece a saída real do produto. Método, números e o quê: references/product-demo.md. É uma técnica, não uma aparência: paleta, palco, gramática de câmera e transições são escolhidos frescos em §2 todas as vezes.

5 · Compor — um arquivo, funções puras do tempo, movimentos da biblioteca

mkdir -p cases/my-film && cp templates/comp.html lib/motion.js cases/my-film/   # o modelo carrega motion.js → window.OM
python3 scripts/probe.py my-film/comp.html        # assim que tocar do início ao fim: o que carrega cada limite, a curva de cada movimento

Escolha movimentos olhando para gallery/sheets/<move>.png — seis quadros ao longo da curva de velocidade do que se move. A biblioteca tem 39: entradas, continuidades, simulações de contato e ao vivo, câmera e seus auxiliares de projeção, e um conjunto de fluidos (um campo de luz, ondulações, seda, uma correia, molas SwiftUI); cada um é uma função do tempo que retorna números para uma transformação DOM ou uma chamada de canvas. Nunca re-derive uma mola ou uma suavização com constantes fixas. O modelo é o filme motion-web (palavras cinéticas, prompt digitado, checklist com tique, voos, simulações ao vivo, uma pausa, batidas staccato, um caminho de mão contínuo que cada simulação lê) — copie suas batidas apenas quando esse for o conceito escolhido em §2; caso contrário, mantenha seu contrato e auxiliares e escreva as próprias batidas do conceito. Tudo é f(t); simulações são pré-simuladas uma vez a 240 Hz e amostradas. Pré-visualize com ?play, fixe com ?t=6.4&hud. references/motion-library.md, references/composition.md.

A aparência acompanha a composição. python3 scripts/look.py apply ember cases/my-film/comp.html (ou um look.json) escreve look.js ao lado: as oito cores como variáveis CSS e LOOK.color, três fontes OFL reduzidas aos glifos que a composição usa e incorporadas, para que o render file:// obtenha tipo real. Carregue-o antes do script da composição, escreva contra var(--ink) / var(--display) ou LOOK.font('display', 96), e encadeie window.__ready em LOOK.ready. Execute-o novamente após mudanças de cópia; ele nomeia qualquer caractere que uma fonte não tenha (--cjk <font> para Chinês / Japonês / Coreano).

Câmera: keyed, mas operada. OM.camera(t, keys) coloca a câmera onde cada batida precisa; a sensação de um operador vem de como os keys são colocados: key o assunto ~0.1 s à frente em sineInOut para segui-lo, key o ponto de pouso antes de um snap em expoInOut para chicoteá-lo, adicione uma mão (uma flutuação lenta de dois senos, zero nas pausas) e OM.shake em cada pouso. Desenhe um OM.lattice fraco mais atrás, ou em um fundo vazio o movimento não é lido. Com uma câmera, __track retorna caixas de tela (OM.projectBox), __motion entrega a viagem ao render.py, e __meta.inFrame nomeia o que nunca deve deixar o quadro. O método, com código: references/composition.md → Uma câmera.

6 · Renderizar — rascunhos 1080p30, 4K60 apenas após aceitação

python3 scripts/stills.py comp.html --times 0.7,2.4,3.8,6.2,9.9,12.7 --out stills.png   # veja antes de renderizar
python3 scripts/render.py comp.html --out draft.mp4 --sfx sfx.wav            # 1920×1080 · 30 fps · obturador 180°
python3 scripts/render.py comp.html --out film.mp4 --final --sfx sfx.wav     # 3840×2160 · 60 fps, assim que o corte for aceito

O obturador é motion blur real: cada quadro em movimento são várias buscas ao longo do obturador aberto, calculadas em média em luz linear; pausas são detectadas e o ignoram. Uma captura é um screenshot do Chrome (~150 ms; a página em si desenha em menos de 1 ms), então render.py executa --workers navegadores em processos paralelos (padrão núcleos − 2, máx 8).