Claude animation prompts

Write the motion as a sequence

Say what is on screen before anything moves, then each beat in order: what moves, how far, for how long, with which easing, and how long after the previous beat. Give distances in px or em and times in seconds. "Smooth" and "snappy" are not instructions. "0.7s, cubic-bezier(0.2, 0.8, 0.2, 1), 0.06s between words" is.

Say what must not happen: no layout shift, no replay on scroll, no movement under reduced motion.

Keep the numbers where you can reach them

Ask for one object, called TIMING or similar, holding every duration, delay, distance and easing. Then a correction is a one-line message: "TIMING.stagger 0.06 to 0.09". Without it the same value is repeated in a stylesheet, a component and a keyframe, and Claude changes two of the three.

Correct by what you saw, in order

After a run in slow mode, describe the fault by beat and by time: which element, when, and what it did. If you can, record the screen, take two or three still frames and put them in the project folder for Claude Code to read. Ask it to say back what it thinks is wrong before it changes anything. For effects that need a shader or physics, starting from a finished one is quicker than converging on it by correction.

What a Claude animation prompt should contain

• The files it may touch, and no others.
• The resting picture before and after the motion.
• Each beat: element, distance, duration, easing, delay.
• One TIMING object for every number.
• A slow mode behind a URL switch.
• Limits: plays once, no layout shift, reduced-motion and phone versions.

A prompt to start from

Add one animation to this project: a staggered headline reveal in the hero. Touch only src/components/HeroTitle.tsx and its CSS file.

What happens: on load the headline "[your headline]" is hidden. Each word rises 0.9em from behind a clipped line and settles, one after another, left to right. Then a 2px underline draws under the last word, left to right.

Numbers:
- Per word: 0.7s, cubic-bezier(0.2, 0.8, 0.2, 1).
- Delay between words: 0.06s. Start 0.15s after the fonts are ready.
- Underline: 0.5s, starting 0.1s after the last word lands, colour #e2502d.
- Headline: [typeface], 104px desktop / 46px phone, line-height 1, colour #15140f on #f4f1ea.

How to build it: Vite + React + TypeScript and plain CSS. Split the text into words in the component; wrap each in a span with overflow hidden and animate an inner span with transform only. CSS keyframes, with the delay passed in a custom property. No animation library. Keep the full sentence in an aria-label so a screen reader gets it once.

Put every number above in one object at the top of the file, named TIMING, so I can tune it without reading the rest.

Add a debug switch: with ?slow=1 in the URL, everything runs 5 times slower.

It plays once, never on scroll, and must not shift the layout: reserve the headline's final height before it starts.

Phones: the same motion, but the rise is 0.6em and the delay 0.04s. With prefers-reduced-motion, show the finished headline and underline at once, with no movement.

Run it. Load the page with ?slow=1, check that no word is clipped at rest, and tell me the total duration the numbers predict.

Written for this page as a starting point; swap the parts in [brackets] for your own. The full prompt of each uberdesigner template is longer and specific to one finished design, and it is tested by rebuilding the template from the prompt alone.

Keep reading

• How to prompt Claude for designThe working method for design work with Claude and Claude Code: brief, plan first, build, run and look, then correct with specifics.
• Connecting uberdesigner to Claude Code over MCPHow to add the uberdesigner MCP server to Claude Code, sign in, and what to ask once the template library is connected.

• Whole sites
• Landing pages
• Components
• Artifacts
• Redesigns
• Dashboards