mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-19 01:26:29 +03:00
Paul BakausandClaude Opus 4.6
c751015fa1
New detections: - bounce-easing: flags bounce/elastic animation names, animate-bounce (Tailwind), and cubic-bezier curves with overshoot (y values outside [0, 1]) - layout-transition: flags explicit transition of width, height, padding, margin, and max-height/min-width variants; skips transition: all - dark-glow: flags colored box-shadow with blur > 4px on dark backgrounds (luminance < 0.1); skips gray shadows, focus rings (no blur), and non-dark backgrounds Includes 48 new tests across unit, regex, and jsdom fixture tests with dedicated should-flag and should-pass HTML fixtures for both categories. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
110 lines
3.4 KiB
HTML
110 lines
3.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Motion Patterns That Should Pass</title>
|
|
<style>
|
|
body { font-family: system-ui, sans-serif; background: #f9fafb; padding: 2rem; }
|
|
h1 { font-size: 2rem; margin-bottom: 0.5rem; }
|
|
h2 { font-size: 1.125rem; margin: 2.5rem 0 0.75rem; color: #6b7280; border-bottom: 1px solid #e5e7eb; padding-bottom: 0.5rem; }
|
|
p.intro { color: #6b7280; margin-bottom: 2rem; max-width: 36rem; font-size: 0.875rem; }
|
|
.demo { max-width: 28rem; margin-bottom: 1rem; padding: 1rem; background: white; border-radius: 0.5rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
|
|
.demo h3 { font-weight: 600; font-size: 0.875rem; }
|
|
.demo p { font-size: 0.8125rem; color: #6b7280; margin-top: 0.25rem; }
|
|
|
|
/* Good easing — smooth exponential deceleration */
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; transform: translateY(8px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
.fade-in {
|
|
animation: fadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
|
|
}
|
|
|
|
/* Good transitions — transform and opacity only */
|
|
.transform-transition {
|
|
transition: transform 0.3s ease-out;
|
|
}
|
|
.opacity-transition {
|
|
transition: opacity 0.2s ease;
|
|
}
|
|
.color-transition {
|
|
transition: color 0.15s ease, background-color 0.15s ease;
|
|
}
|
|
.shadow-transition {
|
|
transition: box-shadow 0.2s ease;
|
|
}
|
|
.all-transition {
|
|
transition: all 0.3s ease;
|
|
}
|
|
.multi-safe-transition {
|
|
transition: transform 0.3s ease, opacity 0.3s ease, box-shadow 0.2s ease;
|
|
}
|
|
|
|
/* Standard easing curves (y values within [0, 1]) */
|
|
.ease-out-quart {
|
|
transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
|
|
}
|
|
.ease-out-expo {
|
|
transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Motion Patterns: Should Pass</h1>
|
|
<p class="intro">None of these should trigger motion anti-pattern warnings.</p>
|
|
|
|
<h2>Good Easing</h2>
|
|
|
|
<div class="demo fade-in">
|
|
<h3>Smooth fade in</h3>
|
|
<p>animation: fadeIn with exponential ease-out</p>
|
|
</div>
|
|
|
|
<div class="demo ease-out-quart">
|
|
<h3>Ease-out quart</h3>
|
|
<p>cubic-bezier(0.25, 1, 0.5, 1) — smooth deceleration</p>
|
|
</div>
|
|
|
|
<div class="demo ease-out-expo">
|
|
<h3>Ease-out expo</h3>
|
|
<p>cubic-bezier(0.16, 1, 0.3, 1) — natural feel</p>
|
|
</div>
|
|
|
|
<h2>Good Transitions (transform/opacity/color only)</h2>
|
|
|
|
<div class="demo transform-transition">
|
|
<h3>transition: transform</h3>
|
|
<p>Transform is GPU-accelerated and safe.</p>
|
|
</div>
|
|
|
|
<div class="demo opacity-transition">
|
|
<h3>transition: opacity</h3>
|
|
<p>Opacity is GPU-accelerated and safe.</p>
|
|
</div>
|
|
|
|
<div class="demo color-transition">
|
|
<h3>transition: color, background-color</h3>
|
|
<p>Color transitions are paint-only, no layout.</p>
|
|
</div>
|
|
|
|
<div class="demo shadow-transition">
|
|
<h3>transition: box-shadow</h3>
|
|
<p>Shadow transitions are paint-only.</p>
|
|
</div>
|
|
|
|
<div class="demo all-transition">
|
|
<h3>transition: all</h3>
|
|
<p>Too common to flag — might include layout but usually paired with transform/opacity.</p>
|
|
</div>
|
|
|
|
<div class="demo multi-safe-transition">
|
|
<h3>transition: transform, opacity, box-shadow</h3>
|
|
<p>Multiple safe properties combined.</p>
|
|
</div>
|
|
|
|
<script src="/js/detect-antipatterns-browser.js"></script>
|
|
</body>
|
|
</html>
|