How to create
a motion.
You don’t need to know how to animate to begin. Start with a few words, turn them into a moving idea, and make it your own.
Make your first motion Beginner friendly · A browser + a Claude accountA good motion starts
with a clear idea.
A prompt is simply a description of what you want to make. Tell Claude what moves, how it moves, and what it should feel like.
Pick a starting point, then edit the words, colors or timing in the prompt. Small and specific is a good place to begin.
Need an idea? Explore the archiveWhat moves + how it moves + the feeling
A wordmark that gently slides into place, calm and minimal.
Select the prompt text and copy it manually. Open Claude to continue.
Now, bring it to life.
Open a new conversation in Claude and paste your prompt. Ask for an HTML artifact: a small, interactive page you can preview beside the chat.
When it appears, play the animation. You can ask for changes in the same conversation, using everyday language.
Open Claude Uses your Claude account and its usage limits.Look for the movement,
not perfection.
- Can you read the text comfortably?
- Does each move have a little room to breathe?
- Does the loop return smoothly to the start?
Only seeing code, or something broke?
Ask: “Show this as a working HTML artifact I can preview.” If there’s an error, paste its message back into the conversation and ask Claude to fix it.
One small change.
A different feeling.
Change one thing at a time. Try one of these follow-ups in the same conversation and see what happens.
Let it breathe.
“Slow the movement down by 25% and hold the final frame for one second. Keep the rest the same.”
Give it a little spring.
“Add a subtle overshoot when the shapes settle. Keep it gentle, with no extra bounce.”
Close the loop.
“Make the ending flow back into the beginning without a jump. Keep the same colors and layout.”
Keep the idea going.
Save the HTML file and open it in a browser to keep experimenting. Use Claude’s sharing options when you’re ready to show someone.
Need an MP4? This starter creates a browser animation. For a video file, explore a rendering workflow such as Remotion in the resource library.
Further help: Claude’s official guide to artifacts