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.
Steps
Entry step: motion-design. Each step names the specialist role it wants; the full working prompt is expandable.
- Motion designvisual-designerentry
storyboard the keyframes, timing, easing, loop
Show working prompt
Storyboard the motion. (1) Describe the scene and which elements move, in layers. (2) For each element, define its keyframes (start -> end state: position, opacity, scale, color), the duration, the easing curve, any delay, and whether it loops or plays once. (3) Specify the overall timeline so motions feel orchestrated, not random. (4) Decide the palette (hex) and that it must honor prefers-reduced-motion (reduce/disable animation). (5) Write an acceptance-criteria checklist of 5-8 items, e.g. 'the scene animates smoothly on load', 'the loop (if any) is seamless', 'easing is used (not all linear)', 'animation respects prefers-reduced-motion', 'no layout jank (transform/opacity only)', 'no JS animation library'. Write to notes/motion-design.md and via write_task_note. No markup yet.
- Builddeveloper
implement index.html with CSS/SMIL keyframes
Show working prompt
Implement index.html with inline SVG and CSS to the storyboard. (1) Build the scene as inline SVG (or styled elements). (2) Drive motion with @keyframes / CSS transitions (or SMIL) per the storyboard timing and easing — animate transform and opacity for GPU-friendly, jank-free motion (avoid animating width/top/left). (3) Make loops seamless and orchestrate delays so it reads as one composition. (4) Add a prefers-reduced-motion media query that reduces or stops animation. (5) No JS animation library; minimal-to-no JS. On a loop-back, fix only the named gaps without regressing passing criteria. write_task_note the path and passing criteria.
- Evaluatereviewer
Grade the deliverable against every acceptance criterion. All pass → finish; any fail → loop back and fix the gap.
Show working prompt
Evaluate the animation. Open/render index.html and watch it loop; toggle reduced-motion if you can. Check EACH criterion from notes/motion-design.md and write PASS/FAIL with a reason: does the scene animate smoothly on load, is the loop seamless, is easing used (not all linear), does it respect prefers-reduced-motion, does it animate only transform/opacity (grep for animated width/top/left — should be none), and is there no JS animation library? Jank from animating layout properties is a FAIL — loop back to build. Then route — this is the whole point of the loop: - **Every criterion PASSES →** call `advance_task_step({ ref, stepId: "evaluate", next: "finish" })`. - **Any criterion FAILS →** write the specific gaps to notes, then call `advance_task_step({ ref, stepId: "evaluate", next: "build" })` to loop back. The builder fixes exactly those gaps. Never route to `finish` while any criterion is unmet. The build phase's completion gate already blocked a grossly-incomplete deliverable; your job is the judgment an automated check cannot make (does it actually work, read well, look right). After ~3 unproductive loops, stop and report DONE_WITH_CONCERNS so the user can step in. - Finishdeveloper
All acceptance criteria met. Stamp a short summary and report DONE.
Show working prompt
Every acceptance criterion passed. Write a one-paragraph DONE summary to task notes via `write_task_note`: what was built, the deliverable path(s), and a one-line confirmation that each criterion is met. Then report DONE.
Triggers
Phrases that suggest this craftbook to a crew.
- animated svg
- css animation
- animated hero
- motion graphic
- svg animation
- animated banner
Source
View this craftbook on GitHub · MIT license