MOT-008
Orbiting dots
- Dots circle a centre circle, each on its own orbit.
Make a scene with a circle in the centre containing [centre letter or symbol] and [number of orbits] orbits around it. Each orbit carries one dot moving at its own speed, faster towards the inside. Keep the orbit lines very faint and make the dots [dot colour].
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.가운데에 [가운데 글자나 기호]가 들어간 원이 있고, 둘레에 궤도 [궤도 개수]개가 있는 장면을 만들어 주세요. 궤도마다 점이 하나씩 다른 속도로 돌고, 안쪽일수록 빨라요. 궤도 선은 아주 흐리게, 점은 [점 색]으로 해 주세요.
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.







