motion-craftlisted

# How things move here Every animation bug this repo has shipped passed the full test suite. Geometry is checkable; motion is not. So this is the vocabulary, and the four traps that have actually caught us. ## The four traps, in the order they bit Not hypotheticals. Each one reached a finished render before anyone noticed. ### 1. A delayed animation with no start state shows its ending first ```css .thing { animation: rise 0.5s ease 0.45s forwards; } /* wrong */ ``` `forwards` does nothing *during* the delay. The element renders with its normal style — which for a `forwards` animation is where it **finishes**. Half a second of the finished state, then a snap back to the start, then the animation. ```css .thing { opacity: 0; animation: rise 0.5s ease 0.45s forwards; } /* base IS the start */ .thing { animation: rise 0.5s ease 0.45s both; } /* or fill backwards */ ``` Use the base-rule form when the start state is the same in both aspects; use `both` when it is not. `frame-split-compare`'s divider enters from the right at 16:9 and from the bottom at 9:16, so its start state cannot live in the shared rule. ### 2. An animation travelling against the thing it reveals A divider sweeping in from the left while a `clip-path` uncovers from the right reads as **two animations that happen to finish together**. Whatever leads the reveal must travel the same way the reveal does. Ask: *what is the moving edge, and is my mover on it?* ### 3. A deco