1// Motion Design skill demos
 2export default {
 3  id: 'motion-design',
 4  tabs: [
 5    {
 6      id: 'stagger',
 7      label: 'Staggered Reveal',
 8      caption: 'Instant appearance vs orchestrated reveal',
 9      before: `
10        <div class="motion-demo motion-stagger-demo">
11          <div class="motion-list-item"><span class="motion-dot"></span>Dashboard</div>
12          <div class="motion-list-item"><span class="motion-dot"></span>Analytics</div>
13          <div class="motion-list-item"><span class="motion-dot"></span>Settings</div>
14          <div class="motion-list-item"><span class="motion-dot"></span>Profile</div>
15        </div>
16      `,
17      after: null, // CSS animation triggered by data-state
18      onToggle: (viewport, isAfter) => {
19        if (isAfter) {
20          // Re-trigger animation by cloning elements
21          const items = viewport.querySelectorAll('.motion-list-item');
22          items.forEach(item => {
23            const clone = item.cloneNode(true);
24            item.parentNode.replaceChild(clone, item);
25          });
26        }
27      }
28    },
29    {
30      id: 'micro',
31      label: 'Micro-interactions',
32      caption: 'Static button vs responsive feedback',
33      before: `
34        <div class="motion-demo motion-micro-demo">
35          <button class="motion-btn motion-btn-before">Add to Cart</button>
36        </div>
37      `,
38      after: `
39        <div class="motion-demo motion-micro-demo">
40          <button class="motion-btn motion-btn-after">Add to Cart</button>
41        </div>
42      `
43    },
44    {
45      id: 'transition',
46      label: 'State Changes',
47      caption: 'Jarring change vs smooth transition',
48      before: `
49        <div class="motion-demo motion-transition-demo">
50          <div class="motion-card motion-card-before">
51            <div class="motion-card-icon">📦</div>
52            <div class="motion-card-text">Order Placed</div>
53          </div>
54        </div>
55      `,
56      after: `
57        <div class="motion-demo motion-transition-demo">
58          <div class="motion-card motion-card-after">
59            <div class="motion-card-icon">✓</div>
60            <div class="motion-card-text">Order Confirmed</div>
61          </div>
62        </div>
63      `
64    }
65  ]
66};
67
68
69