AIDEA Weekly
한국어

↑↓ Enter Esc

MOT-010Growing bars

MOT-010

Growing bars

  • A bar chart rises one bar at a time from the left.

Make an animation where a bar chart of [number of bars] bars grows from the floor 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 colour]; the rest are faint. When all have grown, pause briefly and play again.

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

Blanks

How to use

  1. Borrow (copy) the prompt.
  2. Replace the [brackets] with your own content. Type in the fields below and it updates at once.
  3. Paste it into a new Claude chat and open the HTML file it returns in a browser.

Process

  1. A scene from the guide "Motion graphics with Claude".
  2. The preview is drawn on this site to show the scene this prompt makes.

Same class MOT