Make motion graphics with Claude

Make a title animation where "[sentence to show]" types out one letter at a time, like a typewriter, in the center of a dark background. The text is [text color] and bold, with a bar cursor at the end that blinks every 0.5 seconds. When it's done typing, wait [pause length] seconds, erase it, and start over.

Put the CSS and JavaScript in a single HTML file. Don't use external libraries or images, and draw it in a 16:9 area in the center of the screen. If prefers-reduced-motion is on, show the final frame without motion.

Make a number counter that climbs from 0 to [target number] over [duration] seconds. Start fast and slow down to a stop at the end. Add thousands separators to the number, and put "[unit or label]" in small type below it. Two seconds after it stops, count from 0 again.

Put the CSS and JavaScript in a single HTML file. Don't use external libraries or images, and draw it in a 16:9 area in the center of the screen. If prefers-reduced-motion is on, show the final frame without motion.

Make an animation where a chart of [number of bars] bars grows up from the bottom, one after another from the left. Heights follow the ratios of [list of values], with a 0.12-second delay between bars. Only the tallest bar is [accent color]; the rest are a muted color. When they're done growing, pause briefly and repeat.

Put the CSS and JavaScript in a single HTML file. Don't use external libraries or images, and draw it in a 16:9 area in the center of the screen. If prefers-reduced-motion is on, show the final frame without motion.

Make a background in SVG where [number of lines] sine curves flow sideways endlessly across the bottom of the screen. Give each line a different speed and opacity so it feels deep, with colors going from [color 1] to [color 2]. It should loop seamlessly with no visible break.

Put the CSS and JavaScript in a single HTML file. Don't use external libraries or images, and draw it in a 16:9 area in the center of the screen. If prefers-reduced-motion is on, show the final frame without motion.

Make a scene with a circle in the center containing [center text or symbol], surrounded by [number of orbits] orbits. Each orbit has one dot moving at a different speed, faster toward the inside. Make the orbit lines very faint and the dots [dot color].

Put the CSS and JavaScript in a single HTML file. Don't use external libraries or images, and draw it in a 16:9 area in the center of the screen. If prefers-reduced-motion is on, show the final frame without motion.

Make an animation where [number of cards] cards stacked in one spot fan out and then come back together. Write one item from [list of short words for the cards] on each card, and when they fan out, the outer cards tilt more. The motion is smooth and settles with a slight bounce.

Put the CSS and JavaScript in a single HTML file. Don't use external libraries or images, and draw it in a 16:9 area in the center of the screen. If prefers-reduced-motion is on, show the final frame without motion.

Make an animation where the checklist [list of items] gets checked off one by one from the top. Each box fills with [check color] as a check mark draws in, and a line strikes through the text. Leave 0.6 seconds between items, and when all are done, clear them and start again.

Put the CSS and JavaScript in a single HTML file. Don't use external libraries or images, and draw it in a 16:9 area in the center of the screen. If prefers-reduced-motion is on, show the final frame without motion.

Make an animation where a circular progress indicator fills from 0% to [target percent]%. The ring is [ring color] with rounded ends. The number in the middle climbs at the same speed as the ring, with "[label]" in small type below. When it's full, the ring grows slightly once and settles back.

Put the CSS and JavaScript in a single HTML file. Don't use external libraries or images, and draw it in a 16:9 area in the center of the screen. If prefers-reduced-motion is on, show the final frame without motion.

Make a night sky with [number of stars] stars using canvas. Each star has its own size and twinkle cycle, and the whole sky drifts very slowly [drift direction]. Now and then a shooting star crosses diagonally. The background is a gradient from [top color] to [bottom color].

Put the CSS and JavaScript in a single HTML file. Don't use external libraries or images, and draw it in a 16:9 area in the center of the screen. If prefers-reduced-motion is on, show the final frame without motion.

Make a conversation scene where chat bubbles appear in turn, like a messaging app. The conversation is [list of messages]; the left side is gray and the right side is [my bubble color]. Bubbles pop up slightly from below as they appear, and before each new bubble, a typing indicator with three blinking dots shows briefly.

Put the CSS and JavaScript in a single HTML file. Don't use external libraries or images, and draw it in a 16:9 area in the center of the screen. If prefers-reduced-motion is on, show the final frame without motion.