mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-12 22:26:38 +03:00
Paul Bakaus
d72ac00226
Section 05 is now "Live Mode" with a self-contained real-DOM animated demo loop. Browser chrome + stage + picker bar + simulated cursor, running through the full Live Mode flow: hover → outline → click → open command picker → pick "delight" → type "more playful" → draw stroke → Go → generating → three variants cycled → accept → write-to-source confirmation → reset Three distinct card variants morph in place so the cycling reads as real iteration, not a slideshow of the same card. Picker bar states (idle / configuring / generating / cycling / accepted) are driven by data-phase and matching CSS selectors. Simulated cursor animates between targets on an expo-out curve; annotations draw a scribble stroke and pop a comment tag. IntersectionObserver gates the timeline so it only plays while visible, and prefers-reduced-motion freezes on a cycling / variant 3 still. Supporting row below the frame adds the three honest limitations: frameworks supported (Vite/Next/SvelteKit/Astro/Nuxt), writes to real source via HMR, CSP-strict apps get a one-time dev-only patch. Top-nav rename "Visual Mode" → "Overlay" (points at /visual-mode which is still the overlay-focused sub-page). Sticky section-nav updated too. New file: public/js/components/live-demo.js with the timeline driver.