1// Delight command demo - shows functional UI gaining moments of joy
2export default {
3 id: 'delight',
4 caption: 'Functional feedback → Moment of joy',
5
6 before: `
7 <div style="width: 100%; max-width: 200px; display: flex; flex-direction: column; align-items: center; gap: 16px;">
8 <div style="text-align: center;">
9 <div style="font-size: 13px; color: #666; margin-bottom: 8px;">Milestone reached</div>
10 <div style="font-size: 24px; font-weight: bold; color: #333;">100</div>
11 <div style="font-size: 12px; color: #999;">tasks completed</div>
12 </div>
13 <button style="padding: 8px 16px; background: #e0e0e0; border: none; border-radius: 4px; font-size: 12px; color: #666;">Dismiss</button>
14 </div>
15 `,
16
17 after: `
18 <div style="width: 100%; max-width: 240px; display: flex; flex-direction: column; align-items: center; gap: 16px; position: relative;">
19 <div style="position: absolute; top: -20px; left: 50%; transform: translateX(-50%); display: flex; gap: 4px;">
20 <span style="animation: confettiFall 1s ease-out 0.0s both; font-size: 16px;">🎊</span>
21 <span style="animation: confettiFall 1s ease-out 0.1s both; font-size: 14px;">✨</span>
22 <span style="animation: confettiFall 1s ease-out 0.2s both; font-size: 16px;">🎉</span>
23 <span style="animation: confettiFall 1s ease-out 0.15s both; font-size: 14px;">✨</span>
24 <span style="animation: confettiFall 1s ease-out 0.25s both; font-size: 16px;">🎊</span>
25 </div>
26 <div style="text-align: center; animation: celebratePop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;">
27 <div style="font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-accent); margin-bottom: 8px; font-weight: 600;">Milestone unlocked!</div>
28 <div style="font-family: var(--font-display); font-size: 3.5rem; font-weight: 300; font-style: italic; color: var(--color-ink); line-height: 1;">100</div>
29 <div style="font-size: 0.875rem; color: var(--color-ash); margin-top: 4px;">tasks completed</div>
30 </div>
31 <div style="display: flex; align-items: center; gap: 6px; padding: 8px 16px; background: color-mix(in oklch, var(--color-accent) 10%, var(--color-paper)); border-radius: 20px; animation: badgeSlide 0.5s ease-out 0.3s both;">
32 <span style="font-size: 14px;">🏆</span>
33 <span style="font-size: 0.75rem; font-weight: 600; color: var(--color-accent);">Centurion Badge Earned</span>
34 </div>
35 </div>
36 <style>
37 @keyframes confettiFall {
38 0% { opacity: 0; transform: translateY(-20px) rotate(0deg); }
39 50% { opacity: 1; }
40 100% { opacity: 0; transform: translateY(40px) rotate(180deg); }
41 }
42 @keyframes celebratePop {
43 0% { opacity: 0; transform: scale(0.5); }
44 70% { transform: scale(1.05); }
45 100% { opacity: 1; transform: scale(1); }
46 }
47 @keyframes badgeSlide {
48 from { opacity: 0; transform: translateY(10px); }
49 to { opacity: 1; transform: translateY(0); }
50 }
51 </style>
52 `
53};