MOT-009
Wave lines
- Three thin lines flow at different speeds.
Make a background in SVG where [number of lines] sine curves flow endlessly sideways across the lower part of the screen. Give each line a different speed and opacity for a sense of depth, with colours running from [colour 1] to [colour 2]. It must loop without any seam.
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.화면 아래쪽에 사인 곡선 [선 개수]줄이 옆으로 끝없이 흐르는 배경을 SVG로 만들어 주세요. 줄마다 속도와 투명도가 달라서 깊이가 느껴지게, 색은 [색 1]에서 [색 2]로 이어지게 해 주세요. 끊기는 곳 없이 이어져야 해요.
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.
