+
+
+
`,
-
- after: null, // Uses CSS animation, no HTML change needed
-
- // Custom toggle handler for animation re-triggering
- onToggle: (viewport, isAfter) => {
- viewport.dataset.state = isAfter ? 'after' : 'before';
- if (isAfter) {
- // Re-trigger animation by cloning the element
- const page = viewport.querySelector('.motion-demo-page');
- if (page) {
- const clone = page.cloneNode(true);
- page.parentNode.replaceChild(clone, page);
+
+ after: `
+
+
+
+
+
+
+
+
+
+ `
};
diff --git a/public/js/demos/commands/audit.js b/public/js/demos/commands/audit.js
new file mode 100644
index 000000000..32ef0d4e7
--- /dev/null
+++ b/public/js/demos/commands/audit.js
@@ -0,0 +1,40 @@
+// Audit command demo - shows scattered issues being identified and flagged
+export default {
+ id: 'audit',
+ caption: 'Hidden issues → Identified problems with recommendations',
+
+ before: `
+
+
+
+
+
+
+
+
+ `,
+
+ after: `
+
+
+ Welcome message
+
+
+
+ Featured Item
+
+
+
+
+
+
+ `
+};
diff --git a/public/js/demos/commands/clarify.js b/public/js/demos/commands/clarify.js
new file mode 100644
index 000000000..f56bbacfa
--- /dev/null
+++ b/public/js/demos/commands/clarify.js
@@ -0,0 +1,36 @@
+// Clarify command demo - shows confusing UX copy becoming clear
+export default {
+ id: 'clarify',
+ caption: 'Confusing copy → Clear, actionable language',
+
+ before: `
+
+
+ CONTRAST
+ Welcome message
+
+
+
+ READABILITY
+ Featured Item
+
+
+ TOUCH TARGET
+
+
+
+
+ `,
+
+ after: `
+
+
+ Processing Status
+ Your request is being processed. Please wait while we complete the operation. This may take some time depending on various factors.
+
+
+
+ ⚠️ Warning
+ Proceeding with this action may result in irreversible consequences to your data and settings configuration.
+
+
+ `
+};
diff --git a/public/js/demos/commands/colorize.js b/public/js/demos/commands/colorize.js
new file mode 100644
index 000000000..39081e08c
--- /dev/null
+++ b/public/js/demos/commands/colorize.js
@@ -0,0 +1,56 @@
+// Colorize command demo - shows monochrome becoming strategically colored
+export default {
+ id: 'colorize',
+ caption: 'Monochrome UI → Strategic, harmonious color',
+
+ before: `
+
+
+ Saving changes...
+ About 10 seconds remaining
+
+
+
+
+ Delete this project?
+ This will permanently delete 23 files. You can't undo this.
+
+
+ `,
+
+ after: `
+ TASK OVERVIEW
+
+
+
+
+ Design review
+
+
+
+ Update copy
+
+
+
+ Final QA
+
+
+
+ Progress: 1 of 3
+
+
+ `
+};
diff --git a/public/js/demos/commands/delight.js b/public/js/demos/commands/delight.js
new file mode 100644
index 000000000..c69d6f94c
--- /dev/null
+++ b/public/js/demos/commands/delight.js
@@ -0,0 +1,53 @@
+// Delight command demo - shows functional UI gaining moments of joy
+export default {
+ id: 'delight',
+ caption: 'Functional feedback → Moment of joy',
+
+ before: `
+ TASK OVERVIEW
+
+
+
+
+ ✓
+ Design review
+
+
+ Update copy
+
+
+
+ Final QA
+
+
+
+
+
+ 1/3
+
+
+
+ `,
+
+ after: `
+
+
+
+ Milestone reached
+ 100
+ tasks completed
+
+
+
+ `
+};
diff --git a/public/js/demos/commands/extract.js b/public/js/demos/commands/extract.js
new file mode 100644
index 000000000..7ff712276
--- /dev/null
+++ b/public/js/demos/commands/extract.js
@@ -0,0 +1,62 @@
+// Extract command demo - shows patterns being identified and documented
+export default {
+ id: 'extract',
+ caption: 'Scattered styles → Documented design tokens',
+
+ before: `
+
+ 🎊
+ ✨
+ 🎉
+ ✨
+ 🎊
+
+
+
+ Milestone unlocked!
+ 100
+ tasks completed
+
+ 🏆
+ Centurion Badge Earned
+
+
+
+
+
+
+
+
+ `,
+
+ after: `
+
+
+ `
+};
diff --git a/public/js/demos/commands/harden.js b/public/js/demos/commands/harden.js
new file mode 100644
index 000000000..a21c2811b
--- /dev/null
+++ b/public/js/demos/commands/harden.js
@@ -0,0 +1,42 @@
+// Harden command demo - shows error handling and edge cases
+export default {
+ id: 'harden',
+ caption: 'Fragile UI → Robust error handling',
+
+ before: `
+ Design Tokens
+
+
+ SPACING
+
+
+
+
+ sm
+
+
+
+ md
+
+
+
+ lg
+
+
+
+ COLORS
+
+
+
+
+
+
+
+
+ TYPOGRAPHY
+ Display
+ Body text
+
+
+ `,
+
+ after: `
+
+
+ ⚠️
+ Error
+ Something went wrong
+
+
+
+ Form Input
+
+
+
+ `
+};
diff --git a/public/js/demos/commands/index.js b/public/js/demos/commands/index.js
index 7fef11e41..131c459ee 100644
--- a/public/js/demos/commands/index.js
+++ b/public/js/demos/commands/index.js
@@ -3,11 +3,35 @@
import animate from "./animate.js";
import bolder from "./bolder.js";
import normalize from "./normalize.js";
+import audit from "./audit.js";
+import polish from "./polish.js";
+import optimize from "./optimize.js";
+import harden from "./harden.js";
+import clarify from "./clarify.js";
+import quieter from "./quieter.js";
+import simplify from "./simplify.js";
+import colorize from "./colorize.js";
+import delight from "./delight.js";
+import extract from "./extract.js";
+import adapt from "./adapt.js";
+import onboard from "./onboard.js";
export const commandDemos = {
normalize,
bolder,
animate,
+ audit,
+ polish,
+ optimize,
+ harden,
+ clarify,
+ quieter,
+ simplify,
+ colorize,
+ delight,
+ extract,
+ adapt,
+ onboard,
};
export function getCommandDemo(commandId) {
diff --git a/public/js/demos/commands/onboard.js b/public/js/demos/commands/onboard.js
new file mode 100644
index 000000000..de4be1952
--- /dev/null
+++ b/public/js/demos/commands/onboard.js
@@ -0,0 +1,31 @@
+// Onboard command demo - shows empty state becoming helpful onboarding
+export default {
+ id: 'onboard',
+ caption: 'Empty state → Guided onboarding experience',
+
+ before: `
+
+
+
+
+
+ !
+
+
+
+ Connection failed
+ Unable to reach the server. Check your internet connection and try again.
+
+
+
+ Email Address
+
+ Please enter a complete email address
+
+
+ `,
+
+ after: `
+ 📁
+ No items found
+
+
+ `
+};
diff --git a/public/js/demos/commands/optimize.js b/public/js/demos/commands/optimize.js
new file mode 100644
index 000000000..937368c3c
--- /dev/null
+++ b/public/js/demos/commands/optimize.js
@@ -0,0 +1,57 @@
+// Optimize command demo - shows performance improvements
+export default {
+ id: 'optimize',
+ caption: 'Heavy, slow UI → Lightweight, performant',
+
+ before: `
+
+ ✨
+
+ Create your first project
+ Projects help you organize your work. Start with a template or blank canvas.
+
+
+
+
+
+
+ Need help? Watch a quick tutorial →
+
+
+ `,
+
+ after: `
+
+
+ BUNDLE SIZE
+
+ 847 KB
+
+
+ RENDER TIME
+
+ 2.4s
+
+
+ LAYOUT SHIFTS
+
+ CLS: 0.18
+
+
+ `
+};
diff --git a/public/js/demos/commands/polish.js b/public/js/demos/commands/polish.js
new file mode 100644
index 000000000..9fc970317
--- /dev/null
+++ b/public/js/demos/commands/polish.js
@@ -0,0 +1,33 @@
+// Polish command demo - shows rough UI becoming refined
+export default {
+ id: 'polish',
+ caption: 'Rough edges → Refined, pixel-perfect details',
+
+ before: `
+
+
+ BUNDLE SIZE
+
+ 124 KB (-85%)
+
+
+ RENDER TIME
+
+ 0.3s (-88%)
+
+
+ LAYOUT SHIFTS
+
+ CLS: 0.02 (excellent)
+
+
+ `,
+
+ after: `
+ User Profile
+
+
+
+
+
+
+ John Doe
+ Developer
+
+
+ `
+};
diff --git a/public/js/demos/commands/quieter.js b/public/js/demos/commands/quieter.js
new file mode 100644
index 000000000..0e6250d2c
--- /dev/null
+++ b/public/js/demos/commands/quieter.js
@@ -0,0 +1,28 @@
+// Quieter command demo - shows loud design becoming calm
+export default {
+ id: 'quieter',
+ caption: 'Overwhelming design → Calm, focused interface',
+
+ before: `
+ User Profile
+
+
+
+ JD
+
+
+ John Doe
+ Developer
+
+
+ `,
+
+ after: `
+ 🎉✨🚀
+ AMAZING DEAL!
+ Don't miss out on this INCREDIBLE opportunity!!!
+
+
+
+
+
+
+ `
+};
diff --git a/public/js/demos/commands/simplify.js b/public/js/demos/commands/simplify.js
new file mode 100644
index 000000000..27c026c16
--- /dev/null
+++ b/public/js/demos/commands/simplify.js
@@ -0,0 +1,47 @@
+// Simplify command demo - shows cluttered UI becoming minimal
+export default {
+ id: 'simplify',
+ caption: 'Cluttered interface → Essential elements only',
+
+ before: `
+ Limited Time Offer
+ Save 20% on annual plans. Offer ends Friday.
+
+
+
+
+
+
+ `,
+
+ after: `
+
+ Dashboard
+
+
+
+
+
+
+
+
+
+ Revenue
$12,345
+ $12,345
Users
1,234
+ 1,234
Growth
+12%
+ +12%
Bounce
32%
+ 32%
📊 View detailed analytics →
+ 🎯 Set up goals →
+
+
+ `
+};
diff --git a/source/patterns.md b/source/patterns.md
index 54844f5e0..c8d017138 100644
--- a/source/patterns.md
+++ b/source/patterns.md
@@ -68,7 +68,7 @@ antipatterns:
items:
- Don't animate without purpose
- Don't use durations over 500ms for UI feedback
- - Don't animate layout properties (use transform)
+ - Don't animate layout properties (width, height, padding, margin) - they trigger reflows and can cause text wrapping mid-animation; use transform instead
- Don't ignore prefers-reduced-motion
- Don't use animation to hide slow loading
- name: Interaction
This Month
+
+
+ $12,345
+ ↑ 12% from last month
+
+
+
+
+ 1,234
+ Active users
+
+
+ 68%
+ Retention
+