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

Make me an animation in an ink drawing style, like a hand-drawn stick figure story.

Story, 6 seconds, then it loops from the start with no cuts:
- 0 to 1.5 s: A Kuwaiti diwaniya. Three stick figures in white dishdashas and white ghutras sit on floor cushions, with an Arabic coffee pot (dallah) and small cups between them. Above them, a wooden sign reads "The diwaniya before phones".
- 1.5 to 3 s: They chat and laugh, speech bubbles reading "hahaha" pop up above them, and one of them pours coffee for his friends.
- 3 to 4.5 s: The sign flips over and now reads "The diwaniya today". Each of them holds a phone with his head down, their faces lit by blue light, and above them is a bubble with just "..." in it.
- 4.5 to 6 s: The coffee pot, left on its own, sighs, and steam rises from it in the shape of a question mark.

Style:
- Thick black ink lines drawn with a slightly shaky hand. The lines wobble lightly 8 times per second, like hand-drawn animation.
- Light flat colors inside the lines: a beige wall, a red carpet with a simple pattern, and white ghutras and dishdashas.
- Faces are circles with dot eyes and exaggerated expressions. The motion is simple hops, not overly smooth.
- In the background, a window and an old window AC unit. Keep the details sparse so the drawing stays clean.

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.
- Keep all elements large and clear, because the video is watched on a phone screen.

Make me an animation in a neon silhouette style: a moody scene at sunset.

Story, 6 seconds, then it loops from the start with no cuts:
- 0 to 2 s: A dark room. A student sits at a desk, drawn as a solid black silhouette with glowing white eyes. Outside the window is a purple and orange sunset sky and the Kuwait City skyline: Kuwait Towers, Liberation Tower, and Al Hamra Tower. A hanging desk lamp casts a cone of yellow light. On the desk are a flip clock showing 11:59 and a laptop with a file upload bar.
- 2 to 4 s: The bar advances slowly until it gets stuck at 99%, and the student leans toward the screen as his eyes grow wider.
- 4 to 4.5 s: The bar completes and "Submitted" appears with a green check mark. Right after that, the clock flips to 12:00.
- 4.5 to 6 s: The student slumps back in his chair, relieved.
- At the top of the screen, a title in thin, widely spaced letters: "Last minute".

Style:
- Pure black silhouettes for the person and the furniture. The light comes from two sources, the sunset through the window and the lamp, with a soft glow around each.
- Colors: deep purple and navy, an orange and pink sunset, amber lamplight, and faint stars above the city.
- The flip clock flips its cards in two halves, like a real one.
- Light dust floats in the cone of light, and the laptop's blue light falls on the silhouette's face.

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.
- Keep all elements large and clear, because the video is watched on a phone screen.

Make me an animation in a 3D engineering blueprint style, as if an engineer were explaining it.

Story, 6 seconds, then it loops from the start with no cuts:
- 0 to 1.5 s: A split air conditioner: the outdoor unit (a box with a large fan) and the indoor unit on a wall, with two pipes between them. They enter the frame rotating slowly, with a title at the top: "How an AC works".
- 1.5 to 3 s: The outdoor unit's cover turns transparent, revealing the compressor (a cylinder) and the condenser coil (zigzag pipes), while the fan spins.
- 3 to 5 s: Lines of light travel through the pipes in a cycle: hot red from the compressor to the condenser, with heat arrows coming out of it to the outside. Then they turn cold blue and flow to the indoor unit, which blows out cold air as wavy blue lines.
- 5 to 6 s: The camera holds still with all the labels visible.
- The labels appear one at a time with thin leader lines: "Compressor", "Condenser", "Evaporator", "Cold air".

Style:
- A royal blue background with a thin white engineering grid, thicker lines every five squares, and darker edges.
- The objects are white and light gray with soft lighting and light shadows, like a clean engineering model, with their edges outlined in white.
- Heat lines are glowing orange and red, cold lines are sky blue, and they keep moving continuously.
- The labels are in clear white type, and each leader line draws itself before its text appears.

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.
- Keep all elements large and clear, because the video is watched on a phone screen.
- 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 a cinematic space style, as if it were a shot from a movie.

Story, 6 seconds, then it loops from the start with no cuts:
- 0 to 2 s: A black hole in the center: a pure black circle surrounded by a spinning, glowing gold and orange disk. Gravity bends the disk over and under the hole, with stars behind them.
- 2 to 4 s: A bluish-white star approaches from the edge and stretches into a long thread of light that wraps around the hole.
- 4 to 5 s: The thread falls into the disk, there's a strong flash, and the disk shines brighter.
- 5 to 6 s: Calm returns, and the disk keeps spinning.
- At the bottom, in small type: "A black hole swallows a star".

Style:
- Cinematic lighting: a soft glow, very light film grain, and dark edges.
- The disk's colors run from hot white on the inside to orange and red at the edges, with streaks and details spinning at different speeds.
- The camera is tilted slightly and pushes in slowly throughout the scene.
- Make the disk and the bending of light with a shader inside Three.js.

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.
- Keep all elements large and clear, because the video is watched on a phone screen.
- 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 a flat corporate cartoon style, like marketing explainer videos.

Story, 6 seconds, then it loops from the start with no cuts:
- 0 to 1 s: A Kuwaiti employee in a dishdasha and ghutra stands next to a whiteboard with a chart titled "Your balance", and the line is high up. A banner at the top of the screen reads "Payday". The employee is smiling, with paper money flying around him.
- 1 to 3.5 s: The banner turns into a day counter (Day 1, 2, 3, up to 7). With each day a spending icon pops up: a coffee cup, a delivery bag, a shopping bag, a movie ticket. The line drops a step with each one.
- 3.5 to 4.5 s: The line crashes down with a big red arrow, the banner says "One week later", and the employee puts his hands on his head, eyes wide open, with drops of sweat.
- 4.5 to 6 s: He takes out his wallet and opens it, and a small butterfly flies out.

Style:
- Bright flat colors without strong gradients: light blue and white, red for the arrow, yellow for the wallet, and simple flat shadows.
- An office with a city of light rectangular shapes outside the window, and a plant on the desk.
- The character has cartoon proportions: a big head and simple limbs, with bouncy motion that squashes and stretches.
- The text is in a clear, bold font.

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.
- Keep all elements large and clear, because the video is watched on a phone screen.

Make me an animation in a glowing 3D world style, as if it were a scene from a mobile game.

Story, 6 seconds, then it loops from the start with no cuts:
- 0 to 1.5 s: A glowing platform with a sky-blue ring, in the middle of a purple world at night, surrounded by small floating rocks and stars. On the platform sits a large closed oyster, pink and pearly.
- 1.5 to 3 s: The oyster trembles, and golden-white light leaks out of the gap.
- 3 to 4 s: The oyster opens, and light and sparkling particles burst out.
- 4 to 6 s: A glowing white pearl rises and spins slowly, with a small badge above it that reads "Pearl".

Style:
- An isometric view from above, with the camera orbiting slowly around the platform.
- Colors: purple and dark blue for the background, pink and gold for the oyster, sky blue for the ring, and a strong glow around the pearl.
- Soft, slightly cartoonish materials, with a glow around every light source.
- Small particles float the whole time.

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.
- Keep all elements large and clear, because the video is watched on a phone screen.
- 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 a glowing 3D glass style, like a technical X-ray map.

Story, 6 seconds, then it loops from the start with no cuts:
- 0 to 1.5 s: A small isometric city at night. Its buildings and streets are all transparent blue glass with glowing edges, on a black background. One of the buildings has a "Restaurant" sign.
- 1.5 to 4.5 s: A glowing red dot (the driver) leaves the restaurant and travels through the streets, leaving a glowing red line behind it and turning at the street corners.
- 4.5 to 5.5 s: It reaches a house at the edge marked "Your door", and a red pulse of circles comes out of it.
- 5.5 to 6 s: The whole route lights up.
- Small, thin labels next to the stops: "Restaurant 8:40" and "Your door 9:05", and a title at the top: "Your order's route".

Style:
- The buildings are boxes of transparent blue glass with glowing white edges, and their inner details, such as shelves and cars, are thin lines.
- Red is the only strong color in the scene, used for the driver and the route.
- The camera is isometric. It pushes in slowly and follows the dot.
- Thin leader lines for the labels, and the numbers in a small monospace font.

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.
- Keep all elements large and clear, because the video is watched on a phone screen.
- 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 a doodle-on-paper style, like a pen drawing in a diary.

Story, 6 seconds, then it loops from the start with no cuts:
- 0 to 1 s: A person with a round head in a green hoodie sits at a desk in front of a laptop, smiling and excited. Next to him is a tear-off calendar that says "Day 1", and at the top a handwritten title: "You, learning to code".
- 1 to 4 s: The calendar pages fly off one at a time (2, 10, 30, 60). Coffee cups pile up beside him until they form a tower, and his face changes from excited to tired to shocked.
- 4 to 5 s: The calendar stops at "Day 100", and "Hello World" appears on the laptop screen with a check mark.
- 5 to 6 s: He breaks into a huge, crazed grin with one eye twitching, and the tower of cups sways.

Style:
- Beige paper with texture and grain, slightly shaky black pen lines, and light coloring like colored pencils in muted tones: olive green, beige, and gray.
- Motion with few frames, 8 to 12 per second, as if drawn frame by frame.
- Simple, clear facial expressions: dot eyes and a line for a mouth.
- The numbers and the title are handwritten.

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.
- Keep all elements large and clear, because the video is watched on a phone screen.

Make me an animation in the style of a dark relief map flooding with red, like a history documentary.

Story, 6 seconds, then it loops from the start with no cuts:
- 0 to 1.5 s: The camera is above a black and gray relief map of the northern Gulf: the Kuwait coast, Kuwait Bay, and Bubiyan Island, with Failaka Island at the mouth of the bay. A grid of thin lines lies over the map.
- 1.5 to 3 s: A glowing red line traces the outline of Failaka Island, and its name appears: "Failaka".
- 3 to 4.5 s: The island floods with red and rises slightly, and "Ikaros · 324 BC" appears under the name.
- 4.5 to 6 s: A curved red line draws itself from the north, from the direction of Mesopotamia, until it reaches Failaka, and a silver Greek coin appears beside the island.

Style:
- The terrain is a 3D mesh built from a heightmap generated in code, with side lighting that brings out the bumps and exaggerated elevation so they show.
- Everything is black and gray. Glowing red is the only color, with a glow around it.
- The camera is tilted and pushes in slowly toward Failaka.
- The names are in a bold font, laid flat along the ground.

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.
- Keep all elements large and clear, because the video is watched on a phone screen.
- 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.