Instalação de plugins: Antes dos comandos de configuração ou atualização, siga as regras de execução de plugins quando este skill estiver dentro de um plugin HyperFrames. Instalações independentes mantêm as instruções de atualização abaixo.
Convenções do HyperFrames Studio
O Studio desenha uma linha da timeline por elemento de nível superior. Um projeto que segue as
regras abaixo abre como uma timeline curta e legível; um que não as segue abre como uma parede
de linhas não rotuladas que o usuário não pode editar. Estas são convenções sobre o que construir.
Para saber como alterar um clipe, siga /hyperframes-core references/creator-editing-recipes.md
e nunca invente uma forma diferente da mesma edição.
0. Converse antes de construir
Leia a mensagem antes de abrir um arquivo. Decida o que ela pede:
| A pessoa | Você |
|---|---|
| nomeia uma mudança, por mais educada que seja ("aumente o título", "pode cortar a terceira cena?") | Faça-a. |
| dá uma impressão sobre o filme construído ("a introdução parece abrupta", "não é longo o suficiente") | Encontre a causa, mude a coisa mensurável, diga o que a observação significava e o que mudou, e registre-a conforme /hyperframes-creative references/storyboard-recipe.md § 4. |
| faz uma pergunta e não nomeia nenhuma mudança ("por que o título pula?") | Responda-a. Não mude nada. |
| diz para não mudar nada, esperar, "só pensando", "vamos conversar" | Não mude nenhum arquivo, nem mesmo uma correção que você notou. Ofereça-a em palavras. |
| traz uma ideia para este filme sem uma mudança concreta ("quero que o final pareça maior") | Proponha a mudança e adicione-a ao plano (abaixo). Não mude nenhum arquivo de composição. |
| pede um novo filme | Planeje-o (§ 5). |
| aprova um plano ("construa", "vai") | Construa o que foi aprovado. |
Uma mensagem que faz uma pergunta e nomeia uma mudança recebe a resposta e a mudança. Somente quando você não consegue discernir se ela pede algo, é uma conversa: uma resposta errada custa uma mensagem; uma construção errada custa uma execução longa e uma rodada de observações.
Uma resposta de conversa:
- Responda primeiro, em palavras simples, em algumas frases.
- Faça apenas perguntas cuja resposta mude o filme, cada uma com uma resposta recomendada e seu trade-off ("30 segundos cabem em um feed; 60 deixam espaço para a demonstração").
- Quando houver uma ideia a ser moldada: para um novo filme, direções conforme
/hyperframesreferences/pitch-round.md; para uma ideia sobre este filme, duas ou três opções para a parte nomeada. Recomende uma. - Termine com o próximo passo e a palavra que o inicia ("Diga construir e eu começarei").
Mantenha o plano no projeto, não apenas no chat: a próxima mensagem pode iniciar uma nova sessão que
não pode ver esta. Adicione-o ao STORYBOARD.md da forma como /hyperframes-creative
references/storyboard-recipe.md § 4 registra uma rodada; nunca substitua quadros bloqueados. Se a pessoa
pediu para você não mudar nada, não escreva nada: coloque o plano na resposta e ofereça-se para salvá-lo.
1. Toda cena é uma subcomposição
A composição raiz contém apenas hosts, mídia e áudio com tempo definido. Qualquer cena com estrutura
aninhada (uma div contendo filhos, um título com um subtítulo, um gráfico) é seu próprio
arquivo carregado com data-composition-src, conectando-se conforme
references/sub-compositions.md.
Marcação aninhada deixada dentro da raiz não se torna uma linha própria. Ela se esconde dentro de uma linha opaca que não pode ser aparada ou movida parte por parte.
Crie como se um linter de estrutura rejeitasse qualquer violação.
2. Uma única faixa de legendas
- Todas as legendas vivem em uma faixa: um único host de subcomposição (um
data-track-index) marcado comdata-track-kind="captions"que carrega cada grupo de legendas em ordem. - Nunca uma linha por grupo de legendas, e nunca legendas misturadas em uma faixa com outro tipo.
- As regras de temporização de palavras não mudam: consulte
/embedded-captionse as regras de lintcaption_*.
3. Um tipo de elemento por faixa
Agrupe por tipo para que cada linha seja uma coisa que o usuário possa selecionar, silenciar ou arrastar como um conjunto.
| Tipo | data-track-kind |
|---|---|
| Vídeo base / A-roll | video (da tag) |
| Cenas, sobreposições, gráficos | graphics |
| Legendas | captions |
| Áudio (narração, música, efeitos sonoros) | audio (da tag) |
Coloque data-track-kind nos hosts de subcomposição. Os tipos de vídeo e áudio vêm da tag, então
<video> e <audio> não precisam de atributo. Dê a cada tipo seu próprio data-track-index; o número
é apenas para exibição; ele nunca muda o que é renderizado sobre os outros. Use CSS para
camadas.
4. Zonas seguras
Qualquer régua ou sobreposição de caixa segura fica no painel de pré-visualização, nunca dentro da composição, portanto
não adicione elementos de guia ao HTML.
Ambos os enquadramentos (panorâmico e vertical) usam as mesmas duas caixas seguras, os padrões do Premiere. A alternância
de pré-visualização as desenha com uma marca no ponto médio de cada borda. Fonte:
ACTION_SAFE_PERCENT e TITLE_SAFE_PERCENT em packages/studio/src/utils/previewSafeMargins.ts.
| Caixa | Proporção do quadro | Recuo em cada borda |
|---|---|---|
| Ação segura | 90% | 5% |
| Título seguro | 80% | 10% |
- Margens seguras: tudo que é visível fica dentro da caixa de ação segura (90%), e legendas e conteúdo chave ficam dentro da caixa de título seguro (80%).
- Layouts lado a lado e 50/50 mantêm o conteúdo de cada metade dentro da caixa de título seguro.
5. Um novo filme: planeje, storyboard, construa
Os filmes hyperframes-launches foram feitos nesta ordem. Cada passo tem um dono; siga-o e não o repita aqui.
| Passo | Dono |
|---|---|
| 1. Briefing | /hyperframes references/intent-interview.md. Dentro de um projeto existente, apenas um desdobramento do mesmo filme permanece: uma nova versão ou uma versão reduzida, mesmo fluxo de trabalho e proporção. Faça suas perguntas obrigatórias, pule hyperframes init, nunca substitua BRIEF.md ou STORYBOARD.md, adicione uma nova seção datada a cada um e diga isso na resposta. Um filme com fluxo de trabalho ou proporção diferente inicia um novo projeto, e a resposta diz isso. |
| 2. Direções | /hyperframes references/pitch-round.md |
| 3. Storyboard | /hyperframes-creative references/storyboard-recipe.md |
| 4. Construção | O fluxo de trabalho para o qual o briefing direciona (/hyperframes § 2) e suas próprias referências |
| 5. Revisões | /hyperframes references/review-loop.md |
O que os filmes de lançamento adicionam, para um lançamento de produto. Onde o arco escolhido do fluxo de trabalho disser o contrário, o arco vence.
- Imagens reais para o produto lançado. Peça uma gravação de tela no briefing, a menos que o fluxo de trabalho a capture por si só (um site a partir de sua URL), e segure seu espaço com um placeholder rotulado até que ela chegue. Nunca aproxime a interface do usuário do produto lançado. Uma ferramenta de terceiros mostrada como contexto (um app de chat, um editor) é reconstruída fielmente a partir de uma captura.
- Um mundo. A mesma janela ou tela continua entre as batidas. Verifique cada corte: o que persistir não deve pular.
- Cursores e conteúdo rolado. Um cursor, ou conteúdo que a própria janela rola para fora, sai
pela borda da janela ou do quadro, não desaparecendo no meio do quadro. Trocas de elemento e texto seguem o
cut-catalog.mddo fluxo de trabalho quando ele tiver um. - Feche no comando ou no endereço, com o logotipo pousando em imagens que ainda estão se movendo.
- Informe o tempo de execução em cada versão. Exceder o alvo é uma decisão da pessoa, não sua.
Verificando seu trabalho
Execute hyperframes lint e corrija cada achado. Em seguida, abra o projeto no Studio e
verifique se a timeline mostra uma linha base, uma linha por host de cena, uma linha de legendas e as linhas de áudio.