mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-17 16:46:31 +03:00
Paul BakausandClaude Fable 5
90f9eeb99b
The public repo keeps the OSS promise surface: skill, CLI, extension, tests, and the provider build. The site, labs, concept/composition catalogs, image pipeline, Cloudflare functions, and authoring guide move to pbakaus/impeccable-site. concept-seed tests run against a synthetic fixture catalog; the plugin icon and skill categories moved in-repo; build validation narrows to README prose and non-site counts; release notes read from a sibling impeccable-site checkout. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
455 lines
24 KiB
HTML
455 lines
24 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>/impeccable quieter | Impeccable</title>
|
|
<meta name="description" content="Tone down designs that are shouting without losing their intent.">
|
|
<meta name="theme-color" content="#fafafa">
|
|
<link rel="canonical" href="https://impeccable.style/docs/quieter">
|
|
<link rel="icon" type="image/svg+xml" href="../favicon.svg">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400&family=Instrument+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="../css/sub-pages.css">
|
|
|
|
</head>
|
|
<body class="sub-page skills-layout-page">
|
|
<a href="#main" class="skip-link">Skip to content</a>
|
|
<!-- site-header v1 -->
|
|
<header class="site-header" data-site-header>
|
|
<a href="/" class="site-header-brand" aria-label="Impeccable home">
|
|
<svg class="site-header-brand-logo" viewBox="0 0 32 32" aria-hidden="true"><rect width="32" height="32" rx="6" fill="#1a1a1a"/><text x="16" y="24" font-family="system-ui, -apple-system, sans-serif" font-size="22" font-weight="500" fill="#f5f3ef" text-anchor="middle">/</text></svg>
|
|
<span class="site-header-brand-name">Impeccable</span>
|
|
</a>
|
|
<div class="site-header-right">
|
|
<nav class="site-header-nav" aria-label="Primary">
|
|
<a href="/" data-nav="home">Home</a>
|
|
<a href="/designing" data-nav="designing">Designing</a>
|
|
<a href="/docs" data-nav="docs" aria-current="page">Docs</a>
|
|
<a href="/slop" data-nav="slop">Slop</a>
|
|
<a href="/live-mode" data-nav="live">Live</a>
|
|
</nav>
|
|
<a href="https://github.com/pbakaus/impeccable" class="site-header-github" target="_blank" rel="noopener" aria-label="Impeccable on GitHub, 21k stars">
|
|
<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"/></svg>
|
|
<span class="site-header-github-label">21k</span>
|
|
<svg class="site-header-github-star" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2l2.76 6.36L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l7.24-.91L12 2z"/></svg>
|
|
</a>
|
|
</div>
|
|
</header>
|
|
<main id="main">
|
|
|
|
<div class="skills-layout">
|
|
|
|
<aside class="skills-sidebar" aria-label="Documentation">
|
|
<button class="skills-sidebar-toggle" type="button" aria-expanded="false" aria-controls="skills-sidebar-inner">
|
|
<span class="skills-sidebar-toggle-label">/quieter</span>
|
|
<svg class="skills-sidebar-toggle-chevron" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg>
|
|
</button>
|
|
<div class="skills-sidebar-inner" id="skills-sidebar-inner">
|
|
<p class="skills-sidebar-label">Docs</p>
|
|
|
|
<div class="skills-sidebar-group" data-category="tutorials">
|
|
<p class="skills-sidebar-group-title">Tutorials</p>
|
|
<ul class="skills-sidebar-list">
|
|
<li><a href="/tutorials/getting-started">Getting started</a></li>
|
|
<li><a href="/tutorials/iterate-live">Iterate on UI with Live Mode</a></li>
|
|
<li><a href="/tutorials/brand-vs-product">Brand vs product, pick a register</a></li>
|
|
<li><a href="/tutorials/critique-with-overlay">Critique with the visual overlay</a></li>
|
|
</ul>
|
|
</div>
|
|
<hr class="skills-sidebar-divider">
|
|
|
|
<div class="skills-sidebar-group" data-category="create">
|
|
<p class="skills-sidebar-group-title">Create</p>
|
|
<ul class="skills-sidebar-list">
|
|
<li><a href="/docs/impeccable">/impeccable</a></li>
|
|
<li><a href="/docs/craft">craft</a></li>
|
|
<li><a href="/docs/shape">shape</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="skills-sidebar-group" data-category="evaluate">
|
|
<p class="skills-sidebar-group-title">Evaluate</p>
|
|
<ul class="skills-sidebar-list">
|
|
<li><a href="/docs/audit">audit</a></li>
|
|
<li><a href="/docs/critique">critique</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="skills-sidebar-group" data-category="refine">
|
|
<p class="skills-sidebar-group-title">Refine</p>
|
|
<ul class="skills-sidebar-list">
|
|
<li><a href="/docs/animate">animate</a></li>
|
|
<li><a href="/docs/bolder">bolder</a></li>
|
|
<li><a href="/docs/colorize">colorize</a></li>
|
|
<li><a href="/docs/delight">delight</a></li>
|
|
<li><a href="/docs/layout">layout</a></li>
|
|
<li><a href="/docs/overdrive">overdrive</a></li>
|
|
<li><a href="/docs/quieter" aria-current="page">quieter</a></li>
|
|
<li><a href="/docs/typeset">typeset</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="skills-sidebar-group" data-category="simplify">
|
|
<p class="skills-sidebar-group-title">Simplify</p>
|
|
<ul class="skills-sidebar-list">
|
|
<li><a href="/docs/adapt">adapt</a></li>
|
|
<li><a href="/docs/clarify">clarify</a></li>
|
|
<li><a href="/docs/distill">distill</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="skills-sidebar-group" data-category="harden">
|
|
<p class="skills-sidebar-group-title">Harden</p>
|
|
<ul class="skills-sidebar-list">
|
|
<li><a href="/docs/harden">harden</a></li>
|
|
<li><a href="/docs/onboard">onboard</a></li>
|
|
<li><a href="/docs/optimize">optimize</a></li>
|
|
<li><a href="/docs/polish">polish</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="skills-sidebar-group" data-category="system">
|
|
<p class="skills-sidebar-group-title">System</p>
|
|
<ul class="skills-sidebar-list">
|
|
<li><a href="/docs/document">document</a></li>
|
|
<li><a href="/docs/extract">extract</a></li>
|
|
<li><a href="/docs/live">live</a></li>
|
|
<li><a href="/docs/teach">teach</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</aside>
|
|
<div class="skills-main">
|
|
|
|
<article class="skill-detail">
|
|
<div class="skill-detail-hero skill-detail-hero--has-demo">
|
|
<header class="skill-detail-header">
|
|
<p class="skill-detail-eyebrow"><a href="/docs">Docs</a> / Refine</p>
|
|
<h1 class="skill-detail-title"><span class="skill-detail-title-namespace"><span class="skill-detail-title-slash">/</span>impeccable</span>quieter</h1>
|
|
<p class="skill-detail-tagline">Tone down designs that are shouting without losing their intent.</p>
|
|
|
|
<div class="skill-meta-strip">
|
|
<span class="skill-meta-chip skill-meta-category" data-category="refine">Refine</span>
|
|
<span class="skill-meta-chip">User-invocable</span>
|
|
<span class="skill-meta-chip skill-meta-args">[target]</span>
|
|
</div>
|
|
</header>
|
|
|
|
<section class="skill-demo" aria-label="Before and after demo">
|
|
<div class="split-comparison" data-demo="skill-quieter">
|
|
<p class="skill-demo-eyebrow">Drag or hover to compare</p>
|
|
<div class="split-container">
|
|
<div class="split-before">
|
|
<div class="split-content">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
<div class="split-after">
|
|
<div class="split-content">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
<div class="split-divider"></div>
|
|
</div>
|
|
<div class="split-labels">
|
|
<span class="split-label-item" data-point="before">Before</span>
|
|
<p class="skill-demo-caption">Overwhelming design → Calm, focused interface</p>
|
|
<span class="split-label-item" data-point="after">After</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<section class="skill-detail-editorial prose">
|
|
<h2 id="when-to-use-it">When to use it</h2>
|
|
<p><code>/impeccable quieter</code> is the counterweight to <code>/impeccable bolder</code>. Reach for it when an interface is visually aggressive, overstimulating, or trying to do too many things at full volume. Neon on dark, gradient text everywhere, 6 accent colors, everything animated, 20px shadows. Use quieter when the design needs to breathe and you want refinement without losing the point of view.</p>
|
|
<p>Also useful after <code>/impeccable bolder</code> goes a little too far.</p>
|
|
<h2 id="how-it-works">How it works</h2>
|
|
<p>The skill works by reduction across four axes:</p>
|
|
<ol>
|
|
<li><strong>Color</strong>: desaturate, lower chroma in OKLCH, pull accents back to a single primary plus muted support. No more than two intentional colors.</li>
|
|
<li><strong>Contrast</strong>: soften extreme darks and lights, pull the range in. Backgrounds move from pure white and pure black to paper and ink.</li>
|
|
<li><strong>Decoration</strong>: remove shadows that are not doing work, drop borders that are not carrying structure, retire gradients that exist for energy rather than hierarchy.</li>
|
|
<li><strong>Motion and effect</strong>: slow animations down, remove anything that auto-plays, drop parallax and blur unless they serve readability.</li>
|
|
</ol>
|
|
<p>The skill preserves the design's intent. If the original had a point of view, the quieter version has the same point of view with more confidence. Refinement, not neutralization.</p>
|
|
<h2 id="try-it">Try it</h2>
|
|
<div class="code-block-wrap"><pre class="code-block"><code>/impeccable quieter the pricing page</code></pre><button class="code-block-copy" type="button" data-copy="/impeccable quieter the pricing page" aria-label="Copy to clipboard"></button></div>
|
|
<p>Typical diff:</p>
|
|
<ul>
|
|
<li>Gradient text on the price removed, replaced with solid ink at one weight heavier</li>
|
|
<li>Three accent colors reduced to one (magenta), the other two become neutral variants</li>
|
|
<li>Card shadows reduced from <code>0 20px 40px rgba(0,0,0,0.2)</code> to <code>0 1px 0 var(--color-mist)</code> (a hairline)</li>
|
|
<li>Background switches from dark gradient to paper with a subtle cream wash at the top</li>
|
|
<li>Hero animation from 1.2s easeOut with 3 staggered elements to a single 260ms fade-in</li>
|
|
</ul>
|
|
<h2 id="pitfalls">Pitfalls</h2>
|
|
<ul>
|
|
<li><strong>Over-applying.</strong> Quieter can strip personality if you run it on something that was already measured. Use it when the design is too loud, not when it is correctly assertive.</li>
|
|
<li><strong>Confusing quieter with distill.</strong> Quieter reduces intensity. Distill removes elements. They are different moves.</li>
|
|
<li><strong>Running it in response to a critique that says "too busy".</strong> Busy usually means too many things, not too loud. Try <code>/impeccable distill</code> first.</li>
|
|
</ul>
|
|
|
|
</section>
|
|
|
|
|
|
|
|
<section class="skill-source-card">
|
|
<header class="skill-source-card-header">
|
|
<span class="skill-source-card-label">reference/quieter.md</span>
|
|
<span class="skill-source-card-subtitle">Loaded when the impeccable skill routes to this command.</span>
|
|
</header>
|
|
<div class="skill-source-card-body prose">
|
|
<p>Reduce visual intensity in designs that are too bold, aggressive, or overstimulating, creating a more refined and approachable aesthetic without losing effectiveness.</p>
|
|
<hr>
|
|
<h2 id="register">Register</h2>
|
|
<p>Brand: "quieter" means more restrained palette, more whitespace, more typographic air. Drama is reduced, not eliminated — the POV stays intact.</p>
|
|
<p>Product: "quieter" means reducing visual noise — fewer background accents, flatter cards, less color, less motion. The tool should disappear more completely into the task.</p>
|
|
<hr>
|
|
<h2 id="assess-current-state">Assess Current State</h2>
|
|
<p>Analyze what makes the design feel too intense:</p>
|
|
<ol>
|
|
<li><p><strong>Identify intensity sources</strong>:</p>
|
|
<ul>
|
|
<li><strong>Color saturation</strong>: Overly bright or saturated colors</li>
|
|
<li><strong>Contrast extremes</strong>: Too much high-contrast juxtaposition</li>
|
|
<li><strong>Visual weight</strong>: Too many bold, heavy elements competing</li>
|
|
<li><strong>Animation excess</strong>: Too much motion or overly dramatic effects</li>
|
|
<li><strong>Complexity</strong>: Too many visual elements, patterns, or decorations</li>
|
|
<li><strong>Scale</strong>: Everything is large and loud with no hierarchy</li>
|
|
</ul>
|
|
</li>
|
|
<li><p><strong>Understand the context</strong>:</p>
|
|
<ul>
|
|
<li>What's the purpose? (Marketing vs tool vs reading experience)</li>
|
|
<li>Who's the audience? (Some contexts need energy)</li>
|
|
<li>What's working? (Don't throw away good ideas)</li>
|
|
<li>What's the core message? (Preserve what matters)</li>
|
|
</ul>
|
|
</li>
|
|
</ol>
|
|
<p>If any of these are unclear from the codebase, STOP and call the AskUserQuestion tool to clarify.</p>
|
|
<p><strong>CRITICAL</strong>: "Quieter" doesn't mean boring or generic. It means refined, sophisticated, and easier on the eyes. Think luxury, not laziness.</p>
|
|
<h2 id="plan-refinement">Plan Refinement</h2>
|
|
<p>Create a strategy to reduce intensity while maintaining impact:</p>
|
|
<ul>
|
|
<li><strong>Color approach</strong>: Desaturate or shift to more sophisticated tones?</li>
|
|
<li><strong>Hierarchy approach</strong>: Which elements should stay bold (very few), which should recede?</li>
|
|
<li><strong>Simplification approach</strong>: What can be removed entirely?</li>
|
|
<li><strong>Sophistication approach</strong>: How can we signal quality through restraint?</li>
|
|
</ul>
|
|
<p><strong>IMPORTANT</strong>: Great quiet design is harder than great bold design. Subtlety requires precision.</p>
|
|
<h2 id="refine-the-design">Refine the Design</h2>
|
|
<p>Systematically reduce intensity across these dimensions:</p>
|
|
<h3 id="color-refinement">Color Refinement</h3>
|
|
<ul>
|
|
<li><strong>Reduce saturation</strong>: Shift from fully saturated to 70-85% saturation</li>
|
|
<li><strong>Soften palette</strong>: Replace bright colors with muted, sophisticated tones</li>
|
|
<li><strong>Reduce color variety</strong>: Use fewer colors more thoughtfully</li>
|
|
<li><strong>Neutral dominance</strong>: Let neutrals do more work, use color as accent (10% rule)</li>
|
|
<li><strong>Gentler contrasts</strong>: High contrast only where it matters most</li>
|
|
<li><strong>Tinted grays</strong>: Use warm or cool tinted grays instead of pure gray—adds sophistication without loudness</li>
|
|
<li><strong>Never gray on color</strong>: If you have gray text on a colored background, use a darker shade of that color or transparency instead</li>
|
|
</ul>
|
|
<h3 id="visual-weight-reduction">Visual Weight Reduction</h3>
|
|
<ul>
|
|
<li><strong>Typography</strong>: Reduce font weights (900 → 600, 700 → 500), decrease sizes where appropriate</li>
|
|
<li><strong>Hierarchy through subtlety</strong>: Use weight, size, and space instead of color and boldness</li>
|
|
<li><strong>White space</strong>: Increase breathing room, reduce density</li>
|
|
<li><strong>Borders & lines</strong>: Reduce thickness, decrease opacity, or remove entirely</li>
|
|
</ul>
|
|
<h3 id="simplification">Simplification</h3>
|
|
<ul>
|
|
<li><strong>Remove decorative elements</strong>: Gradients, shadows, patterns, textures that don't serve purpose</li>
|
|
<li><strong>Simplify shapes</strong>: Reduce border radius extremes, simplify custom shapes</li>
|
|
<li><strong>Reduce layering</strong>: Flatten visual hierarchy where possible</li>
|
|
<li><strong>Clean up effects</strong>: Reduce or remove blur effects, glows, multiple shadows</li>
|
|
</ul>
|
|
<h3 id="motion-reduction">Motion Reduction</h3>
|
|
<ul>
|
|
<li><strong>Reduce animation intensity</strong>: Shorter distances (10-20px instead of 40px), gentler easing</li>
|
|
<li><strong>Remove decorative animations</strong>: Keep functional motion, remove flourishes</li>
|
|
<li><strong>Subtle micro-interactions</strong>: Replace dramatic effects with gentle feedback</li>
|
|
<li><strong>Refined easing</strong>: Use ease-out-quart for smooth, understated motion—never bounce or elastic</li>
|
|
<li><strong>Remove animations entirely</strong> if they're not serving a clear purpose</li>
|
|
</ul>
|
|
<h3 id="composition-refinement">Composition Refinement</h3>
|
|
<ul>
|
|
<li><strong>Reduce scale jumps</strong>: Smaller contrast between sizes creates calmer feeling</li>
|
|
<li><strong>Align to grid</strong>: Bring rogue elements back into systematic alignment</li>
|
|
<li><strong>Even out spacing</strong>: Replace extreme spacing variations with consistent rhythm</li>
|
|
</ul>
|
|
<p><strong>NEVER</strong>:</p>
|
|
<ul>
|
|
<li>Make everything the same size/weight (hierarchy still matters)</li>
|
|
<li>Remove all color (quiet ≠ grayscale)</li>
|
|
<li>Eliminate all personality (maintain character through refinement)</li>
|
|
<li>Sacrifice usability for aesthetics (functional elements still need clear affordances)</li>
|
|
<li>Make everything small and light (some anchors needed)</li>
|
|
</ul>
|
|
<h2 id="verify-quality">Verify Quality</h2>
|
|
<p>Ensure refinement maintains quality:</p>
|
|
<ul>
|
|
<li><strong>Still functional</strong>: Can users still accomplish tasks easily?</li>
|
|
<li><strong>Still distinctive</strong>: Does it have character, or is it generic now?</li>
|
|
<li><strong>Better reading</strong>: Is text easier to read for extended periods?</li>
|
|
<li><strong>Sophistication</strong>: Does it feel more refined and premium?</li>
|
|
</ul>
|
|
<p>Remember: Quiet design is confident design. It doesn't need to shout. Less is more, but less is also harder. Refine with precision and maintain intentionality.</p>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
|
|
</article>
|
|
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<script>
|
|
// Copy buttons on rendered code blocks
|
|
document.addEventListener('click', (e) => {
|
|
const btn = e.target.closest('[data-copy]');
|
|
if (!btn) return;
|
|
const text = btn.getAttribute('data-copy');
|
|
if (!text) return;
|
|
navigator.clipboard.writeText(text).then(() => {
|
|
btn.classList.add('is-copied');
|
|
setTimeout(() => btn.classList.remove('is-copied'), 1500);
|
|
}).catch(() => {});
|
|
});
|
|
|
|
// Mobile sidebar toggle (shown on narrow viewports, hidden on desktop).
|
|
document.addEventListener('click', (e) => {
|
|
const toggle = e.target.closest('.skills-sidebar-toggle');
|
|
if (!toggle) return;
|
|
const expanded = toggle.getAttribute('aria-expanded') === 'true';
|
|
toggle.setAttribute('aria-expanded', String(!expanded));
|
|
});
|
|
|
|
// Before/after split-compare: drag on touch, hover OR drag on mouse.
|
|
// Pointer events attach to the padded .split-comparison wrapper so
|
|
// there is a ~20px invisible buffer around the visible box. The
|
|
// divider only snaps back when the pointer leaves that outer buffer.
|
|
(function initSplitCompare() {
|
|
const wrappers = document.querySelectorAll('.split-comparison');
|
|
if (wrappers.length === 0) return;
|
|
const hasHover = matchMedia('(hover: hover)').matches;
|
|
const DEFAULT_POSITION = 50;
|
|
|
|
for (const wrapper of wrappers) {
|
|
const container = wrapper.querySelector('.split-container');
|
|
const splitAfter = wrapper.querySelector('.split-after');
|
|
const splitDivider = wrapper.querySelector('.split-divider');
|
|
if (!container || !splitAfter || !splitDivider) continue;
|
|
|
|
const tanAngle = Math.tan(10 * Math.PI / 180);
|
|
let skewOffset = 8;
|
|
const recalcSkew = () => {
|
|
const r = container.getBoundingClientRect();
|
|
if (r.width > 0 && r.height > 0) {
|
|
skewOffset = 50 * r.height * tanAngle / r.width;
|
|
}
|
|
};
|
|
recalcSkew();
|
|
window.addEventListener('resize', recalcSkew, { passive: true });
|
|
|
|
let targetX = DEFAULT_POSITION;
|
|
let currentX = DEFAULT_POSITION;
|
|
let rafId = null;
|
|
|
|
const paint = (pct) => {
|
|
const x = Math.max(-skewOffset, Math.min(100 + skewOffset, pct));
|
|
splitAfter.style.clipPath =
|
|
`polygon(${x + skewOffset}% 0%, 100% 0%, 100% 100%, ${x - skewOffset}% 100%)`;
|
|
splitDivider.style.left = `${x}%`;
|
|
};
|
|
|
|
const step = () => {
|
|
currentX += (targetX - currentX) * 0.2;
|
|
if (Math.abs(targetX - currentX) < 0.1) {
|
|
currentX = targetX;
|
|
rafId = null;
|
|
} else {
|
|
rafId = requestAnimationFrame(step);
|
|
}
|
|
paint(currentX);
|
|
};
|
|
|
|
const setTarget = (pct) => {
|
|
targetX = pct;
|
|
if (rafId === null) rafId = requestAnimationFrame(step);
|
|
};
|
|
|
|
paint(DEFAULT_POSITION);
|
|
|
|
// Percentage is always relative to the VISIBLE .split-container,
|
|
// not the padded .split-comparison wrapper. The pointer event
|
|
// target is the wrapper but the clip-path math uses the inner box.
|
|
const pctFromClientX = (clientX) => {
|
|
const rect = container.getBoundingClientRect();
|
|
return ((clientX - rect.left) / rect.width) * 100;
|
|
};
|
|
|
|
let hovering = false;
|
|
let dragging = false;
|
|
|
|
wrapper.addEventListener('pointerenter', (e) => {
|
|
if (hasHover && e.pointerType === 'mouse') {
|
|
hovering = true;
|
|
}
|
|
});
|
|
|
|
wrapper.addEventListener('pointerdown', (e) => {
|
|
dragging = true;
|
|
wrapper.setPointerCapture(e.pointerId);
|
|
setTarget(pctFromClientX(e.clientX));
|
|
});
|
|
|
|
wrapper.addEventListener('pointermove', (e) => {
|
|
if (dragging || hovering) {
|
|
setTarget(pctFromClientX(e.clientX));
|
|
}
|
|
});
|
|
|
|
const endDrag = (e) => {
|
|
if (dragging) {
|
|
dragging = false;
|
|
try { wrapper.releasePointerCapture(e.pointerId); } catch {}
|
|
}
|
|
};
|
|
|
|
wrapper.addEventListener('pointerup', endDrag);
|
|
wrapper.addEventListener('pointercancel', endDrag);
|
|
|
|
wrapper.addEventListener('pointerleave', (e) => {
|
|
endDrag(e);
|
|
if (hovering) {
|
|
hovering = false;
|
|
setTarget(DEFAULT_POSITION);
|
|
}
|
|
});
|
|
}
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|