Claude Motion Design acabou com os criadores de sites ($10.000 por site)

Autoria: Jack Roberts · Assistir no YouTube

Vídeo de autoria do canal indicado, não da IANIA; todos os direitos pertencem ao criador. Transcrição, resumo e tradução gerados automaticamente; o conteúdo no idioma original é preservado na versão em idioma original.

Idioma original: inglês

Vídeo original: Claude Motion Design Just Destroyed Website Builders ($10,000 Websites) · Canal: Jack Roberts · 19:34 · Assistir no YouTube

Tópicos: Claude, Dados, bancos de dados e embeddings, Engenharia de software com IA, Geração de conteúdo com IA

Resumo

Jack Roberts demonstra como combinar vídeo, imagens e animações geradas com código para criar sites interativos usando Claude Motion Design. O tutorial recomenda buscar referências visuais, conectar Claude ao Higgsfield por MCP e usar um processo de design iterativo. O apresentador também mostra exemplos de animações em páginas e aplicativos, incluindo elementos que reagem à rolagem e à interação do usuário. Na parte final, explica como usar MongoDB para armazenar dados e apoiar o crescimento de um produto digital.

Pontos-chave

O vídeo propõe combinar imagens e vídeos com elementos animados gerados por código para criar sites interativos.
O processo começa com a coleta de referências visuais em sites como referral.design e Mobbin, ou em publicações no X.
O apresentador demonstra a conexão entre Claude e Higgsfield por MCP para gerar imagens e vídeos.
Animações podem reagir à rolagem, ao cursor e a cliques, e também podem ser usadas em aplicativos.
O modo de visualização chamado X-ray é usado para distinguir elementos gerados por código daqueles gerados como mídia.
O vídeo recomenda verificar a experiência em dispositivos móveis e combinar animações com objetivos claros para cada elemento.
Na etapa de backend, MongoDB é apresentado como uma opção para guardar dados de clientes e produtos.
O apresentador menciona MongoDB Atlas e Atlas Infinite ao falar de conexão e escalabilidade.

Capítulos

Início	Capítulo	Resumo
00:00	Demonstração de sites com animações	O apresentador mostra exemplos de sites interativos e explica a combinação de vídeo com gráficos animados.
03:04	Referências e configuração do processo	O tutorial apresenta fontes de inspiração, a conexão com Higgsfield por MCP e as instruções iniciais para criar um site.
06:10	Animações, exemplos e interação	O vídeo percorre exemplos de recursos animados em sites e aplicativos e mostra como mídia e código podem ser combinados.
13:54	Arquitetura e armazenamento com MongoDB	O apresentador passa da criação visual à estrutura de backend e demonstra como conectar MongoDB para armazenar dados.
19:02	Resumo do método	O vídeo recapitula as etapas de criação e introduz o próximo assunto, sobre aplicações de Claude Design.

Citações

Não queremos criar sites como todo mundo; queremos sites de qualidade superior, com gráficos bonitos. — 03:04

Cada elemento em movimento tem uma função. — 10:18

Criar interfaces bonitas é uma coisa; para escalar, é preciso entender a arquitetura. — 13:54

Primeiro encontramos referências; depois criamos, conectamos a geração de mídia e aplicamos as animações. — 19:02

Conceitos e entidades

Claude Motion Design (conceito): Nome usado no vídeo para o processo de criar elementos gráficos animados e interativos com código em sites e aplicativos.
Claude (ferramenta): Assistente de IA usado no tutorial para receber referências e instruções de criação.
Higgsfield (ferramenta): Serviço apresentado como fonte de modelos para gerar imagens e vídeos.
MCP (conceito): Mecanismo mencionado no tutorial para conectar Claude a serviços externos, como Higgsfield.
Opus 5.5 (modelo): Modelo que o apresentador diz ter usado para criar alguns dos exemplos exibidos.
Sonnet 5.5 (modelo): Modelo citado como alternativa a Opus 5.5 para o trabalho de criação.
referral.design (ferramenta): Site recomendado para encontrar referências de design.
Mobbin (ferramenta): Site apresentado como fonte de referências de interfaces para aplicativos e sites.
MongoDB (empresa): Empresa e banco de dados apresentados na seção sobre armazenamento de dados e crescimento de produtos.
MongoDB Atlas (ferramenta): Serviço de MongoDB que o vídeo demonstra conectar ao Claude.
Atlas Infinite (ferramenta): Recurso de MongoDB mencionado no vídeo em relação à capacidade de escalar armazenamento e processamento.

Tradução completa (pt-BR)

00:00 O Claude Motion Design 2.0 mudou tudo na criação de sites bonitos: eles ficam com mais qualidade e custam ainda menos. E, neste vídeo, vou mostrar exatamente como criar esses sites que prendem a atenção com motion design e vídeos lindos. Depois, vou mostrar como criar esses sites com uma arquitetura de nível mundial, para você transformar espectadores [música] em compradores, gastar menos dinheiro e ficar anos à frente de todo mundo. Então, se ainda não fez isso, pegue aquele café delicioso e vamos [música] direto

00:31 ao assunto. Agora, o que é realmente interessante aqui, pessoal, é que estamos combinando vídeos animados lindos, que prendem a atenção, com design. O que quero dizer com isso? Bem, veja só. Se eu ativar este raio X, dá para ver a diferença. E isso vai mostrar claramente o que foi criado com animação de vídeo de verdade e o que fizemos com o Claude Design. Agora, isso é absolutamente incrível quando você vê. Então, olha só. Podemos sobrepor o Claude Design e esses diferentes elementos gráficos ao vídeo. Por exemplo, podemos criar qualquer coisa que quisermos. E dá para ver que estes são apenas alguns exemplos do que criei. E então temos

01:01 este lindo Claude Design interagindo diretamente com o próprio site. Conforme você desce, pode ver todas as coisas incríveis que dá para fazer. Estamos usando literalmente exemplos de nível mundial. E olha só esse cara: ele está até descendo pela tela com a gente, adorando tudo. E, quando o mandamos de volta para cima, ele pode voar, fazer todo tipo de coisa. Podemos criar sites em que, enquanto você rola a página, vê esses pássaros descendo e criando animações de rolagem lindas com Claude Design, com Claude Motion Design. Isso traz um nível completamente diferente de impacto e intuição para todo o

01:33 sistema, deixando tudo lindo. E o legal é que há muitas maneiras diferentes de fazer essas coisas. Deixe-me mostrar exatamente o que dá para fazer. Agora, você pode criar rodapés com Claude Design. Eles fazem todo tipo de coisa maluca e interativa. Achei muito legal, por exemplo, este menu que se transforma. Tudo isso aqui é feito puramente com Claude Design. Veja a qualidade e a interatividade disso. É absolutamente extraordinário. Você pode criar adesivos holográficos. Pode fazer rodapés tipo cortina, em que você basicamente puxa as coisas para cima e elas descem. Pode até criar elementos que seguem o cursor. Então, agora você pode deixar suas páginas iniciais totalmente interativas e, quando

02:03 clica aqui, elas realmente reagem. Você pode ter esses elementos lindos que interagem. De novo, pessoal, tudo isso é feito apenas com Claude Design. Você pode ter uma navegação saltitante. Enquanto clica nas coisas, os elementos gráficos podem saltar por cima. Pode até criar rodapés interativos. Quando você clica em “Inscrever-se”, animações de verdade são reproduzidas. Tipo, onde mais você já viu algo assim? E vou mostrar como fazer tudo isso, além de criar mais exemplos de sites que vou mostrar daqui a pouco e que ficam absolutamente lindos. Vou mostrar como fazer esse tipo de coisa, que

02:33 interage enquanto você rola o site. Fica absolutamente lindo, e dá para ver tudo isso se desenrolando diante dos nossos olhos. Mais uma vez, vamos ativar o raio X para ver o que foi gerado por código e o que não foi. Dá para ver tudo isso, e é simplesmente lindo. Depois, vou mostrar como criar tudo isso com uma arquitetura de nível mundial que gerencia todos os seus dados, para que você possa escalar isso até a lua — algo muito importante para ter em mente. Então, vamos falar sobre Claude Motion Design. Não queremos criar sites como todo mundo. Queremos

03:04 conseguir sites de maior qualidade, com elementos gráficos lindos e que aproveitem os novos recursos do Claude Motion Design, porque isso realmente abre possibilidades que antes não estavam ao nosso alcance. Agora, o que vamos fazer é começar com imagens e vídeos. Vamos mostrar como fazer Claude Motion e, depois, ver como aplicar isso ao seu negócio. Então, vamos começar. Claro, só precisamos de três níveis. Se seguir esses três níveis, você consegue. É um sistema comprovado. É muito, muito fácil. O primeiro passo é ver como

03:36 conseguimos imagens e vídeos lindos. A ideia aqui é muito simples. Certo, primeiro vamos encontrar, como mostro aqui embaixo, referências de que gostamos. Para isso, vamos acessar alguns sites. Há dois que podemos visitar logo de cara. Um deles é o referral.design, que é absolutamente lindo. Então, acesse esse site como primeiro passo. Quero que encontre sites que você considere inspiradores ou com os quais se identifique. Você pode pesquisar por categorias, como esta aqui embaixo, por exemplo, para o Notion, que é muito legal. Tem o Duolingo, o ClickUp, seja lá o que for.

04:07 A primeira coisa que procuramos são referências. E, aliás, criei o guia completo para você copiar; está no link abaixo. É só clicar no link, copiar esta skill inteira e criar esses sites comigo. Então, a primeira coisa é pegar alguns sites de que você gosta. Digamos que gostamos do ClickUp. Vamos até o Claude e simplesmente inserimos essa referência de design. Também podemos acessar o Mobin, que é bem legal. O Mobin é um site razoável. Basicamente, ele mostra outros tipos de aplicativos e sites virais que você pode usar. Você pode descer e pesquisar por aplicativos. Também

04:37 pode descer e pesquisar por sites. Mais uma vez, procure qualquer coisa que ache realmente interessante ou algum design que chame sua atenção. Este aqui, por exemplo, acho que é um site bem legal. E se pudéssemos pegar isso e fazer algo mágico? Vamos encontrar algumas referências. Outra ótima maneira é simplesmente acessar o X e pesquisar por sites de design. Isso vai trazer um monte de coisas que você pode usar como inspiração, qualquer coisa que chame sua atenção. Depois de fazer isso, precisamos dar ao Claude a capacidade de criar imagens e vídeos. Por exemplo, se eu acessar este site aqui, você vai ver que ele combina várias

05:08 coisas diferentes. Agora, temos muitos motion graphics lindos, sobre os quais vou falar daqui a pouco, mas queremos poder incorporar imagens e vídeos lindos. Para isso, precisamos acessar a melhor tecnologia de imagens e vídeos. Então, vamos direto de volta ao Claude. Primeiro, quero que você acesse o site abaixo. Vou colocar um link no início da descrição. É só clicar nele e entrar comigo. Basicamente, vamos conectar o Claude ao Hicksfield, que é um balcão único com os melhores modelos de imagem e vídeo do planeta. Agora, desça e clique em MCP, se ainda não tiver conectado. Se já conectou, pode pular para

05:39 a próxima seção. Vou deixar um link abaixo. E tudo o que você precisa fazer, pessoal, é clicar em Claude e depois em “Conectar ao Hicksfield”. Em seguida, você verá o Hicksfield nesta página. É só conectar e estará tudo pronto. Depois, chegamos à última seção, que mostra como aprimorar isso com o ciclo de design. Mais uma vez, acesse o link. Vou compartilhá-lo abaixo. Depois, desça e copie tudo assim; ele cobre o processo inteiro. Voltamos ao Claude e inserimos o prompt completo. Basicamente, vamos dar a ele a seguinte instrução: “Olá, quero que use as referências de design anexadas para criar para mim um…

06:10 um site bonito sobre design com Claude. Use o ciclo de design abaixo e a skill anexada para criar algo bonito, e use minha conexão com Higgsfield para gerar animações de vídeo bonitas e também fotos, quando fizer sentido, para levar isso ao nível máximo. E, quando tiverem feito isso, pessoal, vão estar prontos para começar. Então, já temos a arquitetura definida, mas quero muito mostrar por que estamos usando Opus 5.5 ou Sonnet 5.5. Vamos descer e conferir o próximo exemplo. Temos gráficos em movimento sobre as nossas filmagens. Essa é realmente a

06:42 parte empolgante: como fazemos tudo parecer estar em outro nível. E, só para mostrar outras maneiras pelas quais isso pode ser integrado, pessoal, dá para criar esses botões gelatinosos que se pressionam. Tudo isso, pessoal, é literalmente só código do Claude. Dá para ter esses jogos de erro 404 em que você pode correr e lutar contra coisas na página 404. Por que nos importamos com páginas 404? Sinceramente, o jeito como você faz qualquer coisa é o jeito como você faz tudo. Não seria engraçado se, sei lá, você estivesse tentando se inscrever e tivesse que vencer o jogo para informar seu e-mail? Deu para entender. Outras coisas que isso pode fazer, só para mostrar o que é possível: dá para ter esse elemento aqui em que

07:12 basicamente, se você quiser acessar a documentação, precisa completar o jogo, certo? Então talvez a gente tenha que… pronto. Completar esse jogo para ver os preços. Dá para perceber o quanto isso pode tornar qualquer sistema de design de site divertido e interativo. Também podemos ter coisas como barras de comandos. Olha só. Estão vendo, pessoal? Isso é tudo código. Não há nenhuma referência. Dá para ter banners que viram. Vamos dar uma olhada. Se quiser mudar e ter uma forma única de descrever o que está fazendo e compartilhar o que está fazendo, pode usar a North Studio. Se quiser compartilhar onde você está, pode ter um personagem interativo caminhando ali para você. Você também tem esse rastro de imagens, que é

07:42 ótimo. Assim, talvez apareçam imagens na tela em todos os lugares em que você clicar. Você pode descer e mostrar trabalhos selecionados, com essas lindas galerias giratórias, que são maravilhosas. Dá até para ter essa barra de dia e noite que se move e transforma o mundo inteiro. Quer dizer, essa é uma alternativa caso você não queira usar vídeo, mas acho que funciona melhor quando combinada com o sistema do Higgsfield que estou mostrando aqui. E também tem esse deslizar de cartões em estilo bento. Então, talvez eu esteja conferindo algumas coisas. Dá para ver como isso atrai o foco e como são essas animações. É absolutamente lindo, pessoal. Absolutamente lindo. E isso não se limita a sites. Você

08:14 também pode usar isso em apps. Por exemplo, este é algo do Glido que eu uso. É minha startup de conversão de fala em texto. Todos os elementos gráficos que vocês estão vendo nesta página, pessoal, foram feitos 100% com design em movimento do Claude. Olhem a interatividade, certo? Clico em “Próximo”. Dá para ver que o conteúdo desce. Eu queria mostrar que o Glider pode se conectar a todos os apps do seu software e, de certa forma, fica acima de todos eles, certo? Assim, você pode ativar Claude, ChatGPT, Codex, Hermes e por aí vai por meio dele. Como fazemos isso? Bom, podemos mostrar isso visualmente e, de novo, dá para mostrar visualmente qualquer coisa que você quiser usando o design em movimento do Claude. Eu queria mostrar isso a vocês. Queria mostrar como dá para fazer coisas como resumir vídeos, e o conteúdo desce e faz isso para

08:45 você. Ele mostra todas as coisas que você pode fazer. E sabe o que também é muito legal nisso? Tudo isso foi criado com Opus 5.5, e eu mostro os sistemas para fazer isso. Você pode clicar nas coisas e até criar animações lindas. Que jeito divertido de fazer a integração inicial, não é? Fizemos todas essas coisas incríveis com os pássaros, de novo, usando design em movimento. E a ideia dos gráficos em movimento sobre as suas filmagens é: dá para perceber a diferença, pessoal? Aqui temos uma imagem que geramos usando Higgsfield, certo? Para apresentar a marca. Mas agora estamos sobrepondo os gráficos em movimento para dar um toque a mais. Sabe, esse é o tipo de coisa que aprendi a fazer no After

09:16 Effects no Natal, certo? Eu era aquele cara maluco. Quer dizer, olhem só. É aqui que isso realmente me deixa de queixo caído. Achei que aquilo já era absolutamente lindo. Dá para ver como os círculos são sobrepostos e o resultado que isso cria? É realmente lindo. Quer dizer, passei alguns dias aprendendo After Effects por diversão há alguns anos. Mas acho absolutamente incrível que agora possamos fazer isso com design em movimento. Dá para ver como isso eleva o resultado, acrescenta elementos diferentes e, quando combinado com esse sistema completo de geração de figuras, até esse elemento que atravessa a tela realmente leva tudo a outro nível. Também fizemos este aqui para

09:47 o Glider. Eu literalmente dei um único prompt: “Pode criar um vídeo de introdução para ele?” E, aliás, pessoal, tem áudio, com o Yapping entrando e explicando como funciona. Dá para ver que incorporar algo assim ao seu site abre oportunidades incríveis. O que realmente me impressionou foi como o pássaro se transformou no gene. Eu pensei: “Tudo bem, isso é obviamente muito legal mesmo.” E, claro, dá para ver muitos exemplos diferentes disso. Então, é muito importante ter em mente o… E, na verdade, pessoal, uma coisa muito divertida: até o meu carinha do Claude, carinha, carinha, carinha, carinha, carinha

10:18 carinha, carinha, carinha, carinha, carinha, carinha, carinha, carinha, carinha, carinha, carinha, carinha: quando ele voa para cima, dá um golpe de super-herói, porque não consegue pular tão alto, então precisa voar. Portanto, cada elemento em movimento tem uma função, certo? Os loops são desenhados em código, como vocês podem ver. Uma função de renderização por seção. O último quadro sempre coincide com o primeiro. A ideia de um loop é que o primeiro e o último quadro precisam ser iguais. Assim, você tem um loop lindo. Depois, tem personagens que podem reagir. Então, existe algum nível de interatividade e, claro, há esse raio X, que mostrei como funciona. Deixe eu mostrar na prática. Este é um exemplo de algo que criamos. Vamos atualizar a página

10:48 para podermos percorrer tudo juntos. Vou ativar o raio X, e agora vocês vão ver tudo o que geramos com Higgsfield e tudo o que geramos com código. Temos esse lindo disco giratório feito com código. Você pode descer. Dá para ver que temos 28 assets do Higgsfield, o que é fantástico. E olhem só. Estão vendo a interatividade aqui? Lindo. Todos os gráficos são totalmente resolvidos ali. Podemos descer e ver este lindo vídeo do Higgsfield, que gera todos esses gráficos interessantes. O jeito como se movem, como interagem — é maravilhoso. E olhem só.

11:20 Olhem o tipo de interatividade que isso permite, pessoal. Onde vocês já viram gráficos e interatividade assim? De novo, temos este anel do Higgsfield, e a ideia é combinar as duas coisas. Vocês podem descer e ver… Mais uma vez, tudo isso é código. Olhem só. É tudo código. É tudo design em movimento. Dá para ver que tudo está caindo na parte de baixo. O que é que está caindo? Redimensione qualquer código com um toque. Mais uma vez, curiosamente, isso é na verdade um anúncio de design em movimento. Aí a imagem se aproxima. Dá para ver: mais de 40 mil criadores, com vocês. Bam. Lindo. E está absolutamente maravilhoso. Da mesma forma, se eu abrir este negócio de design do Claude

11:51 Aqui, clico em “Experimentar”. O que isso faz? Leva a gente a uma comunidade linda. Eu mesmo já ouvi dizer isso. Mas, de novo, temos toda essa interatividade. Vamos ativar o raio X para ver como isso fica. E, mais uma vez, temos esses gráficos lindos. Dá para ver aquela coisa de dança das sementes que temos ali, o que é fantástico. Temos mais recursos de geração útil para as animações. E depois temos todos os gráficos. Podemos descer e ver essa interação. E até podemos arrastar isso para baixo, se quisermos, certo? Queremos que seja chamativo ou tranquilo? Então, isso traz muita interatividade para a mesa, pessoal, o que acrescenta e eleva muito o resultado, como vocês

12:21 podem ver. Rolem para baixo: gráficos lindos, uma combinação de código e geração de imagens. De novo, vocês podem descer e ver o design do Claude, tudo está pulando e se divertindo. E sei o que vocês estão pensando: está otimizado para dispositivos móveis? Sim, olhem só: 40.000 m mais sapato. Agora dá para arrastar e conferir de vários lados e ver como tudo interage. E até estes aqui, quando vocês passam o cursor por cima, estão otimizados para dispositivos móveis. E então temos nosso design do Claude. Como vocês podem ver, qualquer que seja o tamanho gráfico em que vocês entrarem. Incluí isso na skill para que possam brincar com a aparência. Vocês podem até redimensionar isso enquanto avançam. É realmente incrível, e isso ajuda muito vocês a

12:53 entender a diferença. E até o nosso super-herói, enquanto voamos para cima, consegue fazer várias coisas diferentes, o que acrescenta um nível de detalhe a isso. E também este site aqui: acho que provavelmente é uma das melhores versões que saíram disso. De verdade, dá para ver — quero dizer, olhem a interatividade, pessoal. Isso está absolutamente lindo. Quando vocês atualizam a página, dá para ver isso aparecendo; e, se eu ativar o raio X, dá para ver onde geramos tudo o que está acontecendo. Acho lindo que até essas chamas tenham sido geradas com código. De novo, vocês podem descer e ver aquele elemento lindo que faz a pessoa parar de rolar a página, e estamos adicionando sobreposições de código

13:24 e então podemos ver isto. Passamos o cursor por cima, o que é fantástico, e, de novo, há detalhes sutis muito bonitos. Tudo isso, pessoal, foi gerado de uma só vez. A única coisa que alterei foi um pequeno gráfico no topo, que achei que poderia ficar um pouco melhor. Mas, fora isso, dá para imaginar como fica à medida que vocês avançam. Até essas pequenas coisas cursivas e divertidas. Imagino que isso seja só código. Sim. Isso mostra exatamente o que está acontecendo aqui. E também temos este filme de 20 segundos, que realmente mostra a sobreposição do roxo e do laranja. E ele fez um ótimo trabalho entendendo onde desenhar cada coisa enquanto vocês

13:54 avançam. E, na parte de baixo, temos o carinho dos nossos clientes. E depois, claro, uma foto muito legal. Criar interfaces front-end bonitas é uma coisa, mas, se vocês querem algo que realmente possa escalar e tenha uma arquitetura de nível mundial, precisam entender a terceira etapa. E, a propósito, pessoal, se tudo isso parece que estou falando espanhol, vou deixar um link abaixo para o curso completo de Claude Code, que tem tudo, incluindo conteúdo que nunca compartilhei no YouTube. Meus sistemas de design novinhos em folha, que também não estão disponíveis no YouTube. Passo por sistemas de potência, sistemas de memória, apps Hermes, como construir qualquer coisa de que vocês precisem. E vocês também ganham acesso completo ao novíssimo

14:25 e lindo sistema operacional agêntico. Ele tem acesso a todos os meus sistemas individuais de memória. Assim, vocês podem acompanhar e fazer perguntas sobre qualquer coisa usando essas memórias, além de ter sistemas operacionais de design completos. E, além disso, vocês também têm acesso a todos esses prompts e sistemas diferentes para gerar todos esses modelos diferentes, com acesso imediato. Vou deixar um link abaixo se quiserem ficar anos-luz à frente de todo mundo. E a questão é como transformar esses sites em um negócio que realmente consiga crescer e escalar. Sabemos que temos um site lindo, mas e se quisermos ter clientes? E se quisermos ter

14:56 produtos para vender? E se quisermos ter um lugar para eles entrarem? Há um milhão de maneiras de fazer isso, mas acho que esta, em particular, vocês vão achar muito interessante. Na verdade, construí este sistema Kanban com apenas um prompt. Olhem só. Posso descer. Tenho “Novo”. Tenho “Em desenvolvimento”. Posso mover isto de “Em andamento” para “Entregue”. Construímos um negócio de agência de design e agora temos algo lindo e maravilhoso. Este também está disponível abaixo, na comunidade. Se quiserem pegar e usar assim mesmo, temos tudo o que precisamos em um único sistema, e vou mostrar exatamente o sistema para vocês construírem isso para qualquer produto. Vou colocar esse

15:26 link abaixo, de graça, para vocês, na descrição. E tudo isso é inteiramente impulsionado pelo MongoDB, patrocinador desta parte do vídeo. Mas, na prática, precisamos de um lugar decente para armazenar isso. Precisamos de regras decentes. Precisamos garantir que tudo esteja bem definido. Então, deixa eu explicar qual é o problema. Porque, se vocês não entenderem o problema, talvez acabem enfrentando questões bem sérias com isso. Agora, vamos supor, por exemplo, que vocês tenham um site de pintura, certo? A pintura do Sam. No computador, ele precisa fazer duas coisas. Número um: responder a perguntas. E, ao mesmo tempo, precisa se lembrar de tudo o que foi armazenado,

15:57 certo? Porque essas duas coisas podem crescer em ritmos independentes. Talvez vocês precisem de uma capacidade que não têm. Para resolver isso e turbinar o sistema, vamos usar o MongoDB. Uma das coisas interessantes sobre o MongoDB é que ele permite usar documentos, não necessariamente planilhas. Cada reserva, por exemplo, é um documento. E vocês podem adicionar qualquer campo que quiserem. Suponham, por exemplo, que, por qualquer motivo, precisem usar conjuntos de informações completamente diferentes para cada cliente. Dá para usar um sistema como o MongoDB, que não fica restrito

16:27 às tabelas padrão, como acontece tradicionalmente, e ele funciona muito bem com o Claude por alguns motivos. Número um: vocês podem adicionar um campo amanhã. Então, se tiverem uma ideia nova na quarta-feira, podem adicionar o campo sem precisar reconstruir o site. Além disso, não é preciso fazer nenhuma tradução. O código do site já usa um formato. Então, os dados entram como estão. Além disso, ele foi realmente feito para ser rápido. O MongoDB 9.0 acabou de ser lançado, e essa é uma das razões pelas quais estou falando dele agora. Na prática, ele permite fazer as coisas mais rápido. Ao consultar esse banco de dados, conseguimos fazer isso muito mais rápido. Podemos ter proteção contra picos de demanda, como um segurança na porta. Solicitações pesadas não vão derrubar

16:58 todo o resto. E, por fim, podemos ter regras muito boas para gerenciar nossos dados. Então, em resumo, é simplesmente isto: ele é mais rápido nos dias de maior movimento. Quando chega muito tráfego, vocês estão preparados para escalar. Também podem ter um segurança na porta. Ou seja, gerenciamento inteligente da carga de trabalho. E, além disso, mantemos os dados ruins de fora. Tudo isso são coisas técnicas ótimas. Como conectar o sistema? É incrivelmente fácil. Então, acessem o Claude ou o ChatGPT. Cliquem no sinal de mais, em “Conectores” e depois em “Gerenciar conectores”. E o que quero que procurem, pessoal, é o MongoDB. Certo. Temos o MongoDB Atlas, que é fantástico. E vocês podem

17:28 literalmente, basta adicioná-los clicando aqui, assim. E clique em Connect to Claude. Então, este navegador vai abrir, e você clica em Continue connecting. Depois, você vai chegar a esta tela. Basta clicar em Authorize. E o legal é que podemos conectar isso ao Claude. E o Claude pode fazer toda a mágica por nós em segundo plano. Quando terminarmos, podemos voltar. Então, pessoal, tudo o que vocês precisam fazer é vir até esta página. Quero que vocês venham até aqui e literalmente copiem tudo. Este é um guia completo sobre exatamente como conectar, como funciona, e vai ser muito fácil de configurar. E isso vai ser feito na mesma janela de conversa do site que vocês estão criando. Assim, ele tem todas as informações, todo o acesso e

18:00 sabe exatamente como trabalhar com o MongoDB. Agora, o próprio MongoDB acabou de lançar algo chamado Atlas Infinite. Em termos simples, o que isso significa? Pense assim: cada tarefa que você passa ao MongoDB — cada tarefa que pede ao seu banco de dados, seja responder a perguntas ou lembrar informações — ganha seu próprio computador. Então, essencialmente, ele lembra e responde, e essas capacidades podem crescer em ritmos completamente diferentes, dependendo da sua situação. Imagine que 100 mil pessoas acessem seu site em um único dia: talvez você precise de uma capacidade diferente daquela de que precisa quando tem um grande armazenamento de dados

18:31 no banco de dados. Eles se ajustam em níveis diferentes. Então, essencialmente, o MongoDB diz que o tempo de escalabilidade foi reduzido em mais de 96% em comparação com o anterior. E, obviamente, os conjuntos de réplicas armazenam 32 vezes mais dados. É um jeito sofisticado de dizer que agora ele é muito melhor para armazenar dados para nós. Mas a vantagem para nós, pessoal, é que, ao desenvolver nossos sites, podemos permitir que as pessoas criem contas, conectar tudo isso e armazenar esses dados no backend do MongoDB. E qualquer coisa que alterarmos e editarmos aqui, por exemplo, será salva e refletida nesse banco de dados. Então, para recapitular, o vídeo tem cinco etapas. Basicamente, encontramos referências que achamos legais. Criamos

19:02 isso com o Claude Code, Opus 5.5 ou Sonnet 5.5. Depois, seguimos em frente e nos conectamos para criar vídeos e imagens, e então aplicamos todo o belo Claude Motion para fazer a mágica acontecer. E, se você estiver criando isso como um site e quiser escalar com um backend realmente decente e uma ótima arquitetura, pode usar um serviço como o MongoDB. Então, agora cobrimos exatamente como criar sites bonitos. Mas o problema é que criar sites e sistemas é apenas uma pequena parte do que o Claude Design pode fazer. Então, a próxima coisa que você e eu precisamos fazer é aprender quais são os 15 principais usos, que

19:34 vamos aprender juntos neste vídeo, certo

Transcrição original

[00:00] Cloud Motion Design 2.0 has changed everything about building beautiful websites and it makes them better quality and even costs less. And in this video I’m going to show you exactly how to build these scroll stopping websites with motion design and beautiful video. And then I’m actually going to show you how you can build those websites with a worldclass architecture so you can actually turn viewers [music] into buyers, spend less money and get like years ahead of everybody else. So, if you haven’t already, grab that beautiful coffee and let’s [music] dive straight

[00:31] in. Now, the really interesting thing here, guys, is we are combining the actual scroll stopping beautiful video animation with design. What do I mean by that? Well, check this out. If I add this X-ray on, you can see the difference. And this will clearly show you what has been designed with actual video um animation and what we’ve used claw design for. Now, this is absolutely crazy when you see this. So, check this out. We can actually overlay cla design and these different graphics over video. We can for example build anything we want to and you can see these are just examples of what I built and then we

[01:01] have this beautiful claw design that is interacting on the actual website itself as you can come down you can see all the beautiful things that you can do so we’re taking literally the worldass examples and look at this guy he’s even following us down the screen he’s loving it and we send him back up he can fly he can do all sorts of things we can have websites where as you’re scrolling down you can see these birds coming down and literally have these beautiful scrolling animations with claude design with claude motion design. It brings a completely different level of I guess like pop and intuition into the whole

[01:33] system that makes it gorgeous. And the cool thing is guys, there are like so many different ways you can do those. Let me show you exactly what you can do. You can now have footers using claw design. They do all sorts of crazy things that are interactive. What I thought was really cool is this morph menu for example. All this here is pure claw design. Look at the quality and the interactivity of this. It is absolutely outrageous. You can create holographic stickers. You can do curtain footers where you hold basically you draw things up and it drops down. You can even have ones that follow your cursor. So you can make your actual homepages now completely interactive and when you

[02:03] click on this it actually goes ahead and reacts with it. You can have these beautiful things here that interact. Again all of this guys is just done with claw design. You can have hop navigation. So as you’re clicking on things you can have like graphics jumping over. You can even have interactive footers. So when you click on subscribe there are literal animations that play. like where have you ever seen anything like this? And I’m going to show you how he can do all of this as well as actually build again more examples of websites that I’ll show you in a second that look absolutely gorgeous. I’m going to show you how you do all this sort of stuff where it

[02:33] interacts as you scroll down the website. Looks absolutely beautiful and you can see all this sort of stuff is unfolding before our very eyes. Again, let’s add on the X-ray and we can see what has been generated by code and what hasn’t. And you can see all this sort of stuff and literally it is absolutely beautiful. And then I’m going to show you how you can actually build this with a worldclass architecture that manages all of your data and so you can actually scale this to the moon which is a really important thing to bear in mind. So let’s talk about clawed motion design. So we want we don’t want to be building websites like everybody else. We want to

[03:04] be able to get higher quality websites that actually have beautiful graphics and leverage the brand new capabilities of claude motion design cuz it genuinely unlocks stuff guys that we didn’t really have access to before. Now, what we’re going to do is we’re going to go basically go from image and video. We’re going to show you how we can do um claw motion and then we’re going to look at how we can actually do that for your business. So, let’s begin. Of course, we only need three levels to this. If you follow these three levels, you can do it. It’s a proven system. It’s super duper easy. Now, what we’re going to begin with first of all is how we

[03:36] actually get beautiful image and video. So, the idea here is very simple. Okay, we’re going to actually find at the beginning um if I show you down here references we love. And to do that, we’re going to go to a couple of websites. So, there’s two we can really go to off the bat. One is going to be referral.design, which is absolutely gorgeous. So, come over to this website as a step one. And I want you to find websites that you think are inspirational or really connect to you. You can search by different categories like this one down here for notion for example is really cool. You got Duolingo, you got ClickUp, whatever the

[04:07] thing is. The first thing we’re looking for is reference. And by the way, I built the full guide so you can copy down below. Um, just click the link, you copy this entire skill and you can build these websites alongside with me. So, first things first is to grab a couple of websites that you like. So, let’s say that we like a ClickUp. We just come up to Claude and we just drop in that design reference. We can also go over to Mobin, which is really cool. Mobin itself is is a decent website. Mobin basically just shows you other kind of um viral, you know, like apps and sites and things you can go ahead and use. So, you can come down, search by apps. You

[04:37] can come down and search by sites. Again, go ahead and find anything you think is really interesting or any designs it speak to. Like this one here for example, I think is a pretty cool looking site. What if we could take this and do something magical with it? So, we’re going to find a few references. Another great way is just simply to go over to X and you can type in design websites and essentially that will pull loads of stuff up that you can see for inspiration, anything that takes your fancy. And once we’ve done that, we need to go ahead and give it the ability to create image and video. So, for example, if I come over to this website here, you’ll see it combines multiple

[05:08] different things. Now, we’ve got loads of beautiful motion graphics, which I get on to, but we want the ability to have these beautiful embedded images and videos. And to do that, we need to access the best image and video technology. So, we’re going to shoot straight back over to Claude. Now, what I want you to do first of all is head over to the website down below. I’m going to put a link at the top of description. So, you just click this and join with me. And basically, we’re just going to connect Claude to Hicksfield, which is the one-stop shop for the best image and video models on the planet. Let’s come down now and click on MCP if you haven’t connected already. If you’ve connected already, feel free to skip to

[05:39] the next section. I’ll put a link down below. And all you literally going to do, guys, is click on Claude and click on connect Hicksfield. And then you’re going to see Hicksfield on this page right here. And then you just connect it and then you’re ready to go. And then we come to the final section here, which is going to be how we enhance this with the design loop. Now again, just come over to the link. I’m going to share it down below and all you’re going to do is come down and copy everything like this and it covers the entire scum. We come back over to Claude and we drop in the big prompt and effectively we’re just going to give it the below instruction which is hey there I want you to use the attached design references to build me a

[06:10] beautiful website about Claude design. Use the design loop down below and the attach skill to build something beautiful and use my connection to Higville to generate beautiful video animations and also photos where relevant to bring this to the maximum level. And once you’ve done that guys, you’re going to be ready to rock and roll. And so we have the architecture locked in, but I really want to show you why we’re using Opus 5.5 or Sonet 5.5. So let’s go down and check out the next one here. So we have motion graphics on top of our footage. This is really the

[06:42] exciting thing of how we just make it look completely next level. And just to show you some other ways, guys, that this can actually integrate here. You can get these nice jelly buttons where you’re pressing it. All this guys is just literally cl code. You can have these 404 games where you can literally run and battle stuff on 404. Why do we care about 404 pages? Honestly, how you do anything is how you do everything. Wouldn’t it be funny if like you’re trying to, I don’t know, sign up and you have to win the game to give your email. You get the idea. Other things that it can do just to show what’s possible is you can have this thing here where

[07:12] basically if you want to get to the docks you have to actually complete it, right? So maybe we’ve got to there we go. Actually complete this game to get pricing. You get the idea of how fun and interactive this can actually make any website design system. We can have things like command bars. Look at this. Do you see guys? This is just all code. This isn’t any references. You can have flip banners here. So let’s have a look. So if you want to change it and have a unique way of describing what you’re doing and sharing what you’re doing, you can have North Studio. So if you want to share where you’re at, you can have an interactive guy walking over there for you. You have this image trail which is

[07:42] great. So maybe everywhere you’re clicking images are appearing on screen for you. You can come down and show selected work and get these beautiful spin galleries which are gorgeous. You can even have this day and night bar if you want to moves over and changes the entire world. I mean this is an alternative if you don’t want video but I think this is best used when you combine it with the Higfield system that I’m sharing here. And then you’ve even got this bento glide. So maybe I’m checking out things. You can see how it just draws the focus in and these animations. This is absolutely gorgeous, guys. This is absolutely gorgeous. And it doesn’t just stop with websites. You

[08:14] can use this for apps, too. So, for example, this is something glido I use. It’s my speech to text startup. Every graphic that you’re seeing on this page, guys, is 100% clawed motion design. Look at the interactivity, right? I click on next. You can see it comes down. So, I wanted to show that glider could connect to all the apps in your software and it kind of sits above them all, right? So you can activate claude and chat GBT and codeex and Hermes and blah blah blah through it. So how do we do that? Well, we can show this visually and again you can show anything you want to visually using claude motion design. I wanted to show you this. I wanted to show you how you can do stuff like summarize videos and it comes down and it does that for

[08:45] you. Shows you all the things you can do. Now what’s really cool about this as well? All this was designed with Opus 5.5 and I show the systems of how to do that. You can click on things and you can even create beautiful animations. Like how fun is that as an onboarding, right? We did all of this great stuff with the birds again called motion design. And so the idea with the motion graphics on top of your footage is can you just see the difference guys? Like here this is an image we generated using Higfield, right? To show off the brand. But what we’re doing now is overlaying the motion graphics to kind of add a little bit of extra. Like you know this is the stuff like I learned After

[09:16] Effects at Christmas, right? I was that crazy guy. I mean look at this. This is where it really blows my mind. Like I thought that was absolutely gorgeous. Like can you see how they overlay the circles and what that looks like? I mean it is absolutely beautiful. I mean like I spent a good few days learning After Effects a few years ago for fun. But the fact that we can now do this with motion design I think is absolutely brilliant. But you can see how it just elevates it adds these different things in and just when compared with this figure full generation system like even the thing coming across really takes it to a new level. We even had this one here for

[09:47] glider. I literally gave it one prompt. I was like go ahead and build me an introduction video for it. And by the way guys, this has audio right where yapping comes in. It shows you how it works. So you can see having this kind of thing embedded into your website just really unlocks some incredible opportunities. What I was really impressed with is how the bird turned into the gene. I was like, “All right, that’s obviously very freaking cool.” And obviously you can see many different examples of this. So what’s really important to bear in mind is the and in fact guys what’s really fun even my claw guy guy guy guy guy guy

[10:18] guy guy guy guy guy guy guy guy guy guy guy guy guy guy guy he when he flies up he’s got a superhero kick because he can’t jump that high so he needs he needs to fly. So every moving bit actually has a job, right? You have the loops drawn in code as you can see. So one render function per section. The last frame always meets the first frame. So the idea about a loop is the fact that the first last frame need to be the same. So you have a beautiful petrol uh loop. Then you got characters that can react. So some level of interactivity and then obviously you got this X-ray which I showed you in terms of how that works. So let me show you in practice. So this is an example of one that we built. Let’s go ahead and refresh this

[10:48] so we can go through this one together. So I’m going to head on X-ray and you’re going to see now everything we generated with Higsfield and everything we generated with code. So you have this beautiful spinning disc that is code. You can come down. You can see we’ve got two eight different Higsfield assets which is fantastic. And look at this. Can you see the interactivity here? Beautiful. All the graphics are completely taken care of there. We can come down. We can see this beautiful Higfield video we have here generating all these interesting graphics. How they’re moving, how they’re interacting, which is gorgeous. And look at this.

[11:20] Look at the kind of interactivity of this guys what this can do. I mean where have you seen graphics and interactivity like this? Again we got this Higfield ring and again it’s about blending the two things together and you can come down and see and these kind of again this is all code. Look at this. This is all code. This is all motion design. You can see that everything’s dropping at the bottom. What’s all this dropping down? Resize any code on one tap. Again this is actually an advertisement funnily enough for motion design. Then it zooms in. You can see and then 40,000 makers plus you. Bam. Beautiful. And this is absolutely gorgeous. Likewise, if I come over to this claw design thing

[11:51] here, I click on try it. What does it do? It takes us through to a beautiful community. I’ve had it say so myself. But again, we’ve got this interactivity. Let’s turn on X-ray to see what this looks like. And again, have this beautiful graphics. You can see the uh seed dance thing we’ve got there, which is fantastic. We’ve got more hful generation stuff there for the animations. And then we have all the graphics. We can come down and we can just see this inter. And we can even drag this down if we want it, right? Do we want it to be loud or calm? So just like it just brings so much interactivity guys to the table which just adds and elevates so much as you

[12:21] can see scroll down beautiful graphics combination of code and image generation again you can come down and see claw design everything is boopping and having a great time and then I know what you’re thinking is it mobile optimized yes look at it 40,000 m plus shoe you can see now you can pull it and check it on many different sides and how it all interacts together and even these ones here as you’re hovering over that’s mobile optimized and then we have our claw design as you can see whatever kind of graphic ical size you get into. I built this into the skill so you can actually play around with the look. You can even resize this as you go. Like it’s actually crazy and this really helps you

[12:53] understand the difference. And even our superhero as we’re flying up, he can do various different things which just adds a level of detail to this. And then also this website here, I think is probably one of the best versions that came out of it. Actually, you can see I mean look at the interactivity on this guys. This is absolutely gorgeous. Like when you refresh it and you can see that coming on and if I the X-ray in you can see where we’ve generated everything that’s happening. Like just even the fact that these flames have been generated by code I think is gorgeous. Again you can come down you can see we’ve got that beautiful scroll stopping thing and we actually adding in um code code overlays

[13:24] and then we can see this. We hover over this which is fantastic and again just really nice subtle details. All of this stuff guys was generated in one shot. The only thing I changed was one little graphic at the top which I thought could be a little bit improved. But apart from that guys you can imagine what this looks like as you go. Like even these little cheeky cursive things. I’m guessing that’s just going to be code. Yeah. See, just shows you exactly what is going on here. And then we even get this 20 second film that really shows you the overlay of the purple and the orange. And it’s done a great job of understanding where to draw what as you

[13:54] go through this. And then we got love from our clients at the bottom. And then obviously a really cool photo. Now building beautiful front ends is one thing, but if you want something that can actually scale and has worldclass architecture, you need to understand the third step. And by the way guys, if this all sounds like I’m speaking Spanish, I’m going to put a link down below for the full cord code masterass that has everything including content I’ve never shared on YouTube before. My brand new design systems again not available on YouTube. I go through power systems, memory systems, Hermes apps, how to build anything that you need. And you also get full access to the brand new

[14:25] and beautiful Agentic operating system. Has access to all of my individual memory systems. So you can track and ask questions about anything when you got those memories as well as full design operating systems. And on top of that, you also get access to all these different prompts and systems to generate all these different templates with immediate access. I’ll put a link down below if you want to get light years ahead of everybody else. And it’s the question of how we actually turn these websites into a business that can that can actually uh go ahead and scale. So we know we’ve got a beautiful website, but what if we want to have customers? What if we want to have

[14:56] products that we sell? What if we want to have a place for them to log in? There are a million ways to do this, but this one in particular, I think you’re going to find very interesting. So, I actually built this Italia system again in one prompt. Check this out. I can come down. I’ve got new. I’ve got designing. I can move this from motion over to shipped. We built a design agency business and now we have a beautiful and gorgeous thing. This one is available down below in the community as well. If you want to go grab it and just use that straight away, we’ve got everything that we need in one system and I’m going to give you the exact system of exactly how you can build this for whatever product you’ll put that

[15:26] link down below free for you in the description. And this is entirely powered by MongoDB, the sponsor of this section of the video. But effectively, we need somewhere decent to actually go ahead and store that. We need decent rules. We need to actually go ahead and make sure we have everything locked in. So, let me explain what the problem is. Cuz if you don’t understand the problem, you’ll may run into quite serious issues with that. Now, let’s say, for example, that you run a painting website, okay, Sam’s painting. On your computer, it’s got to do two things. Number one, it’s got to answer questions, and at the same time, it’s got to remember everything that’s been stored at the same time,

[15:57] right? because these two things can grow at independent rates. You know, you may need capacity for that that you may not have. And to solve this and get supercharged, we’re going to use MongoDB. Now, one of the interesting thing about MongoDB is it actually allows you to have documents, not necessarily spreadsheets. So, each booking is actually one document. Uh, and you can basically add any field you want to. So, say for example that you need to use completely different sets of information for every client for any reason. You can actually use a system like MongoDB and it isn’t confined

[16:27] classically to standard tables and it’s really good to use with Claude for a couple of reasons. Number one is that you can add a field tomorrow. So if you have a new idea on Wednesday, you can add the field without the need to rebuild any of the website. On top of that, there’s no need for translation. So your site code already uses a shape. So it just goes in as it is. On top of that, it’s really built for speed. Now MongoDB 9.0 just dropped, which is one of the reasons why I’m actually talking about it now. And effectively, it allows you to do things faster. So when we’re querying this database, we can do a lot faster. We can essentially have spike protection just like a bouncer. Any heavy requests, they won’t crash

[16:58] everything else. And then finally, we can have really good rules on how we manage our data. So the TLDDR is simply this. It is faster on big days. So when you get loads of traffic coming in, you’re set for scale. Um you can have a balance from the door. So intelligent workload management. And on top of that, we keep the bad data out. All great technical stuff. How do we connect it? It is unbelievably easy. So you head over to cord or chat GBT. Going to click on the plus, click on connectors, and then click on manage connectors. And then what I want you to look for, guys, is just come down and look for Mongodb. All right. Now, we got MongoDB Atlas, which is fantastic. And you can

[17:28] literally just add these in by clicking on it like so. And click on connect to Claude. And then this browser will open up and you click on continue connecting. And then you’re going to hit this screen. Just click on authorize. And the cool thing is we can connect this to Claude. And Claude can do all of the magic for us in the background. And when we’re done, we can come back over. And then guys, all you can do is come over here to this page here. And I want you to come over and literally copy all the stuff here. And this is a full guide on exactly how to connect it, what that looks like, and be super easy for you to set up. And this is going to be done in the same conversation window as the website that you’re building. So has all the information, all the access, and

[18:00] knows exactly how to work with MongoDB. Now MongoDB themselves have just dropped something called Atlas Infinite. And in plain English, what does it mean? You know if you think about it from this point of view each job that you’re giving MongoDBM each job that you’re asking of your database which is either answering questions or remembering information gets its own computer. So essentially it remembers and answers you know they can grow at different complete rates based on where you’re at. If you imagine you have you know 100,000 people um coming onto your website on one day you may have a different capacity need than if you’ve got a big storage

[18:31] database. They just flex at different levels. Then essentially MongoDB says that scaling time cuts more than 96% versus previous one. And obviously, you know, replica sets hold 32 times the data. Fancy way of saying that it’s just way better at holding data for us. But the upside for us guys is that when we’re building out on our websites, we can actually have people create accounts, we can connect that and have that all stored in the back end of MongoDB. And anything that we change and edit here, for example, will be saved and reflected in that database for us. And so there’s five steps to the video to reconfirm. We basically find references we think are cool. We build

[19:02] that with claw code, opus 5.5 or sonet 5.5. We then go ahead and connect to create videos and images and then we just apply all the beautiful claw motion to make some magic happen. And then if you’re building this as a website and you want to scale with a really decent back end, a great architecture, you can go ahead and use a service like MongoDB. So now we’ve covered exactly how to build beautiful websites. But the problem is that building websites and systems is just one small fraction of what claw design can do. So, the next thing that you and I need to do is learn what the top 15 applications are, which

[19:34] we’re going to learn together in this video right