Start the declared animation from the initial styles

[titouanmathis]

Stacked on #638 (chain: #637 ← #638) — this PR's base is feature/motion-examples-feedback.

What

Declaring a replayable animation used to mean writing the starting state twice:

<!-- before: initial repeated inside the keyframes -->
data-option-initial='{ "opacity": 0, "y": 24 }'
data-option-animate='{ "opacity": [0, 1], "y": [24, 0] }'

because a lone target value tells Motion to animate from wherever the element is now — so once the animation had settled, the next play() moved nothing (a real bug, caught driving the doc previews in a browser: the replay button did nothing).

Motion now folds each initial style into the keyframes as that property's starting point, so the start is declared once:

<!-- after -->
data-option-initial='{ "opacity": 0, "y": 24 }'
data-option-animate='{ "opacity": 1, "y": 0 }'

• MotionSequence composes its segments from the same keyframes getter, so a whole choreography replays identically.
• An explicit [from, to] array is never overridden, and a property initial says nothing about still animates from the current state — the one-off-transition case.
• The initial and animate option docs describe the composition.

Test plan

• 3 new specs: the fold (initial + single value → [from, to]), arrays and initial-less properties left alone, and the same fold inside a MotionSequence segment.
• Full suite: 106 files, 882 tests green. Lint 0 errors / 20 warnings. Docs validator: 66 entries.
• Browser-verified against the rebuilt playground bundle: the basic Motion story and the hero-intro sequence both replay (opacity dips to 0.32 / 0.00, then settles back to 1).

🤖 Generated with Claude Code

https://claude.ai/code/session_01FVXrJ8idMfvt667yJadvB8

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 87.77%. Comparing base (7c0cebb) to head (6272684).

Additional details and impacted files

@@                          Coverage Diff                           @@
##             feature/motion-examples-feedback     #640      +/-   ##
======================================================================
+ Coverage                               87.75%   87.77%   +0.01%     
  Complexity                                145      145              
======================================================================
  Files                                     153      153              
  Lines                                    5415     5422       +7     
  Branches                                 1030     1031       +1     
======================================================================
+ Hits                                     4752     4759       +7     
  Misses                                    579      579              
  Partials                                   84       84              

Flag	Coverage Δ
unittests	87.77% <100.00%> (+0.01%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

Files with missing lines	Coverage Δ
packages/ui-motion/src/Motion.ts	96.75% <100.00%> (+0.15%)	⬆️
packages/ui-motion/src/MotionSequence.ts	100.00% <100.00%> (ø)

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[github-actions]

Code Review

Risk: Low — The change is safe to merge and implements the declared animation replay behavior without identified blocking issues.

Updates Motion to fold matching initial properties into single-value animation keyframes while preserving explicit arrays and initial-less properties. MotionSequence, documentation, playground stories, and tests are updated to use and verify the same behavior.

---

Review usage: 58,696 in (48,849 cached) / 1,160 out tokens — $0.0121 (openrouter/openai/gpt-5.6-luna, thinking: low)

Reviewed by @weareikko/code-review v0.9.5 for commit 6272684.