10 animation styles you can make with Claude, with a ready-to-copy prompt for each

Make me an animation in pixel art style, as if it were a scene from an old video game.

Story, 6 seconds, then it loops from the start with no cuts:
- 0 to 1 s: A red roadster sits on a platform in a city, with Kuwait Towers behind it (a large tower and a smaller tower, each with a sphere around it, and a third tower as thin as a needle). A person stands next to the car, and there's a crowd at the bottom of the screen.
- 1 to 2 s: Thrusters come out from under the wheels, and thick white smoke gathers under the car.
- 2 to 4 s: The car rises slowly, then faster. The smoke spreads, and the person raises both hands in shock.
- 4 to 6 s: The car hangs high in the air, swaying slightly, and the crowd cheers.
The car must read as a car at first glance: a long hood, a low cabin, and four wheels. Keep all elements large and clear, because the video is watched on a phone screen.

Style:
- Draw on an internal 180×320 Canvas, then scale it up with no smoothing (image-rendering: pixelated). All coordinates are integers.
- A palette of 24 colors at most. A sunset sky going from purple to pink to orange with a dithered gradient, a sun behind the city, and stars.
- The car, the person, and the crowd are sprites drawn pixel by pixel. The motion runs at 12 frames per second, in steps, not smooth.
- A video game touch: an ALT altitude counter climbing at the top of the screen, three hearts, a hanging sign that says ROADSTER, and someone in the crowd holding up a WOW sign.

Implementation:
- A single HTML file that opens in the browser, with everything drawn in code and no external images.
- The size is 1080×1920 portrait, scaled down with CSS to fit the window and centered.
- Every frame is computed from time alone: a window.seek(t) function draws moment t, in seconds, immediately. No Math.random (use a generator with a fixed seed), no timers or CSS transitions, and no state that builds up between frames.
- Playback: requestAnimationFrame calls seek with the time modulo 6. If the URL contains ?render, it doesn't play on its own.
- Set any text in a font from Google Fonts. Wait for it to load with document.fonts.ready before drawing, and draw each word whole, not letter by letter.

Make me an animation in the style of chalk drawing on a school chalkboard.

Story, 6 seconds, then it loops from the start with no cuts:
- 0 to 1 s: A red roadster sits on a platform in a city, with Kuwait Towers behind it (a large tower and a smaller tower, each with a sphere around it, and a third tower as thin as a needle). A person stands next to the car, and there's a crowd at the bottom of the screen.
- 1 to 2 s: Thrusters come out from under the wheels, and thick white smoke gathers under the car.
- 2 to 4 s: The car rises slowly, then faster. The smoke spreads, and the person raises both hands in shock.
- 4 to 6 s: The car hangs high in the air, swaying slightly, and the crowd cheers.
The car must read as a car at first glance: a long hood, a low cabin, and four wheels. Keep all elements large and clear, because the video is watched on a phone screen.

Style:
- A dark green chalkboard with a wooden frame and faint eraser marks.
- Everything is white chalk lines, slightly shaky with a rough texture, drawing themselves on screen as if by a hand, with a little colored chalk: yellow, blue, and red.
- Written in handwriting at the top: "Today's lesson: Why does it fly?" Below it, an equation: "Thrust > Weight", with a check mark beside it that appears the moment the car lifts off.
- A yellow thrust arrow rises with the car, and a blue weight arrow points down. The person and the crowd are stick figures, the smoke is overlapping chalk circles, and light chalk dust drifts in the air.

Implementation:
- A single HTML file that opens in the browser, with everything drawn in code and no external images.
- The size is 1080×1920 portrait, scaled down with CSS to fit the window and centered.
- Every frame is computed from time alone: a window.seek(t) function draws moment t, in seconds, immediately. No Math.random (use a generator with a fixed seed), no timers or CSS transitions, and no state that builds up between frames.
- Playback: requestAnimationFrame calls seek with the time modulo 6. If the URL contains ?render, it doesn't play on its own.
- Set any text in a font from Google Fonts. Wait for it to load with document.fonts.ready before drawing, and draw each word whole, not letter by letter.

Make me an animation in a glowing sketch style: thin neon lines on black.

Story, 6 seconds, then it loops from the start with no cuts:
- 0 to 1 s: A red roadster sits on a platform in a city, with Kuwait Towers behind it (a large tower and a smaller tower, each with a sphere around it, and a third tower as thin as a needle). A person stands next to the car, and there's a crowd at the bottom of the screen.
- 1 to 2 s: Thrusters come out from under the wheels, and thick white smoke gathers under the car.
- 2 to 4 s: The car rises slowly, then faster. The smoke spreads, and the person raises both hands in shock.
- 4 to 6 s: The car hangs high in the air, swaying slightly, and the crowd cheers.
The car must read as a car at first glance: a long hood, a low cabin, and four wheels. Keep all elements large and clear, because the video is watched on a phone screen.

Style:
- A nearly black background. The car is thin lines with no fill, drawing itself line by line during the first second in gold, red, and a soft purple.
- Real glow: layers of lines with shadowBlur and globalCompositeOperation = lighter.
- The thrust is soft golden columns of light coming down from the wheels, and glowing concentric circles expand on the ground.
- The city and Kuwait Towers are very faint lines, the person is a thin sketch, and the crowd is thin, faint arcs at the bottom. Leave large areas of black.

Implementation:
- A single HTML file that opens in the browser, with everything drawn in code and no external images.
- The size is 1080×1920 portrait, scaled down with CSS to fit the window and centered.
- Every frame is computed from time alone: a window.seek(t) function draws moment t, in seconds, immediately. No Math.random (use a generator with a fixed seed), no timers or CSS transitions, and no state that builds up between frames.
- Playback: requestAnimationFrame calls seek with the time modulo 6. If the URL contains ?render, it doesn't play on its own.
- Set any text in a font from Google Fonts. Wait for it to load with document.fonts.ready before drawing, and draw each word whole, not letter by letter.

Make me an animation in the style of PlayStation 2 games, as if it were a cutscene from a 2003 game.

Story, 6 seconds, then it loops from the start with no cuts:
- 0 to 1 s: A red roadster sits on a platform in a city, with Kuwait Towers behind it (a large tower and a smaller tower, each with a sphere around it, and a third tower as thin as a needle). A person stands next to the car, and there's a crowd at the bottom of the screen.
- 1 to 2 s: Thrusters come out from under the wheels, and thick white smoke gathers under the car.
- 2 to 4 s: The car rises slowly, then faster. The smoke spreads, and the person raises both hands in shock.
- 4 to 6 s: The car hangs high in the air, swaying slightly, and the crowd cheers.
The car must read as a car at first glance: a long hood, a low cabin, and four wheels. Keep all elements large and clear, because the video is watched on a phone screen.

Style:
- Render at a low 360×640 resolution, then scale up with no smoothing. Add light color reduction with dithering after the render.
- Everything is low poly with visible edges: the car, the buildings, and people with blocky bodies. Textures are small, 64×64, drawn in code, with a Nearest filter.
- Old-style lighting: flat shading, purple fog, a sky graded from pink to purple, and buildings with lit windows.
- The camera moves slowly around the car, like a game cutscene. The smoke is flat, pale sprites facing the camera.

Implementation:
- A single HTML file that opens in the browser, with everything drawn in code and no external images.
- The size is 1080×1920 portrait, scaled down with CSS to fit the window and centered.
- Every frame is computed from time alone: a window.seek(t) function draws moment t, in seconds, immediately. No Math.random (use a generator with a fixed seed), no timers or CSS transitions, and no state that builds up between frames.
- Playback: requestAnimationFrame calls seek with the time modulo 6. If the URL contains ?render, it doesn't play on its own.
- Set any text in a font from Google Fonts. Wait for it to load with document.fonts.ready before drawing, and draw each word whole, not letter by letter.
- Use Three.js through an importmap, from https://unpkg.com/three@0.160.0/build/three.module.js with add-ons from https://unpkg.com/three@0.160.0/examples/jsm/ and set preserveDrawingBuffer: true on the renderer. Build every object in code, with no ready-made models.

Make me an animation in the style of classic American comics.

Story, 6 seconds, then it loops from the start with no cuts:
- 0 to 1 s: A red roadster sits on a platform in a city, with Kuwait Towers behind it (a large tower and a smaller tower, each with a sphere around it, and a third tower as thin as a needle). A person stands next to the car, and there's a crowd at the bottom of the screen.
- 1 to 2 s: Thrusters come out from under the wheels, and thick white smoke gathers under the car.
- 2 to 4 s: The car rises slowly, then faster. The smoke spreads, and the person raises both hands in shock.
- 4 to 6 s: The car hangs high in the air, swaying slightly, and the crowd cheers.
The car must read as a car at first glance: a long hood, a low cabin, and four wheels. Keep all elements large and clear, because the video is watched on a phone screen.

Style:
- Two panels: a large top panel with the city and the car, and a smaller bottom panel with the person's shocked face and a speech bubble saying "Holy smokes!"
- Ben-Day halftone dots in the sky and the shadows, thick 8-pixel black lines, and flat primary colors: red, yellow, and blue.
- A yellow and red comic burst with "WHOOOSH!" in bold type, swelling hard at the moment of takeoff, with speed lines.
- The motion runs at 8 frames per second, like hand drawing, and the smoke is white clouds outlined in black.

Implementation:
- A single HTML file that opens in the browser, with everything drawn in code and no external images.
- The size is 1080×1920 portrait, scaled down with CSS to fit the window and centered.
- Every frame is computed from time alone: a window.seek(t) function draws moment t, in seconds, immediately. No Math.random (use a generator with a fixed seed), no timers or CSS transitions, and no state that builds up between frames.
- Playback: requestAnimationFrame calls seek with the time modulo 6. If the URL contains ?render, it doesn't play on its own.
- Set any text in a font from Google Fonts. Wait for it to load with document.fonts.ready before drawing, and draw each word whole, not letter by letter.

Make me an animation in a flat vector style: clean flat shapes, like explainer films.

Story, 6 seconds, then it loops from the start with no cuts:
- 0 to 1 s: A red roadster sits on a platform in a city, with Kuwait Towers behind it (a large tower and a smaller tower, each with a sphere around it, and a third tower as thin as a needle). A person stands next to the car, and there's a crowd at the bottom of the screen.
- 1 to 2 s: Thrusters come out from under the wheels, and thick white smoke gathers under the car.
- 2 to 4 s: The car rises slowly, then faster. The smoke spreads, and the person raises both hands in shock.
- 4 to 6 s: The car hangs high in the air, swaying slightly, and the crowd cheers.
The car must read as a car at first glance: a long hood, a low cabin, and four wheels. Keep all elements large and clear, because the video is watched on a phone screen.

Style:
- Flat shapes with no outlines and no gradients. A navy night, a large cream moon, and stars as small dots.
- City layers in three shades of blue, with Kuwait Towers as a distinct layer, and a crowd of round heads in different skin tones at the bottom of the screen.
- The smoke is cream circles that grow and overlap, and the thrust is orange triangles.
- Very smooth motion with squash and stretch: the car compresses before takeoff and stretches as it rises, and everything eases in and out.

Implementation:
- A single HTML file that opens in the browser, with everything drawn in code and no external images.
- The size is 1080×1920 portrait, scaled down with CSS to fit the window and centered.
- Every frame is computed from time alone: a window.seek(t) function draws moment t, in seconds, immediately. No Math.random (use a generator with a fixed seed), no timers or CSS transitions, and no state that builds up between frames.
- Playback: requestAnimationFrame calls seek with the time modulo 6. If the URL contains ?render, it doesn't play on its own.
- Set any text in a font from Google Fonts. Wait for it to load with document.fonts.ready before drawing, and draw each word whole, not letter by letter.

Make me an animation in the style of simple, reflective videos like the Dan Koe channel: white on black with no color at all.

Story, 6 seconds, then it loops from the start with no cuts:
- 0 to 1 s: A red roadster sits on a platform in a city, with Kuwait Towers behind it (a large tower and a smaller tower, each with a sphere around it, and a third tower as thin as a needle). A person stands next to the car, and there's a crowd at the bottom of the screen.
- 1 to 2 s: Thrusters come out from under the wheels, and thick white smoke gathers under the car.
- 2 to 4 s: The car rises slowly, then faster. The smoke spreads, and the person raises both hands in shock.
- 4 to 6 s: The car hangs high in the air, swaying slightly, and the crowd cheers.
The car must read as a car at first glance: a long hood, a low cabin, and four wheels. Keep all elements large and clear, because the video is watched on a phone screen.

Style:
- A pure black background and white only, with no second color and no glow. Even the car and the smoke are white here, and the smoke is small dots.
- The car is very thin lines with a dot at every corner, like a constellation. The person is a very small stick figure beside it, to show scale.
- Under each wheel, concentric dotted rings expand slowly, and thin vertical lines connect the wheels to the ground.
- The crowd is rows of white dots at the bottom, pulsing in a calm wave. The city and Kuwait Towers are a single thin line on the horizon.
- Everything is slow and calm, with large black areas and no text at all.

Implementation:
- A single HTML file that opens in the browser, with everything drawn in code and no external images.
- The size is 1080×1920 portrait, scaled down with CSS to fit the window and centered.
- Every frame is computed from time alone: a window.seek(t) function draws moment t, in seconds, immediately. No Math.random (use a generator with a fixed seed), no timers or CSS transitions, and no state that builds up between frames.
- Playback: requestAnimationFrame calls seek with the time modulo 6. If the URL contains ?render, it doesn't play on its own.
- Set any text in a font from Google Fonts. Wait for it to load with document.fonts.ready before drawing, and draw each word whole, not letter by letter.

Make me an animation in a realistic, cinematic CGI style.

Story, 6 seconds, then it loops from the start with no cuts:
- 0 to 1 s: A red roadster sits on a platform in a city, with Kuwait Towers behind it (a large tower and a smaller tower, each with a sphere around it, and a third tower as thin as a needle). A person stands next to the car, and there's a crowd at the bottom of the screen.
- 1 to 2 s: Thrusters come out from under the wheels, and thick white smoke gathers under the car.
- 2 to 4 s: The car rises slowly, then faster. The smoke spreads, and the person raises both hands in shock.
- 4 to 6 s: The car hangs high in the air, swaying slightly, and the crowd cheers.
The car must read as a car at first glance: a long hood, a low cabin, and four wheels. Keep all elements large and clear, because the video is watched on a phone screen.

Style:
- MeshStandardMaterial with ACES tone mapping, bloom through UnrealBloomPass, and an environment map generated in code. A polished car with clear reflections.
- A night city of dark blocks with thousands of lit windows, Kuwait Towers lit up behind the car, and thick fog made of soft sprites.
- Under the car, a blue energy ring on a glossy floor, a warm white column of light from the thrusters, and rising steam.
- The camera sits low and moves slowly forward, with a vignette and light film grain.
- A bold title at the top: "What if your car could fly?" At takeoff, one big word in the center: "Liftoff." over a yellow rectangle.

Implementation:
- A single HTML file that opens in the browser, with everything drawn in code and no external images.
- The size is 1080×1920 portrait, scaled down with CSS to fit the window and centered.
- Every frame is computed from time alone: a window.seek(t) function draws moment t, in seconds, immediately. No Math.random (use a generator with a fixed seed), no timers or CSS transitions, and no state that builds up between frames.
- Playback: requestAnimationFrame calls seek with the time modulo 6. If the URL contains ?render, it doesn't play on its own.
- Set any text in a font from Google Fonts. Wait for it to load with document.fonts.ready before drawing, and draw each word whole, not letter by letter.
- Use Three.js through an importmap, from https://unpkg.com/three@0.160.0/build/three.module.js with add-ons from https://unpkg.com/three@0.160.0/examples/jsm/ and set preserveDrawingBuffer: true on the renderer. Build every object in code, with no ready-made models.

Make me an animation in the style of plastic building bricks, as if it were a stop-motion film.

Story, 6 seconds, then it loops from the start with no cuts:
- 0 to 1 s: A red roadster sits on a platform in a city, with Kuwait Towers behind it (a large tower and a smaller tower, each with a sphere around it, and a third tower as thin as a needle). A person stands next to the car, and there's a crowd at the bottom of the screen.
- 1 to 2 s: Thrusters come out from under the wheels, and thick white smoke gathers under the car.
- 2 to 4 s: The car rises slowly, then faster. The smoke spreads, and the person raises both hands in shock.
- 4 to 6 s: The car hangs high in the air, swaying slightly, and the crowd cheers.
The car must read as a car at first glance: a long hood, a low cabin, and four wheels. Keep all elements large and clear, because the video is watched on a phone screen.

Style:
- Everything is built from shiny plastic bricks with visible studs on top: a large green base, stacked yellow, red, and green buildings, a red brick car, and Kuwait Towers made of round pieces.
- The person is a small figure with a yellow cylindrical head and square arms, with no detailed face and no logo of any kind.
- The smoke is round white pieces that appear and disappear one at a time.
- The motion runs at 12 frames per second, like stop motion: the car hops in small steps and the bricks rise one by one.
- A light blue sky, soft sunlight with clear shadows, and a fixed camera placed slightly close.

Implementation:
- A single HTML file that opens in the browser, with everything drawn in code and no external images.
- The size is 1080×1920 portrait, scaled down with CSS to fit the window and centered.
- Every frame is computed from time alone: a window.seek(t) function draws moment t, in seconds, immediately. No Math.random (use a generator with a fixed seed), no timers or CSS transitions, and no state that builds up between frames.
- Playback: requestAnimationFrame calls seek with the time modulo 6. If the URL contains ?render, it doesn't play on its own.
- Set any text in a font from Google Fonts. Wait for it to load with document.fonts.ready before drawing, and draw each word whole, not letter by letter.
- Use Three.js through an importmap, from https://unpkg.com/three@0.160.0/build/three.module.js with add-ons from https://unpkg.com/three@0.160.0/examples/jsm/ and set preserveDrawingBuffer: true on the renderer. Build every object in code, with no ready-made models.

Make me an animation in the style of educational 3D Shorts like the Zack D. Films channel.

Story, 6 seconds, then it loops from the start with no cuts:
- 0 to 1 s: A red roadster sits on a platform in a city, with Kuwait Towers behind it (a large tower and a smaller tower, each with a sphere around it, and a third tower as thin as a needle). A person stands next to the car, and there's a crowd at the bottom of the screen.
- 1 to 2 s: Thrusters come out from under the wheels, and thick white smoke gathers under the car.
- 2 to 4 s: The car rises slowly, then faster. The smoke spreads, and the person raises both hands in shock.
- 4 to 6 s: The car hangs high in the air, swaying slightly, and the crowd cheers.
The car must read as a car at first glance: a long hood, a low cabin, and four wheels. Keep all elements large and clear, because the video is watched on a phone screen.

Style:
- Smooth, simple models without much detail, matte materials, and calm natural colors: a bluish gray sky and light sandy ground.
- The red car is large in the frame and close to the camera. The camera passes beside it and follows it as it rises.
- Soft sunlight with one clear shadow, depth from light fog, and the city and Kuwait Towers far away and faded.
- The smoke is soft white balls that swell, with small bursts of flame from under the wheels.
- One simple white caption in the middle of the screen at the moment of takeoff: "Liftoff."

Implementation:
- A single HTML file that opens in the browser, with everything drawn in code and no external images.
- The size is 1080×1920 portrait, scaled down with CSS to fit the window and centered.
- Every frame is computed from time alone: a window.seek(t) function draws moment t, in seconds, immediately. No Math.random (use a generator with a fixed seed), no timers or CSS transitions, and no state that builds up between frames.
- Playback: requestAnimationFrame calls seek with the time modulo 6. If the URL contains ?render, it doesn't play on its own.
- Set any text in a font from Google Fonts. Wait for it to load with document.fonts.ready before drawing, and draw each word whole, not letter by letter.
- Use Three.js through an importmap, from https://unpkg.com/three@0.160.0/build/three.module.js with add-ons from https://unpkg.com/three@0.160.0/examples/jsm/ and set preserveDrawingBuffer: true on the renderer. Build every object in code, with no ready-made models.

I have an HTML file with an animation and a window.seek(t) function. Export it as an MP4 video at 1080×1920, 30 frames per second, 6 seconds long: open the file in a headless browser through Puppeteer and add ?render to the URL. On each frame, call seek and take a screenshot, then combine the screenshots with FFmpeg.