feat: move to animation

Author: LeadcodeDev

.claude/skills/rustmotion/SKILL.md

@@ -33,13 +33,12 @@ Key patterns:
 - **Auto-height:** `"size": { "width": 800, "height": "auto" }`
 - **Grid:** `"display": "grid"` + `"grid-template-columns"`
 
-Children WITHOUT a `position` field participate in flex flow. Children WITH a `position` field become absolutely positioned within the card.
+Children flow in the flexbox. Use `positioned` container for absolute positioning.
 
 **GOOD** (icon + text row):
 ```json
 {
   "type": "card",
-  "position": { "x": 140, "y": 800 },
   "size": { "width": 800, "height": "auto" },
   "style": {
     "flex-direction": "row",

.claude/skills/rustmotion/rules/card-flex-layout.md

@@ -18,7 +18,6 @@
   "type": "counter",
   "from": 0,
   "to": 100,
-  "position": { "x": 540, "y": 960 },
   "start_at": 0.5,
   "end_at": 2.5,
   "easing": "ease_out",

.claude/skills/rustmotion/rules/counter-standalone.md

@@ -1,13 +1,13 @@
-# Rule: Stagger Animations with preset_config.delay
+# Rule: Stagger Animations with style.animation.delay
 
-To create sequential entrance effects (items appearing one by one), use `preset_config.delay` with increasing values. Use 0.15–0.3s increments for smooth staggering.
+To create sequential entrance effects (items appearing one by one), use `style.animation.delay` with increasing values. Use 0.15–0.3s increments for smooth staggering.
 
 **GOOD:**
 ```json
 [
-  { "type": "text", "content": "First",  "position": { "x": 540, "y": 400 }, "preset": "fade_in_up", "preset_config": { "delay": 0.0, "duration": 0.6 }, "style": { "font-size": 48, "color": "#FFFFFF" } },
-  { "type": "text", "content": "Second", "position": { "x": 540, "y": 500 }, "preset": "fade_in_up", "preset_config": { "delay": 0.2, "duration": 0.6 }, "style": { "font-size": 48, "color": "#FFFFFF" } },
-  { "type": "text", "content": "Third",  "position": { "x": 540, "y": 600 }, "preset": "fade_in_up", "preset_config": { "delay": 0.4, "duration": 0.6 }, "style": { "font-size": 48, "color": "#FFFFFF" } }
+  { "type": "text", "content": "First",  "style": { "font-size": 48, "color": "#FFFFFF", "animation": { "name": "fade_in_up", "delay": 0.0, "duration": 0.6 } } },
+  { "type": "text", "content": "Second", "style": { "font-size": 48, "color": "#FFFFFF", "animation": { "name": "fade_in_up", "delay": 0.2, "duration": 0.6 } } },
+  { "type": "text", "content": "Third",  "style": { "font-size": 48, "color": "#FFFFFF", "animation": { "name": "fade_in_up", "delay": 0.4, "duration": 0.6 } } }
 ]
 ```
 

.claude/skills/rustmotion/rules/stagger-animations.md

@@ -1,19 +1,23 @@
 # Rule: Wiggle Is Additive
 
-Wiggle offsets apply additively on top of keyframe animations and presets. Combine a preset entrance with wiggle for ongoing procedural motion.
+Wiggle offsets apply additively on top of keyframe animations and presets. Combine a preset entrance with wiggle for ongoing procedural motion. Both are configured inside `style.animation`.
 
 **GOOD** (fade in, then gently float):
 ```json
 {
   "type": "text",
   "content": "Floating text",
-  "position": { "x": 540, "y": 960 },
-  "preset": "fade_in_up",
-  "preset_config": { "delay": 0.2, "duration": 0.8 },
-  "wiggle": [
-    { "property": "translate_y", "amplitude": 5, "frequency": 2, "seed": 42 }
-  ],
-  "style": { "font-size": 48, "color": "#FFFFFF" }
+  "style": {
+    "font-size": 48, "color": "#FFFFFF",
+    "animation": {
+      "name": "fade_in_up",
+      "delay": 0.2,
+      "duration": 0.8,
+      "wiggle": [
+        { "property": "translate_y", "amplitude": 5, "frequency": 2, "seed": 42 }
+      ]
+    }
+  }
 }
 ```
 
@@ -22,13 +26,16 @@ Wiggle offsets apply additively on top of keyframe animations and presets. Combi
 {
   "type": "icon",
   "icon": "lucide:phone-off",
-  "position": { "x": 540, "y": 960 },
-  "preset": "scale_in",
-  "wiggle": [
-    { "property": "translate_x", "amplitude": 12, "frequency": 90, "mode": "sine" },
-    { "property": "rotation", "amplitude": 8, "frequency": 75, "mode": "sine" }
-  ],
-  "style": { "size": 64, "color": "#FFFFFF" }
+  "style": {
+    "size": 64, "color": "#FFFFFF",
+    "animation": {
+      "name": "scale_in",
+      "wiggle": [
+        { "property": "translate_x", "amplitude": 12, "frequency": 90, "mode": "sine" },
+        { "property": "rotation", "amplitude": 8, "frequency": 75, "mode": "sine" }
+      ]
+    }
+  }
 }
 ```