portfolio-reel

Portfolio reel (modelo: "skill 2")

Esta skill gera um vídeo de introdução de ~30 segundos a partir de um único arquivo de configuração, promo.json. Uma cena de canvas desenha cada quadro em um Chrome headless e reproduz os clipes do usuário dentro dos cartões. Não há filmagens de estoque, vídeo gerado por IA nem serviço de template. A estrutura copia o ritmo do vídeo de referência skill2.MP4 (um vídeo de introdução de criador do TikTok). Apenas as técnicas são copiadas, nunca suas filmagens, palavras, nomes, handles ou marcas d'água.

Tempo (3 seções)	Cena
0-2.3 s	Gradiente mostarda, dois grandes círculos suaves deslizam; a hook[0] digita palavra por palavra, então a hook[1] aparece grande e em negrito
2.3-2.9 s	Um círculo branco varre de baixo para cima; o avatar aparece como um pequeno disco amarelo
2.9-6.4 s	Herói do perfil em branco: o avatar cresce em um círculo grande (com um anel amarelo ou um duotono amarelo), então a pílula badge com uma estrela, hello palavra por palavra, roles separadas por barras finas e uma pílula button preta com ↑ em um círculo branco. A seta dispara para cima e a página rola
6.4-20.5 s	Uma página por seção (4.6 s cada) em cinza claro com sombras suaves de luz de janela: um título gradiente, então 1-3 cartões arredondados seguindo a rolagem e flutuando. Os vídeos são reproduzidos, as imagens ampliam lentamente. Cartões de retrato ficam altos, cartões de paisagem ficam largos, linhas mistas se alternam
20.5-24.4 s	Uma luz amarela brota do canto inferior esquerdo de volta ao gradiente; cta[0], depois cta[1], palavra por palavra
24.4-30.3 s	Um cartão de perfil preto aparece a partir de um ponto (avatar ou logo, handle, name, até 3 stats de contagem, dois botões). Um cursor clica no primeiro botão, que fica cinza e mostra clicked, então o cartão gira em 3D para o seu back

A duração é de aproximadamente 30 s com 3 seções, mais ou menos 4.6 s por seção, e um pouco mais longo com textos longos.

Duas interfaces: "ui": "classic" (padrão) ou "app"

app mantém a mesma linha do tempo e textos, mas cada cena é uma tela de aplicativo moderna em um gradiente de malha em movimento:

Tempo	Cena app
hook	Uma barra de pesquisa de vidro digita hook[0] hook[1]; um menu suspenso de resultados lista a pessoa (avatar, nome, funções) e as duas primeiras seções; o cursor clica na pessoa
hero	O resultado clicado cresce em um dashboard bento de blocos de vidro: um bloco de foto alto (nome e handle), o bloco de saudação (badge, hello com o marcador, chips de função), um bloco de estatísticas contando profile.stats, um bloco button que o cursor clica e um bloco listando as seções
sections	Um carrossel horizontal, um slide por seção: um grande número, o título, "n trabalhos", uma barra de progresso no topo. Os trabalhos são exibidos em mockups de dispositivos: clipes de paisagem em uma janela do navegador (luzes de tráfego, barra de endereço site/titulo-da-secao), clipes de retrato em um telefone, em cascata no lado direito
cta	Uma tela de bate-papo: pontos de digitação, então cta[0] e cta[1] chegam como balões de mensagem da pessoa (o último na cor de destaque)
card	Um cartão de perfil com um banner de capa gradiente, avatar sobreposto, handle, nome, estatísticas de contagem e dois botões em pílula; o cursor clica em Seguir (confete), então ele vira para um QR code de profile.qr / profile.back (feito com qrencode quando instalado), com o endereço abaixo

site (opcional) define o endereço mostrado nos mockups do navegador, por padrão profile.back. Todos os estilos e efeitos funcionam em ambas as interfaces (no app, orbit e ticker não são usados).

Estilos e efeitos

"style" escolhe um tema de cores. Estilos escuros obtêm páginas escuras com uma grade sutil e cartões brilhantes em vez de sombras de janela.

Estilo	Aparência
mustard (padrão)	O modelo: gradiente amarelo-mostarda, herói branco, páginas cinza claro, pílula preta, botões azuis
midnight	Índigo a preto, ciano e violeta neon, páginas escuras, cartões brilhantes
sunset	Pêssego a rosa, páginas branco quente, títulos e botões coral
amber	Dourado em quase preto (um visual de desenvolvedor ou portfólio), páginas escuras, pílula e botões âmbar
mint	Menta a verde-azulado, páginas brancas, títulos verdes

"colors" substitui qualquer cor única do estilo.

Todos os efeitos estão ativados por padrão. Desligue um com "effects": {"ticker": false}, ou todos com "effects": false para o visual de modelo simples:

Efeito	O que faz
bokeh	Partículas de luz suaves flutuam nas cenas de gradiente
shine	Um varredura de luz sobre a pergunta grande, o botão e o cartão de perfil, além de anéis de eco na varredura circular e um anel de pulso no botão
marker	Um marcador desliza sob o nome (text.highlight escolhe as palavras, ou tudo após a segunda palavra)
orbit	Um anel tracejado com três pontos gira ao redor do avatar
blur	Desfoque de movimento vertical enquanto a página rola
labels	"01 / 03" acima de cada título de seção e um sublinhado que é desenhado
glare	Um brilho diagonal cruza cada cartão de trabalho após ele pousar
ticker	Grandes tags contornadas rolam atrás das linhas de encerramento (text.tags, ou senão as funções e títulos das seções)
confetti	Uma explosão de confete nas cores do estilo quando o botão é clicado
grain	Grão de filme e uma vinheta suave sobre tudo

Para permitir que o usuário escolha, renderize os mesmos 4 momentos em cada estilo (um "painel de estilos") antes da renderização completa. Use render.mjs --times em cópias de promo.json que diferem apenas em style.

Requisitos: ffmpeg, Node 22+, Google Chrome ou Chromium (CHROME_PATH), e um Python com numpy e scipy (PROMO_PY; promo.sh encontra um automaticamente).

Fluxo de trabalho

1. Reunir o que o vídeo precisa

• Avatar: uma foto de retrato, rosto e ombros. Dê crop: [x, y, size] (pixels) para que o rosto fique no círculo e verifique a pré-visualização. Com um fundo movimentado ou claro, "avatarStyle": "duotone" cria uma figura escura sobre amarelo, como no modelo.
• Seções (1-4): um título curto cada (2-4 palavras) e 1-3 clipes: vídeos ({"file", "at"}, 5.5 s de at são reproduzidos no cartão) ou imagens. Use o melhor trabalho do usuário e misture retrato e paisagem para variedade.
• Textos: mantenha-os curtos.
  • hook: uma linha pequena e uma pergunta grande de 1-2 palavras.
  • badge: um slogan de até cerca de 50 caracteres.
  • hello: "Olá, eu sou …".
  • roles: 2-4 funções curtas.
  • button: o rótulo do botão.
  • cta: duas linhas de encerramento.
• Cartão de perfil: handle, name, até 3 stats, buttons, clicked e back. Use apenas números reais (do usuário, do site ou perfil dele). Um valor string (como "2023") é exibido como está, sem contagem.
• Idioma: para khmer, defina "lang": "km" e escreva em khmer natural. Kantumruy Pro está incluído.
• Opcional: style, effects, logo (dentro do círculo do cartão), colors, text.highlight, text.tags, music (+ musicStart), sfxDir.

2. Escrever o projeto

Crie uma pasta de projeto e copie examples/creator-reel.json para dentro dela como promo.json, então edite-o. Cada chave está descrita em references/config.md. Os caminhos são relativos à pasta do projeto.

3. Pré-visualização (cerca de 10 s)

<skill>/scripts/promo.sh <project>/promo.json --preview

Isso corta os clipes e renderiza cerca de 13 imagens estáticas em out/<name>-preview.png. Leia-o e verifique:

• o corte do avatar;
• se nenhuma linha está comprimida (textos longos encolhem);
• se os cartões de cada seção mostram bons quadros: altere at;
• os números do cartão de perfil.

4. Renderizar (cerca de 2 minutos; execute em segundo plano)

<skill>/scripts/promo.sh <project>/promo.json --jobs 4

As etapas são executadas nesta ordem: assets, plan, render, mix, encode. --from mix remixa o som sem renderizar os quadros novamente.

Saída: out/<name>-1080p60.mp4 e out/<name>-contact.png.

5. Verificar antes de entregar

• Leia a folha de contato.
• ffprobe deve mostrar a duração que build/cues.json fornece. A mixagem é normalizada para -14 LUFS / -1 dBTP.
• Você não pode ouvir o resultado, então informe ao usuário o que você verificou e peça para ele ouvir.

Ajuste

• Tempo: plan() em scripts/scene.mjs. SEC é a duração de uma seção e SCROLL a duração de uma rolagem de página. As cues em buildCues() seguem automaticamente.
• Aparência:
  • Os temas são STYLES e os efeitos são EFFECTS em scene.mjs; as cores também podem vir de colors.
  • O layout do cartão é layout().
  • As sombras da janela são buildShade().
  • O giro é drawFlip(), tiras com perspectiva.
• Som: SFX em scripts/audio.py lista os nomes de arquivos tentados em sfxDir. make_bed() é a batida lo-fi.