9 animation styles for your business with Claude, with a ready-to-copy prompt for each

Make me an animation in a 3D map style, like a delivery app tracking your order until it arrives.

Story, 6 seconds, then it loops from the start with no cuts:
- Throughout the scene: a fixed white card at the bottom of the screen. On its right is an orange circle with a fork and knife icon, and next to it is "Your order is on the way" in bold type, with a small line under it, "Souq Grills → Home". On the left of the card is the arrival time in large type, starting at "18 min".
- 0 to 1.5 s: The camera is tilted above a city whose buildings are white boxes of different heights, with light gray streets and small green parks. An orange pin with a fork and knife pulses at the "Souq Grills" marker, and a blue pin sits at the "Home" marker in the distance.
- 1.5 to 4.5 s: A thick blue line draws itself through the streets from the restaurant to the home, turning at the corners, and a small orange delivery bike rides along at its head. The time on the card goes down one minute at a time until it reaches "2 min".
- 4.5 to 6 s: The bike reaches the home, and the blue pin bounces once. The card turns green: the time is replaced by a large check mark, and the title becomes "Your order has arrived". The camera pulls back a little to show the whole route.

Style:
- The buildings are soft white boxes with side sunlight and long, soft shadows, and the ground is a very light gray, like modern delivery apps.
- The buildings next to the route are low so they don't cover the line and the pins.
- The blue line is thick, with soft edges and a light glow, and the bike is a simple orange model made of boxes and circles.
- The camera is tilted about 50 degrees and follows the bike smoothly.
- Place names are in dark gray type on the ground. The card is white with rounded corners and a soft shadow.

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.
- Write all numbers in Western digits 0123456789, not Eastern Arabic digits.
- 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 newspaper page style, with the page rising in front of you as if your business made the news.

Story, 6 seconds, then it loops from the start with no cuts:
- 0 to 1.5 s: A dark background with blurred newspaper pages. A white newspaper page rises from below at an angle and turns gently until it stops in the center. At the top is the paper's name in large type, "The Souq Gazette". Under it are a divider line and the word "Business" in red.
- 1.5 to 3 s: The headline appears word by word in large bold type over three lines: "Bin Al-Deera Roastery opens its second branch".
- 3 to 4.5 s: Under the headline is a picture drawn in code: a small shopfront with a striped awning and a coffee cup on its sign, with a paragraph in small type under it. A yellow highlighter runs over one of its sentences: "Opening on Thursday, and the first 100 cups are on us".
- 4.5 to 6 s: The page moves a little closer to the camera, and a round red stamp that reads "Grand opening" lands on a corner of the page in a single hit.

Style:
- The page is off-white paper with a light texture and a soft shadow, tilted in perspective with CSS 3D.
- The paper's name is in bold Noto Nastaliq Urdu, the headline in bold Amiri, and the paragraph in dark gray Noto Naskh Arabic, set in columns like a newspaper.
- The picture is in warm, muted colors like a printed newspaper photo, and the stamp is red with uneven inked edges.
- The highlight is a translucent fluorescent yellow that draws itself from left to right.
- The newspapers in the background are dark and blurred and move slowly, and the camera pushes in gently throughout the scene.

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.
- Write all numbers in Western digits 0123456789, not Eastern Arabic digits.
- Keep all elements large and clear, because the video is watched on a phone screen.

Make me an animation in a Chinese ink wash style, calm and elegant, telling the story of a coffee brand.

Story, 6 seconds, then it loops from the start with no cuts:
- 0 to 2 s: Light beige paper. Ink spreads as if in water and draws a coffee tree branch with gray leaves and small red coffee cherries on it.
- 2 to 3.5 s: One of the red cherries falls slowly, and brushstrokes turn into roasted brown coffee beans scattered below.
- 3.5 to 5 s: In the center, a small Arabic coffee cup (finjan) is drawn in ink lines, and steam rises from it as threads of gray ink that ripple upward.
- 5 to 6 s: At the top left, a title is painted with a brush, "Our Coffee", with "From the farm to your cup" in small type under it and a small square red seal beside it that reads "Bean".

Style:
- Black and gray ink in see-through washes, like watercolor on paper, with edges that spread slowly.
- The only color that isn't gray is red, for the coffee cherries and the seal.
- Lots of empty space, and few details.
- A paper texture with light grain, mist drifting slowly sideways, and the title and seal in bold Noto Nastaliq Urdu.

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.
- Write all numbers in Western digits 0123456789, not Eastern Arabic digits.
- Keep all elements large and clear, because the video is watched on a phone screen.

Make me an animation in a 3D teardown style, like a luxury product ad that shows its parts.

Story, 6 seconds, then it loops from the start with no cuts:
- 0 to 1.5 s: A soft black background and warm studio light from above. A rectangular glass perfume bottle with beveled edges stands in the center and rotates slowly. Inside it is amber-colored perfume, and on top is a heavy gold cap.
- 1.5 to 4 s: The bottle comes apart in layers stacked along a single vertical axis: the cap rises, the spray nozzle is under it, then the gold collar, the thin tube comes up out of the bottle, and the amber perfume rises out as a shiny liquid mass in the shape of the bottle.
- As each piece separates, a label with a thin leader line and its number appears beside it: "1 Cap", "2 Sprayer", "3 Collar", "4 Tube", "5 Bottle", "6 Perfume".
- 4 to 6 s: The camera orbits half a turn around the pieces, and a title appears at the bottom, "Your perfume, opened up", with "6 parts" in small type under it.

Style:
- The glass is clear, with refraction and shine from MeshPhysicalMaterial. The cap and collar are shiny gold with soft reflections from RoomEnvironment, and the perfume is a translucent amber that shines.
- The numbers and label lines are gold, the names are in clear white type, and each line draws itself before its name appears.
- The labels stay inside the frame and don't collide while the camera orbits.
- A soft shadow on the floor under the pieces, and a background that darkens toward the edges.

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.
- Write all numbers in Western digits 0123456789, not Eastern Arabic digits.
- 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 phone app showcase style, like modern app ads.

Story, 6 seconds, then it loops from the start with no cuts:
- 0 to 1.5 s: A soft gradient background between light purple and pink. A modern phone enters from below, slightly tilted, and settles in the center. Its screen shows a booking app called "Lamsa Salon", with a row of the days of the week and their dates.
- 1.5 to 3 s: A touch circle taps "Thursday 12", and the day fills with color. Under it, time slots drop in one by one: "3:00 PM", "4:30 PM", "6:00 PM".
- 3 to 4.5 s: The touch picks "4:30 PM", then taps a wide button at the bottom, "Confirm booking".
- 4.5 to 6 s: Cards fly out of the phone and float around it: a green "Booked" card with a check mark and "Thursday 4:30 PM" under it, and a second card with a bell icon, "We'll remind you an hour before".

Style:
- The phone has a thin metal frame and a long, soft shadow, and the screen has a clean, light interface with rounded corners.
- The app's main color is purple, and the floating cards are white with soft shadows and sway slowly.
- The touch circle is semi-transparent and pulses once with each tap, and the buttons press down slightly.
- Use a modern font like Tajawal, with Western digits.

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.
- Write all numbers in Western digits 0123456789, not Eastern Arabic digits.
- Keep all elements large and clear, because the video is watched on a phone screen.

Make me an animation in a dark stats dashboard style: a big number, a chart, and a single note.

Story, 6 seconds, then it loops from the start with no cuts:
- 0 to 1 s: A very dark navy background with a faint grid. At the top right is a small title, "Your store's customers", and under it is a very large number starting at "0", with the word "customers" next to it.
- 1 to 4 s: The number counts up fast, then slows down until it stops at "1,000". At the same time, a line chart under it draws itself from left to right, month by month from January to December. The line rises, with a light gradient area under it.
- 4 to 5 s: At March, the line makes a clear jump, and a pulsing dot appears there with a small note on a thin line: "Ramadan offer".
- 5 to 6 s: A small green line appears under the number, "First year", and the last dot at the end of the line pulses.

Style:
- Like financial company dashboards: a dark background, with the number in very bold white Inter and Western digits.
- The chart line is a bright light green with a light glow, and the area under it fades from green to transparent.
- The chart draws itself from left to right so the line reads as rising.
- Month names are abbreviated and small, in gray under the axis, and the rest of the text is in IBM Plex Sans Arabic.

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.
- Write all numbers in Western digits 0123456789, not Eastern Arabic digits.
- Keep all elements large and clear, because the video is watched on a phone screen.

Make me an animation in a website walkthrough style, like a tutorial video with a mouse clicking.

Story, 6 seconds, then it loops from the start with no cuts:
- Throughout the scene: a large browser window in the center, with a gray title bar on top that has three small circles. Inside it is a product page from a store called "Naseej Store": a large drawing of a navy hoodie on the right, and the name and price, "KD 12.500", on the left.
- 0 to 2 s: The mouse enters and clicks size "M" among the "S M L XL" buttons. The button fills with color, and a round numbered badge, "1", appears next to it, labeled "Size".
- 2 to 3.5 s: The mouse clicks the "Add to cart" button, and a small hoodie flies to the cart icon at the top. The cart count becomes "1" and bounces. A "2" badge appears, labeled "Cart".
- 3.5 to 5 s: A checkout window slides up from below showing the total, and the mouse clicks the "Pay now" button. A "3" badge appears, labeled "Payment".
- 5 to 6 s: The window turns into a green "Order placed" card with a check mark, and the camera pulls back a little.

Style:
- A clean, light interface like modern online stores, with rounded buttons and navy as the main color.
- The mouse is a black arrow with a white outline, and each click sends out a circle that spreads and fades.
- The numbered badges are blue circles with white numbers, and they stay visible once they appear.
- The camera zooms in on each click and back out smoothly, and the font is a modern one like Tajawal.

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.
- Write all numbers in Western digits 0123456789, not Eastern Arabic digits.
- Keep all elements large and clear, because the video is watched on a phone screen.

Make me an animation in a papers-on-a-desk style, as if someone is reviewing their business report with a red pen.

Story, 6 seconds, then it loops from the start with no cuts:
- 0 to 1.5 s: A desk with a green cutting mat on it, with grid lines and a numbered ruler along the edges. A white sheet drops down and gets stuck on with clear tape, with "Monthly sales report" written at the top.
- 1.5 to 3 s: On the sheet, a bar chart for four weeks, "Week 1" through "Week 4", rises one bar at a time, and the third week is clearly the tallest.
- 3 to 4.5 s: A red pen comes in, draws a handwritten circle around the third week's bar, and writes "Best week!" next to it.
- 4.5 to 6 s: A small, long invoice with cut edges slides in from the side over the sheet. It shows "Invoice No. 1042", lines of items, and a total. A yellow sticky note gets stuck on the corner with "Order more stock" handwritten on it.

Style:
- A shot from above at a slight angle, with real paper texture and soft shadows, and the camera pushes in slowly.
- The bars are dark gray, and the red pen's line is uneven like real handwriting and draws itself.
- The report title is in bold type, and the handwriting is in Reem Kufi Fun or another clear handwriting font.
- The invoice is white thermal paper with small monospace type and Western digits.

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.
- Write all numbers in Western digits 0123456789, not Eastern Arabic digits.
- Keep all elements large and clear, because the video is watched on a phone screen.

Make me an animation in a modern timeline style that tells the story of a business from its start.

Story, 6 seconds, then it loops from the start with no cuts:
- 0 to 1 s: A clean light background with faint dots. At the top, the title "Umm Salem Sweets" appears with "Our story" under it, and a vertical blue line starts drawing itself down the center from top to bottom.
- 1 to 5 s: The line moves down, and each time it reaches a point, a large year appears with a card beside it. The cards alternate between right and left:
  - "2019" "We started in our home kitchen", with a small house icon.
  - "2021" "Our first shop", with an icon of a shop with an awning.
  - "2023" "Second branch", with an icon of two shops.
  - "2025" "Online store", with an icon of a phone with a cart on it.
- 5 to 6 s: The last card grows a little and turns blue, and a line appears under the timeline: "And the story continues".

Style:
- Like modern company presentations: an off-white background, a blue line, and white cards with rounded corners and soft shadows.
- The years are in large bold Inter with Western digits, and the text is in a modern font like Tajawal.
- The drawings are simple blue line icons.
- The camera moves down with the line smoothly so the new card stays in the center.

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.
- Write all numbers in Western digits 0123456789, not Eastern Arabic digits.
- Keep all elements large and clear, because the video is watched on a phone screen.

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.