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.막대 [막대 개수]개짜리 그래프가 바닥에서 왼쪽부터 차례로 자라는 애니메이션을 만들어 주세요. 높이는 [값 목록]의 비율로, 막대 사이 지연은 0.12초예요. 가장 높은 막대만 [강조 색]이고 나머지는 흐린 색이에요. 다 자라면 잠시 멈췄다가 다시 해요.
HTML 파일 하나에 CSS와 JavaScript를 넣어 주세요. 외부 라이브러리와 이미지는 쓰지 말고, 화면 가운데 16:9 영역에 그려 주세요. prefers-reduced-motion이 켜져 있으면 움직임 없이 마지막 장면을 보여 주세요.Blanks
How to use
- Borrow (copy) the prompt.
- Replace the [brackets] with your own content. Type in the fields below and it updates at once.
- Paste it into a new Claude chat and open the HTML file it returns in a browser.
Process
- A scene from the guide "Motion graphics with Claude".
- The preview is drawn on this site to show the scene this prompt makes.







