Animation with Claude: from prompt to a finished Reels video

Create a motion graphics animation as a single HTML file.

FORMAT: [9:16, 1080x1920 for Reels / 4:5, 1080x1350 for feed / 16:9, 1920x1080]. Fixed stage scaled to fit the window.
DURATION: [10] seconds.
GOAL: [what the viewer should feel or understand]

TIMELINE:
[0.0s to 2.0s]: [what happens]
[2.0s to 4.0s]: [what happens]
[4.0s to 7.0s]: [what happens]
[7.0s to 10.0s]: [what happens]

VISUAL STYLE: [3 to 5 words, e.g. bold Swiss editorial, lots of negative space]
REFERENCES IN WORDS: [e.g. like a keynote title card, like a financial news ticker]
COLORS: background [#hex], main text [#hex], accent [#hex], secondary [#hex]
TYPOGRAPHY: headline [font, weight], body [font, weight] from Google Fonts. Armenian text uses Noto Sans Armenian. Keep all quoted text exactly as written.
MOTION RULES: easing [power3.out for entrances, power2.in for exits], no linear motion, stagger [0.1s] between items, one focal point per beat.
TRANSITIONS: [cut / mask wipe / push / zoom through], [0.4s], same type throughout.
SOUND: [silent, I will add music later / Web Audio synthesized effects at [120] BPM]
ENDING: [seamless loop back to the first frame / hold the end frame for [2] seconds]
SAFE ZONE: keep text and key elements away from the top and bottom areas where Instagram shows its interface, and away from the buttons on the right edge.

TECH: GSAP from cdnjs. Autoplay on load. Outside the stage add: Replay, a live timecode, and a toggle that shows the safe zone as an overlay.

Create a kinetic typography animation as a single HTML file, 9:16, fixed 1080x1920 stage scaled to fit the window.

Phrase: "[your phrase]"
Language: [Armenian / English]. If Armenian, use Noto Sans Armenian from Google Fonts and keep the text exactly as written inside the quotes.
Duration: [8] seconds. Rhythm: [120] BPM, so every word lands on a beat (0.5s).
Treatment: each word gets its own entrance (scale, slide, mask reveal or letter stagger). Vary them, but keep one visual system.
Hero word: "[key word]" is bigger, in the accent color [#E9EF00], and holds for at least 1.5 seconds.
Colors: background [#hex], text [#hex], accent [#hex]
Easing: power3.out or expo.out on entrances. A small overshoot only on the hero word.
End frame: the full phrase readable and still for the last 2 seconds.
Add Replay and a live timecode outside the stage.

Create a [4] second logo reveal as a single HTML file, [9:16, 1080x1920 / 16:9, 1920x1080] fixed stage scaled to fit the window.

Logo: here is my logo as SVG code: [paste SVG]. If I did not paste an SVG, build the logo from text: "[brand name]" in [font].
Brand colors: [#hex], [#hex], [#hex]
Mood: [premium and calm / playful and bouncy / techy and precise]

Sequence:
0.0s to 1.0s: anticipation, [a line, a dot or light gathers in the center]
1.0s to 2.5s: the logo builds from its own shapes (stroke draws first, then the fill)
2.5s to 3.2s: the tagline "[tagline]" fades up under the logo
3.2s to 4.0s: hold, perfectly still

Rules: one focal point at a time, no spinning, no glitch effects unless I ask. Ease out on arrivals and a subtle settle at the end.
Add Replay and a live timecode outside the stage.

Create a [15] second product explainer animation as a single HTML file, 9:16, fixed 1080x1920 stage scaled to fit the window.

Product: [name], [one sentence about what it does]
Audience: [who]

Scene 1 (0s to 5s), the problem: [e.g. a messy inbox with 40 unread messages]. Show it with simple flat UI shapes.
Scene 2 (5s to 10s), the solution: [feature name] in action. Animate a simplified app screen: [a cursor clicks X, a card slides in, a list sorts itself].
Scene 3 (10s to 15s), the result and CTA: "[result line]" and "[CTA]".

Style: clean flat UI, rounded cards, soft shadows. Colors: [#hex], [#hex], [#hex]
Transitions between scenes: [push / mask wipe / zoom through an element], 0.4s, the same type both times.
Text: max 6 words on screen at once. Each text block holds long enough to be read aloud twice.
Use GSAP from cdnjs. Add Replay and a live timecode outside the stage.

Create an animated data chart as a single HTML file, [9:16, 1080x1920] fixed stage scaled to fit the window, [10] seconds long.

Title: "[chart title]"
Chart type: [bar / line / donut]
Data (label: value):
[January: 120]
[February: 180]
[March: 260]
Unit: [followers / AMD / %]

Sequence: the title appears (0s to 1.5s), the axes draw (1.5s to 2.5s), values grow one by one while numbers count up (2.5s to 7s), the highest value is highlighted in [#accent] with a short note "[insight]" (7s to 10s).
Accuracy rule: bar heights and numbers must match the data exactly. Do not round or invent values.
Style: [minimal dark / light editorial], subtle gridlines, large numbers that are readable on a phone.
Add Replay and a live timecode outside the stage.

Create a seamless looping background animation as a single HTML file, [9:16, 1080x1920] fixed stage scaled to fit the window.

Loop length: [6] seconds. The last frame must match the first frame exactly, so the loop has no visible jump.
Visual: [e.g. slow flowing gradient blobs / rotating geometric grid / floating particles / wavy lines]
Colors: [#hex], [#hex], [#hex]
Mood: [calm / energetic / premium]
Motion: slow and continuous, no sudden changes. Build every movement from values that complete full cycles within the loop length (sine waves, full rotations).
Keep the center calm enough to place text on top later.
Use Canvas or CSS, whichever runs smoother. Add a timecode that resets every loop.

Act as a senior motion designer. Review this animation and upgrade it to professional quality without changing the concept, the text or the colors.

Apply these rules:
1) Easing: no linear motion anywhere except constant loops. Entrances ease out, exits ease in.
2) Anticipation and follow through: key elements get a tiny wind up before they move and a soft settle after they land.
3) Hold frames: every text block stays still long enough to be read aloud twice.
4) One focal point per beat: stagger elements that currently start at the same time.
5) Rhythm: snap all timings to a [0.5s] grid or to [120] BPM.
6) Hierarchy: one hero element per scene, clearly bigger or brighter than the rest.
7) Restraint: remove any effect that does not support the message.

First list the problems you found, with timestamps. Then give me the full updated file.

Add sound design to this animation using the Web Audio API only (no audio files).

Tempo: [120] BPM. Keep all main animation events on the beat grid.
Sounds to synthesize:
1) a soft whoosh on every text entrance
2) a short pop or click when [element] lands
3) a low kick on beats [1 and 3] of each bar
4) a gentle riser in the last [2] seconds before the CTA
Mix: effects quieter than the beat, nothing harsh or clipping, moderate master volume.
Browsers block audio until the user clicks, so add a large "Start with sound" button that starts the animation and the audio together from 0.0s, perfectly in sync.
The Replay button must restart both audio and animation from zero.