1// Animate command demo - shows static elements becoming choreographed
2export default {
3 id: 'animate',
4 caption: 'Static layout → Choreographed entrance',
5
6 before: `
7 <div style="width: 100%; max-width: 220px; display: flex; flex-direction: column; gap: 8px;">
8 <div style="height: 32px; background: #e0e0e0; border-radius: 4px;"></div>
9 <div style="height: 12px; background: #e0e0e0; border-radius: 2px; width: 60%;"></div>
10 <div style="display: flex; gap: 8px; margin-top: 8px;">
11 <div style="flex: 1; height: 64px; background: #e0e0e0; border-radius: 4px;"></div>
12 <div style="flex: 1; height: 64px; background: #e0e0e0; border-radius: 4px;"></div>
13 </div>
14 <div style="height: 10px; background: #e0e0e0; border-radius: 2px; width: 80%; margin-top: 8px;"></div>
15 <div style="height: 10px; background: #e0e0e0; border-radius: 2px; width: 65%;"></div>
16 </div>
17 `,
18
19 after: `
20 <div style="width: 100%; max-width: 220px; display: flex; flex-direction: column; gap: 8px;">
21 <div style="height: 32px; background: var(--color-ink); border-radius: 4px; animation: animDemoFade 0.5s ease-out both;"></div>
22 <div style="height: 12px; background: var(--color-ash); border-radius: 2px; width: 60%; animation: animDemoFade 0.5s ease-out 0.1s both;"></div>
23 <div style="display: flex; gap: 8px; margin-top: 8px;">
24 <div style="flex: 1; height: 64px; background: var(--color-mist); border-radius: 4px; animation: animDemoSlide 0.4s ease-out 0.2s both;"></div>
25 <div style="flex: 1; height: 64px; background: var(--color-mist); border-radius: 4px; animation: animDemoSlide 0.4s ease-out 0.3s both;"></div>
26 </div>
27 <div style="height: 10px; background: var(--color-mist); border-radius: 2px; width: 80%; margin-top: 8px; animation: animDemoFade 0.4s ease-out 0.4s both;"></div>
28 <div style="height: 10px; background: var(--color-mist); border-radius: 2px; width: 65%; animation: animDemoFade 0.4s ease-out 0.5s both;"></div>
29 </div>
30 <style>
31 @keyframes animDemoFade {
32 from { opacity: 0; transform: translateY(8px); }
33 to { opacity: 1; transform: translateY(0); }
34 }
35 @keyframes animDemoSlide {
36 from { opacity: 0; transform: translateY(16px) scale(0.95); }
37 to { opacity: 1; transform: translateY(0) scale(1); }
38 }
39 </style>
40 `
41};
42
43
44