broomva/skills

Vitrine de Skills

Renderize um vídeo animado de vitrine de skills, organizado por categoria (1080x1080, 30fps, ~48s) e produza um tópico de 7 posts no X que mapeia clusters de skills para valor concreto.

Início Rápido

cd skills-showcase
npm install
npx remotion studio          # Visualizar no navegador
npx remotion render SkillsShowcase out/skills-showcase.mp4
npx remotion render SkillsShowcase out/skills-showcase.gif --every-nth-frame=3

Artefatos de Saída

• out/skills-showcase.mp4 — Upload principal para o X (H.264, ~4,7 MB)
• out/skills-showcase.gif — Alternativa/pré-visualização (~7 MB)
• thread.md — Texto do tópico de 7 posts

Arquitetura

src/
├── index.ts                  # Ponto de entrada registerRoot
├── Root.tsx                  # Registro de composição (1080x1080, 30fps, 1440 quadros)
├── SkillsShowcase.tsx        # Linha do tempo mestre usando <Series>
├── data/skills.ts            # Conjunto de dados tipado: categorias, skills, agregações derivadas
├── scenes/
│   ├── Intro.tsx             # Título + subtítulo + pílulas de estatísticas (4s)
│   ├── CategorySection.tsx   # Rótulo da categoria + chips de skills escalonados (2,67s cada)
│   └── Outro.tsx             # Métrica de resumo + slogan + CTA (4s)
└── components/
    └── SkillChip.tsx         # Emblema animado reutilizável com entrada tipo spring

Modelo de Dados

Edite src/data/skills.ts para adicionar ou remover skills. O vídeo é renderizado deterministicamente a partir deste conjunto de dados.

• Categoria: { id, label, color, order }
• Skill: { slug, categoryId, shortDescription }
• Derivado: totalSkills, totalCategories, skillsByCategory

Convenções de Animação

Todas as animações usam apenas padrões baseados em quadro do Remotion:

• useCurrentFrame() + useVideoConfig() para quadro/fps
• spring() para entradas (damping: 200 para suave, damping: 20 + stiffness: 200 para rápido)
• interpolate() com clamp para opacidade e translação
• Zero transições CSS ou utilitários de animação Tailwind

Ritmo da Linha do Tempo

Cena	Quadros	Duração
Introdução	120	4,0s
15 categorias × 80	1200	40,0s
Encerramento	120	4,0s
Total	1440	48,0s

Personalização

• Adicionar uma categoria: Adicione ao array categories em src/data/skills.ts, atualize a duração em Root.tsx
• Alterar cores: Cada categoria tem um color hex no conjunto de dados
• Ajustar ritmo: Modifique CATEGORY_DURATION em SkillsShowcase.tsx
• Texto do tópico: Edite thread.md diretamente

Estratégia do Tópico

Consulte thread.md para o tópico completo de 7 posts. Estrutura:

1. Gancho + anexo do vídeo
2. Por que skills superam prompts únicos
3. Cluster de consciência e memória
4. Cluster de pesquisa e análise
5. Cobertura de implementação full-stack
6. Skills especializados de alto sinal
7. CTA e chamada para discussão