Claude-animatie: animaties maken met Claude en deze naar uw app verzenden
Animatie maken met Claude: Claude Design, Claude Beweging, artefacten en Claude Code, wat elke output oplevert, en hoe je een door Claude gemaakte animatie in een echte app kunt krijgen.
Kern afhaalmaaltijd
U kunt op drie manieren animatie maken met Claude: Claude Design of Claude Motion voor visuele uitvoer, Claude-artefacten voor HTML-, CSS- en JavaScript-demo's, en Claude Code die animatiecode schrijft of andere tools aanstuurt via MCP. Ieder levert je een ontwerp, een videobestand of code op die nog in je product moet worden geplaatst. Een animatie die in een echte app moet worden uitgevoerd, heeft een formaat nodig dat de app kan uitvoeren, dus de meeste door Claude gemaakte bewegingen worden aan een runtime doorgegeven voordat deze wordt verzonden.
Over deze gids
ExodeUI is niet aangesloten bij Anthropic. Claude is een handelsmerk van Anthropic. Deze handleiding beschrijft wat Claude voor beweging kan produceren, gebaseerd op de eigen documentatie van Anthropic, en wat er nodig is om die beweging in een geleverde app te krijgen.
Manieren om animaties te maken met Claude
Claude kan beweging in een aantal verschillende vormen produceren, en ze zijn niet uitwisselbaar. Welke u gebruikt, bepaalt wat u krijgt en hoeveel werk er nog overblijft.
- Claude Design: chat met Claude om ontwerpen en interactieve prototypes op een canvas te krijgen. Het is inbegrepen bij de Free-, Pro-, Max-, Team- en Enterprise-abonnementen, en de zelfstandige site op claude.ai/design sluit op 14 december 2026.
- Claude Motion: verandert uw prompt en bestanden in een korte animatie, gebouwd als code die wordt afgespeeld als een video en wordt geëxporteerd als MP4. Het bevindt zich in de bètafase voor Team- en Enterprise-abonnementen en maakt geen gebruik van een videomodel, dus het kan geen realistische beelden of mensen maken.
- Claude-artefacten: uitvoerbare HTML, CSS en JavaScript die een voorbeeld bekijken in een gesprek, wat snel is voor een bewegingsdemo.
- Claude Code: schrijft animatiecode in uw repository of bewerkt tools via MCP, inclusief de ExodeUI MCP-server.
Tips die betere bewegingen produceren
Vage aanwijzingen krijgen vage bewegingen. Claude speelt in op de details waar een motion designer sowieso om zou vragen: de eigenschap, de hoeveelheid, de timing, de trigger en de toestanden. Benoem ze in plaats van een gevoel te beschrijven.
Noem de versoepeling en de duur
Zeg 'veer met een lichte veerkracht' of 'ontspan over 200 ms' in plaats van 'soepel'. Een waarde die het model kan gebruiken, is beter dan een bijvoeglijk naamwoord.
Geef de trigger een naam
Zeg waar het mee begint: 'bij tikken', 'bij zweven' of 'wanneer de lijst klaar is met laden'. Beweging met een trigger kan later aan een echte gebeurtenis worden gekoppeld.
Noem de staten
Noem ze bijvoorbeeld "inactief, ingedrukt, laden, succes, fout", zodat je een kleine statusmachine krijgt in plaats van een enkele animatie.
Geef het platform en de limieten een naam
Geef aan of de uitvoer React, SwiftUI of een webdemo is, en wat deze niet mag doen, bijvoorbeeld "alleen transformatie en dekking animeren".
Waarom een demo-animatie niet productieklaar is
Claude kan animatiecode produceren die er goed uitziet in de preview en nog werk nodig heeft voordat deze wordt verzonden. De kloof is niet de kwaliteit, maar de vorm van de output.
- Het is meestal eenmalige code voor één scherm, geen herbruikbaar onderdeel
- Het heeft vaak één enkele status en geen logica voor laden, fouten, uitgeschakelde of onderbroken interacties
- Het is geschreven voor één platform, dus een React-versie zal niet op iOS draaien zonder herschreven te worden
- Timing en versoepeling zitten in de code, dus een ontwerper kan deze niet veranderen zonder een ontwikkelaar
- Alles dat bedoeld is om opnieuw te worden gebruikt, heeft een bestandsindeling nodig die de app kan uitvoeren, en niet een fragment dat in één component is geplakt
Verzending van door Claude gemaakte animaties met de MCP-server van ExodeUI
ExodeUI is een browser- en desktoptool voor interactieve gebruikersinterface en animatie. Een animatie bevindt zich in één open .exode-bestand met de lay-out, tijdlijn, toestandsmachines, veerfysica en logica. Runtimepakketten spelen dat bestand af in React, Vue, Svelte, Angular, Solid, React Native, SwiftUI en Flutter, dus dezelfde animatie wordt in de app uitgevoerd in plaats van voor elk platform opnieuw te worden opgebouwd. ExodeUI stelt een MCP-server ter beschikking met meer dan 100 tools (bouwen, animeren, logica en fysica toevoegen, synchroniseren met de live-editor, exporteren), zodat Claude Code-, Cursor-, OpenCode- en andere MCP-clients het bestand kunnen maken en bewerken via aanwijzingen in eenvoudige taal. De installatie bevindt zich in het product en niet in een script, dus er is geen opdracht om te kopiëren: schakel MCP in in de ExodeUI-instellingen en verbind vervolgens uw client zoals u verbinding maakt met een MCP-server. Wij maken ExodeUI, dus bekijk ook de alternatieven.
1. Schakel MCP in ExodeUI in
Schakel in de ExodeUI-instellingen de MCP-server in. Het publiceert de tools die een AI-coderingsclient gebruikt om het bestand te bouwen en te bewerken.
2. Verbind uw klant
Wijs Claude Code, Cursor, OpenCode of een MCP-client op de ExodeUI-server, op dezelfde manier waarop u deze verbindt met andere MCP-servers.
3. Beschrijf de beweging
Vraag naar de animatie in begrijpelijke taal. De agent bewerkt het .exode-bestand en de wijziging wordt weergegeven in de ExodeUI-editor.
4. Verzend hetzelfde bestand
Geef het .exode-bestand weer via de ExodeUI-runtime in React, SwiftUI, Flutter en meer, en stuur de invoer en status ervan uit uw code.
Claude Design versus Claude Code + ExodeUI
Beide routes beginnen met een prompt en eindigen met beweging in uw product. Ze verschillen in wat er daartussen gebeurt: Claude Design bewaart het werk in een ontwerpcanvas, terwijl Claude Code plus ExodeUI het in een bestand bewaart dat wordt uitgevoerd.
Wat je krijgt
Claude Design: een ontwerp of een klikbaar prototype, plus een overdrachtsbundel voor Claude Code. Claude Code + ExodeUI: een .exode-bestand dat als component wordt afgespeeld.
Waar de animatie draait
Claude Design: in het ontwerpcanvas en in gedeelde prototypes. Claude Code + ExodeUI: in de app, op internet, iOS en Android, reagerend op input en data.
Bewerken na overdracht
Claude Design: verander het ontwerp en geef het dan opnieuw door. Claude Code + ExodeUI: een ontwerper bewerkt hetzelfde bestand dat de app uitvoert, zonder opnieuw te bouwen.
Waar Claude Design wint
Het verkennen van vele visuele richtingen, presenteren aan belanghebbenden en het produceren van statisch of prototypewerk voor elk plan, inclusief het gratis plan.
Waar ExodeUI wint
Beweging die moet worden verzonden, met toestanden, fysica en invoer, hergebruikt op verschillende platforms vanuit één enkel bestand.
Productie-implementatiefragment
import { ExodeUICanvas } from 'exodeui';
// Claude Code builds and edits /fluid_card.bexode through the ExodeUI
// MCP server. Your code passes inputs in and hears events back.
export function FluidCard() {
return (
<ExodeUICanvas
src="/fluid_card.bexode"
onTrigger={(name) => console.log('ExodeUI event:', name)}
/>
);
}Toets Principles in om te onthouden
- Claude Design en Claude Motion produceren visueel werk, en Claude Code produceert code, maar geen daarvan is runtime
- Een animatie wordt pas verzonden als deze een formaat heeft dat de app kan uitvoeren en is aangesloten op echte statussen en invoer
- Noem de versoepeling, de trigger en de toestanden in uw prompt om beweging te krijgen die u daadwerkelijk kunt gebruiken
- Met de MCP-server van ExodeUI kan Claude Code één .exode-bestand maken en bewerken dat wordt uitgevoerd in React, SwiftUI, Flutter en meer