Animated SVG / CSS Hero
Build a single-file animated SVG or CSS hero section — a looping illustrated scene, an animated logo, or a motion banner driven by CSS keyframes or SMIL with no JavaScript animation library. Storyboards the motion (what moves, the timing, easing, and loop) first, then implements clean, performant, GPU-friendly animation. Motion looks amateur when timing and easing are unconsidered, so the motion-design phase locks the keyframe storyboard and respects prefers-reduced-motion before any markup, the ordering that yields a polished, smooth hero instead of janky tweens.
How it runs
| # | Step | Who runs it | What happens |
|---|---|---|---|
| 1 | Motion design | Designer | storyboard the keyframes, timing, easing, loop |
| 2 | Build | Developer | implement index.html with CSS/SMIL keyframes |
| 3 | Evaluate | Reviewer | Grade the deliverable against every acceptance criterion. All pass → finish; any fail → loop back and fix the gap. |
| 4 | Finish | Developer | All acceptance criteria met. Stamp a short summary and report DONE. |
Say something like "animated svg" or "css animation" or "animated hero" or "motion graphic" or "svg animation" or "animated banner" in chat to start it.