mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-20 10:06:54 +03:00
Migrate site from Bun to Astro (#130)
* feat(site): scaffold Astro migration, convert 3 pages Phase 1+2 of the Astro migration: - Astro v6.2.1 installed, srcDir: 'site', static output to build/ - Shared layout: Base.astro (head, fonts, meta, slots), Header.astro (star count in one place: 23k), Footer.astro - CSS moved from public/css/ to site/styles/ (9 files, @import chains resolve via Vite) - Three pages converted: privacy, cases/neo-mirai, live-mode (all return 200 on astro dev) Remaining: designing, slop, homepage, content collections (docs), JS migration, server/index.js deletion, build.js cleanup. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * feat(site): migrate all 6 main pages to Astro Converts the remaining pages: - designing/index.html → site/pages/designing/index.astro (551 lines) - slop/index.html → site/pages/slop/index.astro (909 lines) - index.html → site/pages/index.astro (1278 lines, the homepage) Base.astro gains OG meta tag props, before-header/after-header slots (for grain overlay and section nav), and configurable mainId. Homepage uses link tags to public/css/ instead of frontmatter CSS imports to avoid esbuild choking on :has() in main.css. Curly braces inside <code> elements (CSS snippets in changelog) escaped with HTML entities to prevent Astro JSX expression parsing. All 6 pages return 200 on astro dev. Branch: feat/astro-migration. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * feat(site): content collections for docs and tutorials Replaces the 1532-line build-sub-pages.js generator with Astro v6 content collections: - 24 skill editorial files move to site/content/skills/ - 4 tutorial files move to site/content/tutorials/ - site/content.config.ts defines both collections with glob loaders - site/pages/docs/[...slug].astro reads skills collection + command metadata from source/skills/ at build time - site/pages/docs/index.astro renders the command grid grouped by category (create, evaluate, refine, simplify, harden, system) - site/pages/tutorials/ mirrors the pattern with ordered index - Doc.astro layout provides sidebar nav, breadcrumbs, and related- command chips from the COMMAND_RELATIONSHIPS data - Category/relationship data extracted to site/data/sub-pages-data.ts All 15 tested pages return 200: 6 main pages + 5 docs + 2 tutorials + 2 index pages. The old generator is not yet deleted (Task #6). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * feat(site): move JS source from public/js/ to site/scripts/ Moves all 49 JS files (app.js + 48 in js/) into site/scripts/. Vite now processes them through its module bundler instead of serving them raw from public/. app.js import paths updated from ./js/X to ./X (the js/ nesting is gone since app.js now lives alongside the subdirectories). Homepage and live-mode page switch from <script is:inline src="/app.js"> to Vite-processed <script> imports, so tree-shaking, bundling, and minification happen automatically at build time. public/js/ still exists for now (cleanup in Task #6) and the generated/counts.js build output path needs updating there too. @paper-design/shaders added to npm dependencies (was missing). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * refactor(site): delete old Bun server, generator, and duplicated files Cleanup after the Astro migration: Deleted: - server/index.js (233 lines, replaced by `astro dev`) - scripts/build-sub-pages.js (1532 lines, replaced by content collections) - scripts/lib/render-page.js (247 lines, replaced by Base.astro layout) - content/site/partials/header.html (replaced by Header.astro component) - public/index.html, privacy.html, designing/, live-mode/, cases/ (replaced by .astro pages in site/pages/) - public/css/ (moved to site/styles/) - public/js/ old source files (moved to site/scripts/) - public/app.js (moved to site/scripts/app.js) Kept in public/: - antipattern-examples/ (standalone HTML demos, not Astro pages) - antipattern-images/, assets/, neo-mirai/ (static assets) - js/detect-antipatterns-browser.js (referenced by antipattern examples) - js/generated/counts.js (build output from scripts/build.js) - _data/api/ (generated API data, now written to public/ so Astro passes it through to build/) Updated: - astro.config.mjs: added redirects (skills->docs, cheatsheet->docs, gallery->slop, neon-mirai->neo-mirai, etc.) - package.json: dev->astro dev, build->build:skills+build:site, preview->astro preview - scripts/build.js: removed buildStaticSite(), generateSubPages(), static-asset copying. API data writes to public/_data/ instead of build/_data/. Site-header validator is a no-op (shared component). Em-dash validator scans site/components + site/layouts, not pages (pages contain content from other sources like detector descriptions). - .gitignore: removed public/slop/ entry Tests: 186/186 pass. Skills build: clean. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * fix(site): fix redirect config for Astro compatibility Move the dynamic /skills/:id -> /docs/:id redirect to public/_redirects (Cloudflare Pages native format) since Astro's redirect config can't handle dynamic routes that don't match existing page patterns. Remove duplicate trailing-slash redirect entries that caused warnings. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * fix(site): switch remaining pages from /css/ link tags to frontmatter imports Doc.astro, docs/index, tutorials/index, and tutorials/[slug] were still using <link href="/css/sub-pages.css"> which pointed at the deleted public/css/ directory. Switched to frontmatter CSS imports (import '../../styles/sub-pages.css') which Vite resolves from site/styles/. Homepage also switches from link tags to frontmatter imports for main.css and sub-pages.css — the esbuild error that originally forced the link-tag workaround was caused by unescaped curly braces in the HTML content (since fixed), not by the CSS itself. All pages verified visually in Chrome: homepage hero, foundation grid, docs index (card grid with categories), docs detail (sidebar + editorial content + visual mockups), designing (core loop diagram), privacy, tutorials. Header renders with 23k stars on every page. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * fix(site): fix edge-to-edge sections, broken API paths, CSS links Three fixes: 1. Homepage sections sat on the viewport edge because Base.astro's <main> lacked the site-content class (provides max-width + padding). Added mainClass prop to Base.astro; homepage sets mainClass="site-content". 2. "Failed to load commands" because app.js fetched /api/commands which only existed in the old Bun server's routing. Updated to fetch from /_data/api/commands.json (the static JSON files that build:skills writes to public/_data/). 3. CSS reference fix (previous commit was incomplete): Doc.astro, docs/index, tutorials pages all used <link href="/css/sub-pages.css"> pointing at deleted public/css/. Switched to frontmatter imports. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * fix(site): add sidebar to docs index page The docs index was using Base.astro directly without the skills-layout grid, so it rendered without a sidebar. Added the same sidebar structure from Doc.astro (category-grouped command list) and wrapped the content in the skills-layout grid. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * fix(site): extract footer CSS to shared file, import in Base.astro Footer was unstyled on sub-pages because footer CSS lived only in main.css (loaded by the homepage) not in sub-pages.css. Extracted the 95 lines of footer rules into site/styles/footer.css and imported it in Base.astro so every page gets footer styles regardless of which page-specific CSS it loads. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * feat(demos): move landing-demo into repo, add as slop specimens Moves ~/code/landing-demo/ into demos/landing-demo/ (without node_modules or the redundant .claude/.agents skill copies — the repo root's skill is found by walking up). PRODUCT.md, DESIGN.md, DESIGN.json, PROMPT.md, and SCRIPT.md stay in place so running Claude from demos/landing-demo/ picks up the project context. Also copies both pages as slop specimens to public/antipattern-examples/ with the detector script baked in: - new-slop-2026.html (Fraunces + warm cream editorial monoculture) - old-slop-2022.html (purple gradient + glassmorphism + neon glow) These can be linked from the slop page gallery alongside the existing 11 synthetic specimens. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * feat(slop): replace single demo iframe with Then vs Now comparison The "See it" section (01) on the slop page now shows two side-by-side browser frames: 2022 slop (purple gradients, glassmorphism, neon glow) and 2026 slop (Fraunces, warm cream, editorial restraint). Both run the detector overlay live — hover either to see which rules fire. Replaces the single visual-mode-demo.html iframe. Responsive: stacks vertically on viewports below 900px. Caption: "Same engine, different decade, both flagged." Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * fix(slop): switch to single-frame era toggle, center the section Replaces the side-by-side dual-iframe layout with a single large frame and a segmented 2022/2026 toggle. Clicking the toggle swaps which iframe is visible (both pre-loaded, instant switch). Browser chrome title updates to match the active era. Centers the lede text and toggle above the frame for visual cohesion with the full-width iframe below. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * fix(slop): left-align See It section, toggle inline with lede Moves the era toggle to the right of the lede paragraph using a flex row (align-items: flex-end). Left-aligned text + right-docked toggle matches the rest of the page's flow instead of standing out as a centered island. Stacks vertically on narrow viewports. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * fix(slop): left-align iframe, remove max-width and auto margin The visual-mode-preview had max-width: 1040px + margin: 0 auto which centered it within the column. Override both in the .slop-then-now context so the frame fills the full content width flush with the text above. Caption left-aligned to match. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * chore(site): update star count to 24k (24,062) One file, one edit. The Astro migration working as intended. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * fix(build): regenerate pnpm-lock.yaml for astro + shaders deps Cloudflare Pages uses pnpm with frozen-lockfile. The lockfile was stale after adding astro, @astrojs/cloudflare, and @paper-design/shaders via npm. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * fix(build): resolve 3 bugbot review issues 1. Restore public/slop/ to .gitignore — prevents accidental legacy generator output from conflicting with the Astro page. 2. Move astro and @paper-design/shaders to devDependencies — these are site-build tools, not CLI runtime deps. Removes @astrojs/cloudflare entirely (unused; static output mode needs no adapter). 3. Fix Astro wiping build:skills output — CF config (_headers, _redirects, _routes.json) and API data now write to public/ so Astro copies them through. Dist ZIPs copy to build/_data/dist/ as a post-build step (after Astro finishes). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * fix(build): merge duplicate devDependencies, use npx for astro CLI The previous commit created a second devDependencies key in package.json. JSON doesn't support duplicate keys — pnpm ignored the first block (with astro), so `astro build` wasn't found. Merged astro and @paper-design/shaders into the existing devDependencies block. Changed `astro build/dev/preview` to `npx astro build/dev/preview` so pnpm finds the local binary on Cloudflare Pages (which doesn't add node_modules/.bin to PATH by default). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * fix(demos): remove private demo script and prompt from public repo SCRIPT.md contained a detailed conference talk script with personal delivery strategies, rehearsed Q&A answers, and venue details. PROMPT.md contained the origin brief for the demo page. Neither belongs in a public repo. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * fix(build): gitignore generated public/ artifacts, consolidate redirects 1. Generated files written to public/ by build:skills (API data, CF config, browser detector, counts.js) are now gitignored. Prevents noisy diffs and merge conflicts from committed build artifacts. 2. Removed duplicate redirects from astro.config.mjs. All redirects now live in one place: the _redirects file generated by scripts/build.js (which Cloudflare Pages processes natively). Eliminates the dual-maintenance risk where the two sources could drift apart. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Paul Bakaus
co-authored by
Claude Opus 4.7
Claude Opus 4.7
parent
a312da5ec7
commit
b8f09c8142
@@ -0,0 +1,414 @@
|
||||
import {
|
||||
initGlassTerminal,
|
||||
renderTerminalLayout,
|
||||
} from "./components/glass-terminal.js";
|
||||
import { initLensEffect } from "./components/lens.js";
|
||||
import { initFrameworkViz } from "./components/framework-viz.js";
|
||||
import { initScrollReveal } from "./utils/reveal.js";
|
||||
import { initAnchorScroll, initHashTracking } from "./utils/scroll.js";
|
||||
import { initSectionNav } from "./components/section-nav.js";
|
||||
import { initFoundationGrid } from "./components/foundation-grid.js";
|
||||
import { initLiveDemo } from "./components/live-demo.js";
|
||||
|
||||
// ============================================
|
||||
// STATE
|
||||
// ============================================
|
||||
|
||||
let allCommands = [];
|
||||
|
||||
// ============================================
|
||||
// CONTENT LOADING
|
||||
// ============================================
|
||||
|
||||
function escapeHtml(value) {
|
||||
if (typeof value !== "string") return "";
|
||||
return value
|
||||
.replaceAll("&", "&")
|
||||
.replaceAll("<", "<")
|
||||
.replaceAll(">", ">")
|
||||
.replaceAll('"', """)
|
||||
.replaceAll("'", "'");
|
||||
}
|
||||
|
||||
async function loadContent() {
|
||||
try {
|
||||
const [commandsRes, patternsRes] = await Promise.all([
|
||||
fetch("/_data/api/commands.json"),
|
||||
fetch("/_data/api/patterns.json"),
|
||||
]);
|
||||
|
||||
// Check for HTTP errors
|
||||
if (!commandsRes.ok) {
|
||||
throw new Error(`Commands API failed: ${commandsRes.status}`);
|
||||
}
|
||||
if (!patternsRes.ok) {
|
||||
throw new Error(`Patterns API failed: ${patternsRes.status}`);
|
||||
}
|
||||
|
||||
allCommands = await commandsRes.json();
|
||||
const patternsData = await patternsRes.json();
|
||||
|
||||
// Render commands (Glass Terminal)
|
||||
renderTerminalLayout(allCommands);
|
||||
|
||||
// Initialize gallery card stack
|
||||
initGalleryStack();
|
||||
|
||||
// Render patterns with tabbed navigation
|
||||
renderPatternsWithTabs(patternsData.patterns, patternsData.antipatterns);
|
||||
} catch (error) {
|
||||
console.error("Failed to load content:", error);
|
||||
showLoadError(error);
|
||||
}
|
||||
}
|
||||
|
||||
function showLoadError(error) {
|
||||
// Show error in commands section
|
||||
const commandsGallery = document.querySelector('.commands-gallery');
|
||||
if (commandsGallery) {
|
||||
commandsGallery.innerHTML = `
|
||||
<div class="load-error" role="alert">
|
||||
<div class="load-error-icon" aria-hidden="true">⚠</div>
|
||||
<h3 class="load-error-title">Failed to load commands</h3>
|
||||
<p class="load-error-text">There was a problem loading the content. Please check your connection and try again.</p>
|
||||
<button class="btn btn-secondary load-error-retry" onclick="location.reload()">
|
||||
Retry
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
// Show error in patterns section
|
||||
const patternsContainer = document.getElementById("patterns-categories");
|
||||
if (patternsContainer) {
|
||||
patternsContainer.innerHTML = `
|
||||
<div class="load-error" role="alert">
|
||||
<div class="load-error-icon" aria-hidden="true">⚠</div>
|
||||
<h3 class="load-error-title">Failed to load patterns</h3>
|
||||
<p class="load-error-text">There was a problem loading the content. Please check your connection and try again.</p>
|
||||
<button class="btn btn-secondary load-error-retry" onclick="location.reload()">
|
||||
Retry
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
function initGalleryStack() {
|
||||
const container = document.querySelector('.gallery-stack-container');
|
||||
const stack = document.getElementById('gallery-stack');
|
||||
if (!stack || !container) return;
|
||||
|
||||
const cards = stack.querySelectorAll('.gallery-stack-card');
|
||||
const counter = container.querySelector('.gallery-stack-counter');
|
||||
const total = cards.length;
|
||||
let current = 0;
|
||||
let lastScroll = 0;
|
||||
|
||||
function update() {
|
||||
cards.forEach((card, i) => {
|
||||
const offset = (i - current + total) % total;
|
||||
card.dataset.offset = offset;
|
||||
});
|
||||
}
|
||||
|
||||
function next() { current = (current + 1) % total; update(); }
|
||||
function prev() { current = (current - 1 + total) % total; update(); }
|
||||
|
||||
container.querySelector('.gallery-stack-prev').addEventListener('click', prev);
|
||||
container.querySelector('.gallery-stack-next').addEventListener('click', next);
|
||||
|
||||
stack.addEventListener('wheel', (e) => {
|
||||
e.preventDefault();
|
||||
const now = Date.now();
|
||||
if (now - lastScroll < 350) return;
|
||||
lastScroll = now;
|
||||
if (e.deltaY > 0) next(); else prev();
|
||||
}, { passive: false });
|
||||
|
||||
update();
|
||||
}
|
||||
|
||||
function renderPatternsWithTabs(patterns, antipatterns) {
|
||||
const container = document.getElementById("patterns-categories");
|
||||
if (!container || !patterns || !antipatterns) return;
|
||||
|
||||
const antipatternMap = {};
|
||||
antipatterns.forEach(cat => { antipatternMap[cat.name] = cat.items; });
|
||||
|
||||
const tabsHTML = patterns.map((cat, i) =>
|
||||
`<button class="patterns-tab${i === 0 ? ' is-active' : ''}" data-index="${i}">${escapeHtml(cat.name)}</button>`
|
||||
).join('');
|
||||
|
||||
const panelsHTML = patterns.map((cat, i) => {
|
||||
const antiItems = antipatternMap[cat.name] || [];
|
||||
return `
|
||||
<div class="patterns-content${i === 0 ? ' is-active' : ''}" data-index="${i}">
|
||||
<div class="patterns-col patterns-col--dont">
|
||||
<ul>${antiItems.map(item => `<li>${escapeHtml(item)}</li>`).join('')}</ul>
|
||||
</div>
|
||||
<div class="patterns-col patterns-col--do">
|
||||
<ul>${cat.items.map(item => `<li>${escapeHtml(item)}</li>`).join('')}</ul>
|
||||
</div>
|
||||
</div>`;
|
||||
}).join('');
|
||||
|
||||
container.innerHTML = `<div class="patterns-tabs-wrap"><div class="patterns-tabs" data-scroll="start">${tabsHTML}</div></div>${panelsHTML}`;
|
||||
|
||||
const tabsEl = container.querySelector('.patterns-tabs');
|
||||
const tabsWrap = container.querySelector('.patterns-tabs-wrap');
|
||||
|
||||
container.addEventListener('click', (e) => {
|
||||
const tab = e.target.closest('.patterns-tab');
|
||||
if (!tab) return;
|
||||
const index = tab.dataset.index;
|
||||
container.querySelectorAll('.patterns-tab').forEach(t => t.classList.remove('is-active'));
|
||||
container.querySelectorAll('.patterns-content').forEach(p => p.classList.remove('is-active'));
|
||||
tab.classList.add('is-active');
|
||||
container.querySelector(`.patterns-content[data-index="${index}"]`).classList.add('is-active');
|
||||
// Center the clicked tab inside the tabs strip (not the page). Using
|
||||
// scrollBy on the container keeps the page scroll untouched.
|
||||
if (tabsEl) {
|
||||
const tabRect = tab.getBoundingClientRect();
|
||||
const stripRect = tabsEl.getBoundingClientRect();
|
||||
const offset = (tabRect.left + tabRect.width / 2) - (stripRect.left + stripRect.width / 2);
|
||||
tabsEl.scrollBy({ left: offset, behavior: 'smooth' });
|
||||
}
|
||||
});
|
||||
|
||||
// Track scroll position so the edge-fade mask only appears on sides where
|
||||
// there's actually more content. At the start, no left fade; at the end,
|
||||
// no right fade; if no overflow, no fade at all.
|
||||
const updateScrollState = () => {
|
||||
if (!tabsEl) return;
|
||||
const { scrollLeft, scrollWidth, clientWidth } = tabsEl;
|
||||
const max = scrollWidth - clientWidth;
|
||||
let state;
|
||||
if (max <= 1) state = 'none';
|
||||
else if (scrollLeft <= 1) state = 'start';
|
||||
else if (scrollLeft >= max - 1) state = 'end';
|
||||
else state = 'middle';
|
||||
tabsEl.dataset.scroll = state;
|
||||
if (tabsWrap) tabsWrap.dataset.scroll = state;
|
||||
};
|
||||
tabsEl?.addEventListener('scroll', updateScrollState, { passive: true });
|
||||
window.addEventListener('resize', updateScrollState);
|
||||
updateScrollState();
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// EVENT HANDLERS
|
||||
// ============================================
|
||||
|
||||
// Handle bundle download clicks via event delegation.
|
||||
// Each download button carries the full bundle name in data-bundle
|
||||
// (currently just "universal") so the handler is just a redirect.
|
||||
document.addEventListener("click", (e) => {
|
||||
const bundleBtn = e.target.closest("[data-bundle]");
|
||||
if (bundleBtn) {
|
||||
const bundleName = bundleBtn.dataset.bundle;
|
||||
window.location.href = `/api/download/bundle/${bundleName}`;
|
||||
}
|
||||
|
||||
// Handle copy button clicks
|
||||
const copyBtn = e.target.closest("[data-copy]");
|
||||
if (copyBtn) {
|
||||
const textToCopy = copyBtn.dataset.copy;
|
||||
const onCopied = () => {
|
||||
copyBtn.classList.add('copied');
|
||||
setTimeout(() => copyBtn.classList.remove('copied'), 1500);
|
||||
};
|
||||
if (navigator.clipboard?.writeText) {
|
||||
navigator.clipboard.writeText(textToCopy).then(onCopied).catch(() => {});
|
||||
} else {
|
||||
// Fallback for non-HTTPS or older browsers
|
||||
const ta = Object.assign(document.createElement('textarea'), { value: textToCopy, style: 'position:fixed;left:-9999px' });
|
||||
document.body.appendChild(ta);
|
||||
ta.select();
|
||||
try { document.execCommand('copy'); onCopied(); } catch {}
|
||||
ta.remove();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// ============================================
|
||||
// STARTUP
|
||||
// ============================================
|
||||
|
||||
function init() {
|
||||
initAnchorScroll();
|
||||
initHashTracking();
|
||||
initLensEffect();
|
||||
initScrollReveal();
|
||||
initGlassTerminal();
|
||||
initFrameworkViz();
|
||||
initFoundationGrid();
|
||||
initSectionNav();
|
||||
initWhyTabs();
|
||||
initLanguageTabs();
|
||||
initLiveDemo();
|
||||
loadContent();
|
||||
|
||||
document.body.classList.add("loaded");
|
||||
}
|
||||
|
||||
function initLanguageTabs() {
|
||||
const toggle = document.querySelector('.language-view-toggle');
|
||||
if (!toggle) return;
|
||||
const tabs = Array.from(toggle.querySelectorAll('.language-view-tab'));
|
||||
const panels = Array.from(document.querySelectorAll('.language-view[data-view-panel]'));
|
||||
if (!tabs.length || !panels.length) return;
|
||||
|
||||
tabs.forEach((tab) => {
|
||||
tab.addEventListener('click', () => {
|
||||
const view = tab.dataset.view;
|
||||
tabs.forEach((t) => {
|
||||
const on = t === tab;
|
||||
t.classList.toggle('is-active', on);
|
||||
t.setAttribute('aria-selected', on ? 'true' : 'false');
|
||||
});
|
||||
panels.forEach((p) => {
|
||||
const on = p.dataset.viewPanel === view;
|
||||
p.classList.toggle('is-active', on);
|
||||
if (on) p.removeAttribute('hidden');
|
||||
else p.setAttribute('hidden', '');
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function initWhyTabs() {
|
||||
const container = document.querySelector('.why-layout');
|
||||
if (!container) return;
|
||||
const tabs = Array.from(container.querySelectorAll('.why-tab'));
|
||||
const panels = Array.from(container.querySelectorAll('.why-panel'));
|
||||
if (!tabs.length || !panels.length) return;
|
||||
|
||||
const CYCLE_MS = 7000;
|
||||
const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
||||
let current = Math.max(tabs.findIndex((tab) => tab.classList.contains('is-active')), 0);
|
||||
let timer = null;
|
||||
let autoRotate = !reducedMotion;
|
||||
let visible = false;
|
||||
|
||||
const tabStrip = container.querySelector('.why-tabs');
|
||||
const getPanelForTab = (tab) => {
|
||||
const panelId = tab?.getAttribute('aria-controls');
|
||||
return panelId ? container.querySelector(`#${CSS.escape(panelId)}`) : null;
|
||||
};
|
||||
|
||||
const centerActiveInStrip = (active) => {
|
||||
// On mobile the tab list is a horizontal scroll strip. Keep the
|
||||
// active pill visible without touching the page scroll. Using
|
||||
// scrollTo with behavior:auto + direct scrollLeft assignment,
|
||||
// because smooth-scroll on this container is disabled by the
|
||||
// parent's mask-image compositing and silently no-ops.
|
||||
if (!tabStrip || tabStrip.scrollWidth <= tabStrip.clientWidth + 1) return;
|
||||
const tabRect = active.getBoundingClientRect();
|
||||
const stripRect = tabStrip.getBoundingClientRect();
|
||||
const offset = (tabRect.left + tabRect.width / 2) - (stripRect.left + stripRect.width / 2);
|
||||
if (Math.abs(offset) < 2) return;
|
||||
tabStrip.scrollLeft += offset;
|
||||
};
|
||||
|
||||
const activate = (index, fromAuto = false) => {
|
||||
const targetTab = tabs[index];
|
||||
const targetPanel = getPanelForTab(targetTab);
|
||||
if (!targetTab || !targetPanel) return;
|
||||
current = index;
|
||||
tabs.forEach((tab, i) => {
|
||||
const on = i === index;
|
||||
tab.classList.toggle('is-active', on);
|
||||
tab.setAttribute('aria-selected', on ? 'true' : 'false');
|
||||
// Reset cycling class, re-add on the new active tab so the
|
||||
// progress indicator restarts cleanly.
|
||||
tab.classList.remove('is-cycling');
|
||||
});
|
||||
panels.forEach((panel) => {
|
||||
const on = panel === targetPanel;
|
||||
panel.classList.toggle('is-active', on);
|
||||
if (on) panel.removeAttribute('hidden');
|
||||
else panel.setAttribute('hidden', '');
|
||||
});
|
||||
if (autoRotate && visible) {
|
||||
// Force reflow so the animation restart is picked up.
|
||||
void targetTab.offsetWidth;
|
||||
targetTab.classList.add('is-cycling');
|
||||
}
|
||||
centerActiveInStrip(targetTab);
|
||||
};
|
||||
|
||||
const scheduleNext = () => {
|
||||
clearTimeout(timer);
|
||||
if (!autoRotate || !visible) return;
|
||||
timer = setTimeout(() => {
|
||||
const next = (current + 1) % tabs.length;
|
||||
activate(next, true);
|
||||
scheduleNext();
|
||||
}, CYCLE_MS);
|
||||
};
|
||||
|
||||
const stopAuto = () => {
|
||||
autoRotate = false;
|
||||
clearTimeout(timer);
|
||||
tabs.forEach((t) => t.classList.remove('is-cycling'));
|
||||
};
|
||||
|
||||
tabs.forEach((tab, index) => {
|
||||
tab.addEventListener('click', () => {
|
||||
stopAuto();
|
||||
activate(index);
|
||||
});
|
||||
tab.addEventListener('keydown', (e) => {
|
||||
if (e.key !== 'ArrowDown' && e.key !== 'ArrowUp') return;
|
||||
e.preventDefault();
|
||||
stopAuto();
|
||||
const dir = e.key === 'ArrowDown' ? 1 : -1;
|
||||
const next = (index + dir + tabs.length) % tabs.length;
|
||||
tabs[next].focus();
|
||||
activate(next);
|
||||
});
|
||||
});
|
||||
|
||||
container.addEventListener('mouseenter', () => {
|
||||
// Pause auto-rotation on hover. Resume only if still allowed and
|
||||
// user hasn't interacted (stopAuto flips autoRotate off).
|
||||
clearTimeout(timer);
|
||||
tabs.forEach((t) => t.classList.remove('is-cycling'));
|
||||
});
|
||||
container.addEventListener('mouseleave', () => {
|
||||
if (autoRotate && visible) {
|
||||
// Re-apply cycling class to current tab and resume the timer.
|
||||
const active = tabs[current];
|
||||
void active.offsetWidth;
|
||||
active.classList.add('is-cycling');
|
||||
scheduleNext();
|
||||
}
|
||||
});
|
||||
|
||||
// Observe visibility so we only rotate while the user can see it.
|
||||
const io = new IntersectionObserver((entries) => {
|
||||
entries.forEach((e) => {
|
||||
visible = e.isIntersecting;
|
||||
if (visible) {
|
||||
if (autoRotate) {
|
||||
const active = tabs[current];
|
||||
void active.offsetWidth;
|
||||
active.classList.add('is-cycling');
|
||||
scheduleNext();
|
||||
}
|
||||
} else {
|
||||
clearTimeout(timer);
|
||||
tabs.forEach((t) => t.classList.remove('is-cycling'));
|
||||
}
|
||||
});
|
||||
}, { threshold: 0.35 });
|
||||
io.observe(container);
|
||||
}
|
||||
|
||||
if (document.readyState === "loading") {
|
||||
document.addEventListener("DOMContentLoaded", init);
|
||||
} else {
|
||||
init();
|
||||
}
|
||||
@@ -0,0 +1,142 @@
|
||||
import { readySkills, skillFocusAreas } from "../data.js";
|
||||
import { renderSkillDemo, setupDemoTabs } from "../demo-renderer.js";
|
||||
import { setupDemoToggles } from "../demo-toggles.js";
|
||||
|
||||
export function initArtGallery() {
|
||||
// Initial setup if needed
|
||||
}
|
||||
|
||||
export function renderGallery(skills) {
|
||||
const container = document.querySelector(".skills-gallery");
|
||||
if (!container) return;
|
||||
|
||||
// Filter skills (hide impeccable as per original)
|
||||
const filteredSkills = skills.filter((s) => s.id !== "impeccable");
|
||||
|
||||
container.innerHTML = `
|
||||
<div class="gallery-track">
|
||||
${filteredSkills.map((skill, index) => renderFrame(skill, index)).join("")}
|
||||
</div>
|
||||
<div class="gallery-map" role="tablist" aria-label="Skill gallery navigation">
|
||||
${filteredSkills.map((skill, index) => `<button class="gallery-dot ${index === 0 ? "active" : ""}" data-index="${index}" role="tab" aria-selected="${index === 0 ? "true" : "false"}" aria-label="View ${formatName(skill.id)} skill"></button>`).join("")}
|
||||
</div>
|
||||
`;
|
||||
|
||||
setupInteractions();
|
||||
setupDemoTabs();
|
||||
setupDemoToggles();
|
||||
}
|
||||
|
||||
function renderFrame(skill, index) {
|
||||
const isReady = readySkills.includes(skill.id);
|
||||
const focusAreas = skillFocusAreas[skill.id] || [];
|
||||
const displayName = formatName(skill.id);
|
||||
|
||||
return `
|
||||
<article class="gallery-frame ${index === 0 ? "active" : ""}" data-index="${index}" id="skill-${skill.id}">
|
||||
<div class="gallery-content">
|
||||
<div class="gallery-visual">
|
||||
${isReady ? renderSkillDemo(skill.id) : renderComingSoonVisual(skill.id)}
|
||||
</div>
|
||||
<div class="gallery-info">
|
||||
<div class="gallery-header">
|
||||
<h3 class="gallery-title">${displayName}</h3>
|
||||
<div class="gallery-meta">
|
||||
Skill · ${isReady ? "Available" : "Coming Soon"}
|
||||
</div>
|
||||
</div>
|
||||
<p class="gallery-desc">${skill.description}</p>
|
||||
|
||||
${
|
||||
focusAreas.length > 0
|
||||
? `
|
||||
<div class="gallery-tags">
|
||||
${focusAreas
|
||||
.slice(0, 4)
|
||||
.map(
|
||||
(area) => `
|
||||
<span class="gallery-tag">${area.area}</span>
|
||||
`,
|
||||
)
|
||||
.join("")}
|
||||
</div>
|
||||
`
|
||||
: ""
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
`;
|
||||
}
|
||||
|
||||
function renderComingSoonVisual(id) {
|
||||
return `
|
||||
<div class="coming-soon-placeholder" style="text-align: center;">
|
||||
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" style="opacity: 0.3">
|
||||
<path d="M12 6v6l4 2M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"/>
|
||||
</svg>
|
||||
<p style="margin-top: 1rem; color: var(--color-ash); font-size: 0.875rem;">Coming Soon</p>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
function formatName(id) {
|
||||
return id
|
||||
.split("-")
|
||||
.map((word) =>
|
||||
word === "ux" ? "UX" : word.charAt(0).toUpperCase() + word.slice(1),
|
||||
)
|
||||
.join(" ");
|
||||
}
|
||||
|
||||
function setupInteractions() {
|
||||
const track = document.querySelector(".gallery-track");
|
||||
const frames = document.querySelectorAll(".gallery-frame");
|
||||
const dots = document.querySelectorAll(".gallery-dot");
|
||||
|
||||
if (!track) return;
|
||||
|
||||
// Intersection Observer for Active State
|
||||
const observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting) {
|
||||
const index = entry.target.dataset.index;
|
||||
|
||||
// Update frames
|
||||
frames.forEach((f) => f.classList.remove("active"));
|
||||
entry.target.classList.add("active");
|
||||
|
||||
// Update dots
|
||||
dots.forEach((d) => {
|
||||
d.classList.remove("active");
|
||||
d.setAttribute("aria-selected", "false");
|
||||
});
|
||||
if (dots[index]) {
|
||||
dots[index].classList.add("active");
|
||||
dots[index].setAttribute("aria-selected", "true");
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
{
|
||||
root: track,
|
||||
threshold: 0.6,
|
||||
},
|
||||
);
|
||||
|
||||
frames.forEach((frame) => observer.observe(frame));
|
||||
|
||||
// Dot navigation
|
||||
dots.forEach((dot, index) => {
|
||||
dot.addEventListener("click", () => {
|
||||
const frame = frames[index];
|
||||
if (frame) {
|
||||
frame.scrollIntoView({ behavior: "smooth", inline: "center" });
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,53 @@
|
||||
export const foundationAnimations = {
|
||||
'Typography': `
|
||||
<svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="foundation-svg">
|
||||
<path d="M10 30L20 10L30 30" stroke="var(--color-mist)" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M10 30L20 10L30 30" stroke="var(--color-accent)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="anim-draw"/>
|
||||
<path d="M15 22H25" stroke="var(--color-accent)" stroke-width="1.5" stroke-linecap="round" class="anim-draw-delay"/>
|
||||
</svg>
|
||||
`,
|
||||
'Color & Contrast': `
|
||||
<svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="foundation-svg">
|
||||
<circle cx="16" cy="20" r="8" stroke="var(--color-ink)" stroke-width="1.5" class="anim-move-x"/>
|
||||
<circle cx="24" cy="20" r="8" stroke="var(--color-accent)" stroke-width="1.5" class="anim-move-x-opp"/>
|
||||
<path d="M20 14.5C21.5 16 22.5 18 22.5 20C22.5 22 21.5 24 20 25.5C18.5 24 17.5 22 17.5 20C17.5 18 18.5 16 20 14.5Z" fill="var(--color-accent)" class="anim-fade-in"/>
|
||||
</svg>
|
||||
`,
|
||||
'Spatial Design': `
|
||||
<svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="foundation-svg">
|
||||
<rect x="5" y="10" width="30" height="18.5" stroke="var(--color-mist)" stroke-width="1"/>
|
||||
<line x1="23.5" y1="10" x2="23.5" y2="28.5" stroke="var(--color-mist)" stroke-width="1"/>
|
||||
<line x1="23.5" y1="21.5" x2="35" y2="21.5" stroke="var(--color-mist)" stroke-width="1"/>
|
||||
<path d="M5 28.5C5 18.28 13.28 10 23.5 10C29.85 10 35 15.15 35 21.5C35 25.42 31.82 28.5 27.9 28.5" fill="none" stroke="var(--color-accent)" stroke-width="1.5" stroke-linecap="round" class="anim-draw"/>
|
||||
</svg>
|
||||
`,
|
||||
'Responsive': `
|
||||
<svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="foundation-svg">
|
||||
<rect x="6" y="8" width="28" height="24" rx="2" stroke="var(--color-ink)" stroke-width="1.5" class="anim-res-frame"/>
|
||||
<rect x="9" y="12" width="10" height="8" rx="1" fill="var(--color-accent)" class="anim-res-img"/>
|
||||
<rect x="22" y="12" width="10" height="2" rx="0.5" fill="var(--color-ink)" class="anim-res-title"/>
|
||||
<rect x="22" y="16.5" width="10" height="1.5" rx="0.5" fill="var(--color-ash)" class="anim-res-line-1"/>
|
||||
<rect x="22" y="20" width="8" height="1.5" rx="0.5" fill="var(--color-ash)" class="anim-res-line-2"/>
|
||||
</svg>
|
||||
`,
|
||||
'Interaction': `
|
||||
<svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="foundation-svg">
|
||||
<rect x="10" y="14" width="20" height="12" rx="6" stroke="var(--color-ink)" stroke-width="1.5"/>
|
||||
<circle cx="16" cy="20" r="4" fill="var(--color-mist)" class="anim-toggle-move"/>
|
||||
</svg>
|
||||
`,
|
||||
'Motion': `
|
||||
<svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="foundation-svg">
|
||||
<line x1="5" y1="32" x2="35" y2="32" stroke="var(--color-ink)" stroke-width="1.5"/>
|
||||
<circle cx="20" cy="15" r="5" fill="var(--color-accent)" class="anim-squash-ball"/>
|
||||
</svg>
|
||||
`,
|
||||
'UX Writing': `
|
||||
<svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="foundation-svg">
|
||||
<rect x="8" y="12" width="18" height="2" rx="1" fill="var(--color-ink)"/>
|
||||
<rect x="8" y="18" width="22" height="2" rx="1" fill="var(--color-ash)"/>
|
||||
<rect x="8" y="24" width="14" height="2" rx="1" fill="var(--color-accent)"/>
|
||||
<line x1="24" y1="23" x2="24" y2="27" stroke="var(--color-accent)" stroke-width="1.5" class="anim-blink"/>
|
||||
</svg>
|
||||
`
|
||||
};
|
||||
@@ -0,0 +1,26 @@
|
||||
import { skillFocusAreas, dimensionGuidelineCounts } from '../data.js';
|
||||
import { foundationAnimations } from './foundation-animations.js';
|
||||
|
||||
export function initFoundationGrid() {
|
||||
const container = document.querySelector('.foundation-grid');
|
||||
if (!container) return;
|
||||
|
||||
const dimensions = skillFocusAreas['impeccable'];
|
||||
if (!dimensions) return;
|
||||
|
||||
container.innerHTML = dimensions.map((dim, i) => `
|
||||
<div class="foundation-column">
|
||||
<div class="foundation-card">
|
||||
<div class="foundation-card-viz">
|
||||
${foundationAnimations[dim.area] || ''}
|
||||
</div>
|
||||
<div class="foundation-card-header">
|
||||
<span class="foundation-card-label">${dim.area}</span>
|
||||
<span class="foundation-card-count">${dimensionGuidelineCounts[dim.area] || ''}</span>
|
||||
</div>
|
||||
<p class="foundation-card-detail">${dim.detail}</p>
|
||||
</div>
|
||||
<div class="foundation-plinth plinth-${i + 1}"></div>
|
||||
</div>
|
||||
`).join('');
|
||||
}
|
||||
@@ -0,0 +1,382 @@
|
||||
/**
|
||||
* Periodic Table of Commands
|
||||
* Clean grid visualization showing all commands organized by category
|
||||
* Hover tooltips show description and relationships inline.
|
||||
*/
|
||||
|
||||
import { commandCategories, commandRelationships, alphaCommands } from '../data.js';
|
||||
|
||||
const categoryColors = {
|
||||
create: { bg: 'var(--cat-create-bg)', border: 'var(--cat-create-border)', text: 'var(--cat-create-text)' },
|
||||
evaluate: { bg: 'var(--cat-evaluate-bg)', border: 'var(--cat-evaluate-border)', text: 'var(--cat-evaluate-text)' },
|
||||
refine: { bg: 'var(--cat-refine-bg)', border: 'var(--cat-refine-border)', text: 'var(--cat-refine-text)' },
|
||||
simplify: { bg: 'var(--cat-simplify-bg)', border: 'var(--cat-simplify-border)', text: 'var(--cat-simplify-text)' },
|
||||
harden: { bg: 'var(--cat-harden-bg)', border: 'var(--cat-harden-border)', text: 'var(--cat-harden-text)' },
|
||||
system: { bg: 'var(--cat-system-bg)', border: 'var(--cat-system-border)', text: 'var(--cat-system-text)' }
|
||||
};
|
||||
|
||||
const categoryLabels = {
|
||||
create: 'Create',
|
||||
evaluate: 'Evaluate',
|
||||
refine: 'Refine',
|
||||
simplify: 'Simplify',
|
||||
harden: 'Harden',
|
||||
system: 'System'
|
||||
};
|
||||
|
||||
const commandSymbols = {
|
||||
'impeccable': 'Im',
|
||||
'craft': 'Cf',
|
||||
'shape': 'Sh',
|
||||
'critique': 'Cr',
|
||||
'audit': 'Au',
|
||||
'typeset': 'Ty',
|
||||
'layout': 'La',
|
||||
'colorize': 'Co',
|
||||
'animate': 'An',
|
||||
'delight': 'De',
|
||||
'bolder': 'Bo',
|
||||
'quieter': 'Qu',
|
||||
'overdrive': 'Od',
|
||||
'distill': 'Di',
|
||||
'clarify': 'Cl',
|
||||
'adapt': 'Ad',
|
||||
'polish': 'Po',
|
||||
'optimize': 'Op',
|
||||
'harden': 'Ha',
|
||||
'onboard': 'On',
|
||||
'teach': 'Te',
|
||||
'document': 'Dc',
|
||||
'extract': 'Ex',
|
||||
'live': 'Li'
|
||||
};
|
||||
|
||||
const commandNumbers = {
|
||||
'impeccable': 1, 'craft': 2, 'shape': 3,
|
||||
'critique': 4, 'audit': 5,
|
||||
'typeset': 6, 'layout': 7, 'colorize': 8, 'animate': 9,
|
||||
'delight': 10, 'bolder': 11, 'quieter': 12, 'overdrive': 13,
|
||||
'distill': 14, 'clarify': 15, 'adapt': 16,
|
||||
'polish': 17, 'optimize': 18, 'harden': 19, 'onboard': 20,
|
||||
'teach': 21, 'document': 22, 'extract': 23, 'live': 24
|
||||
};
|
||||
|
||||
// After the v3.0 consolidation, all commands except the root "impeccable" are
|
||||
// sub-commands of /impeccable. The renderer handles the display label directly
|
||||
// (bare name for sub-commands, "/impeccable" for the root). This map is kept
|
||||
// as an extension point for any future per-command display overrides.
|
||||
const commandDisplay = {};
|
||||
|
||||
export class PeriodicTable {
|
||||
constructor(container) {
|
||||
this.container = container;
|
||||
this.activeTooltip = null;
|
||||
this.activeElement = null;
|
||||
this.init();
|
||||
}
|
||||
|
||||
init() {
|
||||
this.container.innerHTML = '';
|
||||
this.container.style.cssText = `
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
padding: 20px;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
`;
|
||||
|
||||
this.renderTable();
|
||||
}
|
||||
|
||||
renderTable() {
|
||||
const groups = {};
|
||||
Object.entries(commandCategories).forEach(([cmd, cat]) => {
|
||||
if (!groups[cat]) groups[cat] = [];
|
||||
groups[cat].push(cmd);
|
||||
});
|
||||
|
||||
const categoryOrder = ['create', 'evaluate', 'refine', 'simplify', 'harden', 'system'];
|
||||
|
||||
const grid = document.createElement('div');
|
||||
grid.style.cssText = `
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
||||
gap: 16px;
|
||||
flex: 1;
|
||||
`;
|
||||
|
||||
categoryOrder.forEach(cat => {
|
||||
const commands = groups[cat];
|
||||
if (!commands) return;
|
||||
const group = this.createCategoryGroup(cat, commands);
|
||||
grid.appendChild(group);
|
||||
});
|
||||
|
||||
this.container.appendChild(grid);
|
||||
}
|
||||
|
||||
showTooltip(el, cmd) {
|
||||
this.hideTooltip();
|
||||
|
||||
const rel = commandRelationships[cmd] || {};
|
||||
const toArray = (val) => {
|
||||
if (!val) return [];
|
||||
if (Array.isArray(val)) return val;
|
||||
return [val];
|
||||
};
|
||||
|
||||
const pairs = toArray(rel.pairs);
|
||||
const leadsTo = toArray(rel.leadsTo);
|
||||
const combinesWith = toArray(rel.combinesWith);
|
||||
|
||||
// Build relationships line. Command names are shown bare (no slash)
|
||||
// because they're names, not invocations — the invocation is /impeccable <name>.
|
||||
let relParts = [];
|
||||
if (pairs.length > 0) relParts.push(`pairs with ${pairs.join(', ')}`);
|
||||
if (combinesWith.length > 0) relParts.push(`+ ${combinesWith.join(', ')}`);
|
||||
if (leadsTo.length > 0) relParts.push(`then ${leadsTo.join(', ')}`);
|
||||
|
||||
// Strip category prefix from flow for cleaner display
|
||||
const flow = (rel.flow || '').replace(/^[^:]+:\s*/, '');
|
||||
|
||||
const tooltip = document.createElement('div');
|
||||
tooltip.className = 'ptable-tooltip';
|
||||
tooltip.style.cssText = `
|
||||
position: absolute;
|
||||
z-index: 20;
|
||||
background: var(--color-paper);
|
||||
border: 1px solid var(--color-mist);
|
||||
border-radius: 6px;
|
||||
padding: 10px 14px;
|
||||
box-shadow: 0 8px 24px -4px rgba(0,0,0,0.12);
|
||||
pointer-events: none;
|
||||
max-width: 280px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.15s ease;
|
||||
`;
|
||||
|
||||
tooltip.innerHTML = `
|
||||
<div style="font-family: var(--font-body); font-size: 13px; color: var(--color-charcoal); line-height: 1.4; margin-bottom: ${relParts.length ? '6px' : '0'};">${flow}</div>
|
||||
${relParts.length ? `<div style="font-family: var(--font-mono); font-size: 11px; color: var(--color-ash); line-height: 1.4;">${relParts.join(' · ')}</div>` : ''}
|
||||
`;
|
||||
|
||||
this.container.appendChild(tooltip);
|
||||
|
||||
// Position relative to element
|
||||
const elRect = el.getBoundingClientRect();
|
||||
const containerRect = this.container.getBoundingClientRect();
|
||||
|
||||
const left = elRect.left - containerRect.left;
|
||||
const top = elRect.bottom - containerRect.top + 6;
|
||||
|
||||
tooltip.style.left = `${Math.min(left, containerRect.width - 290)}px`;
|
||||
tooltip.style.top = `${top}px`;
|
||||
|
||||
// Fade in
|
||||
requestAnimationFrame(() => { tooltip.style.opacity = '1'; });
|
||||
|
||||
this.activeTooltip = tooltip;
|
||||
}
|
||||
|
||||
hideTooltip() {
|
||||
if (this.activeTooltip) {
|
||||
this.activeTooltip.remove();
|
||||
this.activeTooltip = null;
|
||||
}
|
||||
}
|
||||
|
||||
createCategoryGroup(category, commands) {
|
||||
const colors = categoryColors[category];
|
||||
|
||||
const group = document.createElement('div');
|
||||
group.style.cssText = `display: flex; flex-direction: column; gap: 6px;`;
|
||||
|
||||
const label = document.createElement('div');
|
||||
label.style.cssText = `
|
||||
font-family: var(--font-body);
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: ${colors.text};
|
||||
padding-left: 2px;
|
||||
`;
|
||||
label.textContent = categoryLabels[category];
|
||||
group.appendChild(label);
|
||||
|
||||
const row = document.createElement('div');
|
||||
row.style.cssText = `display: flex; flex-wrap: wrap; gap: 6px;`;
|
||||
|
||||
commands.forEach(cmd => {
|
||||
const element = this.createElement(cmd, category);
|
||||
row.appendChild(element);
|
||||
});
|
||||
|
||||
group.appendChild(row);
|
||||
return group;
|
||||
}
|
||||
|
||||
createElement(cmd, category) {
|
||||
const colors = categoryColors[category];
|
||||
const display = commandDisplay[cmd];
|
||||
|
||||
const el = document.createElement('button');
|
||||
el.type = 'button';
|
||||
// Build accessible label with the full invocation
|
||||
const invocation = cmd === 'impeccable'
|
||||
? '/impeccable'
|
||||
: cmd.startsWith('impeccable ')
|
||||
? `/${cmd}`
|
||||
: `/impeccable ${cmd}`;
|
||||
el.setAttribute('aria-label', `${invocation} command - ${categoryLabels[category]}`);
|
||||
el.style.cssText = `
|
||||
width: 56px;
|
||||
height: 64px;
|
||||
background: ${colors.bg};
|
||||
border: 1.5px solid ${colors.border};
|
||||
border-radius: 5px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: transform 0.15s ease, box-shadow 0.15s ease;
|
||||
position: relative;
|
||||
font-family: inherit;
|
||||
padding: 0;
|
||||
`;
|
||||
|
||||
// Atomic number
|
||||
const number = document.createElement('div');
|
||||
number.style.cssText = `
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
left: 5px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 7px;
|
||||
color: ${colors.text};
|
||||
opacity: 0.5;
|
||||
`;
|
||||
number.textContent = commandNumbers[cmd];
|
||||
el.appendChild(number);
|
||||
|
||||
// Symbol
|
||||
const symbol = document.createElement('div');
|
||||
symbol.style.cssText = `
|
||||
font-family: var(--font-display);
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
color: ${colors.text};
|
||||
line-height: 1;
|
||||
`;
|
||||
symbol.textContent = commandSymbols[cmd];
|
||||
el.appendChild(symbol);
|
||||
|
||||
// Command name. The root "impeccable" is shown with its slash as the
|
||||
// entry point. All other commands are sub-commands and show their
|
||||
// bare name (the invocation is /impeccable <name>).
|
||||
const name = document.createElement('div');
|
||||
name.style.cssText = `
|
||||
font-family: var(--font-mono);
|
||||
font-size: 8px;
|
||||
color: ${colors.text};
|
||||
opacity: 0.7;
|
||||
margin-top: 3px;
|
||||
text-align: center;
|
||||
max-width: 52px;
|
||||
line-height: 1.3;
|
||||
white-space: nowrap;
|
||||
`;
|
||||
if (cmd === 'impeccable') {
|
||||
name.textContent = '/impeccable';
|
||||
} else if (display) {
|
||||
name.textContent = display.label;
|
||||
} else {
|
||||
name.textContent = cmd;
|
||||
}
|
||||
el.appendChild(name);
|
||||
|
||||
// Alpha badge
|
||||
if (alphaCommands.includes(cmd)) {
|
||||
const badge = document.createElement('div');
|
||||
badge.style.cssText = `
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
right: 3px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 5px;
|
||||
letter-spacing: 0.05em;
|
||||
color: ${colors.text};
|
||||
opacity: 0.45;
|
||||
text-transform: uppercase;
|
||||
`;
|
||||
badge.textContent = 'α';
|
||||
el.appendChild(badge);
|
||||
}
|
||||
|
||||
// Hover/focus: show tooltip
|
||||
const activate = () => {
|
||||
el.style.transform = 'translateY(-2px)';
|
||||
el.style.boxShadow = `0 4px 12px ${colors.border}40`;
|
||||
this.showTooltip(el, cmd);
|
||||
|
||||
if (this.activeElement && this.activeElement !== el) {
|
||||
this.activeElement.style.transform = 'translateY(0)';
|
||||
this.activeElement.style.boxShadow = 'none';
|
||||
}
|
||||
this.activeElement = el;
|
||||
};
|
||||
|
||||
const deactivate = () => {
|
||||
el.style.transform = 'translateY(0)';
|
||||
el.style.boxShadow = 'none';
|
||||
this.hideTooltip();
|
||||
};
|
||||
|
||||
el.addEventListener('mouseenter', activate);
|
||||
el.addEventListener('mouseleave', deactivate);
|
||||
el.addEventListener('focus', activate);
|
||||
el.addEventListener('blur', deactivate);
|
||||
|
||||
el.addEventListener('touchstart', (e) => {
|
||||
e.preventDefault();
|
||||
activate();
|
||||
}, { passive: false });
|
||||
|
||||
el.addEventListener('click', () => {
|
||||
activate();
|
||||
const scrollTarget = display ? display.scrollTo : cmd;
|
||||
|
||||
// Navigate the fisheye scroller to this command
|
||||
const fisheyeList = document.getElementById('fisheye-list');
|
||||
if (fisheyeList) {
|
||||
const items = [...fisheyeList.querySelectorAll('.fisheye-item')];
|
||||
const idx = items.findIndex(item => item.dataset.id === scrollTarget);
|
||||
if (idx >= 0 && fisheyeList._scrollToCommand) {
|
||||
// Scroll the commands section into view first
|
||||
const section = document.querySelector('.commands-subsection');
|
||||
if (section) section.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||
fisheyeList._scrollToCommand(idx);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// Fallback: scroll to the spread element
|
||||
const target = document.getElementById(`cmd-${scrollTarget}`);
|
||||
if (target) {
|
||||
target.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||||
}
|
||||
});
|
||||
|
||||
return el;
|
||||
}
|
||||
}
|
||||
|
||||
export function initFrameworkViz() {
|
||||
const container = document.getElementById('framework-viz-container');
|
||||
if (container) {
|
||||
new PeriodicTable(container);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,667 @@
|
||||
import { renderCommandDemo, initCommandDemo } from "../demo-renderer.js";
|
||||
import { initSplitCompare } from "../effects/split-compare.js";
|
||||
import { commandProcessSteps, commandCategories, commandRelationships, alphaCommands } from "../data.js";
|
||||
|
||||
// Track current split instance and command for cleanup
|
||||
let currentSplitInstance = null;
|
||||
let currentCommandId = null;
|
||||
let sourceCache = {}; // Cache fetched source content
|
||||
|
||||
const MOBILE_BREAKPOINT = 900;
|
||||
|
||||
function isMobile() {
|
||||
return window.innerWidth <= MOBILE_BREAKPOINT;
|
||||
}
|
||||
|
||||
export function initGlassTerminal() {
|
||||
// Initial setup if needed
|
||||
}
|
||||
|
||||
export function renderTerminalLayout(commands) {
|
||||
const container = document.querySelector('.commands-gallery');
|
||||
if (!container) return;
|
||||
|
||||
if (isMobile()) {
|
||||
renderMobileLayout(container, commands);
|
||||
} else {
|
||||
renderDesktopLayout(container, commands);
|
||||
}
|
||||
|
||||
// Re-render on resize crossing breakpoint
|
||||
let wasMobile = isMobile();
|
||||
window.addEventListener('resize', () => {
|
||||
const nowMobile = isMobile();
|
||||
if (nowMobile !== wasMobile) {
|
||||
wasMobile = nowMobile;
|
||||
currentSplitInstance = null;
|
||||
currentCommandId = null;
|
||||
if (nowMobile) {
|
||||
renderMobileLayout(container, commands);
|
||||
} else {
|
||||
renderDesktopLayout(container, commands);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// DESKTOP LAYOUT - Magazine Spread
|
||||
// ============================================
|
||||
|
||||
let magazineState = {
|
||||
currentIndex: 0,
|
||||
commands: [],
|
||||
isTransitioning: false,
|
||||
keyboardBound: false,
|
||||
intersectionObserver: null
|
||||
};
|
||||
|
||||
const categoryOrder = ['diagnostic', 'quality', 'intensity', 'adaptation', 'enhancement', 'system'];
|
||||
const categoryLabels = {
|
||||
'create': 'Create',
|
||||
'evaluate': 'Evaluate',
|
||||
'refine': 'Refine',
|
||||
'simplify': 'Simplify',
|
||||
'harden': 'Harden',
|
||||
'system': 'System'
|
||||
};
|
||||
|
||||
function renderDesktopLayout(container, commands) {
|
||||
magazineState.commands = commands;
|
||||
|
||||
let startIndex = -1;
|
||||
|
||||
// Filter out deprecated shims. craft, teach, extract used to be filtered
|
||||
// too (when they were rendered as 'impeccable craft' etc.) but are now
|
||||
// first-class sub-commands that should appear in the gallery.
|
||||
const deprecated = new Set(['teach-impeccable', 'frontend-design', 'arrange', 'normalize', 'onboard', 'impeccable craft', 'impeccable teach', 'impeccable extract']);
|
||||
const filteredCommands = commands.filter(c => !deprecated.has(c.id));
|
||||
|
||||
const categoryOrder = ['create', 'evaluate', 'refine', 'simplify', 'harden', 'system'];
|
||||
const categoryLabelsShort = {
|
||||
'create': 'Create', 'evaluate': 'Evaluate', 'refine': 'Refine',
|
||||
'simplify': 'Simplify', 'harden': 'Harden', 'system': 'System'
|
||||
};
|
||||
// Preferred order within each category (unlisted commands append at end)
|
||||
const categoryCommandOrder = {
|
||||
'create': ['impeccable', 'craft', 'shape'],
|
||||
'evaluate': ['critique', 'audit'],
|
||||
'refine': ['typeset', 'layout', 'colorize', 'animate', 'delight', 'bolder', 'quieter', 'overdrive'],
|
||||
'simplify': ['distill', 'clarify', 'adapt'],
|
||||
'harden': ['polish', 'optimize', 'harden'],
|
||||
'system': ['teach', 'extract']
|
||||
};
|
||||
const grouped = {};
|
||||
filteredCommands.forEach(cmd => {
|
||||
const cat = commandCategories[cmd.id] || 'other';
|
||||
if (!grouped[cat]) grouped[cat] = [];
|
||||
grouped[cat].push(cmd);
|
||||
});
|
||||
// Sort each group by preferred order
|
||||
Object.entries(grouped).forEach(([cat, cmds]) => {
|
||||
const order = categoryCommandOrder[cat] || [];
|
||||
cmds.sort((a, b) => {
|
||||
const ai = order.indexOf(a.id);
|
||||
const bi = order.indexOf(b.id);
|
||||
return (ai === -1 ? 999 : ai) - (bi === -1 ? 999 : bi);
|
||||
});
|
||||
});
|
||||
const orderedCommands = [];
|
||||
const headerIndices = [];
|
||||
categoryOrder.forEach(cat => {
|
||||
if (!grouped[cat]) return;
|
||||
headerIndices.push({ index: orderedCommands.length, label: categoryLabelsShort[cat] || cat });
|
||||
orderedCommands.push(...grouped[cat]);
|
||||
});
|
||||
// Use ordered list for everything
|
||||
filteredCommands.length = 0;
|
||||
filteredCommands.push(...orderedCommands);
|
||||
magazineState.commands = filteredCommands;
|
||||
|
||||
// Determine starting index: URL hash takes priority, otherwise default to "clarify"
|
||||
const hash = window.location.hash;
|
||||
if (hash && hash.startsWith('#cmd-')) {
|
||||
const idx = filteredCommands.findIndex(c => c.id === hash.slice(5));
|
||||
if (idx >= 0) startIndex = idx;
|
||||
}
|
||||
if (startIndex < 0) {
|
||||
startIndex = Math.max(0, filteredCommands.findIndex(c => c.id === 'clarify'));
|
||||
}
|
||||
magazineState.currentIndex = startIndex;
|
||||
|
||||
// Build spreads HTML (after ordering so indices match fisheye)
|
||||
const spreadsHTML = filteredCommands.map((cmd, i) => renderSpread(cmd, i, i === startIndex)).join('');
|
||||
|
||||
const fisheyeHTML = filteredCommands.map((cmd, i) => {
|
||||
const cat = commandCategories[cmd.id] || 'other';
|
||||
const isAlpha = alphaCommands.includes(cmd.id);
|
||||
// The root skill is shown as "/impeccable", everything else is a sub-command
|
||||
// displayed without a slash (invocation is /impeccable <name>)
|
||||
const isRoot = cmd.id === 'impeccable';
|
||||
const label = isRoot
|
||||
? `<span class="fisheye-slash">/</span>impeccable`
|
||||
: cmd.id;
|
||||
return `<button class="fisheye-item${i === startIndex ? ' is-active' : ''}" data-index="${i}" data-id="${cmd.id}" data-cat="${cat}">${label}${isAlpha ? '<span class="fisheye-beta">ALPHA</span>' : ''}</button>`;
|
||||
}).join('');
|
||||
|
||||
container.innerHTML = `
|
||||
<div class="magazine-container">
|
||||
<div class="fisheye-list" id="fisheye-list">
|
||||
<div class="fisheye-scroll">${fisheyeHTML}</div>
|
||||
</div>
|
||||
<div class="magazine-viewport">
|
||||
${spreadsHTML}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Init demo for active spread
|
||||
initSpreadDemo(startIndex);
|
||||
|
||||
// Set up interactions
|
||||
setupFisheyeList(filteredCommands, headerIndices);
|
||||
setupMagazineKeyboard(filteredCommands);
|
||||
setupMagazineIntersection(container);
|
||||
}
|
||||
|
||||
function renderSpread(cmd, index, isActive) {
|
||||
const cat = commandCategories[cmd.id] || 'other';
|
||||
const isAlpha = alphaCommands.includes(cmd.id);
|
||||
const relationship = commandRelationships[cmd.id];
|
||||
// Build relationship flow
|
||||
let flowHTML = '';
|
||||
if (relationship) {
|
||||
if (relationship.pairs) {
|
||||
flowHTML = `
|
||||
<div class="spread-flow">
|
||||
<span class="spread-flow-icon">↔</span>
|
||||
<span class="spread-flow-label">pairs with</span>
|
||||
<span class="spread-flow-cmd">/${relationship.pairs}</span>
|
||||
</div>`;
|
||||
} else if (relationship.leadsTo && relationship.leadsTo.length > 0) {
|
||||
flowHTML = `
|
||||
<div class="spread-flow">
|
||||
<span class="spread-flow-icon">→</span>
|
||||
<span class="spread-flow-label">leads to</span>
|
||||
${relationship.leadsTo.map(c => `<span class="spread-flow-cmd">/${c}</span>`).join(' ')}
|
||||
</div>`;
|
||||
} else if (relationship.combinesWith && relationship.combinesWith.length > 0) {
|
||||
flowHTML = `
|
||||
<div class="spread-flow">
|
||||
<span class="spread-flow-icon">+</span>
|
||||
<span class="spread-flow-label">combines with</span>
|
||||
${relationship.combinesWith.map(c => `<span class="spread-flow-cmd">/${c}</span>`).join(' ')}
|
||||
</div>`;
|
||||
}
|
||||
if (!flowHTML && relationship.flow) {
|
||||
flowHTML = `
|
||||
<div class="spread-flow">
|
||||
<span class="spread-flow-label">${relationship.flow}</span>
|
||||
</div>`;
|
||||
}
|
||||
}
|
||||
|
||||
// The root skill is rendered as /impeccable; sub-commands are rendered as
|
||||
// /impeccable on a smaller line above the command name, so the command name
|
||||
// stays the visual anchor at full display size.
|
||||
const isRoot = cmd.id === 'impeccable';
|
||||
const nameHTML = isRoot
|
||||
? `<span class="spread-slash">/</span>impeccable`
|
||||
: `<span class="spread-namespace"><span class="spread-slash">/</span>impeccable</span>${cmd.id}`;
|
||||
|
||||
return `
|
||||
<div class="magazine-spread${isActive ? ' active' : ''}" data-index="${index}" data-category="${cat}" data-id="${cmd.id}" id="cmd-${cmd.id}">
|
||||
<div class="spread-identity">
|
||||
<span class="spread-category-label">${categoryLabels[cat] || cat}</span>
|
||||
<h3 class="spread-command-name">${nameHTML}${isAlpha ? '<span class="beta-badge">ALPHA</span>' : ''}</h3>
|
||||
<p class="spread-description">${cmd.tagline || cmd.description}</p>
|
||||
${flowHTML}
|
||||
</div>
|
||||
<div class="spread-demo-area" data-demo-index="${index}">
|
||||
<!-- Demo rendered lazily -->
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
function initSpreadDemo(index) {
|
||||
const cmd = magazineState.commands[index];
|
||||
if (!cmd) return;
|
||||
|
||||
const spread = document.querySelector(`.magazine-spread[data-index="${index}"]`);
|
||||
if (!spread) return;
|
||||
|
||||
const demoArea = spread.querySelector('.spread-demo-area');
|
||||
if (!demoArea) return;
|
||||
|
||||
// Cleanup previous split instance
|
||||
if (currentSplitInstance) {
|
||||
currentSplitInstance.destroy();
|
||||
currentSplitInstance = null;
|
||||
}
|
||||
|
||||
currentCommandId = cmd.id;
|
||||
|
||||
// Only render HTML once; re-init split compare every time
|
||||
if (demoArea.dataset.loaded !== 'true') {
|
||||
demoArea.innerHTML = renderCommandDemo(cmd.id);
|
||||
demoArea.dataset.loaded = 'true';
|
||||
}
|
||||
|
||||
const splitComparison = demoArea.querySelector('.demo-split-comparison');
|
||||
if (splitComparison) {
|
||||
currentSplitInstance = initSplitCompare(splitComparison, {
|
||||
defaultPosition: 50
|
||||
});
|
||||
}
|
||||
initCommandDemo(cmd.id, demoArea);
|
||||
}
|
||||
|
||||
function goToSpread(newIndex, commands) {
|
||||
if (newIndex < 0 || newIndex >= commands.length) return;
|
||||
if (newIndex === magazineState.currentIndex) return;
|
||||
|
||||
const oldIndex = magazineState.currentIndex;
|
||||
magazineState.currentIndex = newIndex;
|
||||
|
||||
const spreads = document.querySelectorAll('.magazine-spread');
|
||||
|
||||
// Destroy the old split instance before switching
|
||||
if (currentSplitInstance) {
|
||||
currentSplitInstance.destroy();
|
||||
currentSplitInstance = null;
|
||||
}
|
||||
|
||||
// Mark old as exiting
|
||||
spreads[oldIndex]?.classList.remove('active');
|
||||
spreads[oldIndex]?.classList.add('exiting');
|
||||
|
||||
// Mark new as active
|
||||
spreads[newIndex]?.classList.add('active');
|
||||
spreads[newIndex]?.classList.remove('exiting');
|
||||
|
||||
// No fisheye sync here -- fisheye drives goToSpread, not the other way around
|
||||
|
||||
// Update URL hash
|
||||
const cmd = commands[newIndex];
|
||||
if (cmd) {
|
||||
history.replaceState(null, '', `#cmd-${cmd.id}`);
|
||||
}
|
||||
|
||||
// Init demo for new spread (lazy)
|
||||
initSpreadDemo(newIndex);
|
||||
|
||||
// Clean exiting class after transition
|
||||
setTimeout(() => {
|
||||
spreads[oldIndex]?.classList.remove('exiting');
|
||||
}, 500);
|
||||
}
|
||||
|
||||
function setupFisheyeList(commands, headerIndices = []) {
|
||||
const list = document.getElementById('fisheye-list');
|
||||
const scroll = list?.querySelector('.fisheye-scroll');
|
||||
const items = list ? [...list.querySelectorAll('.fisheye-item')] : [];
|
||||
if (!list || !scroll || !items.length) return;
|
||||
|
||||
// Fixed item height (matches CSS). All math is index-based.
|
||||
// -- Fisheye with absolute positioning --
|
||||
// Each item is placed absolutely. Their Y positions are computed by
|
||||
// accumulating scaled heights, so small items cluster together
|
||||
// and the center item gets full space. Scroll position maps linearly
|
||||
// to a fractional "center index" which drives everything.
|
||||
|
||||
const BASE_H = 36; // height of the center (scale=1) item
|
||||
const MIN_SCALE = 0.35;
|
||||
const RADIUS = 5;
|
||||
const count = items.length;
|
||||
const listH = list.clientHeight;
|
||||
const centerY = listH / 2;
|
||||
let currentActive = -1;
|
||||
|
||||
// Total scroll range: one "step" per item
|
||||
const STEP = 30; // px of scroll per item advance
|
||||
const totalScroll = (count - 1) * STEP;
|
||||
|
||||
// Set scroll container height to accommodate the range + centering padding
|
||||
const spacer = document.createElement('div');
|
||||
spacer.style.height = `${totalScroll + listH}px`;
|
||||
scroll.appendChild(spacer);
|
||||
// Initial scroll to center first item
|
||||
scroll.scrollTop = 0;
|
||||
|
||||
// Map scrollTop to fractional center index
|
||||
const getCenterIndex = () => scroll.scrollTop / STEP;
|
||||
|
||||
// Compute eased scale for a given distance from center
|
||||
const getScale = (dist) => {
|
||||
const ratio = Math.max(0, 1 - dist / RADIUS);
|
||||
const eased = ratio * ratio * (3 - 2 * ratio); // smoothstep
|
||||
return MIN_SCALE + eased * (1 - MIN_SCALE);
|
||||
};
|
||||
|
||||
// Layout: position all items based on current center
|
||||
const layout = (center) => {
|
||||
// First, compute the Y position for each item by accumulating
|
||||
// scaled heights, centered around the center item
|
||||
const heights = items.map((_, i) => {
|
||||
const dist = Math.abs(i - center);
|
||||
return BASE_H * getScale(dist);
|
||||
});
|
||||
|
||||
// Find the Y offset so the fractional center position lands at centerY.
|
||||
// Interpolate between the integer positions for smooth scrolling.
|
||||
const floorIdx = Math.max(0, Math.min(count - 1, Math.floor(center)));
|
||||
const frac = center - floorIdx;
|
||||
|
||||
let yAtFloor = 0;
|
||||
for (let i = 0; i < floorIdx; i++) yAtFloor += heights[i];
|
||||
yAtFloor += heights[floorIdx] / 2;
|
||||
|
||||
// If between two items, blend toward the next
|
||||
let yAtCeil = yAtFloor;
|
||||
if (floorIdx < count - 1) {
|
||||
yAtCeil = yAtFloor + heights[floorIdx] / 2 + heights[floorIdx + 1] / 2;
|
||||
}
|
||||
const yAtCenter = yAtFloor + (yAtCeil - yAtFloor) * frac;
|
||||
const offset = centerY - yAtCenter + scroll.scrollTop;
|
||||
|
||||
// Position each item
|
||||
let y = offset;
|
||||
items.forEach((item, i) => {
|
||||
const h = heights[i];
|
||||
const scale = getScale(Math.abs(i - center));
|
||||
const opacity = 0.25 + (scale - MIN_SCALE) / (1 - MIN_SCALE) * 0.75;
|
||||
|
||||
item.style.top = `${y}px`;
|
||||
item.style.transform = `scale(${scale})`;
|
||||
item.style.opacity = opacity;
|
||||
y += h;
|
||||
});
|
||||
};
|
||||
|
||||
const activate = (idx) => {
|
||||
idx = Math.max(0, Math.min(count - 1, Math.round(idx)));
|
||||
if (idx === currentActive) return;
|
||||
currentActive = idx;
|
||||
items.forEach((it, i) => it.classList.toggle('is-active', i === idx));
|
||||
goToSpread(idx, commands);
|
||||
};
|
||||
|
||||
const scrollToIndex = (idx, behavior = 'smooth') => {
|
||||
idx = Math.max(0, Math.min(count - 1, idx));
|
||||
scroll.scrollTo({ top: idx * STEP, behavior });
|
||||
};
|
||||
|
||||
// Scroll handler
|
||||
let raf = null;
|
||||
scroll.addEventListener('scroll', () => {
|
||||
if (raf) cancelAnimationFrame(raf);
|
||||
raf = requestAnimationFrame(() => {
|
||||
const center = getCenterIndex();
|
||||
layout(center);
|
||||
activate(Math.round(center));
|
||||
});
|
||||
}, { passive: true });
|
||||
|
||||
|
||||
// Click to jump
|
||||
items.forEach((item, i) => {
|
||||
item.addEventListener('click', () => scrollToIndex(i));
|
||||
});
|
||||
|
||||
// Expose for keyboard/external nav
|
||||
list._scrollToCommand = (idx) => scrollToIndex(idx);
|
||||
|
||||
// Init
|
||||
const startIdx = magazineState.currentIndex;
|
||||
currentActive = -1;
|
||||
scroll.scrollTop = startIdx * STEP;
|
||||
layout(startIdx);
|
||||
activate(startIdx);
|
||||
}
|
||||
|
||||
function setupMagazineKeyboard(commands) {
|
||||
if (magazineState.keyboardBound) return;
|
||||
magazineState.keyboardBound = true;
|
||||
|
||||
document.addEventListener('keydown', (e) => {
|
||||
// Only respond when magazine is visible (desktop)
|
||||
if (isMobile()) return;
|
||||
const magazineEl = document.querySelector('.magazine-container');
|
||||
if (!magazineEl) return;
|
||||
|
||||
// Check if magazine is somewhat in the viewport
|
||||
const rect = magazineEl.getBoundingClientRect();
|
||||
const inView = rect.top < window.innerHeight && rect.bottom > 0;
|
||||
if (!inView) return;
|
||||
|
||||
const fisheyeList = document.getElementById('fisheye-list');
|
||||
if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
|
||||
e.preventDefault();
|
||||
fisheyeList?._scrollToCommand?.(magazineState.currentIndex + 1);
|
||||
} else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
|
||||
e.preventDefault();
|
||||
fisheyeList?._scrollToCommand?.(magazineState.currentIndex - 1);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function setupMagazineIntersection(container) {
|
||||
// When the magazine section enters the viewport, ensure the active demo is rendered
|
||||
if (magazineState.intersectionObserver) {
|
||||
magazineState.intersectionObserver.disconnect();
|
||||
}
|
||||
|
||||
magazineState.intersectionObserver = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
initSpreadDemo(magazineState.currentIndex);
|
||||
}
|
||||
});
|
||||
}, { threshold: 0.1 });
|
||||
|
||||
const magazineEl = container.querySelector('.magazine-container');
|
||||
if (magazineEl) {
|
||||
magazineState.intersectionObserver.observe(magazineEl);
|
||||
}
|
||||
}
|
||||
|
||||
function truncateDescription(text, maxLen = 120) {
|
||||
if (text.length <= maxLen) return text;
|
||||
// Cut at last sentence boundary within limit, or last word boundary
|
||||
const truncated = text.slice(0, maxLen);
|
||||
const lastPeriod = truncated.lastIndexOf('.');
|
||||
if (lastPeriod > maxLen * 0.5) return truncated.slice(0, lastPeriod + 1);
|
||||
const lastSpace = truncated.lastIndexOf(' ');
|
||||
return truncated.slice(0, lastSpace) + '...';
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// MOBILE LAYOUT - Carousel + Sticky Demo
|
||||
// ============================================
|
||||
|
||||
function renderMobileLayout(container, commands) {
|
||||
// Build carousel pills
|
||||
// Carousel pills show bare command names for sub-commands, and /impeccable
|
||||
// for the root entry.
|
||||
const carouselHTML = commands.map((cmd, i) => `
|
||||
<button class="mobile-cmd-pill${i === 0 ? ' active' : ''}" data-id="${cmd.id}">
|
||||
${cmd.id === 'impeccable' ? '/impeccable' : cmd.id}
|
||||
</button>
|
||||
`).join('');
|
||||
|
||||
// Build command info cards (one per command, only active one shown)
|
||||
const infoCardsHTML = commands.map((cmd, i) => {
|
||||
const relationship = commandRelationships[cmd.id];
|
||||
let relationshipHTML = '';
|
||||
|
||||
// Relationships show bare command names (e.g., "pairs with quieter")
|
||||
// because the invocation is /impeccable <name>, not /<name>.
|
||||
if (relationship) {
|
||||
if (relationship.pairs) {
|
||||
relationshipHTML = `<div class="mobile-cmd-rel">↔ pairs with <code>${relationship.pairs}</code></div>`;
|
||||
} else if (relationship.leadsTo && relationship.leadsTo.length > 0) {
|
||||
relationshipHTML = `<div class="mobile-cmd-rel">→ leads to ${relationship.leadsTo.map(c => `<code>${c}</code>`).join(', ')}</div>`;
|
||||
}
|
||||
}
|
||||
|
||||
const cardName = cmd.id === 'impeccable'
|
||||
? '/impeccable'
|
||||
: `<span class="mobile-cmd-namespace">/impeccable</span> ${cmd.id}`;
|
||||
|
||||
return `
|
||||
<div class="mobile-cmd-info${i === 0 ? ' active' : ''}" data-id="${cmd.id}">
|
||||
<h3 class="mobile-cmd-name">${cardName}</h3>
|
||||
<p class="mobile-cmd-desc">${cmd.tagline || cmd.description}</p>
|
||||
${relationshipHTML}
|
||||
</div>
|
||||
`;
|
||||
}).join('');
|
||||
|
||||
container.innerHTML = `
|
||||
<div class="mobile-commands-layout">
|
||||
<div class="mobile-carousel-wrapper">
|
||||
<div class="mobile-carousel">
|
||||
${carouselHTML}
|
||||
</div>
|
||||
</div>
|
||||
<div class="mobile-demo-area" id="mobile-demo-content">
|
||||
${renderCommandDemo(commands[0]?.id || 'audit')}
|
||||
</div>
|
||||
<div class="mobile-info-area">
|
||||
${infoCardsHTML}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
setupMobileInteractions(commands);
|
||||
}
|
||||
|
||||
function setupMobileInteractions(commands) {
|
||||
const pills = document.querySelectorAll('.mobile-cmd-pill');
|
||||
const demoArea = document.getElementById('mobile-demo-content');
|
||||
const infoCards = document.querySelectorAll('.mobile-cmd-info');
|
||||
|
||||
// Initialize first demo's split compare
|
||||
const initialSplit = demoArea.querySelector('.demo-split-comparison');
|
||||
if (initialSplit) {
|
||||
currentSplitInstance = initSplitCompare(initialSplit, {
|
||||
defaultPosition: 50,
|
||||
minPosition: 10,
|
||||
maxPosition: 90
|
||||
});
|
||||
}
|
||||
if (commands[0]) initCommandDemo(commands[0].id, demoArea);
|
||||
|
||||
// Pill click/tap handler
|
||||
pills.forEach(pill => {
|
||||
pill.addEventListener('click', () => {
|
||||
const cmdId = pill.dataset.id;
|
||||
const cmd = commands.find(c => c.id === cmdId);
|
||||
if (!cmd || currentCommandId === cmdId) return;
|
||||
|
||||
currentCommandId = cmdId;
|
||||
|
||||
// Update active pill
|
||||
pills.forEach(p => p.classList.remove('active'));
|
||||
pill.classList.add('active');
|
||||
|
||||
// Scroll pill into view horizontally
|
||||
pill.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' });
|
||||
|
||||
// Update info card
|
||||
infoCards.forEach(card => {
|
||||
card.classList.toggle('active', card.dataset.id === cmdId);
|
||||
});
|
||||
|
||||
// Cleanup previous split
|
||||
if (currentSplitInstance) {
|
||||
currentSplitInstance.destroy();
|
||||
currentSplitInstance = null;
|
||||
}
|
||||
|
||||
// Update demo
|
||||
demoArea.innerHTML = renderCommandDemo(cmdId);
|
||||
|
||||
// Init new split compare
|
||||
const splitComparison = demoArea.querySelector('.demo-split-comparison');
|
||||
if (splitComparison) {
|
||||
currentSplitInstance = initSplitCompare(splitComparison, {
|
||||
defaultPosition: 50
|
||||
});
|
||||
}
|
||||
initCommandDemo(cmdId, demoArea);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// STACKED WINDOWS - Tab Switching
|
||||
// ============================================
|
||||
|
||||
function setupStackTabs() {
|
||||
const tabs = document.querySelectorAll('.terminal-stack-tab');
|
||||
const demoWindow = document.querySelector('.terminal-window--demo');
|
||||
const sourceWindow = document.querySelector('.terminal-window--source');
|
||||
|
||||
tabs.forEach(tab => {
|
||||
tab.addEventListener('click', () => {
|
||||
const view = tab.dataset.view;
|
||||
|
||||
// Update tab states
|
||||
tabs.forEach(t => t.classList.remove('active'));
|
||||
tab.classList.add('active');
|
||||
|
||||
// Switch windows
|
||||
if (view === 'source') {
|
||||
demoWindow.classList.add('is-back');
|
||||
sourceWindow.classList.add('is-front');
|
||||
} else {
|
||||
demoWindow.classList.remove('is-back');
|
||||
sourceWindow.classList.remove('is-front');
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
async function fetchCommandSource(cmdId) {
|
||||
// Check cache first
|
||||
if (sourceCache[cmdId]) {
|
||||
return sourceCache[cmdId];
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/command-source/${cmdId}`);
|
||||
if (!response.ok) throw new Error('Failed to fetch source');
|
||||
const data = await response.json();
|
||||
sourceCache[cmdId] = data.content;
|
||||
return data.content;
|
||||
} catch (error) {
|
||||
console.error('Error fetching command source:', error);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
function escapeHtml(text) {
|
||||
const div = document.createElement('div');
|
||||
div.textContent = text;
|
||||
return div.innerHTML;
|
||||
}
|
||||
|
||||
async function updateSourceContent(cmdId) {
|
||||
const titleEl = document.getElementById('source-title');
|
||||
const contentEl = document.getElementById('source-content');
|
||||
|
||||
if (!titleEl || !contentEl) return;
|
||||
|
||||
titleEl.textContent = `${cmdId}.md`;
|
||||
contentEl.innerHTML = '<span class="source-loading">Loading...</span>';
|
||||
|
||||
const source = await fetchCommandSource(cmdId);
|
||||
if (source) {
|
||||
contentEl.textContent = source;
|
||||
} else {
|
||||
contentEl.innerHTML = '<span class="source-loading">Source not available</span>';
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,13 @@
|
||||
import { initSplitCompare } from "../effects/split-compare.js";
|
||||
|
||||
export function initLensEffect() {
|
||||
const container = document.getElementById("lens-comparison");
|
||||
if (!container) return;
|
||||
|
||||
initSplitCompare(container, {
|
||||
defaultPosition: 50
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,242 @@
|
||||
// Interactive Live Mode demo loop. Matches the real picker flow:
|
||||
// - a persistent dark global bar stays at the bottom of the frame the whole time
|
||||
// - a light contextual bar floats above the picked element during a session,
|
||||
// morphing between configure → generating → cycling → accepted
|
||||
//
|
||||
// Plays only while the section is in view. Respects prefers-reduced-motion.
|
||||
|
||||
const PHASE = {
|
||||
HIDDEN: 'hidden',
|
||||
CONFIGURING: 'configuring',
|
||||
GENERATING: 'generating',
|
||||
CYCLING: 'cycling',
|
||||
ACCEPTED: 'accepted',
|
||||
};
|
||||
|
||||
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-ctx', caption: 'Picked. Contextual bar appears.' },
|
||||
{ dt: 700, action: 'cursor-to-input' },
|
||||
{ dt: 300, action: 'type', text: 'more playful', caption: 'Type a refinement, or skip.' },
|
||||
{ dt: 1200, action: 'draw-stroke', caption: 'Annotate on the page, if you want.' },
|
||||
{ dt: 900, 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 ctx = root.querySelector('[data-demo-ctx]');
|
||||
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 || !ctx) return;
|
||||
|
||||
const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
||||
|
||||
// Position the outline around the target.
|
||||
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';
|
||||
};
|
||||
|
||||
// Position the contextual bar below the target (or above if below would
|
||||
// collide with the global bar). Mirrors positionBar() in live-browser.js.
|
||||
const positionCtx = () => {
|
||||
const stageRect = stage.getBoundingClientRect();
|
||||
const targetRect = target.getBoundingClientRect();
|
||||
const ctxRect = ctx.getBoundingClientRect();
|
||||
const GAP = 10;
|
||||
const BAR_RESERVE = 60;
|
||||
const belowTop = targetRect.bottom - stageRect.top + GAP;
|
||||
const aboveTop = targetRect.top - stageRect.top - ctxRect.height - GAP;
|
||||
let top;
|
||||
if (belowTop + ctxRect.height + GAP <= stage.clientHeight - BAR_RESERVE) {
|
||||
top = belowTop;
|
||||
} else if (aboveTop >= GAP) {
|
||||
top = aboveTop;
|
||||
} else {
|
||||
top = stage.clientHeight - ctxRect.height - BAR_RESERVE;
|
||||
}
|
||||
ctx.style.top = top + 'px';
|
||||
};
|
||||
|
||||
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';
|
||||
requestAnimationFrame(() => {
|
||||
positionOutline();
|
||||
positionCtx();
|
||||
});
|
||||
};
|
||||
|
||||
const setCtxPhase = (phase) => {
|
||||
ctx.dataset.phase = phase;
|
||||
if (phase !== PHASE.HIDDEN) requestAnimationFrame(positionCtx);
|
||||
};
|
||||
|
||||
const reset = () => {
|
||||
setCtxPhase(PHASE.HIDDEN);
|
||||
cursor.classList.remove('is-visible', 'is-click');
|
||||
outline.classList.remove('is-visible');
|
||||
annotations.classList.remove('is-visible', 'is-comment-visible');
|
||||
inputText.textContent = '';
|
||||
showVariant(0);
|
||||
};
|
||||
|
||||
const setCaption = (text) => {
|
||||
if (text && captionLabel) 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-ctx':
|
||||
setCtxPhase(PHASE.CONFIGURING);
|
||||
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');
|
||||
setCtxPhase(PHASE.GENERATING);
|
||||
break;
|
||||
case 'show-variant':
|
||||
if (ctx.dataset.phase !== PHASE.CYCLING) setCtxPhase(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);
|
||||
setCtxPhase(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++;
|
||||
};
|
||||
|
||||
if (reduced) {
|
||||
// Freeze on a representative still: cycling, variant 3.
|
||||
showVariant(3);
|
||||
counter.textContent = '3 / 3';
|
||||
positionOutline();
|
||||
outline.classList.add('is-visible');
|
||||
setCtxPhase(PHASE.CYCLING);
|
||||
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);
|
||||
|
||||
window.addEventListener('resize', () => requestAnimationFrame(() => {
|
||||
positionOutline();
|
||||
positionCtx();
|
||||
}));
|
||||
}
|
||||
@@ -0,0 +1,86 @@
|
||||
/**
|
||||
* Sticky Section Nav
|
||||
* Shows/hides based on scroll position and highlights current section.
|
||||
*/
|
||||
|
||||
export function initSectionNav() {
|
||||
const nav = document.getElementById('section-nav');
|
||||
if (!nav) return;
|
||||
|
||||
const items = nav.querySelectorAll('.section-nav-item');
|
||||
const sectionIds = Array.from(items).map(item => item.dataset.section);
|
||||
|
||||
// Show/hide nav based on scroll position
|
||||
const hero = document.getElementById('hero');
|
||||
const footer = document.querySelector('.site-footer');
|
||||
if (!hero) return;
|
||||
|
||||
let ticking = false;
|
||||
|
||||
// Returns the element's top position relative to the document,
|
||||
// which works even when the element is inside a positioned parent.
|
||||
function docTop(el) {
|
||||
return el.getBoundingClientRect().top + window.scrollY;
|
||||
}
|
||||
|
||||
function updateNav() {
|
||||
const scrollY = window.scrollY;
|
||||
const heroBottom = hero.offsetTop + hero.offsetHeight - 100;
|
||||
const footerTop = footer ? docTop(footer) : Infinity;
|
||||
const viewportBottom = scrollY + window.innerHeight;
|
||||
|
||||
// Show nav after hero, hide when footer is visible
|
||||
if (scrollY > heroBottom && viewportBottom < footerTop + 60) {
|
||||
nav.classList.add('is-visible');
|
||||
} else {
|
||||
nav.classList.remove('is-visible');
|
||||
}
|
||||
|
||||
// Find current section
|
||||
let currentSection = null;
|
||||
const viewportMiddle = scrollY + window.innerHeight * 0.4;
|
||||
|
||||
for (let i = sectionIds.length - 1; i >= 0; i--) {
|
||||
const section = document.getElementById(sectionIds[i]);
|
||||
if (section && docTop(section) <= viewportMiddle) {
|
||||
currentSection = sectionIds[i];
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// If the current section shares its top row with siblings (e.g. side-by-side
|
||||
// changelog + FAQ on desktop), treat all of them as active.
|
||||
const activeSections = new Set();
|
||||
if (currentSection) {
|
||||
const currentEl = document.getElementById(currentSection);
|
||||
const currentTop = currentEl ? docTop(currentEl) : 0;
|
||||
sectionIds.forEach(id => {
|
||||
const el = document.getElementById(id);
|
||||
if (el && Math.abs(docTop(el) - currentTop) < 4) {
|
||||
activeSections.add(id);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Update active state
|
||||
items.forEach(item => {
|
||||
if (activeSections.has(item.dataset.section)) {
|
||||
item.classList.add('is-active');
|
||||
} else {
|
||||
item.classList.remove('is-active');
|
||||
}
|
||||
});
|
||||
|
||||
ticking = false;
|
||||
}
|
||||
|
||||
window.addEventListener('scroll', () => {
|
||||
if (!ticking) {
|
||||
requestAnimationFrame(updateNav);
|
||||
ticking = true;
|
||||
}
|
||||
}, { passive: true });
|
||||
|
||||
// Initial check
|
||||
updateNav();
|
||||
}
|
||||
@@ -0,0 +1,148 @@
|
||||
// ============================================
|
||||
// DATA: Skill focus areas, command processes, relationships
|
||||
// ============================================
|
||||
|
||||
// Items that are fully complete and ready for public use
|
||||
// All others will show "Coming Soon"
|
||||
export const readySkills = [
|
||||
'impeccable' // Consolidated skill with all design domains
|
||||
];
|
||||
|
||||
export const readyCommands = [
|
||||
'layout' // First command to be fully completed
|
||||
];
|
||||
|
||||
// Commands marked as alpha — shown with a badge in the UI
|
||||
export const alphaCommands = [
|
||||
'live'
|
||||
];
|
||||
|
||||
// Consolidated impeccable skill with reference domains
|
||||
export const skillFocusAreas = {
|
||||
'impeccable': [
|
||||
{ area: 'Typography', detail: 'Scale, rhythm, hierarchy, expression' },
|
||||
{ area: 'Color & Contrast', detail: 'Accessibility, systems, theming' },
|
||||
{ area: 'Spatial Design', detail: 'Layout, spacing, composition' },
|
||||
{ area: 'Responsive', detail: 'Fluid layouts, touch targets' },
|
||||
{ area: 'Interaction', detail: 'States, feedback, affordances' },
|
||||
{ area: 'Motion', detail: 'Micro-interactions, transitions' },
|
||||
{ area: 'UX Writing', detail: 'Clarity, voice, error messages' }
|
||||
]
|
||||
};
|
||||
|
||||
// Guideline counts per dimension (verified from reference files)
|
||||
export const dimensionGuidelineCounts = {
|
||||
'Typography': 33,
|
||||
'Color & Contrast': 29,
|
||||
'Spatial Design': 27,
|
||||
'Motion': 32,
|
||||
'Interaction': 36,
|
||||
'Responsive': 23,
|
||||
'UX Writing': 32
|
||||
};
|
||||
|
||||
// Reference domains within the impeccable skill
|
||||
export const skillReferenceDomains = [
|
||||
'typography',
|
||||
'color-and-contrast',
|
||||
'spatial-design',
|
||||
'responsive-design',
|
||||
'interaction-design',
|
||||
'motion-design',
|
||||
'ux-writing'
|
||||
];
|
||||
|
||||
export const commandProcessSteps = {
|
||||
'impeccable': ['Direct', 'Design', 'Build', 'Refine'],
|
||||
'craft': ['Shape', 'Reference', 'Build', 'Iterate'],
|
||||
'shape': ['Interview', 'Synthesize', 'Brief', 'Confirm'],
|
||||
'overdrive': ['Assess', 'Choose', 'Build', 'Polish'],
|
||||
'critique': ['Evaluate', 'Critique', 'Prioritize', 'Suggest'],
|
||||
'audit': ['Scan', 'Document', 'Prioritize', 'Recommend'],
|
||||
'typeset': ['Assess', 'Select', 'Scale', 'Refine'],
|
||||
'layout': ['Assess', 'Grid', 'Rhythm', 'Balance'],
|
||||
'colorize': ['Analyze', 'Strategy', 'Apply', 'Balance'],
|
||||
'animate': ['Identify', 'Design', 'Implement', 'Polish'],
|
||||
'delight': ['Identify', 'Design', 'Implement'],
|
||||
'bolder': ['Analyze', 'Amplify', 'Impact'],
|
||||
'quieter': ['Analyze', 'Reduce', 'Refine'],
|
||||
'distill': ['Audit', 'Remove', 'Clarify'],
|
||||
'clarify': ['Read', 'Simplify', 'Improve', 'Test'],
|
||||
'adapt': ['Analyze', 'Adjust', 'Optimize'],
|
||||
'polish': ['Discover', 'Review', 'Refine', 'Verify'],
|
||||
'optimize': ['Profile', 'Identify', 'Improve', 'Measure'],
|
||||
'harden': ['Assess', 'Implement', 'Test', 'Verify'],
|
||||
'onboard': ['Identify', 'Design', 'Guide', 'Measure'],
|
||||
'teach': ['Explore', 'Interview', 'Synthesize', 'Save'],
|
||||
'document': ['Scan', 'Extract', 'Describe', 'Write'],
|
||||
'extract': ['Identify', 'Abstract', 'Migrate', 'Document'],
|
||||
'live': ['Start', 'Select', 'Generate', 'Accept']
|
||||
};
|
||||
|
||||
export const commandCategories = {
|
||||
// CREATE - build something new
|
||||
'impeccable': 'create',
|
||||
'craft': 'create',
|
||||
'shape': 'create',
|
||||
// EVALUATE - review and assess
|
||||
'critique': 'evaluate',
|
||||
'audit': 'evaluate',
|
||||
// REFINE - improve existing design
|
||||
'typeset': 'refine',
|
||||
'layout': 'refine',
|
||||
'colorize': 'refine',
|
||||
'animate': 'refine',
|
||||
'delight': 'refine',
|
||||
'bolder': 'refine',
|
||||
'quieter': 'refine',
|
||||
'overdrive': 'refine',
|
||||
// SIMPLIFY - reduce and clarify
|
||||
'distill': 'simplify',
|
||||
'clarify': 'simplify',
|
||||
'adapt': 'simplify',
|
||||
// HARDEN - production-ready
|
||||
'polish': 'harden',
|
||||
'optimize': 'harden',
|
||||
'harden': 'harden',
|
||||
'onboard': 'harden',
|
||||
// SYSTEM - setup and tooling
|
||||
'teach': 'system',
|
||||
'document': 'system',
|
||||
'extract': 'system',
|
||||
'live': 'system'
|
||||
};
|
||||
|
||||
// Skill relationships - now consolidated into impeccable skill
|
||||
// The impeccable skill contains all domains as reference files
|
||||
export const skillRelationships = {
|
||||
'impeccable': {
|
||||
description: 'Comprehensive design intelligence with progressive reference loading',
|
||||
referenceDomains: ['typography', 'color-and-contrast', 'spatial-design', 'responsive-design', 'interaction-design', 'motion-design', 'ux-writing']
|
||||
}
|
||||
};
|
||||
|
||||
export const commandRelationships = {
|
||||
'impeccable': { flow: 'Create: Freeform design with full design intelligence' },
|
||||
'craft': { flow: 'Create: Full shape-then-build flow with visual iteration' },
|
||||
'shape': { flow: 'Create: Plan UX and UI through structured discovery' },
|
||||
'critique': { leadsTo: ['polish', 'distill', 'bolder', 'quieter', 'typeset', 'layout'], flow: 'Evaluate: UX and design review with scoring' },
|
||||
'audit': { leadsTo: ['harden', 'optimize', 'adapt', 'clarify'], flow: 'Evaluate: Technical quality audit' },
|
||||
'typeset': { combinesWith: ['bolder', 'polish'], flow: 'Refine: Fix typography and type hierarchy' },
|
||||
'layout': { combinesWith: ['distill', 'adapt'], flow: 'Refine: Fix layout and spacing' },
|
||||
'colorize': { combinesWith: ['bolder', 'delight'], flow: 'Refine: Add strategic color' },
|
||||
'animate': { combinesWith: ['delight'], flow: 'Refine: Add purposeful motion' },
|
||||
'delight': { combinesWith: ['bolder', 'animate'], flow: 'Refine: Add personality and joy' },
|
||||
'bolder': { pairs: 'quieter', flow: 'Refine: Amplify timid designs' },
|
||||
'quieter': { pairs: 'bolder', flow: 'Refine: Tone down aggressive designs' },
|
||||
'overdrive': { combinesWith: ['animate', 'delight'], flow: 'Refine: Technically extraordinary effects' },
|
||||
'distill': { combinesWith: ['quieter', 'polish'], flow: 'Simplify: Strip to essence' },
|
||||
'clarify': { combinesWith: ['polish', 'adapt'], flow: 'Simplify: Improve UX copy' },
|
||||
'adapt': { combinesWith: ['polish', 'clarify'], flow: 'Simplify: Adapt for different contexts' },
|
||||
'polish': { flow: 'Harden: Final pass and design system alignment' },
|
||||
'optimize': { flow: 'Harden: Performance improvements' },
|
||||
'harden': { combinesWith: ['optimize'], flow: 'Harden: Edge cases, error handling, and i18n' },
|
||||
'onboard': { combinesWith: ['clarify', 'delight'], flow: 'Harden: First-run experiences and empty states' },
|
||||
'teach': { flow: 'System: One-time project design context setup' },
|
||||
'extract': { flow: 'System: Extract design system components and tokens' },
|
||||
'live': { flow: 'System: Visual variant mode in the browser' }
|
||||
};
|
||||
@@ -0,0 +1,284 @@
|
||||
// ============================================
|
||||
// DEMO RENDERER - Generic rendering for command and skill demos
|
||||
// ============================================
|
||||
|
||||
import { getCommandDemo } from './demos/commands/index.js';
|
||||
import { getSkillDemo } from './demos/skills/index.js';
|
||||
|
||||
/**
|
||||
* Initialize a command demo's JS after its HTML has been inserted into the DOM.
|
||||
* Call this after innerHTML is set and split compare is initialized.
|
||||
*/
|
||||
export function initCommandDemo(commandId, container) {
|
||||
const demo = getCommandDemo(commandId);
|
||||
if (demo && typeof demo.init === 'function') {
|
||||
const demoArea = container.querySelector('.split-after .split-content') || container;
|
||||
console.log('[initCommandDemo]', commandId, 'demoArea:', demoArea);
|
||||
demo.init(demoArea);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Render a command demo with split-screen comparison
|
||||
*/
|
||||
export function renderCommandDemo(commandId) {
|
||||
const demo = getCommandDemo(commandId);
|
||||
|
||||
if (!demo) {
|
||||
// impeccable has multiple modes — show a usage guide
|
||||
if (commandId === 'impeccable') {
|
||||
return `
|
||||
<div class="demo-container">
|
||||
<div class="demo-viewport" style="padding: var(--spacing-lg); font-size: 13px; line-height: 1.6;">
|
||||
<div style="display: flex; flex-direction: column; gap: 16px; color: var(--color-ash);">
|
||||
<div style="font-size: 14px; color: var(--color-text); font-weight: 600;">Three ways to use /impeccable</div>
|
||||
<div style="display: flex; flex-direction: column; gap: 14px;">
|
||||
<div style="display: flex; flex-direction: column; gap: 4px;">
|
||||
<div style="display: flex; gap: 8px; align-items: baseline;">
|
||||
<code style="font-size: 12px; color: var(--spread-accent, var(--color-accent)); font-weight: 600; white-space: nowrap;">/impeccable</code>
|
||||
<span style="opacity: 0.4; font-size: 11px;">freeform</span>
|
||||
</div>
|
||||
<span style="padding-left: 0; opacity: 0.8;">Use on any task. Loads full design intelligence, anti-patterns, and reference knowledge into the current context.</span>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; gap: 4px;">
|
||||
<div style="display: flex; gap: 8px; align-items: baseline;">
|
||||
<code style="font-size: 12px; color: var(--spread-accent, var(--color-accent)); font-weight: 600; white-space: nowrap;">/impeccable teach</code>
|
||||
<span style="opacity: 0.4; font-size: 11px;">one-time setup</span>
|
||||
</div>
|
||||
<span style="padding-left: 0; opacity: 0.8;">Scans your codebase, interviews you about brand and audience, then saves a Design Context that all other commands use automatically.</span>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; gap: 4px;">
|
||||
<div style="display: flex; gap: 8px; align-items: baseline;">
|
||||
<code style="font-size: 12px; color: var(--spread-accent, var(--color-accent)); font-weight: 600; white-space: nowrap;">/impeccable craft</code>
|
||||
<span style="opacity: 0.4; font-size: 11px;">build a feature</span>
|
||||
</div>
|
||||
<span style="padding-left: 0; opacity: 0.8;">Runs /shape to plan UX first, loads the right references, then builds and iterates visually until the result delights.</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="font-size: 12px; opacity: 0.5; margin-top: 2px; font-style: italic;">Start with <code style="font-size: 11px;">/impeccable teach</code> once per project. Then use the other modes as needed.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
// craft is the full end-to-end flow, show the four stages
|
||||
if (commandId === 'craft') {
|
||||
return `
|
||||
<div class="demo-container">
|
||||
<div class="demo-viewport" style="padding: var(--spacing-lg); font-size: 13px; line-height: 1.6;">
|
||||
<div style="display: flex; flex-direction: column; gap: 16px; color: var(--color-ash);">
|
||||
<div style="font-size: 14px; color: var(--color-text); font-weight: 600;">Shape, reference, build, iterate</div>
|
||||
<div style="display: flex; flex-direction: column; gap: 14px;">
|
||||
<div style="display: flex; flex-direction: column; gap: 4px;">
|
||||
<div style="display: flex; gap: 8px; align-items: baseline;">
|
||||
<span style="color: var(--spread-accent, var(--color-accent)); font-weight: 600; font-size: 12px;">1. Shape</span>
|
||||
</div>
|
||||
<span style="opacity: 0.8;">Runs <code style="font-size: 11px;">/impeccable shape</code> internally to build a design brief from discovery questions. No code yet.</span>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; gap: 4px;">
|
||||
<div style="display: flex; gap: 8px; align-items: baseline;">
|
||||
<span style="color: var(--spread-accent, var(--color-accent)); font-weight: 600; font-size: 12px;">2. Reference</span>
|
||||
</div>
|
||||
<span style="opacity: 0.8;">Loads the right reference files for the feature (spatial design, typography, motion, color) based on what the brief calls for.</span>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; gap: 4px;">
|
||||
<div style="display: flex; gap: 8px; align-items: baseline;">
|
||||
<span style="color: var(--spread-accent, var(--color-accent)); font-weight: 600; font-size: 12px;">3. Build</span>
|
||||
</div>
|
||||
<span style="opacity: 0.8;">Implements structure, spacing, type, color, states, motion, responsive. Every decision traces back to the brief.</span>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; gap: 4px;">
|
||||
<div style="display: flex; gap: 8px; align-items: baseline;">
|
||||
<span style="color: var(--spread-accent, var(--color-accent)); font-weight: 600; font-size: 12px;">4. Visual iteration</span>
|
||||
</div>
|
||||
<span style="opacity: 0.8;">Opens the result in a browser, checks against the brief and anti-pattern list, refines until the polish bar is high.</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="font-size: 12px; opacity: 0.5; margin-top: 2px; font-style: italic;">The full shape-then-build flow in one command. Best for brand-new features.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
// teach sets up the project's design context, show the flow
|
||||
if (commandId === 'teach') {
|
||||
return `
|
||||
<div class="demo-container">
|
||||
<div class="demo-viewport" style="padding: var(--spacing-lg); font-size: 13px; line-height: 1.6;">
|
||||
<div style="display: flex; flex-direction: column; gap: 16px; color: var(--color-ash);">
|
||||
<div style="font-size: 14px; color: var(--color-text); font-weight: 600;">One-time project setup</div>
|
||||
<div style="display: flex; flex-direction: column; gap: 14px;">
|
||||
<div style="display: flex; flex-direction: column; gap: 4px;">
|
||||
<div style="display: flex; gap: 8px; align-items: baseline;">
|
||||
<span style="color: var(--spread-accent, var(--color-accent)); font-weight: 600; font-size: 12px;">1. Explore</span>
|
||||
</div>
|
||||
<span style="opacity: 0.8;">Scans the codebase for brand assets, existing design tokens, typography, components, and documentation.</span>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; gap: 4px;">
|
||||
<div style="display: flex; gap: 8px; align-items: baseline;">
|
||||
<span style="color: var(--spread-accent, var(--color-accent)); font-weight: 600; font-size: 12px;">2. Interview</span>
|
||||
</div>
|
||||
<span style="opacity: 0.8;">Asks about audience, brand personality, aesthetic direction, and accessibility needs. Skips anything it can infer from the code.</span>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; gap: 4px;">
|
||||
<div style="display: flex; gap: 8px; align-items: baseline;">
|
||||
<span style="color: var(--spread-accent, var(--color-accent)); font-weight: 600; font-size: 12px;">3. Save</span>
|
||||
</div>
|
||||
<span style="opacity: 0.8;">Writes a <code style="font-size: 11px;">PRODUCT.md</code> file with users, brand, aesthetic direction, and design principles. Every future command reads it automatically.</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="font-size: 12px; opacity: 0.5; margin-top: 2px; font-style: italic;">Run once per project. Then forget it exists.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
// shape is a planning skill — show the process
|
||||
if (commandId === 'shape') {
|
||||
return `
|
||||
<div class="demo-container">
|
||||
<div class="demo-viewport" style="padding: var(--spacing-lg); font-size: 13px; line-height: 1.6;">
|
||||
<div style="display: flex; flex-direction: column; gap: 16px; color: var(--color-ash);">
|
||||
<div style="font-size: 14px; color: var(--color-text); font-weight: 600;">Design before you build</div>
|
||||
<div style="display: flex; flex-direction: column; gap: 14px;">
|
||||
<div style="display: flex; flex-direction: column; gap: 4px;">
|
||||
<div style="display: flex; gap: 8px; align-items: baseline;">
|
||||
<span style="color: var(--spread-accent, var(--color-accent)); font-weight: 600; font-size: 12px;">1. Discovery</span>
|
||||
</div>
|
||||
<span style="opacity: 0.8;">Interviews you about purpose, audience, content, constraints, and anti-goals. Adapts questions based on your answers.</span>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; gap: 4px;">
|
||||
<div style="display: flex; gap: 8px; align-items: baseline;">
|
||||
<span style="color: var(--spread-accent, var(--color-accent)); font-weight: 600; font-size: 12px;">2. Design Brief</span>
|
||||
</div>
|
||||
<span style="opacity: 0.8;">Synthesizes a 9-section brief: feature summary, primary action, design direction, layout strategy, key states, interaction model, content needs, recommended references, and open questions.</span>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; gap: 4px;">
|
||||
<div style="display: flex; gap: 8px; align-items: baseline;">
|
||||
<span style="color: var(--spread-accent, var(--color-accent)); font-weight: 600; font-size: 12px;">3. Handoff</span>
|
||||
</div>
|
||||
<span style="opacity: 0.8;">The confirmed brief guides <code style="font-size: 11px;">/impeccable craft</code> or any other implementation approach. No code written, just the thinking that makes code good.</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="font-size: 12px; opacity: 0.5; margin-top: 2px; font-style: italic;">Use standalone or as the first step of <code style="font-size: 11px;">/impeccable craft</code>.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
return `
|
||||
<div class="demo-container">
|
||||
<div class="demo-viewport">
|
||||
<div style="text-align: center; color: var(--color-ash); font-style: italic; padding: var(--spacing-lg);">
|
||||
Visual demo for /${commandId} coming soon
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
// Use split-screen comparison
|
||||
return `
|
||||
<div class="demo-split-comparison" data-demo="command-${demo.id}">
|
||||
<div class="split-container">
|
||||
<div class="split-before">
|
||||
<div class="split-content">${demo.before}</div>
|
||||
</div>
|
||||
<div class="split-after">
|
||||
<div class="split-content">${demo.after || demo.before}</div>
|
||||
</div>
|
||||
<div class="split-divider"></div>
|
||||
</div>
|
||||
<div class="demo-caption">${demo.caption}</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Render a skill demo (with tabs if multiple demos)
|
||||
*/
|
||||
export function renderSkillDemo(skillId) {
|
||||
const skill = getSkillDemo(skillId);
|
||||
|
||||
if (!skill || !skill.tabs || skill.tabs.length === 0) {
|
||||
return `
|
||||
<div class="demo-container">
|
||||
<div class="demo-viewport">
|
||||
<div style="text-align: center; color: var(--color-ash); padding: var(--spacing-xl);">
|
||||
<p>Demo for ${skillId.replace(/-/g, ' ')} coming soon</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
const showTabs = skill.tabs.length > 1;
|
||||
|
||||
const tabs = showTabs ? skill.tabs.map((tab, i) => `
|
||||
<button class="demo-tab ${i === 0 ? 'active' : ''}" data-demo-tab="${tab.id}" data-skill="${skillId}">
|
||||
${tab.label}
|
||||
</button>
|
||||
`).join('') : '';
|
||||
|
||||
const panels = skill.tabs.map((tab, i) => `
|
||||
<div class="demo-panel ${i === 0 ? 'active' : ''}" data-demo-panel="${tab.id}">
|
||||
${renderSkillTabDemo(skillId, tab)}
|
||||
</div>
|
||||
`).join('');
|
||||
|
||||
return `
|
||||
<div class="demo-tabbed-container">
|
||||
${showTabs ? `<div class="demo-tabs">${tabs}</div>` : ''}
|
||||
<div class="demo-panels">
|
||||
${panels}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Render a single skill tab demo
|
||||
*/
|
||||
function renderSkillTabDemo(skillId, tab) {
|
||||
const hasToggle = tab.hasToggle !== false;
|
||||
const demoId = `${skillId}-${tab.id}`;
|
||||
|
||||
return `
|
||||
<div class="demo-container">
|
||||
<div class="demo-header">
|
||||
${hasToggle ? `
|
||||
<div class="demo-toggle">
|
||||
<span class="demo-toggle-label active" id="${demoId}-before-label">Before</span>
|
||||
<button class="demo-toggle-switch" data-demo="${demoId}" role="switch" aria-checked="false" aria-labelledby="${demoId}-before-label ${demoId}-after-label"></button>
|
||||
<span class="demo-toggle-label" id="${demoId}-after-label">After</span>
|
||||
</div>
|
||||
` : ''}
|
||||
</div>
|
||||
<div class="demo-viewport" data-state="before" id="${demoId}-viewport">
|
||||
${tab.before}
|
||||
</div>
|
||||
<div class="demo-caption">${tab.caption}</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Setup demo tab switching
|
||||
*/
|
||||
export function setupDemoTabs() {
|
||||
document.querySelectorAll('.demo-tab').forEach(tab => {
|
||||
tab.addEventListener('click', () => {
|
||||
const tabId = tab.dataset.demoTab;
|
||||
const container = tab.closest('.demo-tabbed-container');
|
||||
|
||||
container.querySelectorAll('.demo-tab').forEach(t => t.classList.remove('active'));
|
||||
tab.classList.add('active');
|
||||
|
||||
container.querySelectorAll('.demo-panel').forEach(p => p.classList.remove('active'));
|
||||
container.querySelector(`[data-demo-panel="${tabId}"]`)?.classList.add('active');
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,160 @@
|
||||
// ============================================
|
||||
// DEMO TOGGLES - Handle before/after toggle interactions
|
||||
// ============================================
|
||||
|
||||
import { getCommandDemo } from './demos/commands/index.js';
|
||||
import { getSkillDemo } from './demos/skills/index.js';
|
||||
|
||||
/**
|
||||
* Setup toggle handlers for skill demos
|
||||
*/
|
||||
export function setupDemoToggles() {
|
||||
document.querySelectorAll('.demo-toggle-switch').forEach(toggle => {
|
||||
// Skip if already has handler
|
||||
if (toggle.dataset.initialized) return;
|
||||
toggle.dataset.initialized = 'true';
|
||||
|
||||
toggle.addEventListener('click', () => {
|
||||
const demoId = toggle.dataset.demo;
|
||||
const isActive = toggle.classList.toggle('active');
|
||||
|
||||
// Update ARIA state
|
||||
toggle.setAttribute('aria-checked', isActive ? 'true' : 'false');
|
||||
|
||||
// Update labels
|
||||
const labels = toggle.parentElement.querySelectorAll('.demo-toggle-label');
|
||||
labels[0].classList.toggle('active', !isActive);
|
||||
labels[1].classList.toggle('active', isActive);
|
||||
|
||||
// Update demo state
|
||||
handleDemoToggle(demoId, isActive);
|
||||
});
|
||||
});
|
||||
|
||||
// Setup interactive buttons
|
||||
setupInteractiveButtons();
|
||||
}
|
||||
|
||||
/**
|
||||
* Setup toggle handlers for command demos
|
||||
*/
|
||||
export function setupCommandDemoToggles(allCommands, selectCommand) {
|
||||
document.querySelectorAll('.command-demo-area .demo-toggle-switch').forEach(toggle => {
|
||||
// Skip if already has handler
|
||||
if (toggle.dataset.initialized) return;
|
||||
toggle.dataset.initialized = 'true';
|
||||
|
||||
toggle.addEventListener('click', () => {
|
||||
const demoId = toggle.dataset.demo;
|
||||
const isActive = toggle.classList.toggle('active');
|
||||
|
||||
// Update ARIA state
|
||||
toggle.setAttribute('aria-checked', isActive ? 'true' : 'false');
|
||||
|
||||
const labels = toggle.parentElement.querySelectorAll('.demo-toggle-label');
|
||||
labels[0].classList.toggle('active', !isActive);
|
||||
labels[1].classList.toggle('active', isActive);
|
||||
|
||||
handleCommandDemoToggle(demoId, isActive);
|
||||
});
|
||||
});
|
||||
|
||||
document.querySelectorAll('.command-detail-panel .relationship-tag').forEach(tag => {
|
||||
tag.addEventListener('click', () => {
|
||||
const commandId = tag.dataset.command;
|
||||
const command = allCommands.find(c => c.id === commandId);
|
||||
if (command) selectCommand(command);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Setup interactive demo buttons (like the "like" button)
|
||||
*/
|
||||
function setupInteractiveButtons() {
|
||||
document.querySelectorAll('.int-fb-active[data-action="like"]').forEach(btn => {
|
||||
if (btn.dataset.initialized) return;
|
||||
btn.dataset.initialized = 'true';
|
||||
|
||||
btn.addEventListener('click', () => {
|
||||
btn.classList.toggle('liked');
|
||||
const label = btn.nextElementSibling;
|
||||
if (label) {
|
||||
label.textContent = btn.classList.contains('liked') ? 'Liked!' : 'Click to try!';
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle skill demo toggle
|
||||
*/
|
||||
function handleDemoToggle(demoId, isAfter) {
|
||||
const viewport = document.getElementById(`${demoId}-viewport`);
|
||||
if (!viewport) return;
|
||||
|
||||
viewport.dataset.state = isAfter ? 'after' : 'before';
|
||||
|
||||
// Parse skill ID and tab ID from demoId (e.g., "ux-writing-errors")
|
||||
const parts = demoId.split('-');
|
||||
const tabId = parts.pop();
|
||||
const skillId = parts.join('-');
|
||||
|
||||
const skill = getSkillDemo(skillId);
|
||||
if (!skill) return;
|
||||
|
||||
const tab = skill.tabs.find(t => t.id === tabId);
|
||||
if (!tab) return;
|
||||
|
||||
// Check for custom toggle handler
|
||||
if (tab.onToggle) {
|
||||
tab.onToggle(viewport, isAfter);
|
||||
return;
|
||||
}
|
||||
|
||||
// Check for CSS class toggle
|
||||
if (tab.beforeClass && tab.afterClass) {
|
||||
const demo = viewport.firstElementChild;
|
||||
if (demo) {
|
||||
demo.className = isAfter ? tab.afterClass : tab.beforeClass;
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// HTML swap
|
||||
if (tab.after && tab.before) {
|
||||
viewport.innerHTML = isAfter ? tab.after : tab.before;
|
||||
|
||||
// Run after-render callback if exists
|
||||
if (isAfter && tab.onAfterRender) {
|
||||
tab.onAfterRender();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle command demo toggle
|
||||
*/
|
||||
function handleCommandDemoToggle(demoId, isAfter) {
|
||||
// Extract command ID from demoId (e.g., "command-normalize" -> "normalize")
|
||||
const commandId = demoId.replace('command-', '');
|
||||
const demo = getCommandDemo(commandId);
|
||||
|
||||
if (!demo) return;
|
||||
|
||||
const viewport = document.getElementById(`${demoId}-viewport`);
|
||||
if (!viewport) return;
|
||||
|
||||
viewport.dataset.state = isAfter ? 'after' : 'before';
|
||||
|
||||
// Check for custom toggle handler
|
||||
if (demo.onToggle) {
|
||||
demo.onToggle(viewport, isAfter);
|
||||
return;
|
||||
}
|
||||
|
||||
// HTML swap
|
||||
if (demo.after && demo.before) {
|
||||
viewport.innerHTML = isAfter ? demo.after : demo.before;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,80 @@
|
||||
// Adapt command demo - shows desktop-only design becoming responsive
|
||||
export default {
|
||||
id: 'adapt',
|
||||
caption: 'Fixed layout → Responsive across devices',
|
||||
|
||||
before: `
|
||||
<div style="width: 100%; max-width: 280px; display: flex; gap: 12px; align-items: flex-end;">
|
||||
<div style="text-align: center;">
|
||||
<div style="width: 48px; height: 80px; background: #f5f5f5; border: 2px solid #ddd; border-radius: 6px; padding: 4px; box-sizing: border-box;">
|
||||
<div style="height: 100%; display: flex; flex-direction: column; gap: 2px; overflow: hidden;">
|
||||
<div style="height: 16px; background: #ccc; border-radius: 2px;"></div>
|
||||
<div style="height: 8px; background: #e0e0e0; border-radius: 1px; width: 80%;"></div>
|
||||
<div style="height: 8px; background: #e0e0e0; border-radius: 1px; font-size: 6px; color: #999; overflow: hidden;">Text too small...</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="font-size: 9px; color: #999; margin-top: 4px;">Mobile</div>
|
||||
<div style="font-size: 8px; color: #cc0000;">Broken ✗</div>
|
||||
</div>
|
||||
<div style="text-align: center;">
|
||||
<div style="width: 100px; height: 70px; background: #f5f5f5; border: 2px solid #ddd; border-radius: 4px; padding: 6px; box-sizing: border-box;">
|
||||
<div style="display: flex; gap: 4px; height: 100%;">
|
||||
<div style="width: 25%; background: #ccc; border-radius: 2px;"></div>
|
||||
<div style="flex: 1; display: flex; flex-direction: column; gap: 2px;">
|
||||
<div style="height: 12px; background: #e0e0e0; border-radius: 2px;"></div>
|
||||
<div style="flex: 1; background: #eee; border-radius: 2px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="font-size: 9px; color: #999; margin-top: 4px;">Desktop</div>
|
||||
<div style="font-size: 8px; color: #22c55e;">Works ✓</div>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
|
||||
after: `
|
||||
<div style="width: 100%; max-width: 280px; display: flex; gap: 12px; align-items: flex-end;">
|
||||
<div style="text-align: center;">
|
||||
<div style="width: 48px; height: 80px; background: var(--color-paper); border: 2px solid var(--color-mist); border-radius: 6px; padding: 4px; box-sizing: border-box;">
|
||||
<div style="height: 100%; display: flex; flex-direction: column; gap: 3px;">
|
||||
<div style="height: 12px; background: var(--color-ink); border-radius: 2px;"></div>
|
||||
<div style="flex: 1; background: var(--color-mist); border-radius: 2px;"></div>
|
||||
<div style="height: 14px; background: var(--color-accent); border-radius: 2px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="font-size: 9px; color: var(--color-ash); margin-top: 4px;">Mobile</div>
|
||||
<div style="font-size: 8px; color: #22c55e;">Stacked ✓</div>
|
||||
</div>
|
||||
<div style="text-align: center;">
|
||||
<div style="width: 72px; height: 56px; background: var(--color-paper); border: 2px solid var(--color-mist); border-radius: 4px; padding: 4px; box-sizing: border-box;">
|
||||
<div style="height: 100%; display: flex; flex-direction: column; gap: 2px;">
|
||||
<div style="height: 10px; background: var(--color-ink); border-radius: 2px;"></div>
|
||||
<div style="flex: 1; display: flex; gap: 2px;">
|
||||
<div style="flex: 1; background: var(--color-mist); border-radius: 2px;"></div>
|
||||
<div style="flex: 1; background: var(--color-mist); border-radius: 2px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="font-size: 9px; color: var(--color-ash); margin-top: 4px;">Tablet</div>
|
||||
<div style="font-size: 8px; color: #22c55e;">2-col ✓</div>
|
||||
</div>
|
||||
<div style="text-align: center;">
|
||||
<div style="width: 100px; height: 64px; background: var(--color-paper); border: 2px solid var(--color-mist); border-radius: 4px; padding: 4px; box-sizing: border-box;">
|
||||
<div style="display: flex; gap: 3px; height: 100%;">
|
||||
<div style="width: 20%; background: var(--color-charcoal); border-radius: 2px;"></div>
|
||||
<div style="flex: 1; display: flex; flex-direction: column; gap: 2px;">
|
||||
<div style="height: 10px; background: var(--color-ink); border-radius: 2px;"></div>
|
||||
<div style="flex: 1; display: flex; gap: 2px;">
|
||||
<div style="flex: 1; background: var(--color-mist); border-radius: 2px;"></div>
|
||||
<div style="flex: 1; background: var(--color-mist); border-radius: 2px;"></div>
|
||||
<div style="flex: 1; background: var(--color-mist); border-radius: 2px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="font-size: 9px; color: var(--color-ash); margin-top: 4px;">Desktop</div>
|
||||
<div style="font-size: 8px; color: #22c55e;">Sidebar ✓</div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
};
|
||||
@@ -0,0 +1,44 @@
|
||||
// Animate command demo - shows static elements becoming choreographed
|
||||
export default {
|
||||
id: 'animate',
|
||||
caption: 'Static layout → Choreographed entrance',
|
||||
|
||||
before: `
|
||||
<div style="width: 100%; max-width: 220px; display: flex; flex-direction: column; gap: 8px;">
|
||||
<div style="height: 32px; background: #e0e0e0; border-radius: 4px;"></div>
|
||||
<div style="height: 12px; background: #e0e0e0; border-radius: 2px; width: 60%;"></div>
|
||||
<div style="display: flex; gap: 8px; margin-top: 8px;">
|
||||
<div style="flex: 1; height: 64px; background: #e0e0e0; border-radius: 4px;"></div>
|
||||
<div style="flex: 1; height: 64px; background: #e0e0e0; border-radius: 4px;"></div>
|
||||
</div>
|
||||
<div style="height: 10px; background: #e0e0e0; border-radius: 2px; width: 80%; margin-top: 8px;"></div>
|
||||
<div style="height: 10px; background: #e0e0e0; border-radius: 2px; width: 65%;"></div>
|
||||
</div>
|
||||
`,
|
||||
|
||||
after: `
|
||||
<div style="width: 100%; max-width: 220px; display: flex; flex-direction: column; gap: 8px;">
|
||||
<div style="height: 32px; background: var(--color-ink); border-radius: 4px; animation: animDemoFade 0.5s ease-out both;"></div>
|
||||
<div style="height: 12px; background: var(--color-ash); border-radius: 2px; width: 60%; animation: animDemoFade 0.5s ease-out 0.1s both;"></div>
|
||||
<div style="display: flex; gap: 8px; margin-top: 8px;">
|
||||
<div style="flex: 1; height: 64px; background: var(--color-mist); border-radius: 4px; animation: animDemoSlide 0.4s ease-out 0.2s both;"></div>
|
||||
<div style="flex: 1; height: 64px; background: var(--color-mist); border-radius: 4px; animation: animDemoSlide 0.4s ease-out 0.3s both;"></div>
|
||||
</div>
|
||||
<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>
|
||||
<div style="height: 10px; background: var(--color-mist); border-radius: 2px; width: 65%; animation: animDemoFade 0.4s ease-out 0.5s both;"></div>
|
||||
</div>
|
||||
<style>
|
||||
@keyframes animDemoFade {
|
||||
from { opacity: 0; transform: translateY(8px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
@keyframes animDemoSlide {
|
||||
from { opacity: 0; transform: translateY(16px) scale(0.95); }
|
||||
to { opacity: 1; transform: translateY(0) scale(1); }
|
||||
}
|
||||
</style>
|
||||
`
|
||||
};
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,47 @@
|
||||
// Arrange command demo - shows monotonous equal spacing becoming rhythmic and intentional
|
||||
export default {
|
||||
id: 'arrange',
|
||||
caption: 'Equal spacing everywhere → Intentional rhythm and hierarchy',
|
||||
|
||||
before: `
|
||||
<div style="width: 100%; max-width: 240px; padding: 16px;">
|
||||
<div style="text-align: center; margin-bottom: 16px;">
|
||||
<div style="font-size: 14px; font-weight: bold; color: #333;">Team Members</div>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; gap: 16px;">
|
||||
<div style="padding: 16px; background: #f5f5f5; border: 1px solid #e0e0e0; border-radius: 8px; text-align: center;">
|
||||
<div style="width: 32px; height: 32px; background: #ddd; border-radius: 50%; margin: 0 auto 8px;"></div>
|
||||
<div style="font-size: 13px; color: #333;">Alice Chen</div>
|
||||
<div style="font-size: 12px; color: #888;">Designer</div>
|
||||
</div>
|
||||
<div style="padding: 16px; background: #f5f5f5; border: 1px solid #e0e0e0; border-radius: 8px; text-align: center;">
|
||||
<div style="width: 32px; height: 32px; background: #ddd; border-radius: 50%; margin: 0 auto 8px;"></div>
|
||||
<div style="font-size: 13px; color: #333;">Bob Park</div>
|
||||
<div style="font-size: 12px; color: #888;">Engineer</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
|
||||
after: `
|
||||
<div style="width: 100%; max-width: 240px; padding: 16px; font-family: 'Instrument Sans', sans-serif;">
|
||||
<div style="font-size: 0.8125rem; font-weight: 600; color: var(--color-ink); margin-bottom: 16px;">Team Members</div>
|
||||
<div style="display: flex; flex-direction: column; gap: 6px;">
|
||||
<div style="display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--color-mist);">
|
||||
<div style="width: 28px; height: 28px; background: var(--color-accent); border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: white; font-size: 11px; font-weight: 600;">AC</div>
|
||||
<div style="flex: 1;">
|
||||
<div style="font-size: 0.8125rem; font-weight: 500; color: var(--color-ink);">Alice Chen</div>
|
||||
<div style="font-size: 0.6875rem; color: var(--color-ash);">Designer</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 12px; padding: 10px 0;">
|
||||
<div style="width: 28px; height: 28px; background: color-mix(in oklch, var(--color-accent) 60%, var(--color-ink)); border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: white; font-size: 11px; font-weight: 600;">BP</div>
|
||||
<div style="flex: 1;">
|
||||
<div style="font-size: 0.8125rem; font-weight: 500; color: var(--color-ink);">Bob Park</div>
|
||||
<div style="font-size: 0.6875rem; color: var(--color-ash);">Engineer</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
};
|
||||
@@ -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: `
|
||||
<div style="display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 260px;">
|
||||
<div style="padding: 12px; background: #f8f8f8; border-radius: 4px;">
|
||||
<div style="font-size: 12px; color: #aaa;">Welcome message</div>
|
||||
<button style="margin-top: 8px; padding: 4px 8px; font-size: 11px; background: #ddd; border: none; border-radius: 2px; color: #888;">click here</button>
|
||||
</div>
|
||||
<div style="padding: 16px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 8px;">
|
||||
<div style="font-size: 15px; color: rgba(255,255,255,0.7);">Featured Item</div>
|
||||
</div>
|
||||
<div style="display: flex; gap: 4px;">
|
||||
<button style="width: 20px; height: 20px; font-size: 10px; background: #eee; border: none;">←</button>
|
||||
<button style="width: 20px; height: 20px; font-size: 10px; background: #eee; border: none;">→</button>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
|
||||
after: `
|
||||
<div style="display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 280px;">
|
||||
<div style="padding: 12px; background: #fff8f8; border: 1px solid #ffcccc; border-radius: 4px; position: relative;">
|
||||
<div style="position: absolute; top: -8px; right: 8px; background: #ff4444; color: white; font-size: 9px; padding: 2px 6px; border-radius: 8px; font-weight: 600;">CONTRAST</div>
|
||||
<div style="font-size: 12px; color: #aaa;">Welcome message</div>
|
||||
<button style="margin-top: 8px; padding: 4px 8px; font-size: 11px; background: #ddd; border: none; border-radius: 2px; color: #888;">click here</button>
|
||||
</div>
|
||||
<div style="padding: 16px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 8px; border: 2px solid #ff9800; position: relative;">
|
||||
<div style="position: absolute; top: -8px; right: 8px; background: #ff9800; color: white; font-size: 9px; padding: 2px 6px; border-radius: 8px; font-weight: 600;">READABILITY</div>
|
||||
<div style="font-size: 15px; color: rgba(255,255,255,0.7);">Featured Item</div>
|
||||
</div>
|
||||
<div style="display: flex; gap: 4px; padding: 4px; background: #fff3e0; border: 1px solid #ffcc80; border-radius: 4px; position: relative;">
|
||||
<div style="position: absolute; top: -8px; right: 8px; background: #ff9800; color: white; font-size: 9px; padding: 2px 6px; border-radius: 8px; font-weight: 600;">TOUCH TARGET</div>
|
||||
<button style="width: 20px; height: 20px; font-size: 10px; background: #eee; border: none;">←</button>
|
||||
<button style="width: 20px; height: 20px; font-size: 10px; background: #eee; border: none;">→</button>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
};
|
||||
@@ -0,0 +1,24 @@
|
||||
// Bolder command demo - shows timid design becoming bold and confident
|
||||
export default {
|
||||
id: 'bolder',
|
||||
caption: 'Timid design → Bold, confident design',
|
||||
|
||||
before: `
|
||||
<div style="text-align: center; padding: var(--spacing-md); max-width: 280px;">
|
||||
<div style="font-size: 1.125rem; font-weight: 500; margin-bottom: 8px; color: var(--color-charcoal);">Introducing Our Product</div>
|
||||
<div style="font-size: 0.875rem; color: var(--color-ash); margin-bottom: 16px;">A solution for modern teams</div>
|
||||
<button style="padding: 8px 16px; background: var(--color-mist); color: var(--color-charcoal); border: none; border-radius: 4px; font-size: 0.875rem;">Learn More</button>
|
||||
</div>
|
||||
`,
|
||||
|
||||
after: `
|
||||
<div style="text-align: center; padding: var(--spacing-lg); max-width: 320px;">
|
||||
<div style="font-family: var(--font-display); font-size: 2.5rem; font-weight: 300; font-style: italic; margin-bottom: 12px; color: var(--color-ink); line-height: 1;">Introducing Our Product</div>
|
||||
<div style="font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--color-accent); margin-bottom: 24px;">A solution for modern teams</div>
|
||||
<button style="padding: 14px 32px; background: var(--color-ink); color: var(--color-paper); border: none; font-size: 0.9375rem; font-weight: 500; letter-spacing: 0.02em;">Learn More</button>
|
||||
</div>
|
||||
`
|
||||
};
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,36 @@
|
||||
// Clarify command demo - shows confusing UX copy becoming clear
|
||||
export default {
|
||||
id: 'clarify',
|
||||
caption: 'Confusing copy → Clear, actionable language',
|
||||
|
||||
before: `
|
||||
<div style="width: 100%; max-width: 260px; display: flex; flex-direction: column; gap: 12px;">
|
||||
<div style="padding: 12px; background: #f5f5f5; border-radius: 6px;">
|
||||
<div style="font-size: 13px; font-weight: 600; margin-bottom: 4px;">Processing Status</div>
|
||||
<div style="font-size: 12px; color: #666;">Your request is being processed. Please wait while we complete the operation. This may take some time depending on various factors.</div>
|
||||
</div>
|
||||
<div style="padding: 12px; background: #fff8e1; border-radius: 6px;">
|
||||
<div style="font-size: 13px; font-weight: 600; margin-bottom: 4px;">⚠️ Warning</div>
|
||||
<div style="font-size: 12px; color: #666;">Proceeding with this action may result in irreversible consequences to your data and settings configuration.</div>
|
||||
</div>
|
||||
<button style="padding: 10px; background: #333; color: white; border: none; border-radius: 4px; font-size: 13px;">Submit Request</button>
|
||||
</div>
|
||||
`,
|
||||
|
||||
after: `
|
||||
<div style="width: 100%; max-width: 260px; display: flex; flex-direction: column; gap: 12px;">
|
||||
<div style="padding: 12px; background: var(--color-paper); border: 1px solid var(--color-mist); border-radius: 6px;">
|
||||
<div style="font-size: 0.8125rem; font-weight: 600; color: var(--color-ink); margin-bottom: 4px;">Saving changes...</div>
|
||||
<div style="font-size: 0.75rem; color: var(--color-ash);">About 10 seconds remaining</div>
|
||||
<div style="margin-top: 8px; height: 4px; background: var(--color-mist); border-radius: 2px; overflow: hidden;">
|
||||
<div style="width: 60%; height: 100%; background: var(--color-accent);"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="padding: 12px; background: #fef3c7; border: 1px solid #fcd34d; border-radius: 6px;">
|
||||
<div style="font-size: 0.8125rem; font-weight: 600; color: #92400e; margin-bottom: 4px;">Delete this project?</div>
|
||||
<div style="font-size: 0.75rem; color: #854d0e; line-height: 1.5;">This will permanently delete 23 files. You can't undo this.</div>
|
||||
</div>
|
||||
<button style="padding: 10px; background: var(--color-ink); color: var(--color-paper); border: none; border-radius: 6px; font-size: 0.8125rem; font-weight: 500;">Save and Continue →</button>
|
||||
</div>
|
||||
`
|
||||
};
|
||||
@@ -0,0 +1,56 @@
|
||||
// Colorize command demo - shows monochrome becoming strategically colored
|
||||
export default {
|
||||
id: 'colorize',
|
||||
caption: 'Monochrome UI → Strategic, harmonious color',
|
||||
|
||||
before: `
|
||||
<div style="width: 100%; max-width: 240px; padding: 16px; background: #f5f5f5; border: 1px solid #e0e0e0; border-radius: 6px;">
|
||||
<div style="font-size: 11px; color: #999; margin-bottom: 12px;">TASK OVERVIEW</div>
|
||||
<div style="display: flex; flex-direction: column; gap: 8px;">
|
||||
<div style="display: flex; align-items: center; gap: 8px; padding: 8px; background: white; border: 1px solid #e0e0e0; border-radius: 4px;">
|
||||
<div style="width: 8px; height: 8px; background: #ccc; border-radius: 2px;"></div>
|
||||
<span style="font-size: 12px; color: #666;">Design review</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 8px; padding: 8px; background: white; border: 1px solid #e0e0e0; border-radius: 4px;">
|
||||
<div style="width: 8px; height: 8px; background: #ccc; border-radius: 2px;"></div>
|
||||
<span style="font-size: 12px; color: #666;">Update copy</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 8px; padding: 8px; background: white; border: 1px solid #e0e0e0; border-radius: 4px;">
|
||||
<div style="width: 8px; height: 8px; background: #ccc; border-radius: 2px;"></div>
|
||||
<span style="font-size: 12px; color: #666;">Final QA</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top: 12px; padding-top: 12px; border-top: 1px solid #e0e0e0;">
|
||||
<div style="font-size: 11px; color: #999;">Progress: 1 of 3</div>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
|
||||
after: `
|
||||
<div style="width: 100%; max-width: 240px; padding: 16px; background: var(--color-paper); border: 1px solid var(--color-mist); border-radius: 8px;">
|
||||
<div style="font-size: 0.6875rem; letter-spacing: 0.08em; color: var(--color-ash); margin-bottom: 12px;">TASK OVERVIEW</div>
|
||||
<div style="display: flex; flex-direction: column; gap: 8px;">
|
||||
<div style="display: flex; align-items: center; gap: 10px; padding: 10px; background: color-mix(in oklch, var(--color-accent) 8%, var(--color-paper)); border: 1px solid color-mix(in oklch, var(--color-accent) 20%, var(--color-paper)); border-radius: 6px;">
|
||||
<div style="width: 18px; height: 18px; background: var(--color-accent); border-radius: 4px; display: flex; align-items: center; justify-content: center; color: white; font-size: 10px;">✓</div>
|
||||
<span style="font-size: 0.8125rem; color: var(--color-ink); text-decoration: line-through; opacity: 0.6;">Design review</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 10px; padding: 10px; background: var(--color-paper); border: 2px solid var(--color-accent); border-radius: 6px;">
|
||||
<div style="width: 18px; height: 18px; border: 2px solid var(--color-accent); border-radius: 4px; background: white;"></div>
|
||||
<span style="font-size: 0.8125rem; color: var(--color-ink); font-weight: 500;">Update copy</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 10px; padding: 10px; background: var(--color-paper); border: 1px solid var(--color-mist); border-radius: 6px;">
|
||||
<div style="width: 18px; height: 18px; border: 1px solid var(--color-mist); border-radius: 4px; background: white;"></div>
|
||||
<span style="font-size: 0.8125rem; color: var(--color-ash);">Final QA</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--color-mist);">
|
||||
<div style="display: flex; align-items: center; gap: 8px;">
|
||||
<div style="flex: 1; height: 4px; background: var(--color-mist); border-radius: 2px; overflow: hidden;">
|
||||
<div style="width: 33%; height: 100%; background: var(--color-accent);"></div>
|
||||
</div>
|
||||
<span style="font-size: 0.6875rem; color: var(--color-accent); font-weight: 500;">1/3</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
};
|
||||
@@ -0,0 +1,47 @@
|
||||
// Critique command demo - shows design/UX issues being identified
|
||||
export default {
|
||||
id: 'critique',
|
||||
caption: 'Confusing design → UX issues identified with fixes',
|
||||
|
||||
before: `
|
||||
<div style="display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 260px; padding: 12px; background: #fafafa; border-radius: 6px;">
|
||||
<div style="font-size: 11px; color: #666; text-transform: uppercase; letter-spacing: 0.5px;">Dashboard</div>
|
||||
<div style="font-size: 11px; color: #666;">Welcome to your dashboard where you can manage things</div>
|
||||
<div style="display: flex; gap: 6px;">
|
||||
<button style="flex: 1; padding: 8px; font-size: 11px; background: #4F46E5; color: white; border: none; border-radius: 4px; font-weight: 500;">Create</button>
|
||||
<button style="flex: 1; padding: 8px; font-size: 11px; background: #4F46E5; color: white; border: none; border-radius: 4px; font-weight: 500;">Import</button>
|
||||
<button style="flex: 1; padding: 8px; font-size: 11px; background: #4F46E5; color: white; border: none; border-radius: 4px; font-weight: 500;">Export</button>
|
||||
<button style="flex: 1; padding: 8px; font-size: 11px; background: #4F46E5; color: white; border: none; border-radius: 4px; font-weight: 500;">Settings</button>
|
||||
</div>
|
||||
<div style="padding: 10px; background: white; border: 1px solid #e5e5e5; border-radius: 4px;">
|
||||
<div style="font-size: 10px; color: #999;">Recent Activity</div>
|
||||
<div style="font-size: 10px; color: #999; margin-top: 4px;">No items to display at this time</div>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
|
||||
after: `
|
||||
<div style="display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 280px; padding: 12px; background: #fafafa; border-radius: 6px;">
|
||||
<div style="position: relative;">
|
||||
<div style="font-size: 11px; color: #666; text-transform: uppercase; letter-spacing: 0.5px;">Dashboard</div>
|
||||
<div style="position: absolute; top: -6px; right: -4px; background: #7c3aed; color: white; font-size: 8px; padding: 2px 5px; border-radius: 6px; font-weight: 600;">HIERARCHY</div>
|
||||
</div>
|
||||
<div style="font-size: 11px; color: #666; background: #fef3c7; padding: 4px 6px; border-radius: 3px; position: relative;">
|
||||
Welcome to your dashboard where you can manage things
|
||||
<div style="position: absolute; top: -6px; right: -4px; background: #d97706; color: white; font-size: 8px; padding: 2px 5px; border-radius: 6px; font-weight: 600;">REDUNDANT</div>
|
||||
</div>
|
||||
<div style="display: flex; gap: 6px; background: #fee2e2; padding: 6px; border-radius: 4px; position: relative;">
|
||||
<div style="position: absolute; top: -6px; right: -4px; background: #dc2626; color: white; font-size: 8px; padding: 2px 5px; border-radius: 6px; font-weight: 600;">NO PRIMARY</div>
|
||||
<button style="flex: 1; padding: 8px; font-size: 11px; background: #4F46E5; color: white; border: none; border-radius: 4px; font-weight: 500;">Create</button>
|
||||
<button style="flex: 1; padding: 8px; font-size: 11px; background: #4F46E5; color: white; border: none; border-radius: 4px; font-weight: 500;">Import</button>
|
||||
<button style="flex: 1; padding: 8px; font-size: 11px; background: #4F46E5; color: white; border: none; border-radius: 4px; font-weight: 500;">Export</button>
|
||||
<button style="flex: 1; padding: 8px; font-size: 11px; background: #4F46E5; color: white; border: none; border-radius: 4px; font-weight: 500;">Settings</button>
|
||||
</div>
|
||||
<div style="padding: 10px; background: white; border: 1px solid #fca5a5; border-radius: 4px; position: relative;">
|
||||
<div style="position: absolute; top: -6px; right: -4px; background: #dc2626; color: white; font-size: 8px; padding: 2px 5px; border-radius: 6px; font-weight: 600;">DEAD END</div>
|
||||
<div style="font-size: 10px; color: #999;">Recent Activity</div>
|
||||
<div style="font-size: 10px; color: #999; margin-top: 4px;">No items to display at this time</div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
};
|
||||
@@ -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: `
|
||||
<div style="width: 100%; max-width: 200px; display: flex; flex-direction: column; align-items: center; gap: 16px;">
|
||||
<div style="text-align: center;">
|
||||
<div style="font-size: 13px; color: #666; margin-bottom: 8px;">Milestone reached</div>
|
||||
<div style="font-size: 24px; font-weight: bold; color: #333;">100</div>
|
||||
<div style="font-size: 12px; color: #999;">tasks completed</div>
|
||||
</div>
|
||||
<button style="padding: 8px 16px; background: #e0e0e0; border: none; border-radius: 4px; font-size: 12px; color: #666;">Dismiss</button>
|
||||
</div>
|
||||
`,
|
||||
|
||||
after: `
|
||||
<div style="width: 100%; max-width: 240px; display: flex; flex-direction: column; align-items: center; gap: 16px; position: relative;">
|
||||
<div style="position: absolute; top: -20px; left: 50%; transform: translateX(-50%); display: flex; gap: 4px;">
|
||||
<span style="animation: confettiFall 1s ease-out 0.0s both; font-size: 16px;">🎊</span>
|
||||
<span style="animation: confettiFall 1s ease-out 0.1s both; font-size: 14px;">✨</span>
|
||||
<span style="animation: confettiFall 1s ease-out 0.2s both; font-size: 16px;">🎉</span>
|
||||
<span style="animation: confettiFall 1s ease-out 0.15s both; font-size: 14px;">✨</span>
|
||||
<span style="animation: confettiFall 1s ease-out 0.25s both; font-size: 16px;">🎊</span>
|
||||
</div>
|
||||
<div style="text-align: center; animation: celebratePop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;">
|
||||
<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>
|
||||
<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>
|
||||
<div style="font-size: 0.875rem; color: var(--color-ash); margin-top: 4px;">tasks completed</div>
|
||||
</div>
|
||||
<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;">
|
||||
<span style="font-size: 14px;">🏆</span>
|
||||
<span style="font-size: 0.75rem; font-weight: 600; color: var(--color-accent);">Centurion Badge Earned</span>
|
||||
</div>
|
||||
</div>
|
||||
<style>
|
||||
@keyframes confettiFall {
|
||||
0% { opacity: 0; transform: translateY(-20px) rotate(0deg); }
|
||||
50% { opacity: 1; }
|
||||
100% { opacity: 0; transform: translateY(40px) rotate(180deg); }
|
||||
}
|
||||
@keyframes celebratePop {
|
||||
0% { opacity: 0; transform: scale(0.5); }
|
||||
70% { transform: scale(1.05); }
|
||||
100% { opacity: 1; transform: scale(1); }
|
||||
}
|
||||
@keyframes badgeSlide {
|
||||
from { opacity: 0; transform: translateY(10px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
</style>
|
||||
`
|
||||
};
|
||||
@@ -0,0 +1,47 @@
|
||||
// Distill command demo - shows cluttered UI becoming minimal
|
||||
export default {
|
||||
id: 'distill',
|
||||
caption: 'Cluttered interface → Essential elements only',
|
||||
|
||||
before: `
|
||||
<div style="width: 100%; max-width: 280px; padding: 12px; background: #f5f5f5; border: 1px solid #ddd; border-radius: 6px;">
|
||||
<div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid #ddd;">
|
||||
<span style="font-size: 12px; color: #666;">Dashboard</span>
|
||||
<div style="display: flex; gap: 4px;">
|
||||
<button style="padding: 2px 6px; font-size: 10px; background: #e0e0e0; border: none; border-radius: 2px;">⚙️</button>
|
||||
<button style="padding: 2px 6px; font-size: 10px; background: #e0e0e0; border: none; border-radius: 2px;">🔔</button>
|
||||
<button style="padding: 2px 6px; font-size: 10px; background: #e0e0e0; border: none; border-radius: 2px;">❓</button>
|
||||
<button style="padding: 2px 6px; font-size: 10px; background: #e0e0e0; border: none; border-radius: 2px;">⋮</button>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 6px;">
|
||||
<div style="padding: 8px; background: white; border: 1px solid #e0e0e0; border-radius: 4px; font-size: 10px; color: #666;">Revenue<br><b>$12,345</b></div>
|
||||
<div style="padding: 8px; background: white; border: 1px solid #e0e0e0; border-radius: 4px; font-size: 10px; color: #666;">Users<br><b>1,234</b></div>
|
||||
<div style="padding: 8px; background: white; border: 1px solid #e0e0e0; border-radius: 4px; font-size: 10px; color: #666;">Growth<br><b>+12%</b></div>
|
||||
<div style="padding: 8px; background: white; border: 1px solid #e0e0e0; border-radius: 4px; font-size: 10px; color: #666;">Bounce<br><b>32%</b></div>
|
||||
</div>
|
||||
<div style="margin-top: 8px; padding: 8px; background: #e3f2fd; border-radius: 4px; font-size: 10px; color: #1976d2;">📊 View detailed analytics →</div>
|
||||
<div style="margin-top: 4px; padding: 8px; background: #fff3e0; border-radius: 4px; font-size: 10px; color: #e65100;">🎯 Set up goals →</div>
|
||||
</div>
|
||||
`,
|
||||
|
||||
after: `
|
||||
<div style="width: 100%; max-width: 260px; padding: 20px; background: var(--color-paper); border: 1px solid var(--color-mist); border-radius: 8px;">
|
||||
<div style="font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-ash); margin-bottom: 16px;">This Month</div>
|
||||
<div style="margin-bottom: 20px;">
|
||||
<div style="font-family: var(--font-display); font-size: 2.5rem; font-weight: 300; color: var(--color-ink); line-height: 1;">$12,345</div>
|
||||
<div style="font-size: 0.8125rem; color: #22c55e; margin-top: 4px;">↑ 12% from last month</div>
|
||||
</div>
|
||||
<div style="display: flex; gap: 24px;">
|
||||
<div>
|
||||
<div style="font-size: 1.25rem; font-weight: 500; color: var(--color-ink);">1,234</div>
|
||||
<div style="font-size: 0.6875rem; color: var(--color-ash);">Active users</div>
|
||||
</div>
|
||||
<div>
|
||||
<div style="font-size: 1.25rem; font-weight: 500; color: var(--color-ink);">68%</div>
|
||||
<div style="font-size: 0.6875rem; color: var(--color-ash);">Retention</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
};
|
||||
@@ -0,0 +1,62 @@
|
||||
// Extract command demo - shows patterns being identified and documented
|
||||
export default {
|
||||
id: 'extract',
|
||||
caption: 'Scattered styles → Documented design tokens',
|
||||
|
||||
before: `
|
||||
<div style="width: 100%; max-width: 280px; display: flex; flex-direction: column; gap: 6px; font-family: monospace; font-size: 11px;">
|
||||
<div style="padding: 8px; background: #1e1e1e; color: #d4d4d4; border-radius: 4px; overflow: hidden;">
|
||||
<span style="color: #9cdcfe;">padding</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">12px 16px</span><span style="color: #d4d4d4;">;</span>
|
||||
</div>
|
||||
<div style="padding: 8px; background: #1e1e1e; color: #d4d4d4; border-radius: 4px; overflow: hidden;">
|
||||
<span style="color: #9cdcfe;">padding</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">18px 24px</span><span style="color: #d4d4d4;">;</span>
|
||||
</div>
|
||||
<div style="padding: 8px; background: #1e1e1e; color: #d4d4d4; border-radius: 4px; overflow: hidden;">
|
||||
<span style="color: #9cdcfe;">color</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">#3b82f6</span><span style="color: #d4d4d4;">;</span>
|
||||
</div>
|
||||
<div style="padding: 8px; background: #1e1e1e; color: #d4d4d4; border-radius: 4px; overflow: hidden;">
|
||||
<span style="color: #9cdcfe;">color</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">#3a80f5</span><span style="color: #d4d4d4;">;</span>
|
||||
</div>
|
||||
<div style="padding: 8px; background: #1e1e1e; color: #d4d4d4; border-radius: 4px; overflow: hidden;">
|
||||
<span style="color: #9cdcfe;">font-size</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">14px</span><span style="color: #d4d4d4;">;</span>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
|
||||
after: `
|
||||
<div style="width: 100%; max-width: 280px; display: flex; flex-direction: column; gap: 8px;">
|
||||
<div style="font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-ash); margin-bottom: 4px;">Design Tokens</div>
|
||||
<div style="padding: 10px; background: var(--color-paper); border: 1px solid var(--color-mist); border-radius: 6px;">
|
||||
<div style="font-size: 10px; color: var(--color-ash); margin-bottom: 6px;">SPACING</div>
|
||||
<div style="display: flex; gap: 8px;">
|
||||
<div style="text-align: center;">
|
||||
<div style="width: 24px; height: 8px; background: var(--color-accent); border-radius: 2px; margin-bottom: 4px;"></div>
|
||||
<span style="font-family: monospace; font-size: 9px; color: var(--color-charcoal);">sm</span>
|
||||
</div>
|
||||
<div style="text-align: center;">
|
||||
<div style="width: 32px; height: 8px; background: var(--color-accent); border-radius: 2px; margin-bottom: 4px;"></div>
|
||||
<span style="font-family: monospace; font-size: 9px; color: var(--color-charcoal);">md</span>
|
||||
</div>
|
||||
<div style="text-align: center;">
|
||||
<div style="width: 48px; height: 8px; background: var(--color-accent); border-radius: 2px; margin-bottom: 4px;"></div>
|
||||
<span style="font-family: monospace; font-size: 9px; color: var(--color-charcoal);">lg</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="padding: 10px; background: var(--color-paper); border: 1px solid var(--color-mist); border-radius: 6px;">
|
||||
<div style="font-size: 10px; color: var(--color-ash); margin-bottom: 6px;">COLORS</div>
|
||||
<div style="display: flex; gap: 6px;">
|
||||
<div style="width: 24px; height: 24px; background: var(--color-ink); border-radius: 4px;" title="ink"></div>
|
||||
<div style="width: 24px; height: 24px; background: var(--color-charcoal); border-radius: 4px;" title="charcoal"></div>
|
||||
<div style="width: 24px; height: 24px; background: var(--color-accent); border-radius: 4px;" title="accent"></div>
|
||||
<div style="width: 24px; height: 24px; background: var(--color-mist); border-radius: 4px; border: 1px solid var(--color-ash);" title="mist"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="padding: 10px; background: var(--color-paper); border: 1px solid var(--color-mist); border-radius: 6px;">
|
||||
<div style="font-size: 10px; color: var(--color-ash); margin-bottom: 6px;">TYPOGRAPHY</div>
|
||||
<div style="font-family: var(--font-display); font-size: 16px; font-style: italic; color: var(--color-ink);">Display</div>
|
||||
<div style="font-size: 12px; color: var(--color-charcoal);">Body text</div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
};
|
||||
@@ -0,0 +1,42 @@
|
||||
// Harden command demo - shows error handling and edge cases
|
||||
export default {
|
||||
id: 'harden',
|
||||
caption: 'Fragile UI → Robust error handling',
|
||||
|
||||
before: `
|
||||
<div style="width: 100%; max-width: 260px; display: flex; flex-direction: column; gap: 8px;">
|
||||
<div style="padding: 16px; background: #fff0f0; border-radius: 6px; text-align: center;">
|
||||
<div style="font-size: 24px; margin-bottom: 8px;">⚠️</div>
|
||||
<div style="font-size: 14px; color: #cc0000; font-weight: 500;">Error</div>
|
||||
<div style="font-size: 12px; color: #888; margin-top: 4px;">Something went wrong</div>
|
||||
<button style="margin-top: 12px; padding: 6px 12px; background: #ddd; border: none; border-radius: 4px; font-size: 12px; color: #666;">OK</button>
|
||||
</div>
|
||||
<div style="padding: 12px; background: #f5f5f5; border-radius: 6px;">
|
||||
<div style="font-size: 11px; color: #999; margin-bottom: 4px;">Form Input</div>
|
||||
<input type="text" value="invalid@" style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; font-size: 13px; box-sizing: border-box;">
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
|
||||
after: `
|
||||
<div style="width: 100%; max-width: 260px; display: flex; flex-direction: column; gap: 8px;">
|
||||
<div style="padding: 16px; background: color-mix(in oklch, var(--color-accent) 8%, var(--color-paper)); border: 1px solid color-mix(in oklch, var(--color-accent) 20%, var(--color-paper)); border-radius: 8px;">
|
||||
<div style="display: flex; align-items: flex-start; gap: 12px;">
|
||||
<div style="width: 32px; height: 32px; background: var(--color-accent); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
|
||||
<span style="color: white; font-size: 16px;">!</span>
|
||||
</div>
|
||||
<div style="flex: 1;">
|
||||
<div style="font-size: 0.875rem; font-weight: 600; color: var(--color-ink); margin-bottom: 4px;">Connection failed</div>
|
||||
<div style="font-size: 0.8125rem; color: var(--color-charcoal); line-height: 1.4;">Unable to reach the server. Check your internet connection and try again.</div>
|
||||
<button style="margin-top: 12px; padding: 8px 16px; background: var(--color-accent); color: white; border: none; border-radius: 6px; font-size: 0.8125rem; font-weight: 500; cursor: pointer;">Retry Connection</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="padding: 12px; background: var(--color-paper); border: 1px solid var(--color-mist); border-radius: 6px;">
|
||||
<div style="font-size: 11px; color: var(--color-ash); margin-bottom: 4px;">Email Address</div>
|
||||
<input type="text" value="invalid@" style="width: 100%; padding: 8px; border: 2px solid #ef4444; border-radius: 4px; font-size: 13px; box-sizing: border-box; background: #fef2f2;">
|
||||
<div style="font-size: 11px; color: #ef4444; margin-top: 4px;">Please enter a complete email address</div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
};
|
||||
@@ -0,0 +1,41 @@
|
||||
// Command demos registry
|
||||
|
||||
import animate from "./animate.js";
|
||||
import bolder from "./bolder.js";
|
||||
import audit from "./audit.js";
|
||||
import critique from "./critique.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 distill from "./distill.js";
|
||||
import colorize from "./colorize.js";
|
||||
import delight from "./delight.js";
|
||||
import adapt from "./adapt.js";
|
||||
import typeset from "./typeset.js";
|
||||
import layout from "./layout.js";
|
||||
import overdrive from "./overdrive.js";
|
||||
|
||||
export const commandDemos = {
|
||||
bolder,
|
||||
animate,
|
||||
audit,
|
||||
critique,
|
||||
polish,
|
||||
optimize,
|
||||
harden,
|
||||
clarify,
|
||||
quieter,
|
||||
distill,
|
||||
colorize,
|
||||
delight,
|
||||
adapt,
|
||||
typeset,
|
||||
layout,
|
||||
overdrive,
|
||||
};
|
||||
|
||||
export function getCommandDemo(commandId) {
|
||||
return commandDemos[commandId] || null;
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
// Layout command demo - shows monotonous equal spacing becoming rhythmic and intentional
|
||||
export default {
|
||||
id: 'layout',
|
||||
caption: 'Equal spacing everywhere → Intentional rhythm and hierarchy',
|
||||
|
||||
before: `
|
||||
<div style="width: 100%; max-width: 240px; padding: 16px;">
|
||||
<div style="text-align: center; margin-bottom: 16px;">
|
||||
<div style="font-size: 14px; font-weight: bold; color: #333;">Team Members</div>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; gap: 16px;">
|
||||
<div style="padding: 16px; background: #f5f5f5; border: 1px solid #e0e0e0; border-radius: 8px; text-align: center;">
|
||||
<div style="width: 32px; height: 32px; background: #ddd; border-radius: 50%; margin: 0 auto 8px;"></div>
|
||||
<div style="font-size: 13px; color: #333;">Alice Chen</div>
|
||||
<div style="font-size: 12px; color: #888;">Designer</div>
|
||||
</div>
|
||||
<div style="padding: 16px; background: #f5f5f5; border: 1px solid #e0e0e0; border-radius: 8px; text-align: center;">
|
||||
<div style="width: 32px; height: 32px; background: #ddd; border-radius: 50%; margin: 0 auto 8px;"></div>
|
||||
<div style="font-size: 13px; color: #333;">Bob Park</div>
|
||||
<div style="font-size: 12px; color: #888;">Engineer</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
|
||||
after: `
|
||||
<div style="width: 100%; max-width: 240px; padding: 16px; font-family: 'Instrument Sans', sans-serif;">
|
||||
<div style="font-size: 0.8125rem; font-weight: 600; color: var(--color-ink); margin-bottom: 16px;">Team Members</div>
|
||||
<div style="display: flex; flex-direction: column; gap: 6px;">
|
||||
<div style="display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--color-mist);">
|
||||
<div style="width: 28px; height: 28px; background: var(--color-accent); border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: white; font-size: 11px; font-weight: 600;">AC</div>
|
||||
<div style="flex: 1;">
|
||||
<div style="font-size: 0.8125rem; font-weight: 500; color: var(--color-ink);">Alice Chen</div>
|
||||
<div style="font-size: 0.6875rem; color: var(--color-ash);">Designer</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 12px; padding: 10px 0;">
|
||||
<div style="width: 28px; height: 28px; background: color-mix(in oklch, var(--color-accent) 60%, var(--color-ink)); border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: white; font-size: 11px; font-weight: 600;">BP</div>
|
||||
<div style="flex: 1;">
|
||||
<div style="font-size: 0.8125rem; font-weight: 500; color: var(--color-ink);">Bob Park</div>
|
||||
<div style="font-size: 0.6875rem; color: var(--color-ash);">Engineer</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
};
|
||||
@@ -0,0 +1,42 @@
|
||||
// Normalize command demo - shows inconsistent styles becoming systematic
|
||||
export default {
|
||||
id: 'normalize',
|
||||
caption: 'Inconsistent styles → Systematic design tokens',
|
||||
|
||||
before: `
|
||||
<div style="display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 260px;">
|
||||
<div style="padding: 12px 16px; background: #f0f0f0; border-radius: 6px;">
|
||||
<div style="font-size: 14px; font-weight: 600; margin-bottom: 4px;">Card One</div>
|
||||
<div style="font-size: 13px; color: #888;">Some description text here</div>
|
||||
</div>
|
||||
<div style="padding: 18px 12px; background: #e8e8e8; border-radius: 12px;">
|
||||
<div style="font-size: 16px; font-weight: 500; margin-bottom: 8px;">Card Two</div>
|
||||
<div style="font-size: 14px; color: #666;">Different spacing and styles</div>
|
||||
</div>
|
||||
<div style="padding: 10px 20px; background: #f5f5f5; border-radius: 4px;">
|
||||
<div style="font-size: 15px; font-weight: 700; margin-bottom: 2px;">Card Three</div>
|
||||
<div style="font-size: 12px; color: #999;">Yet another variation</div>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
|
||||
after: `
|
||||
<div style="display: flex; flex-direction: column; gap: var(--spacing-sm); width: 100%; max-width: 260px;">
|
||||
<div style="padding: var(--spacing-md); background: var(--color-paper); border: 1px solid var(--color-mist); border-radius: 6px;">
|
||||
<div style="font-size: 0.9375rem; font-weight: 600; margin-bottom: 4px; color: var(--color-ink);">Card One</div>
|
||||
<div style="font-size: 0.8125rem; color: var(--color-ash);">Consistent description text</div>
|
||||
</div>
|
||||
<div style="padding: var(--spacing-md); background: var(--color-paper); border: 1px solid var(--color-mist); border-radius: 6px;">
|
||||
<div style="font-size: 0.9375rem; font-weight: 600; margin-bottom: 4px; color: var(--color-ink);">Card Two</div>
|
||||
<div style="font-size: 0.8125rem; color: var(--color-ash);">Same spacing and styles</div>
|
||||
</div>
|
||||
<div style="padding: var(--spacing-md); background: var(--color-paper); border: 1px solid var(--color-mist); border-radius: 6px;">
|
||||
<div style="font-size: 0.9375rem; font-weight: 600; margin-bottom: 4px; color: var(--color-ink);">Card Three</div>
|
||||
<div style="font-size: 0.8125rem; color: var(--color-ash);">Unified design system</div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
};
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,31 @@
|
||||
// Onboard command demo - shows empty state becoming helpful onboarding
|
||||
export default {
|
||||
id: 'onboard',
|
||||
caption: 'Empty state → Guided onboarding experience',
|
||||
|
||||
before: `
|
||||
<div style="width: 100%; max-width: 260px; padding: 24px; background: #f5f5f5; border: 1px solid #ddd; border-radius: 6px; text-align: center;">
|
||||
<div style="font-size: 32px; opacity: 0.3; margin-bottom: 8px;">📁</div>
|
||||
<div style="font-size: 14px; color: #999;">No items found</div>
|
||||
</div>
|
||||
`,
|
||||
|
||||
after: `
|
||||
<div style="width: 100%; max-width: 280px; padding: 24px; background: var(--color-paper); border: 1px solid var(--color-mist); border-radius: 12px; text-align: center;">
|
||||
<div style="width: 64px; height: 64px; margin: 0 auto 16px; background: color-mix(in oklch, var(--color-accent) 15%, var(--color-paper)); border-radius: 16px; display: flex; align-items: center; justify-content: center;">
|
||||
<span style="font-size: 28px;">✨</span>
|
||||
</div>
|
||||
<div style="font-family: var(--font-display); font-size: 1.25rem; font-weight: 400; color: var(--color-ink); margin-bottom: 8px;">Create your first project</div>
|
||||
<div style="font-size: 0.8125rem; color: var(--color-ash); line-height: 1.5; margin-bottom: 20px;">Projects help you organize your work. Start with a template or blank canvas.</div>
|
||||
<div style="display: flex; flex-direction: column; gap: 8px;">
|
||||
<button style="padding: 12px; background: var(--color-ink); color: var(--color-paper); border: none; border-radius: 8px; font-size: 0.875rem; font-weight: 500; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px;">
|
||||
<span>＋</span> New Project
|
||||
</button>
|
||||
<button style="padding: 10px; background: transparent; color: var(--color-charcoal); border: 1px solid var(--color-mist); border-radius: 8px; font-size: 0.8125rem; cursor: pointer;">Browse Templates</button>
|
||||
</div>
|
||||
<div style="margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--color-mist);">
|
||||
<div style="font-size: 0.6875rem; color: var(--color-ash);">Need help? <span style="color: var(--color-accent); cursor: pointer;">Watch a quick tutorial →</span></div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
};
|
||||
@@ -0,0 +1,57 @@
|
||||
// Optimize command demo - shows performance improvements
|
||||
export default {
|
||||
id: 'optimize',
|
||||
caption: 'Heavy, slow UI → Lightweight, performant',
|
||||
|
||||
before: `
|
||||
<div style="width: 100%; max-width: 260px; display: flex; flex-direction: column; gap: 8px;">
|
||||
<div style="padding: 12px; background: #f5f5f5; border-radius: 6px;">
|
||||
<div style="font-size: 11px; color: #999; margin-bottom: 4px;">BUNDLE SIZE</div>
|
||||
<div style="height: 8px; background: #e0e0e0; border-radius: 4px; overflow: hidden;">
|
||||
<div style="width: 95%; height: 100%; background: linear-gradient(90deg, #ff6b6b, #ee5a5a);"></div>
|
||||
</div>
|
||||
<div style="font-size: 12px; color: #ff6b6b; margin-top: 4px; font-weight: 600;">847 KB</div>
|
||||
</div>
|
||||
<div style="padding: 12px; background: #f5f5f5; border-radius: 6px;">
|
||||
<div style="font-size: 11px; color: #999; margin-bottom: 4px;">RENDER TIME</div>
|
||||
<div style="height: 8px; background: #e0e0e0; border-radius: 4px; overflow: hidden;">
|
||||
<div style="width: 80%; height: 100%; background: linear-gradient(90deg, #ffa726, #ff9800);"></div>
|
||||
</div>
|
||||
<div style="font-size: 12px; color: #ff9800; margin-top: 4px; font-weight: 600;">2.4s</div>
|
||||
</div>
|
||||
<div style="padding: 12px; background: #f5f5f5; border-radius: 6px;">
|
||||
<div style="font-size: 11px; color: #999; margin-bottom: 4px;">LAYOUT SHIFTS</div>
|
||||
<div style="height: 8px; background: #e0e0e0; border-radius: 4px; overflow: hidden;">
|
||||
<div style="width: 60%; height: 100%; background: linear-gradient(90deg, #ffa726, #ff9800);"></div>
|
||||
</div>
|
||||
<div style="font-size: 12px; color: #ff9800; margin-top: 4px; font-weight: 600;">CLS: 0.18</div>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
|
||||
after: `
|
||||
<div style="width: 100%; max-width: 260px; display: flex; flex-direction: column; gap: 8px;">
|
||||
<div style="padding: 12px; background: var(--color-paper); border: 1px solid var(--color-mist); border-radius: 6px;">
|
||||
<div style="font-size: 11px; color: var(--color-ash); margin-bottom: 4px;">BUNDLE SIZE</div>
|
||||
<div style="height: 8px; background: var(--color-mist); border-radius: 4px; overflow: hidden;">
|
||||
<div style="width: 25%; height: 100%; background: linear-gradient(90deg, #22c55e, #16a34a);"></div>
|
||||
</div>
|
||||
<div style="font-size: 12px; color: #22c55e; margin-top: 4px; font-weight: 600;">124 KB <span style="color: var(--color-ash); font-weight: 400;">(-85%)</span></div>
|
||||
</div>
|
||||
<div style="padding: 12px; background: var(--color-paper); border: 1px solid var(--color-mist); border-radius: 6px;">
|
||||
<div style="font-size: 11px; color: var(--color-ash); margin-bottom: 4px;">RENDER TIME</div>
|
||||
<div style="height: 8px; background: var(--color-mist); border-radius: 4px; overflow: hidden;">
|
||||
<div style="width: 15%; height: 100%; background: linear-gradient(90deg, #22c55e, #16a34a);"></div>
|
||||
</div>
|
||||
<div style="font-size: 12px; color: #22c55e; margin-top: 4px; font-weight: 600;">0.3s <span style="color: var(--color-ash); font-weight: 400;">(-88%)</span></div>
|
||||
</div>
|
||||
<div style="padding: 12px; background: var(--color-paper); border: 1px solid var(--color-mist); border-radius: 6px;">
|
||||
<div style="font-size: 11px; color: var(--color-ash); margin-bottom: 4px;">LAYOUT SHIFTS</div>
|
||||
<div style="height: 8px; background: var(--color-mist); border-radius: 4px; overflow: hidden;">
|
||||
<div style="width: 5%; height: 100%; background: linear-gradient(90deg, #22c55e, #16a34a);"></div>
|
||||
</div>
|
||||
<div style="font-size: 12px; color: #22c55e; margin-top: 4px; font-weight: 600;">CLS: 0.02 <span style="color: var(--color-ash); font-weight: 400;">(excellent)</span></div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
};
|
||||
@@ -0,0 +1,342 @@
|
||||
// Overdrive command demo - laser-etched signature on a premium dark surface
|
||||
// Laser effect adapted from pbakaus/shaders laser-precision
|
||||
|
||||
export default {
|
||||
id: 'overdrive',
|
||||
caption: 'Static flat card → Laser-etched signature effect',
|
||||
|
||||
before: `
|
||||
<div style="width: 100%; height: 100%; min-height: 200px; display: flex; align-items: center; justify-content: center; background: #f5f5f5; font-family: system-ui, sans-serif;">
|
||||
<div style="text-align: center; padding: 20px;">
|
||||
<div style="font-size: 12px; color: #666; font-style: italic; line-height: 1.6; max-width: 220px; margin-bottom: 16px;">It's time to spark your imagination. Welcome to the Impeccable Community.</div>
|
||||
<div style="font-size: 12px; color: #aaa;">Paul Bakaus</div>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
|
||||
after: `
|
||||
<canvas class="od-burn" style="position: absolute; inset: 0; width: 100%; height: 100%; background: #0e0d0b;"></canvas>
|
||||
<canvas class="od-sparks" style="position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;"></canvas>
|
||||
<div style="position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; pointer-events: none; text-align: center;">
|
||||
<p style="font-family: 'Cormorant Garamond', serif; font-size: 1.1rem; font-style: italic; font-weight: 400; color: rgba(240,230,210,0.85); line-height: 1.5; max-width: 260px; margin: 0 0 24px;">It's time to spark your imagination.<br>Welcome to the Impeccable Community.</p>
|
||||
</div>
|
||||
`,
|
||||
|
||||
init(container) {
|
||||
const burnCanvas = container.querySelector('.od-burn');
|
||||
const sparkCanvas = container.querySelector('.od-sparks');
|
||||
if (!burnCanvas || !sparkCanvas) return;
|
||||
|
||||
const rect = burnCanvas.parentElement.getBoundingClientRect();
|
||||
const dpr = Math.min(window.devicePixelRatio || 1, 2);
|
||||
|
||||
// Size both canvases
|
||||
for (const c of [burnCanvas, sparkCanvas]) {
|
||||
c.width = Math.round(rect.width * dpr);
|
||||
c.height = Math.round(rect.height * dpr);
|
||||
}
|
||||
|
||||
const ctx = burnCanvas.getContext('2d'); // persistent burn trails
|
||||
const sCtx = sparkCanvas.getContext('2d'); // cleared each frame
|
||||
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
|
||||
sCtx.setTransform(dpr, 0, 0, dpr, 0, 0);
|
||||
const w = rect.width;
|
||||
const h = rect.height;
|
||||
|
||||
// Fill background
|
||||
ctx.fillStyle = '#0e0d0b';
|
||||
ctx.fillRect(0, 0, w, h);
|
||||
|
||||
// ── Signature paths — two separate strokes ──
|
||||
function buildSignaturePaths() {
|
||||
function makePath(buildFn) {
|
||||
const pts = [];
|
||||
function bez(x0,y0, cx1,cy1, cx2,cy2, x1,y1, n) {
|
||||
for (let i = 0; i <= n; i++) {
|
||||
const t = i / n, mt = 1-t;
|
||||
pts.push({
|
||||
x: mt*mt*mt*x0 + 3*mt*mt*t*cx1 + 3*mt*t*t*cx2 + t*t*t*x1,
|
||||
y: mt*mt*mt*y0 + 3*mt*mt*t*cy1 + 3*mt*t*t*cy2 + t*t*t*y1
|
||||
});
|
||||
}
|
||||
}
|
||||
buildFn(bez);
|
||||
return pts;
|
||||
}
|
||||
|
||||
const paul = makePath(bez => {
|
||||
// P
|
||||
bez(6,44, 5,32, 4,18, 8,8, 14);
|
||||
bez(8,8, 16,5, 26,7, 26,16, 12);
|
||||
bez(26,16, 26,22, 18,26, 14,28, 10);
|
||||
// a
|
||||
bez(14,28, 18,22, 23,20, 26,22, 8);
|
||||
bez(26,22, 29,24, 28,30, 24,32, 6);
|
||||
bez(24,32, 28,34, 30,30, 32,28, 5);
|
||||
// u
|
||||
bez(32,28, 34,36, 38,40, 42,32, 8);
|
||||
bez(42,32, 44,26, 47,24, 48,28, 6);
|
||||
// l
|
||||
bez(48,28, 49,16, 50,6, 53,8, 10);
|
||||
bez(53,8, 55,14, 56,28, 58,32, 8);
|
||||
});
|
||||
|
||||
const bakaus = makePath(bez => {
|
||||
// B
|
||||
bez(66,44, 66,32, 67,16, 70,8, 14);
|
||||
bez(70,8, 78,4, 83,10, 79,18, 12);
|
||||
bez(79,18, 84,15, 87,24, 80,30, 12);
|
||||
bez(80,30, 78,34, 80,36, 84,32, 5);
|
||||
// akaus
|
||||
bez(84,32, 89,24, 94,22, 97,26, 8);
|
||||
bez(97,26, 99,30, 96,34, 100,30, 5);
|
||||
bez(100,30, 101,20, 102,14, 104,16, 8);
|
||||
bez(104,16, 106,24, 109,28, 107,32, 6);
|
||||
bez(107,32, 105,36, 110,36, 113,30, 6);
|
||||
bez(113,30, 118,24, 122,22, 125,28, 8);
|
||||
bez(125,28, 128,36, 133,38, 137,30, 8);
|
||||
bez(137,30, 139,26, 142,24, 144,28, 5);
|
||||
bez(144,28, 154,24, 170,22, 195,28, 16);
|
||||
});
|
||||
|
||||
// Scale both paths
|
||||
const rawW = 200;
|
||||
const scale = (w * 0.7) / rawW;
|
||||
const ox = (w - rawW * scale) / 2;
|
||||
const oy = h * 0.52;
|
||||
const transform = p => ({ x: p.x * scale + ox, y: p.y * scale * 0.75 + oy });
|
||||
return [paul.map(transform), bakaus.map(transform)];
|
||||
}
|
||||
|
||||
const strokes = buildSignaturePaths();
|
||||
|
||||
// Precompute lengths for each stroke
|
||||
function computeLengths(pts) {
|
||||
const lens = [];
|
||||
let total = 0;
|
||||
for (let i = 1; i < pts.length; i++) {
|
||||
const dx = pts[i].x - pts[i-1].x, dy = pts[i].y - pts[i-1].y;
|
||||
const l = Math.sqrt(dx*dx + dy*dy);
|
||||
lens.push(l); total += l;
|
||||
}
|
||||
return { lens, total };
|
||||
}
|
||||
|
||||
const strokeData = strokes.map(pts => {
|
||||
const { lens, total } = computeLengths(pts);
|
||||
return { pts, lens, total };
|
||||
});
|
||||
|
||||
function posAtStroke(stroke, dist) {
|
||||
let d = 0;
|
||||
for (let i = 0; i < stroke.lens.length; i++) {
|
||||
if (d + stroke.lens[i] >= dist) {
|
||||
const t = stroke.lens[i] > 0 ? (dist - d) / stroke.lens[i] : 0;
|
||||
const p0 = stroke.pts[i], p1 = stroke.pts[i+1];
|
||||
return { x: p0.x + (p1.x - p0.x) * t, y: p0.y + (p1.y - p0.y) * t };
|
||||
}
|
||||
d += stroke.lens[i];
|
||||
}
|
||||
return stroke.pts[stroke.pts.length - 1];
|
||||
}
|
||||
|
||||
const totalLength = strokeData.reduce((s, d) => s + d.total, 0);
|
||||
|
||||
// ── State ──
|
||||
let currentStroke = 0;
|
||||
let drawnLength = 0;
|
||||
const drawSpeed = totalLength / 3.0;
|
||||
let prevTip = strokes[0][0];
|
||||
let sparks = [];
|
||||
let phase = 'drawing'; // drawing, lifting, holding, fading
|
||||
let phaseTimer = 0;
|
||||
let lastTime = 0;
|
||||
|
||||
// Track drawn points per stroke for smooth rendering
|
||||
const allDrawnStrokes = [[], []];
|
||||
|
||||
function drawBurnTrail() {
|
||||
ctx.lineCap = 'round';
|
||||
ctx.lineJoin = 'round';
|
||||
|
||||
function strokeSmooth(pts, color, width) {
|
||||
if (pts.length < 2) return;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(pts[0].x, pts[0].y);
|
||||
for (let i = 1; i < pts.length - 1; i++) {
|
||||
const mx = (pts[i].x + pts[i+1].x) / 2;
|
||||
const my = (pts[i].y + pts[i+1].y) / 2;
|
||||
ctx.quadraticCurveTo(pts[i].x, pts[i].y, mx, my);
|
||||
}
|
||||
ctx.lineTo(pts[pts.length-1].x, pts[pts.length-1].y);
|
||||
ctx.strokeStyle = color;
|
||||
ctx.lineWidth = width;
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
// Draw all accumulated strokes
|
||||
for (const pts of allDrawnStrokes) {
|
||||
strokeSmooth(pts, 'rgba(180, 100, 30, 0.12)', 5);
|
||||
strokeSmooth(pts, 'rgba(220, 140, 50, 0.3)', 2.5);
|
||||
strokeSmooth(pts, 'rgba(255, 210, 130, 0.7)', 1.2);
|
||||
strokeSmooth(pts, 'rgba(255, 248, 235, 0.6)', 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
function emitSparks(x, y, count) {
|
||||
for (let i = 0; i < count; i++) {
|
||||
const angle = Math.random() * Math.PI * 2;
|
||||
const speed = 50 + Math.random() * 140;
|
||||
sparks.push({
|
||||
x, y, vx: Math.cos(angle) * speed, vy: Math.sin(angle) * speed,
|
||||
life: 0.15 + Math.random() * 0.35, maxLife: 0.15 + Math.random() * 0.35,
|
||||
size: 0.3 + Math.random() * 1.0, bright: Math.random() > 0.4
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function draw(timestamp) {
|
||||
if (!document.contains(burnCanvas)) return;
|
||||
|
||||
// Actual frame delta time
|
||||
if (!lastTime) lastTime = timestamp;
|
||||
const dt = Math.min(0.05, (timestamp - lastTime) / 1000);
|
||||
lastTime = timestamp;
|
||||
|
||||
switch (phase) {
|
||||
case 'drawing': {
|
||||
const sd = strokeData[currentStroke];
|
||||
drawnLength += drawSpeed * dt;
|
||||
if (drawnLength >= sd.total) {
|
||||
drawnLength = sd.total;
|
||||
emitSparks(prevTip.x, prevTip.y, 6);
|
||||
if (currentStroke < strokes.length - 1) {
|
||||
// Lift — pause briefly before starting next stroke
|
||||
phase = 'lifting';
|
||||
phaseTimer = 0;
|
||||
} else {
|
||||
phase = 'holding';
|
||||
phaseTimer = 0;
|
||||
}
|
||||
}
|
||||
const tip = posAtStroke(sd, drawnLength);
|
||||
allDrawnStrokes[currentStroke].push({ x: tip.x, y: tip.y });
|
||||
prevTip = tip;
|
||||
if (Math.random() < 0.4) emitSparks(tip.x, tip.y, 1);
|
||||
// Redraw full smooth trail
|
||||
ctx.fillStyle = '#0e0d0b';
|
||||
ctx.fillRect(0, 0, w, h);
|
||||
drawBurnTrail();
|
||||
break;
|
||||
}
|
||||
|
||||
case 'lifting':
|
||||
phaseTimer += dt;
|
||||
if (phaseTimer >= 0.25) {
|
||||
currentStroke++;
|
||||
drawnLength = 0;
|
||||
prevTip = strokes[currentStroke][0];
|
||||
phase = 'drawing';
|
||||
phaseTimer = 0;
|
||||
}
|
||||
break;
|
||||
|
||||
case 'holding':
|
||||
phaseTimer += dt;
|
||||
if (phaseTimer >= 3.5) { phase = 'fading'; phaseTimer = 0; }
|
||||
break;
|
||||
|
||||
case 'fading':
|
||||
phaseTimer += dt;
|
||||
ctx.fillStyle = 'rgba(14, 13, 11, 0.04)';
|
||||
ctx.fillRect(0, 0, w, h);
|
||||
if (phaseTimer >= 2.0) {
|
||||
ctx.fillStyle = '#0e0d0b';
|
||||
ctx.fillRect(0, 0, w, h);
|
||||
currentStroke = 0; drawnLength = 0;
|
||||
prevTip = strokes[0][0];
|
||||
sparks = [];
|
||||
allDrawnStrokes[0].length = 0;
|
||||
allDrawnStrokes[1].length = 0;
|
||||
phase = 'drawing'; phaseTimer = 0;
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
// Update sparks
|
||||
for (let i = sparks.length - 1; i >= 0; i--) {
|
||||
const s = sparks[i];
|
||||
s.x += s.vx * dt; s.y += s.vy * dt;
|
||||
s.vx *= 0.94; s.vy *= 0.94; s.vy += 100 * dt;
|
||||
s.life -= dt;
|
||||
if (s.life <= 0) sparks.splice(i, 1);
|
||||
}
|
||||
|
||||
// Draw sparks + tip on overlay (cleared each frame)
|
||||
sCtx.clearRect(0, 0, w, h);
|
||||
|
||||
for (const s of sparks) {
|
||||
const t = s.life / s.maxLife;
|
||||
const r = s.size * (0.3 + t * 0.7);
|
||||
// Spark trail
|
||||
const speed = Math.sqrt(s.vx*s.vx + s.vy*s.vy);
|
||||
if (speed > 20) {
|
||||
const tl = speed * 0.01;
|
||||
sCtx.beginPath();
|
||||
sCtx.moveTo(s.x, s.y);
|
||||
sCtx.lineTo(s.x - s.vx/speed * tl, s.y - s.vy/speed * tl);
|
||||
sCtx.strokeStyle = s.bright
|
||||
? `rgba(255,255,240,${(t*0.4).toFixed(3)})`
|
||||
: `rgba(255,180,60,${(t*0.3).toFixed(3)})`;
|
||||
sCtx.lineWidth = r * 0.5;
|
||||
sCtx.lineCap = 'round';
|
||||
sCtx.stroke();
|
||||
}
|
||||
sCtx.beginPath();
|
||||
sCtx.arc(s.x, s.y, r, 0, Math.PI * 2);
|
||||
sCtx.fillStyle = s.bright
|
||||
? `rgba(255,255,255,${(t*0.85).toFixed(3)})`
|
||||
: `rgba(255,200,80,${(t*0.75).toFixed(3)})`;
|
||||
sCtx.fill();
|
||||
}
|
||||
|
||||
// Draw laser tip on overlay
|
||||
if (phase === 'drawing' && drawnLength < strokeData[currentStroke].total) {
|
||||
const tip = posAtStroke(strokeData[currentStroke], drawnLength);
|
||||
const fl = 0.85 + Math.random() * 0.15;
|
||||
|
||||
// Wide heat bloom
|
||||
const g0 = sCtx.createRadialGradient(tip.x, tip.y, 0, tip.x, tip.y, 35);
|
||||
g0.addColorStop(0, `rgba(255,100,20,${0.15*fl})`);
|
||||
g0.addColorStop(0.4, `rgba(200,60,10,${0.05*fl})`);
|
||||
g0.addColorStop(1, 'rgba(150,40,10,0)');
|
||||
sCtx.fillStyle = g0; sCtx.beginPath(); sCtx.arc(tip.x, tip.y, 35, 0, Math.PI*2); sCtx.fill();
|
||||
|
||||
// Amber corona
|
||||
const g1 = sCtx.createRadialGradient(tip.x, tip.y, 0, tip.x, tip.y, 16);
|
||||
g1.addColorStop(0, `rgba(255,180,60,${0.45*fl})`);
|
||||
g1.addColorStop(0.5, `rgba(255,140,40,${0.15*fl})`);
|
||||
g1.addColorStop(1, 'rgba(200,80,20,0)');
|
||||
sCtx.fillStyle = g1; sCtx.beginPath(); sCtx.arc(tip.x, tip.y, 16, 0, Math.PI*2); sCtx.fill();
|
||||
|
||||
// White-hot core
|
||||
const g2 = sCtx.createRadialGradient(tip.x, tip.y, 0, tip.x, tip.y, 6);
|
||||
g2.addColorStop(0, `rgba(255,255,255,${0.95*fl})`);
|
||||
g2.addColorStop(0.3, `rgba(255,250,240,${0.7*fl})`);
|
||||
g2.addColorStop(0.6, `rgba(255,220,160,${0.3*fl})`);
|
||||
g2.addColorStop(1, 'rgba(255,180,80,0)');
|
||||
sCtx.fillStyle = g2; sCtx.beginPath(); sCtx.arc(tip.x, tip.y, 6, 0, Math.PI*2); sCtx.fill();
|
||||
|
||||
// Overexposed center
|
||||
const g3 = sCtx.createRadialGradient(tip.x, tip.y, 0, tip.x, tip.y, 2.5);
|
||||
g3.addColorStop(0, `rgba(255,255,255,${fl})`);
|
||||
g3.addColorStop(1, 'rgba(255,255,255,0)');
|
||||
sCtx.fillStyle = g3; sCtx.beginPath(); sCtx.arc(tip.x, tip.y, 2.5, 0, Math.PI*2); sCtx.fill();
|
||||
}
|
||||
|
||||
requestAnimationFrame(draw);
|
||||
}
|
||||
|
||||
requestAnimationFrame(draw);
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,33 @@
|
||||
// Polish command demo - shows rough UI becoming refined
|
||||
export default {
|
||||
id: 'polish',
|
||||
caption: 'Rough edges → Refined, pixel-perfect details',
|
||||
|
||||
before: `
|
||||
<div style="width: 100%; max-width: 240px; padding: 16px; background: #f5f5f5; border: 1px solid #ddd; border-radius: 4px;">
|
||||
<div style="font-size: 16px; font-weight: bold; margin-bottom: 8px;">User Profile</div>
|
||||
<div style="display: flex; align-items: center; gap: 8px; margin-bottom: 12px;">
|
||||
<div style="width: 40px; height: 40px; background: #ccc; border-radius: 50%;"></div>
|
||||
<div>
|
||||
<div style="font-size: 14px;">John Doe</div>
|
||||
<div style="font-size: 12px; color: #888;">Developer</div>
|
||||
</div>
|
||||
</div>
|
||||
<button style="width: 100%; padding: 8px; background: #333; color: white; border: none; border-radius: 4px; font-size: 13px;">Edit Profile</button>
|
||||
</div>
|
||||
`,
|
||||
|
||||
after: `
|
||||
<div style="width: 100%; max-width: 240px; padding: 20px; background: var(--color-paper); border: 1px solid var(--color-mist); border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.06);">
|
||||
<div style="font-family: var(--font-display); font-size: 1.125rem; font-weight: 400; margin-bottom: 16px; color: var(--color-ink);">User Profile</div>
|
||||
<div style="display: flex; align-items: center; gap: 12px; margin-bottom: 16px;">
|
||||
<div style="width: 48px; height: 48px; background: var(--color-ink); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--color-paper); font-weight: 600; font-size: 1.125rem;">JD</div>
|
||||
<div>
|
||||
<div style="font-size: 0.9375rem; font-weight: 500; color: var(--color-ink);">John Doe</div>
|
||||
<div style="font-size: 0.75rem; color: var(--color-ash); letter-spacing: 0.02em;">Developer</div>
|
||||
</div>
|
||||
</div>
|
||||
<button style="width: 100%; padding: 10px; background: var(--color-ink); color: var(--color-paper); border: none; border-radius: 6px; font-size: 0.875rem; font-weight: 500; letter-spacing: 0.01em; cursor: pointer;">Edit Profile</button>
|
||||
</div>
|
||||
`
|
||||
};
|
||||
@@ -0,0 +1,28 @@
|
||||
// Quieter command demo - shows loud design becoming calm
|
||||
export default {
|
||||
id: 'quieter',
|
||||
caption: 'Overwhelming design → Calm, focused interface',
|
||||
|
||||
before: `
|
||||
<div style="width: 100%; max-width: 280px; padding: 16px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 8px; text-align: center;">
|
||||
<div style="font-size: 24px; margin-bottom: 8px;">🎉✨🚀</div>
|
||||
<div style="font-size: 18px; font-weight: 800; color: #ffeb3b; text-transform: uppercase; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); margin-bottom: 8px;">AMAZING DEAL!</div>
|
||||
<div style="font-size: 14px; color: white; margin-bottom: 12px;">Don't miss out on this INCREDIBLE opportunity!!!</div>
|
||||
<div style="display: flex; gap: 8px; justify-content: center;">
|
||||
<button style="padding: 10px 16px; background: #ff4081; color: white; border: none; border-radius: 20px; font-weight: bold; font-size: 14px; text-transform: uppercase; box-shadow: 0 4px 15px rgba(255,64,129,0.4);">BUY NOW!!</button>
|
||||
<button style="padding: 10px 16px; background: #00e676; color: white; border: none; border-radius: 20px; font-weight: bold; font-size: 14px; text-transform: uppercase;">LEARN MORE</button>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
|
||||
after: `
|
||||
<div style="width: 100%; max-width: 280px; padding: 24px; background: var(--color-paper); border: 1px solid var(--color-mist); border-radius: 8px; text-align: center;">
|
||||
<div style="font-family: var(--font-display); font-size: 1.5rem; font-weight: 300; font-style: italic; color: var(--color-ink); margin-bottom: 8px;">Limited Time Offer</div>
|
||||
<div style="font-size: 0.875rem; color: var(--color-ash); margin-bottom: 20px; line-height: 1.5;">Save 20% on annual plans. Offer ends Friday.</div>
|
||||
<div style="display: flex; gap: 12px; justify-content: center;">
|
||||
<button style="padding: 12px 24px; background: var(--color-ink); color: var(--color-paper); border: none; border-radius: 6px; font-size: 0.875rem; font-weight: 500;">View Plans</button>
|
||||
<button style="padding: 12px 24px; background: transparent; color: var(--color-charcoal); border: 1px solid var(--color-mist); border-radius: 6px; font-size: 0.875rem;">Maybe Later</button>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
};
|
||||
@@ -0,0 +1,23 @@
|
||||
// Typeset command demo - shows flat, hierarchyless text becoming intentional typography
|
||||
export default {
|
||||
id: 'typeset',
|
||||
caption: 'No type hierarchy → Clear, intentional typography',
|
||||
|
||||
before: `
|
||||
<div style="width: 100%; max-width: 240px; padding: 16px; font-family: Arial, sans-serif;">
|
||||
<div style="font-size: 14px; font-weight: bold; color: #444; margin-bottom: 8px;">Project Update</div>
|
||||
<div style="font-size: 14px; color: #444; margin-bottom: 8px;">Q1 Design Sprint</div>
|
||||
<div style="font-size: 14px; color: #444; line-height: 1.4; margin-bottom: 8px;">The team completed the redesign of the dashboard. All components have been reviewed and approved by stakeholders.</div>
|
||||
<div style="font-size: 14px; color: #444;">Updated 2 hours ago</div>
|
||||
</div>
|
||||
`,
|
||||
|
||||
after: `
|
||||
<div style="width: 100%; max-width: 240px; padding: 16px; font-family: 'Instrument Sans', sans-serif;">
|
||||
<div style="font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-ash); margin-bottom: 6px;">Project Update</div>
|
||||
<div style="font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; font-weight: 600; color: var(--color-ink); line-height: 1.1; margin-bottom: 12px;">Q1 Design Sprint</div>
|
||||
<p style="font-size: 0.8125rem; color: color-mix(in oklch, var(--color-ink) 65%, transparent); line-height: 1.65; margin: 0 0 14px; max-width: 30ch;">The team completed the redesign of the dashboard. All components reviewed and approved.</p>
|
||||
<div style="font-size: 0.6875rem; color: var(--color-ash); font-variant-numeric: tabular-nums;">Updated 2 hours ago</div>
|
||||
</div>
|
||||
`
|
||||
};
|
||||
@@ -0,0 +1,6 @@
|
||||
// Main demos registry - exports all demos
|
||||
export { commandDemos, getCommandDemo } from "./commands/index.js";
|
||||
export { getSkillDemo, skillDemos } from "./skills/index.js";
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,68 @@
|
||||
// Color and Contrast skill demos
|
||||
export default {
|
||||
id: 'color-and-contrast',
|
||||
tabs: [
|
||||
{
|
||||
id: 'palette',
|
||||
label: 'Color Harmony',
|
||||
caption: 'Clashing colors vs harmonious palette',
|
||||
beforeClass: 'color-demo color-palette-before',
|
||||
afterClass: 'color-demo color-palette-after',
|
||||
before: `
|
||||
<div class="color-demo color-palette-before">
|
||||
<div class="color-swatch swatch-1"></div>
|
||||
<div class="color-swatch swatch-2"></div>
|
||||
<div class="color-swatch swatch-3"></div>
|
||||
<div class="color-swatch swatch-4"></div>
|
||||
<div class="color-swatch swatch-5"></div>
|
||||
<div class="color-card">
|
||||
<span class="card-title">Title</span>
|
||||
<span class="card-subtitle">Subtitle</span>
|
||||
<button class="card-btn">Action</button>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
after: null // Uses CSS class toggle
|
||||
},
|
||||
{
|
||||
id: 'accent',
|
||||
label: 'Strategic Accent',
|
||||
caption: 'Monochrome monotony vs strategic accent',
|
||||
beforeClass: 'color-demo color-accent-before',
|
||||
afterClass: 'color-demo color-accent-after',
|
||||
before: `
|
||||
<div class="color-demo color-accent-before">
|
||||
<div class="color-accent-card">
|
||||
<div class="color-accent-title">Premium Plan</div>
|
||||
<div class="color-accent-text">Unlock all features and get priority support.</div>
|
||||
<button class="color-accent-btn">Upgrade Now</button>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
after: null // Uses CSS class toggle
|
||||
},
|
||||
{
|
||||
id: 'contrast',
|
||||
label: 'Contrast Ratios',
|
||||
caption: 'Accessibility failures vs WCAG compliance',
|
||||
hasToggle: false, // Static comparison
|
||||
before: `
|
||||
<div class="color-demo color-contrast-static">
|
||||
<div class="contrast-example contrast-fail">
|
||||
<span class="contrast-badge">Fails WCAG</span>
|
||||
<div class="contrast-text">Hard to Read</div>
|
||||
<div class="contrast-ratio">2.5:1</div>
|
||||
</div>
|
||||
<div class="contrast-example contrast-pass">
|
||||
<span class="contrast-badge">Passes AAA</span>
|
||||
<div class="contrast-text">Easy to Read</div>
|
||||
<div class="contrast-ratio">12.6:1</div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,26 @@
|
||||
// Skill demos registry
|
||||
|
||||
import colorAndContrast from "./color-and-contrast.js";
|
||||
import interactionDesign from "./interaction-design.js";
|
||||
import motionDesign from "./motion-design.js";
|
||||
import responsiveDesign from "./responsive-design.js";
|
||||
import spatialDesign from "./spatial-design.js";
|
||||
import typography from "./typography.js";
|
||||
import uxWriting from "./ux-writing.js";
|
||||
|
||||
export const skillDemos = {
|
||||
"ux-writing": uxWriting,
|
||||
"spatial-design": spatialDesign,
|
||||
"motion-design": motionDesign,
|
||||
typography: typography,
|
||||
"interaction-design": interactionDesign,
|
||||
"color-and-contrast": colorAndContrast,
|
||||
"responsive-design": responsiveDesign,
|
||||
};
|
||||
|
||||
export function getSkillDemo(skillId) {
|
||||
return skillDemos[skillId] || null;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,79 @@
|
||||
// Interaction Design skill demos
|
||||
export default {
|
||||
id: 'interaction-design',
|
||||
tabs: [
|
||||
{
|
||||
id: 'states',
|
||||
label: 'Button States',
|
||||
caption: 'Missing states vs complete interaction feedback',
|
||||
// This demo shows both states side-by-side, no toggle needed
|
||||
hasToggle: false,
|
||||
before: `
|
||||
<div class="int-demo int-states-demo">
|
||||
<div class="int-state-row">
|
||||
<span class="int-state-label">Poor</span>
|
||||
<button class="int-btn int-btn-poor">Click Me</button>
|
||||
</div>
|
||||
<div class="int-state-row">
|
||||
<span class="int-state-label">Good</span>
|
||||
<button class="int-btn int-btn-good">Click Me</button>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'affordance',
|
||||
label: 'Affordances',
|
||||
caption: 'Unclear actions vs obvious clickability',
|
||||
beforeClass: 'int-demo int-affordance-before',
|
||||
afterClass: 'int-demo int-affordance-after',
|
||||
before: `
|
||||
<div class="int-demo int-affordance-before">
|
||||
<div class="int-aff-item int-aff-poor">
|
||||
<span>Learn more</span>
|
||||
</div>
|
||||
<div class="int-aff-item int-aff-poor">
|
||||
<span>Settings</span>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
after: null // Uses CSS class toggle
|
||||
},
|
||||
{
|
||||
id: 'feedback',
|
||||
label: 'Feedback',
|
||||
caption: 'Silent actions vs immediate confirmation',
|
||||
before: `
|
||||
<div class="int-demo int-feedback-before">
|
||||
<button class="int-fb-btn int-fb-silent">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
|
||||
</button>
|
||||
<span class="int-fb-label">Click — nothing happens</span>
|
||||
</div>
|
||||
`,
|
||||
after: `
|
||||
<div class="int-demo int-feedback-after">
|
||||
<button class="int-fb-btn int-fb-active" data-action="like">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
|
||||
</button>
|
||||
<span class="int-fb-label">Click to try!</span>
|
||||
</div>
|
||||
`,
|
||||
onAfterRender: () => {
|
||||
// Setup interactive like button
|
||||
document.querySelectorAll('.int-fb-active[data-action="like"]').forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
btn.classList.toggle('liked');
|
||||
const label = btn.nextElementSibling;
|
||||
if (label) {
|
||||
label.textContent = btn.classList.contains('liked') ? 'Liked!' : 'Click to try!';
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,69 @@
|
||||
// Motion Design skill demos
|
||||
export default {
|
||||
id: 'motion-design',
|
||||
tabs: [
|
||||
{
|
||||
id: 'stagger',
|
||||
label: 'Staggered Reveal',
|
||||
caption: 'Instant appearance vs orchestrated reveal',
|
||||
before: `
|
||||
<div class="motion-demo motion-stagger-demo">
|
||||
<div class="motion-list-item"><span class="motion-dot"></span>Dashboard</div>
|
||||
<div class="motion-list-item"><span class="motion-dot"></span>Analytics</div>
|
||||
<div class="motion-list-item"><span class="motion-dot"></span>Settings</div>
|
||||
<div class="motion-list-item"><span class="motion-dot"></span>Profile</div>
|
||||
</div>
|
||||
`,
|
||||
after: null, // CSS animation triggered by data-state
|
||||
onToggle: (viewport, isAfter) => {
|
||||
if (isAfter) {
|
||||
// Re-trigger animation by cloning elements
|
||||
const items = viewport.querySelectorAll('.motion-list-item');
|
||||
items.forEach(item => {
|
||||
const clone = item.cloneNode(true);
|
||||
item.parentNode.replaceChild(clone, item);
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 'micro',
|
||||
label: 'Micro-interactions',
|
||||
caption: 'Static button vs responsive feedback',
|
||||
before: `
|
||||
<div class="motion-demo motion-micro-demo">
|
||||
<button class="motion-btn motion-btn-before">Add to Cart</button>
|
||||
</div>
|
||||
`,
|
||||
after: `
|
||||
<div class="motion-demo motion-micro-demo">
|
||||
<button class="motion-btn motion-btn-after">Add to Cart</button>
|
||||
</div>
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'transition',
|
||||
label: 'State Changes',
|
||||
caption: 'Jarring change vs smooth transition',
|
||||
before: `
|
||||
<div class="motion-demo motion-transition-demo">
|
||||
<div class="motion-card motion-card-before">
|
||||
<div class="motion-card-icon">📦</div>
|
||||
<div class="motion-card-text">Order Placed</div>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
after: `
|
||||
<div class="motion-demo motion-transition-demo">
|
||||
<div class="motion-card motion-card-after">
|
||||
<div class="motion-card-icon">✓</div>
|
||||
<div class="motion-card-text">Order Confirmed</div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,91 @@
|
||||
// Responsive Design skill demos
|
||||
export default {
|
||||
id: 'responsive-design',
|
||||
tabs: [
|
||||
{
|
||||
id: 'touch',
|
||||
label: 'Touch Targets',
|
||||
caption: 'Tiny targets vs accessible touch areas',
|
||||
hasToggle: false, // Static comparison
|
||||
before: `
|
||||
<div class="resp-demo resp-touch-demo">
|
||||
<div class="resp-touch-row">
|
||||
<span class="resp-label">Too Small</span>
|
||||
<div class="resp-touch-targets resp-touch-bad">
|
||||
<button>×</button>
|
||||
<button>−</button>
|
||||
<button>+</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="resp-touch-row">
|
||||
<span class="resp-label">Accessible</span>
|
||||
<div class="resp-touch-targets resp-touch-good">
|
||||
<button>×</button>
|
||||
<button>−</button>
|
||||
<button>+</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'fluid',
|
||||
label: 'Fluid Layout',
|
||||
caption: 'Fixed breakage vs fluid adaptation',
|
||||
hasToggle: false, // Static comparison
|
||||
before: `
|
||||
<div class="resp-demo resp-fluid-demo">
|
||||
<div class="resp-fluid-container">
|
||||
<div class="resp-fluid-fixed">
|
||||
<span>Fixed 400px</span>
|
||||
<div class="resp-fluid-bar" style="width: 400px; max-width: 100%;"></div>
|
||||
</div>
|
||||
<div class="resp-fluid-adaptive">
|
||||
<span>Fluid 80%</span>
|
||||
<div class="resp-fluid-bar" style="width: 80%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'adapt',
|
||||
label: 'Adaptive Content',
|
||||
caption: 'Same layout vs optimized for context',
|
||||
hasToggle: false, // Static comparison
|
||||
before: `
|
||||
<div class="resp-demo resp-adapt-demo">
|
||||
<div class="resp-device resp-device-mobile">
|
||||
<div class="resp-device-screen">
|
||||
<div class="resp-block resp-header"></div>
|
||||
<div class="resp-block resp-content"></div>
|
||||
</div>
|
||||
<span>Mobile</span>
|
||||
</div>
|
||||
<div class="resp-device resp-device-tablet">
|
||||
<div class="resp-device-screen">
|
||||
<div class="resp-block resp-header"></div>
|
||||
<div class="resp-block-row">
|
||||
<div class="resp-block resp-content"></div>
|
||||
<div class="resp-block resp-content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<span>Tablet</span>
|
||||
</div>
|
||||
<div class="resp-device resp-device-desktop">
|
||||
<div class="resp-device-screen">
|
||||
<div class="resp-block-row">
|
||||
<div class="resp-block resp-sidebar"></div>
|
||||
<div class="resp-block resp-content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<span>Desktop</span>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,62 @@
|
||||
// Spatial Design skill demos
|
||||
export default {
|
||||
id: 'spatial-design',
|
||||
tabs: [
|
||||
{
|
||||
id: 'grid',
|
||||
label: 'Grid Systems',
|
||||
caption: 'Chaotic placement vs intentional grid alignment',
|
||||
before: `
|
||||
<div class="spatial-demo spatial-grid-before">
|
||||
<div class="spatial-card-item" style="width: 45%;">Card One</div>
|
||||
<div class="spatial-card-item" style="width: 30%;">Card Two</div>
|
||||
<div class="spatial-card-item" style="width: 55%;">Card Three</div>
|
||||
<div class="spatial-card-item" style="width: 25%;">Card Four</div>
|
||||
</div>
|
||||
`,
|
||||
after: `
|
||||
<div class="spatial-demo spatial-grid-after">
|
||||
<div class="spatial-card-item">Card One</div>
|
||||
<div class="spatial-card-item">Card Two</div>
|
||||
<div class="spatial-card-item">Card Three</div>
|
||||
<div class="spatial-card-item">Card Four</div>
|
||||
</div>
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'hierarchy',
|
||||
label: 'Visual Weight',
|
||||
caption: 'Equal weight vs clear visual priority',
|
||||
beforeClass: 'spatial-demo spatial-hierarchy-before',
|
||||
afterClass: 'spatial-demo spatial-hierarchy-after',
|
||||
before: `
|
||||
<div class="spatial-demo spatial-hierarchy-before">
|
||||
<div class="spatial-h-title">Welcome Back</div>
|
||||
<div class="spatial-h-subtitle">Dashboard</div>
|
||||
<div class="spatial-h-cta">View Reports</div>
|
||||
<div class="spatial-h-link">Settings</div>
|
||||
</div>
|
||||
`,
|
||||
after: null // Uses CSS class toggle
|
||||
},
|
||||
{
|
||||
id: 'whitespace',
|
||||
label: 'Breathing Room',
|
||||
caption: 'Cramped elements vs comfortable spacing',
|
||||
beforeClass: 'spatial-demo spatial-whitespace-before',
|
||||
afterClass: 'spatial-demo spatial-whitespace-after',
|
||||
before: `
|
||||
<div class="spatial-demo spatial-whitespace-before">
|
||||
<div class="spatial-ws-title">Premium Plan</div>
|
||||
<div class="spatial-ws-price">$29/mo</div>
|
||||
<div class="spatial-ws-features">Unlimited projects • Priority support • Advanced analytics</div>
|
||||
<button class="spatial-ws-btn">Upgrade Now</button>
|
||||
</div>
|
||||
`,
|
||||
after: null // Uses CSS class toggle
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,38 @@
|
||||
// Typography skill demos
|
||||
export default {
|
||||
id: 'typography',
|
||||
tabs: [
|
||||
{
|
||||
id: 'pairing',
|
||||
label: 'Font Pairing',
|
||||
caption: 'Generic system fonts vs distinctive pairing',
|
||||
beforeClass: 'typo-demo typo-pairing-before',
|
||||
afterClass: 'typo-demo typo-pairing-after',
|
||||
before: `
|
||||
<div class="typo-demo typo-pairing-before">
|
||||
<div class="typo-heading">Welcome to the Future</div>
|
||||
<div class="typo-body">Experience innovation like never before with our cutting-edge platform designed for modern teams.</div>
|
||||
</div>
|
||||
`,
|
||||
after: null // Uses CSS class toggle
|
||||
},
|
||||
{
|
||||
id: 'hierarchy',
|
||||
label: 'Scale & Hierarchy',
|
||||
caption: 'Flat sizing vs dramatic scale contrast',
|
||||
beforeClass: 'typo-demo typo-hierarchy-before',
|
||||
afterClass: 'typo-demo typo-hierarchy-after',
|
||||
before: `
|
||||
<div class="typo-demo typo-hierarchy-before">
|
||||
<div class="typo-h1">Article Title</div>
|
||||
<div class="typo-meta">Published January 2025</div>
|
||||
<div class="typo-p">This is the body text of the article containing the main content and ideas.</div>
|
||||
</div>
|
||||
`,
|
||||
after: null // Uses CSS class toggle
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,71 @@
|
||||
// UX Writing skill demos
|
||||
export default {
|
||||
id: 'ux-writing',
|
||||
tabs: [
|
||||
{
|
||||
id: 'errors',
|
||||
label: 'Error Messages',
|
||||
caption: 'Technical jargon vs human, actionable guidance',
|
||||
before: `
|
||||
<div class="uxw-demo uxw-error-before">
|
||||
<div class="uxw-error-icon">⚠</div>
|
||||
<div class="uxw-error-title">Error 403</div>
|
||||
<div class="uxw-error-text">Access denied. Authentication failure occurred.</div>
|
||||
</div>
|
||||
`,
|
||||
after: `
|
||||
<div class="uxw-demo uxw-error-after">
|
||||
<div class="uxw-error-icon">🔐</div>
|
||||
<div class="uxw-error-title">You don't have access</div>
|
||||
<div class="uxw-error-text">Your session may have expired. Sign in again to continue.</div>
|
||||
<div class="uxw-error-action">Sign in →</div>
|
||||
</div>
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'buttons',
|
||||
label: 'Button Labels',
|
||||
caption: 'Vague labels vs clear, specific actions',
|
||||
before: `
|
||||
<div class="uxw-demo uxw-buttons-before">
|
||||
<div class="uxw-button-context">Delete account permanently?</div>
|
||||
<div class="uxw-button-row">
|
||||
<button class="uxw-btn uxw-btn-primary">Submit</button>
|
||||
<button class="uxw-btn uxw-btn-secondary">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
after: `
|
||||
<div class="uxw-demo uxw-buttons-after">
|
||||
<div class="uxw-button-context">Delete account permanently?</div>
|
||||
<div class="uxw-button-row">
|
||||
<button class="uxw-btn uxw-btn-danger">Delete My Account</button>
|
||||
<button class="uxw-btn uxw-btn-secondary">Keep Account</button>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'empty',
|
||||
label: 'Empty States',
|
||||
caption: 'Blank nothing vs helpful, encouraging guidance',
|
||||
before: `
|
||||
<div class="uxw-demo uxw-empty-before">
|
||||
<div class="uxw-empty-icon">📁</div>
|
||||
<div class="uxw-empty-title">No items</div>
|
||||
</div>
|
||||
`,
|
||||
after: `
|
||||
<div class="uxw-demo uxw-empty-after">
|
||||
<div class="uxw-empty-icon">📝</div>
|
||||
<div class="uxw-empty-title">No projects yet</div>
|
||||
<div class="uxw-empty-text">Create your first project to get started.</div>
|
||||
<div class="uxw-empty-action"><button class="uxw-btn uxw-btn-primary">Create Project</button></div>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,57 @@
|
||||
import {
|
||||
ShaderMount,
|
||||
meshGradientFragmentShader,
|
||||
getShaderColorFromString,
|
||||
ShaderFitOptions
|
||||
} from '@paper-design/shaders';
|
||||
|
||||
export function initHeroShader() {
|
||||
const container = document.getElementById('hero-shader');
|
||||
if (!container) return;
|
||||
|
||||
// Respect user's motion preferences
|
||||
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
|
||||
container.style.display = 'none';
|
||||
return;
|
||||
}
|
||||
|
||||
// Liquid ink mesh gradient
|
||||
const shader = new ShaderMount(
|
||||
container,
|
||||
meshGradientFragmentShader,
|
||||
{
|
||||
// Colors - liquid ink effect (grayscale tones for editorial look)
|
||||
u_colors: [
|
||||
getShaderColorFromString('#ffffff'),
|
||||
getShaderColorFromString('#e8e4df'),
|
||||
getShaderColorFromString('#b5b0a8'),
|
||||
getShaderColorFromString('#1a1a1a'),
|
||||
],
|
||||
u_colorsCount: 4,
|
||||
|
||||
// Effect parameters
|
||||
u_distortion: 1.0,
|
||||
u_swirl: 0.2,
|
||||
u_grainMixer: 0,
|
||||
u_grainOverlay: 0,
|
||||
|
||||
// Sizing uniforms (required by mesh gradient)
|
||||
u_fit: ShaderFitOptions.cover,
|
||||
u_scale: 1,
|
||||
u_rotation: 0,
|
||||
u_offsetX: 0,
|
||||
u_offsetY: 0,
|
||||
u_originX: 0.5,
|
||||
u_originY: 0.5,
|
||||
u_worldWidth: 0,
|
||||
u_worldHeight: 0,
|
||||
},
|
||||
undefined,
|
||||
1.0 // speed
|
||||
);
|
||||
|
||||
// Cleanup
|
||||
window.addEventListener('beforeunload', () => {
|
||||
shader.dispose();
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,165 @@
|
||||
export function initHeroEffect() {
|
||||
const canvas = document.getElementById("hero-canvas");
|
||||
if (!canvas) return;
|
||||
|
||||
// Respect user's motion preferences
|
||||
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
|
||||
canvas.style.display = 'none';
|
||||
return;
|
||||
}
|
||||
|
||||
const ctx = canvas.getContext("2d");
|
||||
let width, height;
|
||||
let points = [];
|
||||
let gap = 50; // Grid gap
|
||||
const mouse = { x: -1000, y: -1000, radius: 150 }; // Moderate radius
|
||||
let animationId;
|
||||
|
||||
// Physics params - Elegant & Fluid
|
||||
const friction = 0.9; // Higher friction = less slippery
|
||||
const ease = 0.1; // Standard spring
|
||||
const forceMultiplier = 3; // Subtle push, not a splash
|
||||
|
||||
class Point {
|
||||
constructor(x, y) {
|
||||
this.x = x;
|
||||
this.y = y;
|
||||
this.ox = x; // original x
|
||||
this.oy = y; // original y
|
||||
this.vx = 0;
|
||||
this.vy = 0;
|
||||
}
|
||||
|
||||
update() {
|
||||
// Mouse interaction
|
||||
const dx = mouse.x - this.x;
|
||||
const dy = mouse.y - this.y;
|
||||
const dist = Math.sqrt(dx * dx + dy * dy);
|
||||
const force = Math.max(0, (mouse.radius - dist) / mouse.radius);
|
||||
|
||||
if (force > 0) {
|
||||
const angle = Math.atan2(dy, dx);
|
||||
// Gentle push
|
||||
this.vx -= Math.cos(angle) * force * forceMultiplier;
|
||||
this.vy -= Math.sin(angle) * force * forceMultiplier;
|
||||
}
|
||||
|
||||
// Spring back to original position
|
||||
this.vx += (this.ox - this.x) * ease;
|
||||
this.vy += (this.oy - this.y) * ease;
|
||||
|
||||
// Friction
|
||||
this.vx *= friction;
|
||||
this.vy *= friction;
|
||||
|
||||
// Update position
|
||||
this.x += this.vx;
|
||||
this.y += this.vy;
|
||||
}
|
||||
}
|
||||
|
||||
function resize() {
|
||||
const dpr = window.devicePixelRatio || 1;
|
||||
const rect = canvas.getBoundingClientRect();
|
||||
width = rect.width;
|
||||
height = rect.height;
|
||||
canvas.width = width * dpr;
|
||||
canvas.height = height * dpr;
|
||||
ctx.scale(dpr, dpr);
|
||||
|
||||
initGrid();
|
||||
}
|
||||
|
||||
function initGrid() {
|
||||
points = [];
|
||||
// Responsive gap
|
||||
gap = width < 768 ? 40 : 50;
|
||||
|
||||
const cols = Math.ceil(width / gap);
|
||||
const rows = Math.ceil(height / gap);
|
||||
|
||||
for (let i = 0; i <= cols; i++) {
|
||||
for (let j = 0; j <= rows; j++) {
|
||||
points.push(new Point(i * gap, j * gap));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function draw() {
|
||||
ctx.clearRect(0, 0, width, height);
|
||||
|
||||
// Update points
|
||||
points.forEach(p => p.update());
|
||||
|
||||
// Draw grid lines
|
||||
ctx.beginPath();
|
||||
ctx.strokeStyle = "rgba(100, 40, 50, 0.06)"; // Very subtle base
|
||||
ctx.lineWidth = 1;
|
||||
|
||||
const cols = Math.ceil(width / gap) + 1;
|
||||
|
||||
for (let i = 0; i < points.length; i++) {
|
||||
const p = points[i];
|
||||
|
||||
// Draw Horizontal
|
||||
if ((i + 1) % cols !== 0 && i + 1 < points.length) {
|
||||
const next = points[i + 1];
|
||||
// Use Bezier for fluid curves instead of straight lines
|
||||
const xc = (p.x + next.x) / 2;
|
||||
const yc = (p.y + next.y) / 2;
|
||||
ctx.moveTo(p.x, p.y);
|
||||
// ctx.quadraticCurveTo(p.x, p.y, xc, yc); // Slightly more expensive but smoother?
|
||||
// Actually straight lines with high enough density look fine and are faster.
|
||||
// Let's stick to lineTo for performance, the points themselves move smoothly.
|
||||
ctx.lineTo(next.x, next.y);
|
||||
}
|
||||
|
||||
// Draw Vertical
|
||||
if (i + cols < points.length) {
|
||||
const next = points[i + cols];
|
||||
ctx.moveTo(p.x, p.y);
|
||||
ctx.lineTo(next.x, next.y);
|
||||
}
|
||||
}
|
||||
ctx.stroke();
|
||||
|
||||
animationId = requestAnimationFrame(draw);
|
||||
}
|
||||
|
||||
function handleMouseMove(e) {
|
||||
const rect = canvas.getBoundingClientRect();
|
||||
mouse.x = e.clientX - rect.left;
|
||||
mouse.y = e.clientY - rect.top;
|
||||
}
|
||||
|
||||
function handleMouseLeave() {
|
||||
mouse.x = -1000;
|
||||
mouse.y = -1000;
|
||||
}
|
||||
|
||||
window.addEventListener("resize", resize);
|
||||
canvas.parentElement.addEventListener("mousemove", handleMouseMove);
|
||||
canvas.parentElement.addEventListener("mouseleave", handleMouseLeave);
|
||||
|
||||
resize();
|
||||
draw();
|
||||
|
||||
// Cleanup
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting) {
|
||||
if (!animationId) draw();
|
||||
} else {
|
||||
if (animationId) {
|
||||
cancelAnimationFrame(animationId);
|
||||
animationId = null;
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
observer.observe(canvas);
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,229 @@
|
||||
// ============================================
|
||||
// SPLIT COMPARE - Reusable before/after split-screen effect
|
||||
// ============================================
|
||||
|
||||
/**
|
||||
* Initialize split comparison effect on a container
|
||||
* @param {HTMLElement} container - The container element with .split-container inside
|
||||
* @param {Object} options - Configuration options
|
||||
*/
|
||||
export function initSplitCompare(container, options = {}) {
|
||||
const {
|
||||
defaultPosition = 70,
|
||||
skewAngle = 10, // Degrees — matches CSS skewX(-10deg) on .split-divider
|
||||
lerpSpeed = 0.15,
|
||||
animationThreshold = 40, // Re-trigger animations when crossing this threshold
|
||||
onCrossThreshold = null // Callback when crossing threshold toward "after" side
|
||||
} = options;
|
||||
|
||||
const splitContainer = container.querySelector('.split-container');
|
||||
const splitAfter = container.querySelector('.split-after');
|
||||
const splitDivider = container.querySelector('.split-divider');
|
||||
|
||||
if (!splitContainer || !splitAfter || !splitDivider) return null;
|
||||
|
||||
// Compute skewOffset from container dimensions so clip-path angle matches CSS skewX
|
||||
const tanAngle = Math.tan(skewAngle * Math.PI / 180);
|
||||
let skewOffset = 8; // fallback
|
||||
|
||||
function recalcSkewOffset() {
|
||||
const rect = splitContainer.getBoundingClientRect();
|
||||
if (rect.width > 0 && rect.height > 0) {
|
||||
skewOffset = 50 * rect.height * tanAngle / rect.width;
|
||||
}
|
||||
}
|
||||
recalcSkewOffset();
|
||||
|
||||
const resizeObserver = new ResizeObserver(recalcSkewOffset);
|
||||
resizeObserver.observe(splitContainer);
|
||||
|
||||
let minPosition = -skewOffset;
|
||||
let maxPosition = 100 + skewOffset;
|
||||
if (options.minPosition != null) minPosition = options.minPosition;
|
||||
if (options.maxPosition != null) maxPosition = options.maxPosition;
|
||||
|
||||
let isHovering = false;
|
||||
let currentX = defaultPosition;
|
||||
let targetX = defaultPosition;
|
||||
let animationId = null;
|
||||
let wasAboveThreshold = defaultPosition > animationThreshold;
|
||||
|
||||
function updateSplit(percent) {
|
||||
const minPos = options.minPosition != null ? minPosition : -skewOffset;
|
||||
const maxPos = options.maxPosition != null ? maxPosition : 100 + skewOffset;
|
||||
const clampedX = Math.max(minPos, Math.min(maxPos, percent));
|
||||
|
||||
// Check if we crossed the threshold toward the "after" side (moving left)
|
||||
const isAboveThreshold = clampedX > animationThreshold;
|
||||
if (wasAboveThreshold && !isAboveThreshold) {
|
||||
// Crossed threshold - re-trigger animations
|
||||
retriggerAnimations();
|
||||
if (onCrossThreshold) onCrossThreshold(clampedX);
|
||||
}
|
||||
wasAboveThreshold = isAboveThreshold;
|
||||
|
||||
// Angled clip-path matching divider's skewX — offset computed from actual dimensions
|
||||
splitAfter.style.clipPath = `polygon(${clampedX + skewOffset}% 0%, 100% 0%, 100% 100%, ${clampedX - skewOffset}% 100%)`;
|
||||
splitDivider.style.left = `${clampedX}%`;
|
||||
}
|
||||
|
||||
function retriggerAnimations() {
|
||||
// Re-trigger CSS animations in the "after" content.
|
||||
// If there's a canvas (e.g. overdrive shader), we can't clone-and-replace
|
||||
// because that destroys JS-driven animations. In that case, retrigger
|
||||
// individual elements. Otherwise, use the fast clone approach.
|
||||
const afterContent = splitAfter.querySelector('.split-content');
|
||||
if (!afterContent) return;
|
||||
|
||||
const hasCanvas = afterContent.querySelector('canvas, .od-burn, .od-sparks');
|
||||
if (hasCanvas) {
|
||||
// Safe path: retrigger CSS animations individually, skip canvas
|
||||
afterContent.querySelectorAll('*').forEach(el => {
|
||||
if (el.tagName === 'CANVAS') return;
|
||||
const anim = getComputedStyle(el).animationName;
|
||||
if (anim && anim !== 'none') {
|
||||
el.style.animation = 'none';
|
||||
el.offsetHeight;
|
||||
el.style.animation = '';
|
||||
}
|
||||
});
|
||||
} else {
|
||||
// Fast path: clone and replace to restart all CSS animations
|
||||
const clone = afterContent.cloneNode(true);
|
||||
afterContent.parentNode.replaceChild(clone, afterContent);
|
||||
}
|
||||
}
|
||||
|
||||
function animate() {
|
||||
const diff = targetX - currentX;
|
||||
if (Math.abs(diff) > 0.1) {
|
||||
currentX += diff * lerpSpeed;
|
||||
updateSplit(currentX);
|
||||
animationId = requestAnimationFrame(animate);
|
||||
} else {
|
||||
currentX = targetX;
|
||||
updateSplit(currentX);
|
||||
animationId = null;
|
||||
}
|
||||
}
|
||||
|
||||
function startAnimation() {
|
||||
if (!animationId) {
|
||||
animationId = requestAnimationFrame(animate);
|
||||
}
|
||||
}
|
||||
|
||||
function handleMouseEnter() {
|
||||
isHovering = true;
|
||||
}
|
||||
|
||||
function handleMouseLeave() {
|
||||
isHovering = false;
|
||||
targetX = defaultPosition;
|
||||
startAnimation();
|
||||
}
|
||||
|
||||
function handleMouseMove(e) {
|
||||
if (isHovering) {
|
||||
const rect = splitContainer.getBoundingClientRect();
|
||||
const range = 100 + 2 * skewOffset;
|
||||
targetX = ((e.clientX - rect.left) / rect.width) * range - skewOffset;
|
||||
startAnimation();
|
||||
}
|
||||
}
|
||||
|
||||
let touchStartX = 0;
|
||||
let touchStartY = 0;
|
||||
let isDragging = false;
|
||||
const DRAG_THRESHOLD = 10; // Minimum horizontal movement to start dragging
|
||||
|
||||
function handleTouchStart(e) {
|
||||
const touch = e.touches[0];
|
||||
touchStartX = touch.clientX;
|
||||
touchStartY = touch.clientY;
|
||||
isDragging = false;
|
||||
isHovering = true;
|
||||
}
|
||||
|
||||
function handleTouchEnd() {
|
||||
isHovering = false;
|
||||
isDragging = false;
|
||||
targetX = defaultPosition;
|
||||
startAnimation();
|
||||
}
|
||||
|
||||
function handleTouchMove(e) {
|
||||
const touch = e.touches[0];
|
||||
const deltaX = Math.abs(touch.clientX - touchStartX);
|
||||
const deltaY = Math.abs(touch.clientY - touchStartY);
|
||||
|
||||
// Only start dragging if horizontal movement is greater than vertical
|
||||
// This allows vertical scrolling to pass through
|
||||
if (!isDragging) {
|
||||
if (deltaX > DRAG_THRESHOLD && deltaX > deltaY) {
|
||||
isDragging = true;
|
||||
} else if (deltaY > DRAG_THRESHOLD) {
|
||||
// User is scrolling vertically, don't interfere
|
||||
return;
|
||||
} else {
|
||||
// Not enough movement yet
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// Only prevent default when actively dragging horizontally
|
||||
if (isDragging) {
|
||||
e.preventDefault();
|
||||
const rect = splitContainer.getBoundingClientRect();
|
||||
targetX = ((touch.clientX - rect.left) / rect.width) * 100;
|
||||
startAnimation();
|
||||
}
|
||||
}
|
||||
|
||||
// Use the parent container for mouse events to create a larger hit area
|
||||
const hitArea = splitContainer.parentElement || splitContainer;
|
||||
|
||||
// Attach listeners — mouse events on the wider hit area
|
||||
hitArea.addEventListener('mouseenter', handleMouseEnter);
|
||||
hitArea.addEventListener('mouseleave', handleMouseLeave);
|
||||
hitArea.addEventListener('mousemove', handleMouseMove);
|
||||
splitContainer.addEventListener('touchstart', handleTouchStart);
|
||||
splitContainer.addEventListener('touchend', handleTouchEnd);
|
||||
splitContainer.addEventListener('touchmove', handleTouchMove, { passive: false });
|
||||
|
||||
// Initialize
|
||||
updateSplit(defaultPosition);
|
||||
|
||||
// Return cleanup function
|
||||
return {
|
||||
destroy() {
|
||||
hitArea.removeEventListener('mouseenter', handleMouseEnter);
|
||||
hitArea.removeEventListener('mouseleave', handleMouseLeave);
|
||||
hitArea.removeEventListener('mousemove', handleMouseMove);
|
||||
splitContainer.removeEventListener('touchstart', handleTouchStart);
|
||||
splitContainer.removeEventListener('touchend', handleTouchEnd);
|
||||
splitContainer.removeEventListener('touchmove', handleTouchMove);
|
||||
if (animationId) cancelAnimationFrame(animationId);
|
||||
resizeObserver.disconnect();
|
||||
},
|
||||
setPosition(percent) {
|
||||
targetX = percent;
|
||||
startAnimation();
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize all split comparisons on the page
|
||||
*/
|
||||
export function initAllSplitCompare(selector = '.split-comparison', options = {}) {
|
||||
const containers = document.querySelectorAll(selector);
|
||||
const instances = [];
|
||||
|
||||
containers.forEach(container => {
|
||||
const instance = initSplitCompare(container, options);
|
||||
if (instance) instances.push(instance);
|
||||
});
|
||||
|
||||
return instances;
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
// GENERATED by build.js — do not edit
|
||||
export const COMMAND_COUNT = 23;
|
||||
export const DETECTION_COUNT = 25;
|
||||
@@ -0,0 +1,18 @@
|
||||
import { inView } from "motion";
|
||||
|
||||
export function initScrollReveal() {
|
||||
const revealElements = document.querySelectorAll("[data-reveal]");
|
||||
|
||||
revealElements.forEach((el) => {
|
||||
inView(
|
||||
el,
|
||||
() => {
|
||||
el.classList.add("revealed");
|
||||
},
|
||||
{ margin: "-50px" },
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,107 @@
|
||||
// Instant anchor scroll - no smooth scrolling for better UX on long pages.
|
||||
// `behavior: 'instant'` explicitly overrides any CSS `scroll-behavior: smooth`
|
||||
// from a stylesheet we don't own; `behavior: 'auto'` would defer to CSS.
|
||||
export function initAnchorScroll() {
|
||||
document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
|
||||
anchor.addEventListener("click", (e) => {
|
||||
e.preventDefault();
|
||||
const target = document.querySelector(anchor.getAttribute("href"));
|
||||
if (target) {
|
||||
const offset = 40;
|
||||
const targetPosition = target.getBoundingClientRect().top + window.scrollY - offset;
|
||||
window.scrollTo({ top: targetPosition, behavior: 'instant' });
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
export function initHashTracking() {
|
||||
const sections = document.querySelectorAll('section[id]');
|
||||
if (!sections.length) return;
|
||||
|
||||
let currentHash = window.location.hash.slice(1) || '';
|
||||
let ticking = false;
|
||||
|
||||
function updateHash() {
|
||||
// Don't override command deep links while user is in the commands section
|
||||
if (currentHash.startsWith('cmd-')) {
|
||||
const cmdEl = document.getElementById(currentHash);
|
||||
if (cmdEl) {
|
||||
const rect = cmdEl.getBoundingClientRect();
|
||||
// Only clear the cmd hash if user scrolled well away from commands section
|
||||
if (rect.top > window.innerHeight * 2 || rect.bottom < -window.innerHeight) {
|
||||
currentHash = '';
|
||||
} else {
|
||||
ticking = false;
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const scrollY = window.scrollY;
|
||||
const viewportHeight = window.innerHeight;
|
||||
const triggerPoint = scrollY + viewportHeight * 0.3;
|
||||
|
||||
let activeSection = '';
|
||||
|
||||
sections.forEach(section => {
|
||||
const rect = section.getBoundingClientRect();
|
||||
const sectionTop = scrollY + rect.top;
|
||||
const sectionBottom = sectionTop + rect.height;
|
||||
|
||||
if (triggerPoint >= sectionTop && triggerPoint < sectionBottom) {
|
||||
activeSection = section.id;
|
||||
}
|
||||
});
|
||||
|
||||
// Don't set #hero — it's the default state, no hash needed
|
||||
if (activeSection === 'hero') activeSection = '';
|
||||
|
||||
if (activeSection !== currentHash) {
|
||||
currentHash = activeSection;
|
||||
if (activeSection) {
|
||||
history.replaceState(null, '', `#${activeSection}`);
|
||||
} else {
|
||||
history.replaceState(null, '', window.location.pathname);
|
||||
}
|
||||
}
|
||||
|
||||
ticking = false;
|
||||
}
|
||||
|
||||
window.addEventListener('scroll', () => {
|
||||
if (!ticking) {
|
||||
requestAnimationFrame(updateHash);
|
||||
ticking = true;
|
||||
}
|
||||
}, { passive: true });
|
||||
|
||||
// Handle initial hash on page load — instant jump, retried on
|
||||
// fonts.ready and window `load`. A fixed setTimeout is unreliable
|
||||
// because async-loaded display fonts reflow the page by hundreds of
|
||||
// pixels when they swap in; computing target position before that
|
||||
// lands the user several sections above the right spot.
|
||||
if (window.location.hash) {
|
||||
const hash = window.location.hash.slice(1);
|
||||
const target = document.getElementById(hash);
|
||||
if (target) {
|
||||
currentHash = hash;
|
||||
let clicked = false;
|
||||
const jump = () => {
|
||||
const offset = 40;
|
||||
const targetPosition = target.getBoundingClientRect().top + window.scrollY - offset;
|
||||
window.scrollTo({ top: targetPosition, behavior: 'instant' });
|
||||
if (!clicked && hash.startsWith('cmd-') && target.classList.contains('manual-entry')) {
|
||||
target.click();
|
||||
clicked = true;
|
||||
}
|
||||
};
|
||||
jump();
|
||||
if (document.fonts?.ready) document.fonts.ready.then(jump).catch(() => {});
|
||||
window.addEventListener('load', jump, { once: true });
|
||||
}
|
||||
} else {
|
||||
// No hash — don't set one on initial load
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,56 @@
|
||||
// Theme toggle - supports light, dark, and system preference
|
||||
|
||||
const STORAGE_KEY = 'impeccable-theme';
|
||||
|
||||
function getStoredTheme() {
|
||||
return localStorage.getItem(STORAGE_KEY);
|
||||
}
|
||||
|
||||
function setStoredTheme(theme) {
|
||||
localStorage.setItem(STORAGE_KEY, theme);
|
||||
}
|
||||
|
||||
function applyTheme(theme) {
|
||||
const html = document.documentElement;
|
||||
|
||||
// Remove both classes first
|
||||
html.classList.remove('light', 'dark');
|
||||
|
||||
if (theme === 'light') {
|
||||
html.classList.add('light');
|
||||
} else if (theme === 'dark') {
|
||||
html.classList.add('dark');
|
||||
}
|
||||
// 'system' = no class, falls back to media query
|
||||
|
||||
// Update active state on buttons
|
||||
document.querySelectorAll('.theme-toggle-btn').forEach(btn => {
|
||||
btn.classList.toggle('active', btn.dataset.theme === theme);
|
||||
});
|
||||
}
|
||||
|
||||
export function initThemeToggle() {
|
||||
const toggle = document.querySelector('.theme-toggle');
|
||||
if (!toggle) return;
|
||||
|
||||
// Get stored theme or default to system
|
||||
const storedTheme = getStoredTheme() || 'system';
|
||||
applyTheme(storedTheme);
|
||||
|
||||
// Handle button clicks
|
||||
toggle.addEventListener('click', (e) => {
|
||||
const btn = e.target.closest('.theme-toggle-btn');
|
||||
if (!btn) return;
|
||||
|
||||
const theme = btn.dataset.theme;
|
||||
setStoredTheme(theme);
|
||||
applyTheme(theme);
|
||||
});
|
||||
|
||||
// Listen for system preference changes (only matters when in 'system' mode)
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
|
||||
if (getStoredTheme() === 'system' || !getStoredTheme()) {
|
||||
applyTheme('system');
|
||||
}
|
||||
});
|
||||
}
|
||||
Reference in New Issue
Block a user