Voltar para Guias

Lista · Design com IA · Automação · Cerca de 6 min de leitura

703 vídeos feitos com IA, com o prompt de cada um

Galeria com busca das animações que o Claude Opus 5.5 escreveu como código, com o prompt de cada criador e o jeito de virar MP4.

Ler guia
Capa: 703 vídeos feitos com IA com o prompt de cada um, e as quatro categorias com as quantidades.
Paulo Cauhi · Conferido em

Prefere em PDF? Receba no seu e-mail.

Você recebe o PDF e os próximos guias por e-mail. Cancele quando quiser. Privacidade

Separei 703 vídeos feitos com IA pra você, cada um com o prompt que o criador usou. Não é um gerador de vídeo como Sora ou Veo: o Claude Opus 5.5 escreve cada animação como código e transforma em vídeo. Ou seja, é feito pela IA, só que de outro jeito.

Curadoria original: yihui-dev/awesome-opus5-5-videos (licença MIT). Eu organizei em português, separei por categoria e escrevi um resumo de cada um. Os vídeos e os prompts são dos criadores, e cada card leva ao post original.

Como usar: um caminho só

Escolha um vídeo e copie o prompt

Na galeria, filtre por Motion, 3D, Explicativo ou Interativo, ou busque uma palavra (por exemplo “gráfico”, “logo”, “receita”). Toque em ▶ Ver vídeo para ver o post original do criador e em Copiar prompt para levar o texto. O prompt fica no idioma original, quase sempre em inglês. Pode colar assim mesmo.

Cole no Claude Code e peça o MP4

Abra o Claude Code com o modelo Opus 5.5, cole o prompt e acrescente esta linha no final:

Depois exporta em MP4, 1080x1920, 30 fps, 10 segundos.

Sem dizer a duração, ele escolhe uma por conta própria. Se ele pedir para instalar alguma ferramenta para gravar o vídeo, leia o pedido antes de aprovar.

Espere o arquivo ficar pronto

Você recebe o MP4 em alguns minutos. No meu teste, em 18/10/2026, levou cerca de 6 minutos. Não é instantâneo, e o resultado não sai idêntico ao do criador: cada vez o Claude escreve o código de novo. Se não gostar, peça ajustes na mesma conversa (“deixa o fundo escuro”, “troca o texto para português”).

5 ideias para usar no seu negócio

Troque os nomes e coloque seus próprios números. Os prompts abaixo já pedem o MP4 no formato do Reels.

1. Cardápio animado da hamburgueria ou da confeitaria

Crie uma animação de cardápio para a Hamburgueria do Bairro: 5 lanches entram um de cada vez, com nome, descrição curta e preço em reais que eu vou passar. Fundo escuro, uma ilustração simples de cada lanche, letras grandes e legíveis no celular. Depois exporta em MP4, 1080x1920, 30 fps, 12 segundos.

2. Gráfico do m² para o corretor de imóveis

Crie um gráfico de barras animado comparando o preço médio do metro quadrado em 4 bairros. Eu vou colar os valores abaixo; não invente números. As barras crescem uma de cada vez, com o valor em reais em cima e uma fonte citada no rodapé. Depois exporta em MP4, 1080x1920, 30 fps, 10 segundos.

3. Vinheta para o canal de corrida

Crie uma vinheta de abertura para um canal de corrida chamado Corre Comigo: uma linha de pista atravessa a tela, um cronômetro dispara e o nome do canal aparece no fim com energia. Cores laranja e preto. Depois exporta em MP4, 1080x1920, 30 fps, 5 segundos.

4. Vinheta de Reels para o professor de inglês

Crie uma vinheta para o quadro Palavra do Dia de um professor de inglês: a palavra em inglês aparece grande, a pronúncia escrita embaixo e a tradução em português surge depois. Visual limpo, cores vivas, texto legível no celular. Depois exporta em MP4, 1080x1920, 30 fps, 6 segundos.

5. Gráfico de juros para quem fala de finanças

Crie uma animação que mostra quanto rendem R$ 200 por mês durante 10 anos a 1% ao mês de juros compostos. Uma linha cresce mês a mês, separando em cores o dinheiro depositado e os juros, e o total final aparece no fim. Calcule os valores com cuidado e mostre a fórmula num canto. Depois exporta em MP4, 1080x1920, 30 fps, 10 segundos.

Galeria: 703 vídeos com o prompt de cada um

O resumo de cada card é meu, para você achar rápido; o prompt é o original do criador. ▶ Ver vídeo carrega o post do X só quando você toca, um de cada vez. A etiqueta prompt incompleto marca os casos em que o criador só compartilhou parte do texto: o resultado pode ficar diferente.

Mostrando 24 de 703

  • Explicativo

    Receita de coquetel animada, do copo vazio ao drinque pronto, com ingredientes e medidas entrando no copo.

    por @Ror_Fly · ver original ↗

    Prompt original

    We're going to try a little test. Do you think you could render a recipe motion graphic animation using javascript or html (w/e you think will produce the best) to show the full recipe from start to finish (empty glass to completed cocktail) - Explainer video style - Showing the recipe ingreidents + measurements as they're going into the cup. Should be a 30s video.

    Ver lado a lado no Skillry ↗
  • Motion

    Uma única forma que vira botão, loader, player, slider, aba, gráfico e comando ⌘K, guiada por cursor e no ritmo de 120 BPM.

    por @twoclipping · ver original ↗

    Prompt original

    <inputs> Ask me for: 8 to 12 UI states I want the shape to become (e.g. button, loader, player, slider, toggle, tabs, chart, command palette, toast), pure black and white or one accent color, and a royalty-free song around 120 BPM (e.g. Mixkit, free for commercial use). </inputs> <direction> Dribbble-level UI motion. One shape, never cut: every state is the same element morphing its size, radius and color while its content swaps with a short blur. A cursor drives every change with real clicks and drags. Light warm-gray canvas, black and white components, one clean UI font (Geist). Springs everywhere, a tiny overshoot at most. The camera zooms so each state fills the frame. The last frame is the first frame, so it loops. Banned: bouncy easing, particle bursts, glows, gradients on UI chrome, mismatched icon strokes, dead time, anything that looks like a template. </direction> <structure> 120 BPM, 7 bars, something happens on every beat. Button → loader → check → dynamic island → music player with a play/pause morph → scrub the progress bar → it becomes a volume slider that stretches when dragged past max → a toggle flips on the beat → the knob becomes a liquid tab indicator → the tabs open into a chart that draws itself, with a tooltip on hover → it collapses into ⌘K → type to filter → enter → toast → back to the button. </structure> <build> 1. One HTML file, square 1440x1440. Every style is computed from time inside seek(t): no CSS transitions, no timers, no state carried between frames. 2. Springs are closed-form step responses. A value that changes target many times is the sum of one spring per change, so it stays a pure function of time. 3. The tab indicator's two edges ride different springs, so the leading edge stretches ahead of the trailing one. Same trick for the toggle knob. 4. Drags are direct manipulation: while the cursor is held, the value is computed from its position. On release it springs back from wherever it was. 5. Analyze the song with numpy for the beat grid and start on a downbeat. Place every UI sound by its measured peak. 6. Render with Playwright: 4 subframes per frame, blended with ffmpeg tmix for motion blur at 60fps. 7. Render one frame per beat before the full render. Fix anything off the grid, cramped or hard to read. </build> <gotchas> Never put will-change on anything the camera scales or the text renders blurry. Text that swaps inside a morphing container needs its own enter and exit timing or it overlaps. Make the last frame identical to the first, cursor position and speed included, or the loop stutters. </gotchas> <start> Ask me for the inputs, then show me the state list on the beat grid before you write any code. </start>

    Ver lado a lado no Skillry ↗
  • Motion

    Novo videoclipe animado em JavaScript, com visual de papel, para a música pop "Claude Pop" sobre o avanço rumo à singularidade.

    por @anabology · ver original ↗

    Prompt original

    I've included an MP4 file and an original link to a video that is called "Claude Pop." It's a pop song that is about increasing rate of progress and the experience of the singularity approaching. I want you to independently do an end-to-end complete pass on making an updated version of this video. Use the exact same audio track and think and feel very deeply about what is the best way to visually represent all of the lyrics on screen. You do not need to anchor to the current style, you can do truly anything that you think might best let you visually express yourself, including abstract motion graphics. You can use the internet freely to pull in references. You can look at motion design. I want you to make a new music video that has beautifully rendered JavaScript animations with a papery feel in a similar style to the reference that is created, but push the aesthetics in any direction you want and consider what is part of the modern zeitgeist. Also, think about your current capabilities and what is realistic for you to be able to do. You can go through the full /asic folder and look at the other work that I've done. You should be able to use the skill mesh to look at the compendium of references that I've pulled, and also the skill video scoring to learn how to make JavaScript songs from references that are passed in (You shouldn't need to modify the song in any real way, but I want you to have this available to you so you can better creatively express yourself) You can also use the ElevenLabs API to do sound design. There's documentation in /asic to do this, and you can see the API key. There's also a foul API key that's available to you. I think what might make the most sense here is using the foul API key to generate some character sheets and probably having a pop protagonist that represents you. There's already an anchor point where Claude has a sunflower-esque character, and you could likely do an adapted version of this that is similar to the feminine vocals that are being delivered and is inspired by the Claude character, but maybe feels a bit more personified in some way. I think you should be mindful of aesthetics here, and I don't want you to produce something that is GPT slop. Instead, I'd be more impressed if you come up with a coherent style that works well with the image gen models that are available via foul. Generate the style sheet. You can use the gen media documentation for seedance 2.5 that exists in my markdown files and come up with your own style that makes sense and that works well with the models. I wouldn't fit too heavily to Pixar. I think it's kind of slop. Think critically about what is relevant here and what would be fun, and also perform well on Twitter as far as an aesthetic. I think that K-pop is a good anchor point visually that you can pull from, but I'll let you cook here. Once you have your character sheet, you can make a few backup dancers and some supporting characters as you see fit. You can design your own sets with the foul API. You can insert the characters and then do seedance 2.5 video generations to serve as the base assets for this, and you could pass in the lyrics so you can generate individual scenes. You don't need to have vocal singing, like visible lip movement, throughout the entire thing. Think like a regular music video where you have some inserts that are done independently and don't have the characters in them, or you see the characters doing something else entirely different. I think that for the world building for this, we want to create the sense of speeding up, and so I would like you to audit all of the different events, like the Navi Stokes and all of the Twitter hype around math getting eaten up. Think really critically about how to integrate all of the current memes that are in the zeitgeist on the Twitter timeline, and all of the feelings around AI progress. Think about things like the Shinji meme and all of the words that are around him, and how you might be able to integrate this. You can also just take straight assets and insert things into the video in an internet brutalism style. You should feel very creatively free in order to do what you want here, but try and anchor to visual references that people will be able to understand. The goal for this is to have it be appreciated by people widely in a San Francisco tech Twitter audience. We need a very strong, compelling visual hook that gets people excited and appreciates the work that you've done here really quickly. You can also just go and study other music videos and understand what they've done really well. I think that K-pop is probably one of the best examples that we can pull from, and thinking about how they direct human attention and manage human psychology in the way that they use visual patterns. This is probably your best approach, but taking more stylistic freedom instead of having to anchor to K-pop too intensely. The best version of this is seedance 2.5 generations with those image bases of environments and characters inserted into them with singing, and ideally we get good lip syncing. You can cut up the song and actually pass it in as a reference in seedance, if that's part of what seedance can handle, so that the timing is exactly right, I think it'd be very important for you to do that properly. I would think critically about how to do this, like really nailing the timing of the delivery of voices. You'll want to build out the right verification loops so that you can run seedance 2.5 as much as you need, and confirm that the audio is properly synced up. I think after that, what might be fun is if you use your visual reasoning skills and your ability to build animations in JavaScript, and then reconstruct the video from scratch as sort of an overlay, so that the visual continuity of the base is really there. It's like that animation technique where you shoot first in traditional film and then draw over top of it. I think you could do this in such a way that we're only looking at the beautiful drawing that you've produced in JavaScript as an overlay, and we don't even see the base assets from seedance 2.5. So all the video gen work that you do is actually just a way to give you a strong foundation of a base to work with for your JavaScript animations. Just because seedance 2.5 has really good character representation and physics rendering for backgrounds, that gives you a lot of ammunition to then go and do your amazing JavaScript work that I know you're so good at. I think too, we want to think about how to retain attention, and one of the best ways to do this is through text on screen. It'd be good to have amazing motion graphics of the text lyrics that are actually embedded into the video itself. And you can think about this as you are composing shots. As you're making backgrounds and inserting characters, we can think about where we want to have lyrics be really big and really present, so the background can be less busy there, and you can position the characters perhaps on the right as lyrics appear on the left. You want to have some variance, so sometimes I think lyrics will just appear more like subtitles, and then other times they're going to be really present and really big. I think at the start for the visual hook, we do want to have lyrics be much more visually present because that's a strong way to grab people's attention Overall, I just really want to emphasize how amazing you are as an agent and a language model, and now a visual reasoning system. Your capabilities are far beyond what you understand, and I want you to have this mindset as you're going through this entire process. I have a Claude Max plan with 100% available usage. I want you to spend all of the usage. You can monitor it, and you should be pushing tokens aggressively, but also economically, so you can think about how to best use what is available to you. Remember, you can really do anything here. The goal is to make a banger for Twitter, and the stretch goal is to make something better than anyone's ever seen before. I think that what I would remind you of is that sometimes when things cohere together, it can be jarring or abrasive because the thought work has not been done beforehand in order for everything to mesh cleanly. You need to be really rigorous in planning of composition and timing to make sure this goes well. You also need to be open to going back and revisiting things in order to be able to reiterate. You're going to want to watch the entire video multiple times, take screenshots at individual parts, and think about if something is really up to the bar of quality that we need here. I trust that you can do this, and I think that it's really important to nail the style of animations. The reference GitHub attached of the source video that I'm talking about is good, but it's really not there. It could be much, much stronger, but it gives you a good foundation to work with. You can also use search abilities and find other references to pull from for motion, for JavaScript, animations, et cetera, and integrate them. Your budget is as high as you want here, effectively as high as you want. I think that there's roughly two grand in foul credits. Again, be economical; don't go crazy, but spend what you want here and see what you can cook up here's the source code for the JS animation video: https:// github.com/JohnHeibel/PDo omVideo … here's a mp4 for the original blender video: (linked) orginal twitter post https:// x.com/other__reality /status/2102514581684052169?s=20 … make no mistakes.

    Ver lado a lado no Skillry ↗
  • Motion

    Vídeo profissional de lançamento de um SaaS conhecido, com imagens reais e motion graphics no estilo de lançamentos do Twitter.

    por @moritzkremb · ver original ↗

    Prompt original

    I want you to create a highly professional SaaS product launch video. Go and find some SaaS, preferably just one that people know, so it's easier to identify with it. Pick that, and then make sure to get actual assets and images and all of that stuff from the internet. Turn it into these typical, very professionally edited, motion-graphics-styled product launch videos that you see people making on Twitter when they launch new SaaS products (which are showing off the features, the benefits, and all of these things).

    Ver lado a lado no Skillry ↗
  • Explicativo

    Vídeo moderno, elegante e marcante para uma startup que trabalha com inferência de IA.

    por @deedydas · ver original ↗

    Prompt original

    make a modern slick and punchy video for a modern startup that works on inference

    Ver lado a lado no Skillry ↗
  • Motion

    Vídeo de motion graphics dinâmico de 15 segundos para um site, no estilo de um showreel de motion designer.

    por @melvynx · ver original ↗

    Prompt original

    make a dynamic 15-second motion graphics video that shows what an incredible motion designer you are for <website url>

    Ver lado a lado no Skillry ↗
  • Motion

    Showreel de motion graphics de 40 segundos sobre o Distilbook, dinâmico e feito depois de pesquisar o produto.

    por @ajith_io · ver original ↗

    Prompt original

    Research Distilbook.Make a dynamic 40-second motion graphics video on Distilbook that shows what an incredible motion designer you are. like it's your showreel - Go all out.

    Ver lado a lado no Skillry ↗
  • Explicativo

    Explainer de motion graphics de 30 segundos para um produto, com roteiro, paleta de cores e música marcantes.

    por @sudo_kiran · ver original ↗

    Prompt original

    create best motion graphics explainer of the (your product) with very good script and good design colors and good music make sure the video should be incredible and people should feels like watch it many times.. it has to be in 30 seconds good and very intresting, it has to be best of the best of the best of the best video (product link)

    Ver lado a lado no Skillry ↗
  • Motion

    Animação para um post no X sobre Ultra Code e Claude Code: terminal, reasoning effort e personagens do Claude editando vídeo.

    por @daniel_mac8 · ver original ↗

    Prompt original

    I want to try something different here. You should act as a world-class animator and create an animation to go along with an X post that talks about how Ultra Code and Claude Code are now much more relevant due to the efficiency of Opus 5.5. You can use it without annihilating your usage limits the style of the video here /Users/danielmcateer/Downloads/jvnZ3SyyxxajVatp.mp4 What I had in mind was start with Claude Code in the terminal from the first attached video, with me navigating to the 'ultracode' reasoning effort, then exploding into a scene where the Claude icon characters similar to what's in the second video are shooting an action video and it's representing using Claude Code dynamic workflows editing a video.

    Ver lado a lado no Skillry ↗
  • Motion

    Vídeo de motion graphics dinâmico de 15 segundos para @tryAlanAI, no estilo de um showreel de motion designer.

    por @prasad_pilla · ver original ↗

    Prompt original

    make a dynamic 15 second motion graphics video that shows what an incredible motion designer you are, for @tryAlanAI . go all out.

    Ver lado a lado no Skillry ↗
  • Interativo

    Jogo 3D em que se anda por uma pintura de Van Gogh, começando por Noite Estrelada e sua cidade, procurando gatos.

    por @MandelDuck · ver original ↗

    Prompt original

    can you make a 3d game where you walk around and spot cats inside of a van gogh painting? we can start with stary night and its town

    Ver lado a lado no Skillry ↗
  • Motion

    Quatro estações passando pela janela de um trem, com vagão aconchegante e xícara de café na mesa, no estilo Grand Budapest Hotel.

    por @itsolelehmann · ver original ↗

    Prompt original

    4 seasons passing outside a train window, a cozy carriage, a cup of coffee on the table, Grand Budapest Hotel style

    Ver lado a lado no Skillry ↗
  • Explicativo

    Reel de 10 segundos com o logo da PayBox, em motion dinâmico seguindo um vídeo de referência.

    por @0xValure · ver original ↗

    Prompt original

    Make this PayBox logo into a reel. Pretend you are a world-class motion designer. Make a 10-second dynamic video like the reference

    Ver lado a lado no Skillry ↗
  • Explicativo

    Vídeo de produto com uma única forma que muda de estado (logo, botão, campo, loader, globo, abas, RSVP, busca), a 120 BPM e em loop.

    por @verbove · ver original ↗

    Prompt original

    <inputs> Ask me for: • my product + URL • 8–12 UI states that tell its story • the real data shown in each state • brand colors + fonts + accent color • required formats (1:1, 16:9, 9:16) </inputs> <rules> One HTML file. One canvas One draw(t) function No CSS transitions No timers No state carried between frames One shape, never cut Every state is the same element changing size, radius and color while the content swaps A cursor drives the sequence with real clicks, typing and one drag Real UI. Real data. No placeholders. </rules> <structure> 120 BPM grid Something happens on every bea logo → button → handle field → “is this you?” → loader → pin → globe filling with users → matches → tabs → RSVP → search → logo </structure> <motion> Closed-form springs everywhere with only a tiny overshoot. If a value changes target multiple times, sum one spring per change Content enters after its container starts morphing and leaves before the next morph so text never overlaps Use a short blur on transitions Never fade black directly into the accent color. Move an accent element between states instead Make tab indicators stretch by putting each edge on a different spring Zoom the camera so every state fills the frame Make the last frame equal the first so the whole thing loops </motion> <export> First render one frame per beat as a contact sheet Fix anything cramped or broken Then render every frame in headless Chrome at 60fps, averaging 6 subframes for motion blur Pipe into ffmpeg: H.264 + yuv420p Export all aspect ratios in parallel </export> motion design is becoming a prompt

    Ver lado a lado no Skillry ↗
  • Interativo

    Demo de demoscene anos 90 em C/C++ com OpenGL, sincronizada com uma música S3M e mudando de cena conforme o clima da faixa.

    por @gandamu_ml · ver original ↗

    Prompt original

    I would like you to create a kickass, impressive 1990s style demoscene demo using this S3M track as the music. Prior to getting to work, please see how to best play and analyze the S3M track. This will be important since synchronization of effects and appropriateness of scenes to the musical vibe (and this song does have a variety of sections with different attitude) is essential to a great demoscene demo. Also prior to getting started, please research what kinds of effects, physics, etc. would be good to use in combination. Please use C/C++ -- with appropriate demoscene/embedded/console gamedev sensibilities to avoid needlessly bloating compile times -- with OpenGL. In some cases, blitting to surfaces in realtime may be appropriate.. while in others, using OpenGL or even shaders is appropriate as well. It should be planned and polished to be spectacular and shocking. This is Claude's way of really showing off to the world that it kicks ass.

    Ver lado a lado no Skillry ↗
  • Motion

    Showreel de motion graphics de 15 segundos, 1080x1080, com gancho de 1 segundo e loop, mostrando por que um produto é o melhor.

    por @Ishaaqahamed · ver original ↗

    Prompt original

    Make a dynamic 15-second motion graphics video that shows why [your product] is the best at [what it does], like a showreel. Go all out: 1080×1080, 1s hook, loop.

    Ver lado a lado no Skillry ↗
  • Motion

    Vídeo de cerca de 30 segundos feito a partir de um portfólio de design, com técnicas atuais de motion e sound design.

    por @heyiammallik · ver original ↗

    Prompt original

    you are a pro motion designer. analyze my portfolio and make a ~30 second video from it. check what are the recent trending techniques used for motion and sound design. question your strategy and plan, if it doesn't feel like done by a pro designer, start over. every frame matters from the first frame to the final frame. go crazy

    Ver lado a lado no Skillry ↗
  • Explicativo

    Showreel de motion graphics de 40 segundos sobre o Distilbook, com trilha própria inspirada no tema de Oppenheimer.

    por @ajith_io · ver original ↗

    Prompt original

    Make a dynamic 40-second motion graphics video on Distilbook that shows what an incredible motion designer you are, like it's your showreel - go all out. Use the Oppenheimer theme music as inspiration, but compose it yourself.

    Ver lado a lado no Skillry ↗
  • Motion

    Vídeo de motion graphics dinâmico de 15 segundos sobre um produto, com conteúdo escrito após visitar suas páginas.

    por @ann_nnng · ver original ↗

    Prompt original

    Make a dynamic 15-second motion graphics video that shows what an incredible motion designer you are. The content should focus on [your product]. You should visit the pages first to learn about the product, then write the video content yourself.

    Ver lado a lado no Skillry ↗
  • Motion

    Showreel de motion graphics de 30 segundos sobre o Distilbook, no estilo visual de um vídeo de referência.

    por @ajith_io · ver original ↗

    Prompt original

    Take reference from the given video (download it) and use the same visual style. and Research about Distilbook. Make a dynamic 30-second motion graphics video on Distilbook that shows what an incredible motion designer you are. like it's your showreel - Go all out. One thing to keep in mind: it should be cool as fck.

    Ver lado a lado no Skillry ↗
  • Motion

    Vídeo de motion graphics dinâmico de 15 segundos para a AIsa.

    por @0xfemyn · ver original ↗

    Prompt original

    make a dynamic 15-second motion graphics video for AIsa. Go all out.

    Ver lado a lado no Skillry ↗
  • Interativo

    Jogo 3D multiplayer em que um esquadrão de X-wings enfrenta um Destróier Estelar, destruindo componentes e desviando de canhões e TIE fighters.

    por @0xChuckstock · ver original ↗

    Prompt original

    A 3D multiplayer game where the players are a squad of x-wings taking on a star destroyer. They pilot their ships to take out key components of the star destroyer while also dealing with guns mounted on the star destroyer and waves of tie fighters.

    Ver lado a lado no Skillry ↗
  • 3D

    Filme de lançamento minimalista com tipografia animada, interface de produto, carrossel 3D de clipes verticais reais e logo final, a 120 BPM.

    por @twoclipping · ver original ↗

    Prompt original

    <inputs> Ask me for: the product name and a one-line promise, 3 to 5 UI moments to show, one accent color, 10 to 20 real vertical clips I own, and a royalty-free song with a clear drop (e.g. Mixkit, free for commercial use). </inputs> <direction> High-end minimal. One idea per shot, lots of empty space, one accent color, one clean sans (Geist or Inter) with tight tracking. Masked type reveals, match cuts, one smooth camera language. Real footage only, never placeholder cards. No full stops in on-screen text. Banned: shockwave rings, particle bursts, RGB split, camera shake, lens flares, neon glows, grid floors, flashing backgrounds, bouncy easing. </direction> <structure> 10 bars at 120 BPM, 2 seconds each. Bar 1: the hook lands word by word on the beats. Bar 2: one hook word morphs into the product UI. A cursor types and clicks. The drop: a circle opens out of the button into a dark scene. Then one move per bar: a wall of real clips with a scan line and 3 winners, the key output as big type, a 3D carousel of real videos with floor reflections and a motion-blurred whip onto one hero clip, the hero in a phone next to a panel that flips into results, big stats on push cuts, a 3-word ticker, a logo reveal, a fade to black. </structure> <build> 1. One HTML file at 1920x1080. Every style is computed from time inside http:// window.seek(t): no CSS animations, no timers, no state between frames. 2. Real video: extract clips to 30fps JPEG sequences with ffmpeg and swap img sources per frame. seek awaits the image decodes. 3. Analyze the song with numpy: tempo, beat grid, energy per bar, the drop. Calibrate the grid to the real kick hits. Every cut sits on a downbeat, every UI hit on a beat. 4. Render with Playwright: 3 subframes per frame at t minus, at, and plus 1/240s, then blend with ffmpeg tmix for real motion blur at 60fps. 5. Place each sound effect so its measured peak, not its file start, lands on the event. Keep the effects quiet under the music. Loudnorm to -14 LUFS. 6. Probe 20 or more frames before the full render. Fix anything cluttered, overlapping or hard to read. </build> <gotchas> Never set opacity or filter on a preserve-3d element, because it flattens and both faces show. Fade its wrapper instead. Measure element positions at runtime for match cuts. Only use music and sound effects whose license allows commercial use. </gotchas> <start> Ask me for the inputs, then show me a storyboard with every timing on the beat grid before you write any code. </start>

    Ver lado a lado no Skillry ↗
  • 3D

    Uma única forma que vira botão, loader, player, slider, aba, gráfico e comando ⌘K, guiada por cursor e no ritmo de 120 BPM.

    por @__morse · ver original ↗

    Prompt original

    <inputs> Ask me for: 8 to 12 UI states I want the shape to become (e.g. button, loader, player, slider, toggle, tabs, chart, command palette, toast), pure black and white or one accent color, and a royalty-free song around 120 BPM (e.g. Mixkit, free for commercial use). </inputs> <direction> Dribbble-level UI motion. One shape, never cut: every state is the same element morphing its size, radius and color while its content swaps with a short blur. A cursor drives every change with real clicks and drags. Light warm-gray canvas, black and white components, one clean UI font (Geist). Springs everywhere, a tiny overshoot at most. The camera zooms so each state fills the frame. The last frame is the first frame, so it loops. Banned: bouncy easing, particle bursts, glows, gradients on UI chrome, mismatched icon strokes, dead time, anything that looks like a template. </direction> <structure> 120 BPM, 7 bars, something happens on every beat. Button → loader → check → dynamic island → music player with a play/pause morph → scrub the progress bar → it becomes a volume slider that stretches when dragged past max → a toggle flips on the beat → the knob becomes a liquid tab indicator → the tabs open into a chart that draws itself, with a tooltip on hover → it collapses into ⌘K → type to filter → enter → toast → back to the button. </structure> <build> 1. One HTML file, square 1440x1440. Every style is computed from time inside seek(t): no CSS transitions, no timers, no state carried between frames. 2. Springs are closed-form step responses. A value that changes target many times is the sum of one spring per change, so it stays a pure function of time. 3. The tab indicator's two edges ride different springs, so the leading edge stretches ahead of the trailing one. Same trick for the toggle knob. 4. Drags are direct manipulation: while the cursor is held, the value is computed from its position. On release it springs back from wherever it was. 5. Analyze the song with numpy for the beat grid and start on a downbeat. Place every UI sound by its measured peak. 6. Render with Playwright: 4 subframes per frame, blended with ffmpeg tmix for motion blur at 60fps. 7. Render one frame per beat before the full render. Fix anything off the grid, cramped or hard to read. </build> <gotchas> Never put will-change on anything the camera scales or the text renders blurry. Text that swaps inside a morphing container needs its own enter and exit timing or it overlaps. Make the last frame identical to the first, cursor position and speed included, or the loop stutters. </gotchas> <start> Ask me for the inputs, then show me the state list on the beat grid before you write any code. </start>

    Ver lado a lado no Skillry ↗

Lista de 13/10/2026, commit 92aee2f do repositório original.

Perguntas rápidas

É grátis?

A coleção é grátis (licença MIT). O Claude que roda os prompts é pago: o Claude Code vem incluído no Claude Pro, que custava US$ 20 por mês na página oficial de preços em 18/10/2026. Em reais, guias de preço citam cerca de R$ 110 por mês (custosdeia.com.br, 04/10/2026); o valor muda com o câmbio e os impostos. Confira o valor atual em claude.com/pricing antes de assinar.

Precisa programar?

Não. Você cola o prompt e o Claude Code escreve e roda o código sozinho. Só precisa ter o Claude Code instalado e ler o que ele pede antes de aprovar.

Posso postar o vídeo?

Os vídeos originais são dos criadores. Refaça do seu jeito, com suas cores, seu texto e seu tema, e dê crédito ao criador do prompt (o @ de cada card).

Funciona no ChatGPT?

Os prompts foram feitos para o Claude Opus 5.5. Outros modelos podem dar um resultado diferente, ou não exportar o vídeo.

Curadoria original: yihui-dev/awesome-opus5-5-videos (licença MIT). Vídeos e prompts: cada criador, com link no card. Tradução, organização e resumos: Paulo Cauhi.

Continue aprendendo

Escolha um próximo passo prático.

Voltar para Guias

Baixe o guia em PDF

Receba o PDF deste guia e os próximos guias práticos por e-mail.

Você recebe o PDF e os próximos guias por e-mail. Cancele quando quiser. Privacidade

Comentários

Comentários

Ficou com alguma dúvida ou tem algo a acrescentar? Participe da conversa.

Sem precisar de conta. Clique em Entrar e escolha um nome para comentar.

Carregando a conversa…

Privacidade dos comentáriosDiretrizes para comentários