OpenDesign Motion: alternativa gratuita e de código aberto ao Claude Motion

OpenDesign Motion foi lançado em 15 de outubro de 2026 no OpenDesign v0.25.0. O codinome dessa versão é OpenDesign Motion. A manchete o chama de a alternativa de código aberto ao Claude Motion.

Este é um site independente. Não somos afiliados à OpenDesign, à Anthropic nem ao Google.

O código está no repositório open-design. A versão contabiliza 53 PRs, 16 colaboradores e 21 dias. A linha sob essa contagem é transforme ideias em vídeos com código.

O que é o OpenDesign Motion

OpenDesign Motion é motion design de código aberto feito como código. O OpenDesign é licenciado sob Apache 2.0. A versão o posiciona como uma alternativa ao Claude Motion de código aberto. Não é um modelo de texto para vídeo.

Um agente de código escreve HTML, CSS e GSAP. O HyperFrames renderiza essa página em um MP4 determinístico com Chrome headless e FFmpeg. HyperFrames é o framework de vídeo de código aberto e nativo para agentes da HeyGen, integrado como cidadão de primeira classe no OpenDesign. A licença do framework é Apache-2.0. O README marca as miniaturas do catálogo como © HeyGen.

As notas da v0.25.0 dizem para começar pelos cinco exemplos incluídos, criar uma animação editável e exportar um MP4. Peça um vídeo e o resultado são arquivos-fonte editáveis e um MP4. Animações interativas continuam HTML executável. O som para quando você sai da prévia ativa. Os cinco exemplos são Motion Future, Product Promo, Showreel, UI Morph e Visual Lesson. A exportação de vídeo confere se o MP4 pode ser reproduzido, e uma exportação que falha mantém o código-fonte editável.

A mesma versão diz que esta versão torna mais fluida a edição, as prévias e a continuação do trabalho entre dispositivos.

O README diz que 11 templates HyperFrames e 39 prompts Seedance vêm com o repositório. O README aponta o fluxo de renderização do OpenDesign (cache de composição, contorno do sandbox-exec e MP4-as-chip) para design-templates/hyperframes/ no repositório.

O README também diz que você pode parear o HyperFrames com outros geradores. Seedance 2.0 é citado para texto para vídeo e imagem para vídeo cinematográficos. Veo 3, Sora 2 e Kling 2 são citados como variantes de modelo roteadas. Suno v5 e Lyria 2 são citados para a camada de áudio. Esse pareamento é um segundo caminho. A renderização do Motion em si continua sendo a animação HTML transformada em MP4.

O OpenDesign não traz um agente. O README diz que o motor de design é o binário claude, codex, cursor-agent, copilot, hermes ou kimi que já está no seu PATH. A troca é com um clique.

O app em si é de código aberto. Ele não inclui um modelo, então o custo do modelo depende do agente ou da chave de API que você trouxer.

Em 17 de outubro de 2026, o eogee.com relatou que a equipe de lançamento do OpenDesign disse que o vídeo de demonstração do lançamento foi feito com DeepSeek V4.1 Flash dentro do OpenDesign. Essa é a afirmação do fornecedor. A nota não inclui benchmark independente.

Como instalar o OpenDesign

Os passos abaixo são os caminhos de instalação no README do OpenDesign. Os blocos de comando foram copiados desse arquivo.

App para desktop

O README chama o app para desktop de caminho mais rápido. Ele não precisa de Node, nem de pnpm, nem de clone.

Depois da instalação, o app detecta automaticamente cada CLI de agente de código no seu PATH. Ele carrega 100+ skills funcionais, o catálogo separado de templates de renderização e 151 sistemas de design. Você digita um briefing na visão de entrada.

Os projetos podem rodar localmente ou na sua própria implantação. Pedidos de modelo na nuvem e pedidos do OpenDesign Cloud vão para esses serviços.

Instalar em um agente de código

Você pode usar o OpenDesign sem a interface. Chame-o como skill, plugin ou servidor MCP dentro de Claude Code, Codex, Cursor, Copilot, OpenClaw, Antigravity, Hermes, Kimi e outros.

/usr/bin/od pode encobrir o od do OpenDesign. Se você instalou o app de macOS pelo DMG ou pelo cask do Homebrew, o shell ainda pode resolver od para o utilitário octal-dump /usr/bin/od da Apple. Abra Settings → MCP server no app para desktop e copie o trecho específico do cliente. Esse trecho usa caminhos absolutos e não depende do comando od sem caminho. Usuários de WSL2 devem seguir primeiro docs/wsl-setup.md no repositório.

install.sh é um wrapper de shell fino em torno de od mcp install. Ele existe para que a URL hospedada devolva shell em vez do HTML de fallback da landing page, e falha rápido se o seu shell resolver um binário od que não é o do OpenDesign.

# One-line install into the agent you're using:
od mcp install <agent>
# <agent> = claude | codex | reasonix | raven | cursor | copilot | openclaw
#         | antigravity | pi | vibe | hermes | cline | kimi | kiro
#         | trae | opencode

# Hosted equivalent for curl-based setup:
curl -fsSL https://open-design.ai/install.sh | sh -s <agent>

Depois, dentro do agente:

> Use open-design to generate a landing page with the Linear design system

Em uma execução local de CLI com sistema de arquivos, o agente compõe a skill funcional ou o template de design selecionado com o seu DESIGN.md, grava os arquivos canônicos do projeto, e o OpenDesign mostra a prévia desses arquivos. Uma execução BYOK ou de API simples, sem ferramentas de sistema de arquivos, devolve um bloco <artifact> completo.

Docker

git clone https://github.com/nexu-io/open-design.git
cd open-design/deploy
cp .env.example .env
echo "OD_API_TOKEN=$(openssl rand -hex 32)" >> .env
docker compose up -d
# open http://127.0.0.1:7456

Se o navegador pedir credenciais, use open-design como nome de usuário e o valor de OD_API_TOKEN em deploy/.env como senha. Isso mantém o tráfego da bridge do Docker autenticado sem rede do host. Clientes de API podem continuar usando Authorization: Bearer <OD_API_TOKEN>.

Executar a partir do código-fonte

git clone https://github.com/nexu-io/open-design.git
cd open-design
corepack enable && pnpm install
pnpm tools-dev run web

Abra a URL impressa por tools-dev. As portas de desenvolvimento são alocadas dinamicamente, a menos que você passe flags de porta explícitas.

Use Node ~24 e pnpm 10.33.x. As notas de WSL2 estão em docs/wsl-setup.md. As notas de Windows nativo estão em docs/windows-troubleshooting.md. O quickstart completo, as variáveis de ambiente e o fluxo de build empacotado estão em QUICKSTART.md. Esses arquivos estão no repositório.

Como começar o Motion

As notas da v0.25.0 indicam este caminho. Abra Motion Design em Home ou Community. Escolha um dos cinco exemplos incluídos. Use as skills de motion no seletor @. Peça um vídeo. Você recebe arquivos-fonte editáveis e um MP4. Animações interativas continuam HTML executável. O som para quando você sai da prévia ativa.

OpenDesign Motion vs Claude Motion vs Gemini Omni

As linhas abaixo usam o lançamento v0.25.0, o README do OpenDesign, o artigo de 8 de outubro de 2026 da Anthropic, a central de ajuda do Claude Motion e a página deste site sobre o que é o Gemini Omni.

Claude Motion está em beta em Team and Enterprise. A central de ajuda diz que ele fica ativado por padrão no Team. No Enterprise ele permanece desligado até um proprietário ativá-lo em Organization settings > Artifacts. O artigo da Anthropic diz aos administradores Enterprise para usar esse mesmo interruptor para Dashboards e Motion.

O Claude escreve código que anima texto, gráficos, formas e imagens. Você pode mudar qualquer palavra, número ou tempo. Você pode ajustar a peça no editor, ou pedir ao Claude para mudá-la, e então baixar um MP4. A central de ajuda diz que a animação é um artefato criado a partir do Motion template. Ela é salva na aba Artifacts. Exporte com Export > MP4. Ela é privada por padrão. Compartilhe para compartilhá-la. O uso conta para os limites de uso do plano. Animações mais longas ou mais complexas consomem mais.

Os exemplos do artigo são um relatório trimestral transformado em um explicador de 30 segundos para um all-hands, motion em um gráfico numa apresentação para o conselho, e um passo a passo do produto para o onboarding de clientes. Essas linhas são exemplos no artigo. Duração máxima, resolução e taxa de quadros não foram publicados. A Anthropic diz que o Claude Motion não usa um modelo de geração de vídeo. Não há filmagem gerada nem pessoas geradas por IA. A Anthropic lista uma passagem para Adobe, Descript, HeyGen, Higgsfield, invideo, Luma AI ou Runway, com Canva e Captions em breve.

Gemini Omni é o modelo generativo que o Google apresentou no I/O 2026 em 19 de maio. Ele cria vídeo a partir de entrada de texto, imagem, áudio ou vídeo, com áudio nativo sincronizado. O primeiro lançamento é o Gemini Omni Flash. Ele gera filmagem real. OpenDesign Motion e Claude Motion renderizam animações baseadas em código. O Omni vem incluído no Google AI Plus, Pro, and Ultra.

Uma célula diz Não publicado quando essas fontes não afirmam esse fato.

Quando usar cada um

1. Use OpenDesign Motion para motion design de código aberto que você pode editar como HTML, CSS e GSAP e depois exportar como MP4. O app para desktop cobre macOS e Windows. O Linux roda a partir do código-fonte. Você traz um agente de código que já está no seu PATH, ou instala o OpenDesign em um.
2. Use Claude Motion em um plano Claude Team or Enterprise quando quiser uma animação em beta de texto, gráficos, formas e imagens dentro do Claude. No Team ele vem ativado por padrão. Um proprietário Enterprise o ativa em Organization settings > Artifacts. Comece pelo artigo da Anthropic e pela central de ajuda.
3. Use Gemini Omni quando quiser filmagem gerada e áudio nativo sincronizado. O que é o Gemini Omni cobre esse modelo. Rascunhe prompts de filmagem do Gemini Omni, ou prompts de Seedance e Veo para o caminho de pareamento do OpenDesign, no gerador de prompts.

Leitura relacionada

• OpenDesign no GitHub
• Lançamento do OpenDesign v0.25.0
• HyperFrames
• Anthropic: Dashboards and Motion
• Get started with Claude Motion
• O que é o Gemini Omni?
• Gerador de prompts