Oito skills para agentes que ensinam agentes de programação a criar, animar e testar sites 3D e controlados por rolagem com three.js.
HaD0Yun/CozyClay
Estúdio de pré-visualização no navegador para bloquear cenas, posar personagens e montar movimentos de câmera, com envio dos planos a modelos de vídeo com IA.
- Estrelas
- 1,553
- Forks
- 180
- Issues abertas
- 13
- Último commit
- há 3 horas
O que é?
CozyClay é um estúdio de pré-visualização que roda no navegador, desenvolvido com Three.js e React Three Fiber. Você bloqueia uma cena com primitivas e elementos de cenário, escala personagens com ou sem rig, define suas poses e cria movimentos e cortes de câmera em uma timeline.
A principal saída é voltada à geração de vídeo com IA. Cada plano pode ser exportado como um pacote de keyframes com os quadros inicial e final, um clipe greybox, JSON de câmera e um prompt; ou como arquivo mp4, passes de profundidade e normais, uma folha de contato do storyboard ou uma lista de cortes OTIO. O projeto tem como modelos-alvo Seedance 2.5, Kling 2, Veo 3 e MiniMax-H3 auto-hospedado, e sinaliza planos que ultrapassam os limites de cada modelo.
O estúdio também inclui um modo Storyboard para painéis estáticos, uma tela Workflow para nós de imagem e vídeo (ComfyUI ou fal) e um agente que pode controlar a cena por um painel de chat, um servidor MCP ou a CLI `cclay`. Ele roda localmente com `npx cozyclay`.
Recursos principais
- 01Bloqueie cenas com primitivas e elementos de cenário e, depois, transforme-os com um gizmo.
- 02Defina poses de personagens com rig ou use figuras em cápsula sem rig para o blocking.
- 03Crie movimentos e cortes de câmera em uma timeline, incluindo trilhos de dolly desenhados em uma vista superior.
- 04Exporte pacotes de keyframes, planos em mp4, passes de profundidade e normais e listas de cortes OTIO para vídeos com IA.
- 05Desfaça qualquer alteração na cena usando um único histórico.
- 06Controle o estúdio com um agente de IA pelo chat, via MCP ou por uma CLI no terminal.
Casos de uso
- Pré-visualizar planos para um filme, comercial ou videoclipe antes das filmagens.
- Criar storyboards e transformá-los em planos em movimento.
- Gerar vídeos com IA com movimentos de câmera e blocking de personagens controlados.
- Fazer o blocking da encenação e dos trajetos dos personagens para produção virtual.
Início rápido
- 1
Execute o studio com npx
npx cozyclay - 2
Abra a cena inicial incluída em vez de uma sala vazia
npx cozyclay --scene city-block
Antes de usar
- É necessário ter Node.js 22.19 ou superior e um navegador baseado em Chromium.
- Alguns recursos exigem suas próprias chaves de API, como os provedores de agentes e o nó Video via fal ou ComfyUI.
Em coleções
Tópicos
Perguntas frequentes
- O que é CozyClay?
- Estúdio de pré-visualização no navegador para bloquear cenas, posar personagens e montar movimentos de câmera, com envio dos planos a modelos de vídeo com IA. CozyClay é um estúdio de pré-visualização que roda no navegador, desenvolvido com Three.js e React Three Fiber. Você bloqueia uma cena com primitivas e elementos de cenário, escala personagens com ou sem rig, define suas poses e cria movimentos e cortes de câmera em uma timeline.
- CozyClay é gratuito? Qual é a licença?
- CozyClay é open source sob a licença AGPL-3.0. Confira os termos da licença antes de usá-lo em produtos comerciais.
- CozyClay ainda é mantido?
- Manutenção ativa. O último commit de CozyClay foi em 6 de nov. de 2026.
- Para que posso usar CozyClay?
- Pré-visualizar planos para um filme, comercial ou videoclipe antes das filmagens. Criar storyboards e transformá-los em planos em movimento. Gerar vídeos com IA com movimentos de câmera e blocking de personagens controlados. Fazer o blocking da encenação e dos trajetos dos personagens para produção virtual.
- Como instalar CozyClay?
- Execute o studio com npx: npx cozyclay Abra a cena inicial incluída em vez de uma sala vazia: npx cozyclay --scene city-block
- Onde consigo CozyClay?
- O código-fonte e as instruções de instalação estão no GitHub: https://github.com/HaD0Yun/CozyClay
Resumo gerado por IA a partir do README do projeto. As estatísticas do GitHub são atualizadas diariamente.
Projetos relacionados
Um renderer React para Three.js que permite criar cenas 3D de forma declarativa com componentes JSX.
Biblioteca de controles de câmera para three.js que oferece transições suaves e mais recursos além da navegação orbital no estilo OrbitControls.
Guia de campo interativo em 3D com 63 espécies de insetos modeladas proceduralmente no navegador usando TypeScript e Three.js, sem arquivos de modelo.
Playbook e kit de código Three.js para criar pequenos dioramas em pixel art com câmera fixa, paleta reduzida, dithering e QA determinístico por frame.
Uma skill de IA que transforma um tema em um storyboard de animação com bonecos palito, narração, cenas cronometradas e prompts de vídeo para o Google Flow.