mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-12 06:06:37 +03:00
feat(site): replace Visual Mode section with Live Mode + interactive demo
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.
This commit is contained in:
Paul Bakaus
@@ -8,6 +8,7 @@ import { initScrollReveal } from "./js/utils/reveal.js";
|
||||
import { initAnchorScroll, initHashTracking } from "./js/utils/scroll.js";
|
||||
import { initSectionNav } from "./js/components/section-nav.js";
|
||||
import { initFoundationGrid } from "./js/components/foundation-grid.js";
|
||||
import { initLiveDemo } from "./js/components/live-demo.js";
|
||||
|
||||
// ============================================
|
||||
// STATE
|
||||
@@ -215,6 +216,7 @@ function init() {
|
||||
initFoundationGrid();
|
||||
initSectionNav();
|
||||
initWhyTabs();
|
||||
initLiveDemo();
|
||||
loadContent();
|
||||
|
||||
document.body.classList.add("loaded");
|
||||
|
||||
@@ -2688,3 +2688,506 @@
|
||||
text-transform: uppercase;
|
||||
margin-top: -2px;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
LIVE MODE — interactive demo loop
|
||||
============================================ */
|
||||
|
||||
.live-section {
|
||||
padding: var(--spacing-2xl) 0;
|
||||
border-top: 1px solid var(--color-mist);
|
||||
}
|
||||
|
||||
.live-content .section-lead {
|
||||
max-width: 64ch;
|
||||
margin-bottom: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.live-demo {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-md);
|
||||
margin-bottom: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.live-demo-frame {
|
||||
position: relative;
|
||||
background: var(--color-cream);
|
||||
border: 1px solid var(--color-mist);
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
aspect-ratio: 16 / 9;
|
||||
max-width: 960px;
|
||||
box-shadow: 0 20px 50px oklch(0% 0 0 / 0.08);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.live-demo-chrome {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
padding: 10px 14px;
|
||||
border-bottom: 1px solid var(--color-mist);
|
||||
background: var(--color-paper);
|
||||
}
|
||||
.live-demo-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
background: var(--color-mist);
|
||||
}
|
||||
.live-demo-url {
|
||||
margin-left: 14px;
|
||||
padding: 4px 14px;
|
||||
background: var(--color-cream);
|
||||
border: 1px solid var(--color-mist);
|
||||
border-radius: 5px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
color: var(--color-charcoal);
|
||||
}
|
||||
|
||||
.live-demo-stage {
|
||||
position: relative;
|
||||
height: calc(100% - 42px - 60px); /* minus chrome + bar */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 32px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Target card */
|
||||
.live-demo-target {
|
||||
position: relative;
|
||||
width: min(360px, 80%);
|
||||
min-height: 200px;
|
||||
}
|
||||
.live-demo-variant {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
opacity: 0;
|
||||
transform: translateY(8px) scale(0.99);
|
||||
transition: opacity 280ms var(--ease-out), transform 280ms var(--ease-out);
|
||||
pointer-events: none;
|
||||
}
|
||||
.live-demo-variant.is-active {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
pointer-events: auto;
|
||||
}
|
||||
.live-demo-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
padding: 22px 24px;
|
||||
background: var(--color-paper);
|
||||
border: 1px solid var(--color-mist);
|
||||
border-radius: 8px;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.live-demo-card-kicker {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.18em;
|
||||
text-transform: uppercase;
|
||||
color: var(--color-ash);
|
||||
}
|
||||
.live-demo-card h3 {
|
||||
font-family: var(--font-display);
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
line-height: 1.2;
|
||||
color: var(--color-ink);
|
||||
margin: 0;
|
||||
}
|
||||
.live-demo-card p {
|
||||
font-family: var(--font-body);
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
color: var(--color-charcoal);
|
||||
margin: 0;
|
||||
}
|
||||
.live-demo-card button {
|
||||
align-self: flex-start;
|
||||
margin-top: auto;
|
||||
font-family: var(--font-body);
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
padding: 9px 16px;
|
||||
background: var(--color-ink);
|
||||
color: var(--color-paper);
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Per-variant look */
|
||||
.live-demo-card--plain {}
|
||||
.live-demo-card--v1 {
|
||||
background: var(--color-cream);
|
||||
}
|
||||
.live-demo-card--v1 h3 { font-style: italic; }
|
||||
.live-demo-card--v1 h3 em { color: var(--color-accent); font-style: italic; }
|
||||
.live-demo-card--v2 {
|
||||
background: var(--color-paper);
|
||||
border: 1px dashed var(--color-accent);
|
||||
}
|
||||
.live-demo-card--v2 .live-demo-card-kicker { color: var(--color-accent); }
|
||||
.live-demo-card--v2 h3 { font-family: var(--font-display); font-style: italic; }
|
||||
.live-demo-card--v2 button {
|
||||
background: var(--color-accent);
|
||||
}
|
||||
.live-demo-card--v3 {
|
||||
background: oklch(96% 0.02 350);
|
||||
border: 1px solid var(--color-accent-soft);
|
||||
}
|
||||
.live-demo-card--v3 h3 em { color: var(--color-accent); font-style: italic; }
|
||||
.live-demo-card--v3 .live-demo-card-kicker { color: var(--color-accent-hover); }
|
||||
|
||||
/* Highlight outline over the target */
|
||||
.live-demo-outline {
|
||||
position: absolute;
|
||||
border: 2px solid var(--color-accent);
|
||||
border-radius: 8px;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
transition: opacity 200ms var(--ease-out), top 320ms var(--ease-out), left 320ms var(--ease-out), width 320ms var(--ease-out), height 320ms var(--ease-out);
|
||||
box-shadow: 0 0 0 4px var(--color-accent-dim);
|
||||
}
|
||||
.live-demo-outline.is-visible {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Annotations */
|
||||
.live-demo-annotations {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
transition: opacity 280ms var(--ease-out);
|
||||
color: var(--color-accent);
|
||||
}
|
||||
.live-demo-annotations.is-visible { opacity: 1; }
|
||||
.live-demo-stroke {
|
||||
position: absolute;
|
||||
width: 280px;
|
||||
height: 56px;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -24px);
|
||||
pointer-events: none;
|
||||
}
|
||||
.live-demo-stroke path {
|
||||
stroke-dasharray: 1;
|
||||
stroke-dashoffset: 1;
|
||||
}
|
||||
.live-demo-annotations.is-visible .live-demo-stroke path {
|
||||
animation: liveDemoStroke 800ms var(--ease-out) forwards;
|
||||
}
|
||||
@keyframes liveDemoStroke {
|
||||
to { stroke-dashoffset: 0; }
|
||||
}
|
||||
.live-demo-comment {
|
||||
position: absolute;
|
||||
top: 56%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
padding: 5px 10px;
|
||||
background: var(--color-ink);
|
||||
color: var(--color-paper);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
border-radius: 4px;
|
||||
white-space: nowrap;
|
||||
opacity: 0;
|
||||
transition: opacity 200ms var(--ease-out);
|
||||
}
|
||||
.live-demo-annotations.is-comment-visible .live-demo-comment { opacity: 1; }
|
||||
|
||||
/* Simulated cursor */
|
||||
.live-demo-cursor {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 18px;
|
||||
height: 22px;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
transform: translate(0, 0);
|
||||
transition: opacity 200ms var(--ease-out), transform 560ms var(--ease-out-quint);
|
||||
z-index: 5;
|
||||
filter: drop-shadow(0 2px 4px oklch(0% 0 0 / 0.2));
|
||||
}
|
||||
.live-demo-cursor.is-visible { opacity: 1; }
|
||||
.live-demo-cursor.is-click svg path {
|
||||
transform-origin: 4px 4px;
|
||||
animation: liveDemoCursorClick 220ms var(--ease-out);
|
||||
}
|
||||
@keyframes liveDemoCursorClick {
|
||||
0%, 100% { transform: scale(1); }
|
||||
40% { transform: scale(0.78); }
|
||||
}
|
||||
|
||||
/* Picker bar at the bottom */
|
||||
.live-demo-bar {
|
||||
position: absolute;
|
||||
bottom: 14px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
min-height: 36px;
|
||||
padding: 0 4px;
|
||||
background: oklch(14% 0 0);
|
||||
color: oklch(92% 0 0);
|
||||
border-radius: 999px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
font-family: var(--font-body);
|
||||
font-size: 12px;
|
||||
box-shadow: 0 8px 24px oklch(0% 0 0 / 0.2);
|
||||
overflow: hidden;
|
||||
transition: width 320ms var(--ease-out);
|
||||
}
|
||||
.live-demo-bar > div {
|
||||
display: none;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
padding: 0 6px;
|
||||
}
|
||||
.live-demo-bar[data-phase="idle"] .live-demo-bar-idle,
|
||||
.live-demo-bar[data-phase="configuring"] .live-demo-bar-config,
|
||||
.live-demo-bar[data-phase="generating"] .live-demo-bar-generating,
|
||||
.live-demo-bar[data-phase="cycling"] .live-demo-bar-cycle,
|
||||
.live-demo-bar[data-phase="accepted"] .live-demo-bar-accepted {
|
||||
display: flex;
|
||||
}
|
||||
.live-demo-bar-slash {
|
||||
font-family: var(--font-display);
|
||||
font-size: 16px;
|
||||
color: var(--color-accent);
|
||||
padding: 0 8px 0 10px;
|
||||
}
|
||||
.live-demo-bar-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 7px 10px;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-radius: 8px;
|
||||
color: oklch(75% 0 0);
|
||||
font: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
.live-demo-bar-btn.is-active {
|
||||
background: var(--color-accent-dim);
|
||||
color: var(--color-accent);
|
||||
}
|
||||
.live-demo-bar-dmd {
|
||||
display: inline-grid;
|
||||
grid-template: repeat(2, 1fr) / repeat(2, 1fr);
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.live-demo-bar-dmd span:nth-child(1) { background: oklch(60% 0.25 350); }
|
||||
.live-demo-bar-dmd span:nth-child(2) { background: oklch(60% 0.15 45); }
|
||||
.live-demo-bar-dmd span:nth-child(3) { background: oklch(55% 0.12 250); }
|
||||
.live-demo-bar-dmd span:nth-child(4) { background: oklch(30% 0 0); }
|
||||
|
||||
.live-demo-bar-cmd {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 6px 12px;
|
||||
background: var(--color-accent-dim);
|
||||
color: var(--color-accent);
|
||||
border-radius: 6px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
}
|
||||
.live-demo-bar-cmd-label {
|
||||
opacity: 0.7;
|
||||
text-transform: uppercase;
|
||||
font-size: 9px;
|
||||
letter-spacing: 0.2em;
|
||||
}
|
||||
.live-demo-bar-cmd-name {
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
.live-demo-bar-divider {
|
||||
width: 1px;
|
||||
height: 18px;
|
||||
background: oklch(28% 0 0);
|
||||
margin: 0 4px;
|
||||
}
|
||||
.live-demo-bar-input {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-width: 140px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
color: oklch(85% 0 0);
|
||||
padding: 0 4px;
|
||||
}
|
||||
.live-demo-bar-caret {
|
||||
display: inline-block;
|
||||
width: 6px;
|
||||
height: 12px;
|
||||
background: var(--color-accent);
|
||||
margin-left: 2px;
|
||||
animation: liveDemoCaret 1s steps(1) infinite;
|
||||
}
|
||||
@keyframes liveDemoCaret {
|
||||
50% { opacity: 0; }
|
||||
}
|
||||
.live-demo-bar-go {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
padding: 7px 12px;
|
||||
background: var(--color-accent);
|
||||
color: white;
|
||||
border: 0;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.live-demo-bar-generating {
|
||||
padding: 0 14px !important;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.08em;
|
||||
color: oklch(85% 0 0);
|
||||
}
|
||||
.live-demo-bar-shader {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 50%;
|
||||
border: 1.5px solid oklch(35% 0 0);
|
||||
border-top-color: var(--color-accent);
|
||||
margin-right: 10px;
|
||||
animation: liveDemoSpin 700ms linear infinite;
|
||||
}
|
||||
@keyframes liveDemoSpin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.live-demo-bar-counter {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
color: oklch(92% 0 0);
|
||||
padding: 0 8px;
|
||||
min-width: 38px;
|
||||
text-align: center;
|
||||
}
|
||||
.live-demo-bar-discard {
|
||||
padding: 7px 10px;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-radius: 8px;
|
||||
color: oklch(72% 0 0);
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.live-demo-bar-accept {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
padding: 7px 14px;
|
||||
background: var(--color-accent);
|
||||
color: white;
|
||||
border: 0;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
.live-demo-bar-accepted {
|
||||
padding: 0 14px !important;
|
||||
color: oklch(80% 0.15 145);
|
||||
font-family: var(--font-body);
|
||||
font-size: 12px;
|
||||
gap: 8px !important;
|
||||
}
|
||||
|
||||
/* Phase caption under the frame */
|
||||
.live-demo-caption {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 10px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
color: var(--color-ash);
|
||||
}
|
||||
.live-demo-caption::before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: var(--color-accent);
|
||||
animation: liveDemoPulse 1.6s var(--ease-out) infinite;
|
||||
}
|
||||
@keyframes liveDemoPulse {
|
||||
0%, 100% { opacity: 1; transform: scale(1); }
|
||||
50% { opacity: 0.4; transform: scale(0.7); }
|
||||
}
|
||||
.live-demo-caption-label { color: var(--color-ink); }
|
||||
|
||||
/* Supporting row under the demo */
|
||||
.live-demo-support {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: var(--spacing-lg);
|
||||
padding-top: var(--spacing-md);
|
||||
border-top: 1px solid var(--color-mist);
|
||||
}
|
||||
.live-demo-support-cell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
.live-demo-support-k {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.2em;
|
||||
text-transform: uppercase;
|
||||
color: var(--color-ash);
|
||||
}
|
||||
.live-demo-support-v {
|
||||
font-family: var(--font-body);
|
||||
font-size: 14px;
|
||||
line-height: 1.45;
|
||||
color: var(--color-ink);
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.live-demo-frame { aspect-ratio: 4 / 5; }
|
||||
.live-demo-target { width: 90%; }
|
||||
.live-demo-bar { font-size: 11px; min-height: 32px; }
|
||||
.live-demo-support { grid-template-columns: 1fr; gap: var(--spacing-md); }
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.live-demo-cursor,
|
||||
.live-demo-outline,
|
||||
.live-demo-variant,
|
||||
.live-demo-annotations,
|
||||
.live-demo-stroke path {
|
||||
transition: none !important;
|
||||
animation: none !important;
|
||||
}
|
||||
.live-demo-caption::before { animation: none; }
|
||||
}
|
||||
|
||||
+143
-32
@@ -60,7 +60,7 @@
|
||||
<a href="/" data-nav="home" aria-current="page">Home</a>
|
||||
<a href="/docs" data-nav="docs">Docs</a>
|
||||
<a href="/anti-patterns" data-nav="anti-patterns">Anti-Patterns</a>
|
||||
<a href="/visual-mode" data-nav="visual-mode">Visual Mode</a>
|
||||
<a href="/visual-mode" data-nav="visual-mode">Overlay</a>
|
||||
</nav>
|
||||
<a href="https://github.com/pbakaus/impeccable" class="site-header-github" target="_blank" rel="noopener" aria-label="Impeccable on GitHub, 18k stars">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"/></svg>
|
||||
@@ -76,7 +76,7 @@
|
||||
<a href="#language" class="section-nav-item" data-section="language"><span class="section-nav-num">02</span><span class="section-nav-label">Language</span></a>
|
||||
<a href="#antidote" class="section-nav-item" data-section="antidote"><span class="section-nav-num">03</span><span class="section-nav-label">Antidote</span></a>
|
||||
<a href="#why" class="section-nav-item" data-section="why"><span class="section-nav-num">04</span><span class="section-nav-label">Why</span></a>
|
||||
<a href="#visual-mode" class="section-nav-item" data-section="visual-mode"><span class="section-nav-num">05</span><span class="section-nav-label">Visual</span></a>
|
||||
<a href="#live-mode" class="section-nav-item" data-section="live-mode"><span class="section-nav-num">05</span><span class="section-nav-label">Live</span></a>
|
||||
<a href="#downloads" class="section-nav-item" data-section="downloads"><span class="section-nav-num">06</span><span class="section-nav-label">Install</span></a>
|
||||
<a href="#changelog" class="section-nav-item" data-section="changelog"><span class="section-nav-num">07</span><span class="section-nav-label">New</span></a>
|
||||
<a href="#faq" class="section-nav-item" data-section="faq"><span class="section-nav-num">08</span><span class="section-nav-label">FAQ</span></a>
|
||||
@@ -529,42 +529,153 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 05. VISUAL MODE - Browser overlay -->
|
||||
<section class="visual-mode-section" id="visual-mode">
|
||||
<!-- 05. LIVE MODE - Interactive demo -->
|
||||
<section class="live-section" id="live-mode">
|
||||
<div class="section-header" data-reveal>
|
||||
<span class="section-number">05</span>
|
||||
<h2 class="section-title">Visual Mode</h2>
|
||||
<h2 class="section-title">Live Mode</h2>
|
||||
</div>
|
||||
<div class="visual-mode-content">
|
||||
<p class="section-lead" data-reveal>See design issues highlighted directly on the page. No screenshots, no guesswork. Impeccable’s overlay shows you exactly what’s wrong and where.</p>
|
||||
<div class="live-content" data-reveal>
|
||||
<p class="section-lead">Pick any element in the browser. Drop a comment or a stroke. Hit Go. Three production-quality variants swap in via your framework's HMR. Accept the one you want and it writes back to source.</p>
|
||||
|
||||
<div class="visual-mode-demo" data-reveal>
|
||||
<div class="visual-mode-preview">
|
||||
<div class="visual-mode-preview-header">
|
||||
<span class="visual-mode-preview-dot red"></span>
|
||||
<span class="visual-mode-preview-dot yellow"></span>
|
||||
<span class="visual-mode-preview-dot green"></span>
|
||||
<span class="visual-mode-preview-title">Live detection overlay</span>
|
||||
<div class="live-demo" id="live-demo" aria-label="Live Mode interactive demo loop">
|
||||
<div class="live-demo-frame">
|
||||
<div class="live-demo-chrome">
|
||||
<span class="live-demo-dot"></span>
|
||||
<span class="live-demo-dot"></span>
|
||||
<span class="live-demo-dot"></span>
|
||||
<span class="live-demo-url">localhost:3000</span>
|
||||
</div>
|
||||
<iframe src="/antipattern-examples/visual-mode-demo.html" class="visual-mode-iframe" loading="lazy" title="Anti-pattern detection overlay demo"></iframe>
|
||||
</div>
|
||||
<div class="visual-mode-details">
|
||||
<div class="visual-mode-feature">
|
||||
<span class="visual-mode-feature-label">25 deterministic checks</span>
|
||||
<p>No LLM needed. Pattern matching catches purple gradients, overused fonts, nested cards, low contrast, and more.</p>
|
||||
</div>
|
||||
<div class="visual-mode-feature">
|
||||
<span class="visual-mode-feature-label">Two ways to use it</span>
|
||||
<p>The <strong>Chrome extension</strong> on any site, or embedded in <code>/impeccable critique</code> during an AI design review.</p>
|
||||
</div>
|
||||
<a href="https://chromewebstore.google.com/detail/impeccable/bdkgmiklpdmaojlpflclinlofgjfpabf" class="detection-callout" target="_blank" rel="noopener">
|
||||
<img src="assets/extension-detection.png" alt="Impeccable Chrome extension panel listing detected anti-patterns" class="detection-callout-image" loading="lazy" width="600" height="508">
|
||||
<div class="detection-callout-inner">
|
||||
<span class="detection-eyebrow">Available now</span>
|
||||
<span class="detection-callout-title">Chrome extension</span>
|
||||
<span class="detection-cmd">Install from Chrome Web Store →</span>
|
||||
|
||||
<div class="live-demo-stage">
|
||||
<!-- Target element that gets picked + iterated -->
|
||||
<div class="live-demo-target" data-demo-target>
|
||||
<div class="live-demo-variant is-active" data-variant="original">
|
||||
<div class="live-demo-card live-demo-card--plain">
|
||||
<span class="live-demo-card-kicker">Newsletter</span>
|
||||
<h3>Subscribe for updates</h3>
|
||||
<p>Monthly-ish design notes.</p>
|
||||
<button type="button">Subscribe</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="live-demo-variant" data-variant="1">
|
||||
<div class="live-demo-card live-demo-card--v1">
|
||||
<span class="live-demo-card-kicker">No. 04</span>
|
||||
<h3><em>Letters</em>, occasionally.</h3>
|
||||
<p>A postcard from the editor, about once a month. No tracking pixels.</p>
|
||||
<button type="button">Send me one</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="live-demo-variant" data-variant="2">
|
||||
<div class="live-demo-card live-demo-card--v2">
|
||||
<span class="live-demo-card-kicker">☞ Subscribe</span>
|
||||
<h3>Design dispatches, every other Thursday.</h3>
|
||||
<p>Slow by design. Opinions included.</p>
|
||||
<button type="button">Join the list →</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="live-demo-variant" data-variant="3">
|
||||
<div class="live-demo-card live-demo-card--v3">
|
||||
<span class="live-demo-card-kicker">Field notes</span>
|
||||
<h3><em>One letter.</em> One afternoon of reading. Once a month.</h3>
|
||||
<p>For people who still open email for pleasure.</p>
|
||||
<button type="button">Receive the letter</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Highlight rectangle that outlines the target -->
|
||||
<div class="live-demo-outline" data-demo-outline aria-hidden="true"></div>
|
||||
|
||||
<!-- Annotation layer (stroke + comment) -->
|
||||
<div class="live-demo-annotations" data-demo-annotations aria-hidden="true">
|
||||
<svg class="live-demo-stroke" viewBox="0 0 300 60" preserveAspectRatio="none" aria-hidden="true">
|
||||
<path d="M 10,40 Q 60,10 110,38 T 210,32 T 290,20" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" pathLength="1"/>
|
||||
</svg>
|
||||
<div class="live-demo-comment">more playful</div>
|
||||
</div>
|
||||
|
||||
<!-- Simulated cursor -->
|
||||
<div class="live-demo-cursor" data-demo-cursor aria-hidden="true">
|
||||
<svg width="18" height="22" viewBox="0 0 18 22" fill="none">
|
||||
<path d="M1 1 L1 17 L5 13 L8 20 L11 19 L7.5 12 L13 12 Z" fill="#111" stroke="#fff" stroke-width="1.2" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Picker bar at the bottom of the frame -->
|
||||
<div class="live-demo-bar" data-demo-bar data-phase="idle">
|
||||
<!-- IDLE state: /brand -->
|
||||
<div class="live-demo-bar-idle">
|
||||
<span class="live-demo-bar-slash">/</span>
|
||||
<button type="button" class="live-demo-bar-btn is-active" data-demo-bar-btn="pick">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="22" y1="12" x2="18" y2="12"/><line x1="6" y1="12" x2="2" y2="12"/><line x1="12" y1="6" x2="12" y2="2"/><line x1="12" y1="22" x2="12" y2="18"/></svg>
|
||||
<span>Pick</span>
|
||||
</button>
|
||||
<button type="button" class="live-demo-bar-btn">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
|
||||
</button>
|
||||
<button type="button" class="live-demo-bar-btn">
|
||||
<span class="live-demo-bar-dmd" aria-hidden="true"><span></span><span></span><span></span><span></span></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- CONFIGURING state: command picker + input + Go -->
|
||||
<div class="live-demo-bar-config">
|
||||
<span class="live-demo-bar-cmd" data-demo-cmd>
|
||||
<span class="live-demo-bar-cmd-label">command</span>
|
||||
<span class="live-demo-bar-cmd-name" data-demo-cmd-name>delight</span>
|
||||
</span>
|
||||
<span class="live-demo-bar-divider"></span>
|
||||
<span class="live-demo-bar-input" data-demo-input>
|
||||
<span data-demo-input-text></span><span class="live-demo-bar-caret"></span>
|
||||
</span>
|
||||
<button type="button" class="live-demo-bar-go" data-demo-go>Go <span aria-hidden="true">→</span></button>
|
||||
</div>
|
||||
|
||||
<!-- GENERATING state: shader/progress -->
|
||||
<div class="live-demo-bar-generating">
|
||||
<span class="live-demo-bar-shader"></span>
|
||||
<span>Generating variants…</span>
|
||||
</div>
|
||||
|
||||
<!-- CYCLING state: prev / counter / next / accept / discard -->
|
||||
<div class="live-demo-bar-cycle">
|
||||
<button type="button" class="live-demo-bar-btn" aria-label="Previous variant">‹</button>
|
||||
<span class="live-demo-bar-counter" data-demo-counter>1 / 3</span>
|
||||
<button type="button" class="live-demo-bar-btn" aria-label="Next variant">›</button>
|
||||
<span class="live-demo-bar-divider"></span>
|
||||
<button type="button" class="live-demo-bar-discard" aria-label="Discard">✕</button>
|
||||
<button type="button" class="live-demo-bar-accept" data-demo-accept>Accept</button>
|
||||
</div>
|
||||
|
||||
<!-- ACCEPTED state: brief confirmation -->
|
||||
<div class="live-demo-bar-accepted">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
||||
<span>Variant 3 written to source</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Phase label below the frame -->
|
||||
<div class="live-demo-caption" data-demo-caption>
|
||||
<span class="live-demo-caption-label" data-demo-caption-label>Hover an element to pick.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Supporting text below the demo -->
|
||||
<div class="live-demo-support">
|
||||
<div class="live-demo-support-cell">
|
||||
<span class="live-demo-support-k">Works on</span>
|
||||
<span class="live-demo-support-v">Vite · Next.js · SvelteKit · Astro · Nuxt</span>
|
||||
</div>
|
||||
<div class="live-demo-support-cell">
|
||||
<span class="live-demo-support-k">Accepts into</span>
|
||||
<span class="live-demo-support-v">Your real source file, via HMR</span>
|
||||
</div>
|
||||
<div class="live-demo-support-cell">
|
||||
<span class="live-demo-support-k">CSP-strict apps</span>
|
||||
<span class="live-demo-support-v">One-time dev-only patch, with your consent</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,226 @@
|
||||
// Interactive Live Mode demo loop. Plays when the section is in view,
|
||||
// pauses when out. Respects prefers-reduced-motion (freezes on a
|
||||
// representative frame).
|
||||
//
|
||||
// Phases map to the `data-phase` attribute on the picker bar:
|
||||
// idle → configuring → generating → cycling → accepted → (reset to idle)
|
||||
|
||||
const PHASE = {
|
||||
IDLE: 'idle',
|
||||
CONFIGURING: 'configuring',
|
||||
GENERATING: 'generating',
|
||||
CYCLING: 'cycling',
|
||||
ACCEPTED: 'accepted',
|
||||
};
|
||||
|
||||
// Each step describes one action + how long to hold before the next step.
|
||||
// dt = delay BEFORE this step runs (ms). Total cycle ≈ sum of all dt.
|
||||
const TIMELINE = [
|
||||
{ dt: 400, action: 'cursor-show' },
|
||||
{ dt: 400, action: 'cursor-to-target' },
|
||||
{ dt: 900, action: 'outline-show', caption: 'Hover to pick.' },
|
||||
{ dt: 500, action: 'cursor-click' },
|
||||
{ dt: 200, action: 'open-config', caption: 'Picked. Choose a command.' },
|
||||
{ dt: 700, action: 'cursor-to-cmd' },
|
||||
{ dt: 400, action: 'set-command', cmd: 'delight', caption: 'delight — add personality.' },
|
||||
{ dt: 500, action: 'cursor-to-input' },
|
||||
{ dt: 300, action: 'type', text: 'more playful', caption: 'Annotate. Comment. Stroke.' },
|
||||
{ dt: 1400, action: 'draw-stroke' },
|
||||
{ dt: 700, action: 'cursor-to-go' },
|
||||
{ dt: 300, action: 'click-go', caption: 'Generating three variants…' },
|
||||
{ dt: 1600, action: 'show-variant', n: 1, caption: 'Variant 1 of 3.' },
|
||||
{ dt: 1400, action: 'show-variant', n: 2, caption: 'Variant 2 of 3.' },
|
||||
{ dt: 1400, action: 'show-variant', n: 3, caption: 'Variant 3 of 3.' },
|
||||
{ dt: 900, action: 'cursor-to-accept' },
|
||||
{ dt: 300, action: 'click-accept', caption: 'Accepted. Written to source.' },
|
||||
{ dt: 1800, action: 'reset', caption: 'Hover to pick.' },
|
||||
];
|
||||
|
||||
export function initLiveDemo() {
|
||||
const root = document.getElementById('live-demo');
|
||||
if (!root) return;
|
||||
|
||||
const stage = root.querySelector('.live-demo-stage');
|
||||
const target = root.querySelector('[data-demo-target]');
|
||||
const outline = root.querySelector('[data-demo-outline]');
|
||||
const annotations = root.querySelector('[data-demo-annotations]');
|
||||
const cursor = root.querySelector('[data-demo-cursor]');
|
||||
const bar = root.querySelector('[data-demo-bar]');
|
||||
const cmdName = root.querySelector('[data-demo-cmd-name]');
|
||||
const inputText = root.querySelector('[data-demo-input-text]');
|
||||
const counter = root.querySelector('[data-demo-counter]');
|
||||
const captionLabel = root.querySelector('[data-demo-caption-label]');
|
||||
const variants = Array.from(root.querySelectorAll('.live-demo-variant'));
|
||||
|
||||
if (!stage || !target || !bar) return;
|
||||
|
||||
const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
||||
|
||||
// Position outline over target whenever target moves.
|
||||
const positionOutline = () => {
|
||||
const stageRect = stage.getBoundingClientRect();
|
||||
const targetRect = target.getBoundingClientRect();
|
||||
outline.style.left = (targetRect.left - stageRect.left - 4) + 'px';
|
||||
outline.style.top = (targetRect.top - stageRect.top - 4) + 'px';
|
||||
outline.style.width = (targetRect.width + 8) + 'px';
|
||||
outline.style.height = (targetRect.height + 8) + 'px';
|
||||
};
|
||||
|
||||
// Move cursor to coordinates relative to the stage.
|
||||
const moveCursor = (selector, offsetX = 0, offsetY = 0) => {
|
||||
const stageRect = stage.getBoundingClientRect();
|
||||
const el = typeof selector === 'string' ? root.querySelector(selector) : selector;
|
||||
if (!el) return;
|
||||
const rect = el.getBoundingClientRect();
|
||||
const x = rect.left - stageRect.left + rect.width / 2 + offsetX;
|
||||
const y = rect.top - stageRect.top + rect.height / 2 + offsetY;
|
||||
cursor.style.transform = `translate(${x}px, ${y}px)`;
|
||||
};
|
||||
|
||||
const showVariant = (n) => {
|
||||
variants.forEach((v) => {
|
||||
const match = (n === 0 && v.dataset.variant === 'original') || v.dataset.variant === String(n);
|
||||
v.classList.toggle('is-active', match);
|
||||
});
|
||||
counter.textContent = n + ' / 3';
|
||||
// Re-measure outline after layout settles.
|
||||
requestAnimationFrame(positionOutline);
|
||||
};
|
||||
|
||||
const reset = () => {
|
||||
bar.dataset.phase = PHASE.IDLE;
|
||||
cursor.classList.remove('is-visible', 'is-click');
|
||||
outline.classList.remove('is-visible');
|
||||
annotations.classList.remove('is-visible', 'is-comment-visible');
|
||||
inputText.textContent = '';
|
||||
cmdName.textContent = 'delight';
|
||||
showVariant(0);
|
||||
};
|
||||
|
||||
const setCaption = (text) => {
|
||||
if (text) captionLabel.textContent = text;
|
||||
};
|
||||
|
||||
const typeText = (text, duration) => new Promise((resolve) => {
|
||||
inputText.textContent = '';
|
||||
const per = Math.max(30, Math.floor(duration / text.length));
|
||||
let i = 0;
|
||||
const tick = () => {
|
||||
if (i >= text.length) return resolve();
|
||||
inputText.textContent += text[i++];
|
||||
setTimeout(tick, per);
|
||||
};
|
||||
tick();
|
||||
});
|
||||
|
||||
const step = async (s) => {
|
||||
switch (s.action) {
|
||||
case 'cursor-show':
|
||||
moveCursor(target, -120, 40);
|
||||
cursor.classList.add('is-visible');
|
||||
break;
|
||||
case 'cursor-to-target':
|
||||
moveCursor(target);
|
||||
break;
|
||||
case 'outline-show':
|
||||
positionOutline();
|
||||
outline.classList.add('is-visible');
|
||||
break;
|
||||
case 'cursor-click':
|
||||
cursor.classList.add('is-click');
|
||||
setTimeout(() => cursor.classList.remove('is-click'), 260);
|
||||
break;
|
||||
case 'open-config':
|
||||
bar.dataset.phase = PHASE.CONFIGURING;
|
||||
break;
|
||||
case 'cursor-to-cmd':
|
||||
moveCursor(root.querySelector('[data-demo-cmd]'));
|
||||
break;
|
||||
case 'set-command':
|
||||
cmdName.textContent = s.cmd;
|
||||
break;
|
||||
case 'cursor-to-input':
|
||||
moveCursor(root.querySelector('[data-demo-input]'));
|
||||
break;
|
||||
case 'type':
|
||||
await typeText(s.text, 700);
|
||||
break;
|
||||
case 'draw-stroke':
|
||||
annotations.classList.add('is-visible');
|
||||
setTimeout(() => annotations.classList.add('is-comment-visible'), 600);
|
||||
break;
|
||||
case 'cursor-to-go':
|
||||
moveCursor(root.querySelector('[data-demo-go]'));
|
||||
break;
|
||||
case 'click-go':
|
||||
cursor.classList.add('is-click');
|
||||
setTimeout(() => cursor.classList.remove('is-click'), 260);
|
||||
annotations.classList.remove('is-visible', 'is-comment-visible');
|
||||
bar.dataset.phase = PHASE.GENERATING;
|
||||
break;
|
||||
case 'show-variant':
|
||||
if (bar.dataset.phase !== PHASE.CYCLING) bar.dataset.phase = PHASE.CYCLING;
|
||||
showVariant(s.n);
|
||||
break;
|
||||
case 'cursor-to-accept':
|
||||
moveCursor(root.querySelector('[data-demo-accept]'));
|
||||
break;
|
||||
case 'click-accept':
|
||||
cursor.classList.add('is-click');
|
||||
setTimeout(() => cursor.classList.remove('is-click'), 260);
|
||||
bar.dataset.phase = PHASE.ACCEPTED;
|
||||
outline.classList.remove('is-visible');
|
||||
break;
|
||||
case 'reset':
|
||||
reset();
|
||||
break;
|
||||
}
|
||||
setCaption(s.caption);
|
||||
};
|
||||
|
||||
let running = false;
|
||||
let cancelToken = 0;
|
||||
const sleep = (ms, token) => new Promise((resolve) => setTimeout(() => resolve(token === cancelToken), ms));
|
||||
|
||||
const run = async () => {
|
||||
if (running) return;
|
||||
running = true;
|
||||
const myToken = ++cancelToken;
|
||||
while (running && myToken === cancelToken) {
|
||||
reset();
|
||||
for (const s of TIMELINE) {
|
||||
const stillMe = await sleep(s.dt, myToken);
|
||||
if (!stillMe || !running) return;
|
||||
await step(s);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const stop = () => {
|
||||
running = false;
|
||||
cancelToken++;
|
||||
};
|
||||
|
||||
// Start/stop based on visibility.
|
||||
if (reduced) {
|
||||
// Freeze on the "cycling, variant 3" frame for a representative still.
|
||||
bar.dataset.phase = PHASE.CYCLING;
|
||||
showVariant(3);
|
||||
counter.textContent = '3 / 3';
|
||||
positionOutline();
|
||||
outline.classList.add('is-visible');
|
||||
setCaption('Three variants. Pick the one you want.');
|
||||
return;
|
||||
}
|
||||
|
||||
const io = new IntersectionObserver((entries) => {
|
||||
entries.forEach((e) => {
|
||||
if (e.isIntersecting) run();
|
||||
else stop();
|
||||
});
|
||||
}, { threshold: 0.35 });
|
||||
io.observe(root);
|
||||
|
||||
// Also re-measure outline on window resize since positions depend on layout.
|
||||
window.addEventListener('resize', () => requestAnimationFrame(positionOutline));
|
||||
}
|
||||
Reference in New Issue
Block a user