960 × 600
·
6s loop
·
HTML5 SVG + Vanilla JS
Original studyTypography

Make it move

Oversized type, a rotating asterisk, and one deliberately small shift.

Prompt MotionCC0 1.0 Universal
Create a self-contained SVG motion graphic in a single HTML file.

ART DIRECTION
Use a lime background (#c9f269) and dark olive text (#202c18). Set MAKE above IT MOVE. in bold grotesque type. Gently translate the second line horizontally by 22 units with a sine wave. Rotate a twelve-spoke asterisk once per loop. Add a fine horizontal rule and the small caption A SMALL SHIFT. A DIFFERENT FEELING.

TECHNICAL RULES
- Use a 960 × 600 viewBox (8:5). Scale responsively without cropping.
- The loop lasts exactly 6 seconds. Use deterministic, time-based drawing with requestAnimationFrame; do not accumulate frame deltas.
- Keep all shapes and text inside the safe area. Use system sans-serif fonts and no external assets, libraries, or network requests.
- Use a static representative frame when prefers-reduced-motion is enabled, and include a visible play/pause control.
- Pause when the document is hidden.
- Return the complete HTML, CSS, and JavaScript, with no omitted sections.

DELIVERY
Make the text, colors, and example data easy to edit. Explain which values to change. The supplied reference is an original implementation, not proof that any model reproduces this prompt exactly.

An English starting prompt written for this study. The downloadable source is the exact reference implementation.