mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-19 09:36:59 +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>
119 lines
3.4 KiB
HTML
119 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 Anti-Patterns That Should Be Flagged</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; }
|
|
|
|
/* Bounce easing */
|
|
@keyframes bounce {
|
|
0%, 100% { transform: translateY(0); }
|
|
50% { transform: translateY(-10px); }
|
|
}
|
|
.bounce-animation {
|
|
animation: bounce 1s infinite;
|
|
}
|
|
|
|
/* Elastic cubic-bezier (overshoot) */
|
|
.elastic-transition {
|
|
transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
|
}
|
|
|
|
/* Layout property transitions */
|
|
.width-transition {
|
|
transition: width 0.3s ease;
|
|
}
|
|
.height-transition {
|
|
transition: height 0.4s ease-out;
|
|
}
|
|
.padding-transition {
|
|
transition: padding 0.2s linear;
|
|
}
|
|
.margin-transition {
|
|
transition: margin 0.3s ease-in;
|
|
}
|
|
.max-height-transition {
|
|
transition: max-height 0.5s ease;
|
|
}
|
|
.multi-layout-transition {
|
|
transition: width 0.3s ease, height 0.3s ease;
|
|
}
|
|
.mixed-transition {
|
|
transition: width 0.3s ease, opacity 0.3s ease;
|
|
}
|
|
.transition-property-width {
|
|
transition-property: width;
|
|
transition-duration: 0.3s;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Motion Anti-Patterns: Should Flag</h1>
|
|
<p class="intro">Every example on this page should be detected by the motion anti-pattern scanner.</p>
|
|
|
|
<h2>Bounce / Elastic Easing</h2>
|
|
|
|
<div class="demo bounce-animation">
|
|
<h3>CSS bounce animation</h3>
|
|
<p>animation: bounce 1s infinite</p>
|
|
</div>
|
|
|
|
<div class="demo elastic-transition">
|
|
<h3>Elastic cubic-bezier</h3>
|
|
<p>cubic-bezier(0.68, -0.55, 0.265, 1.55)</p>
|
|
</div>
|
|
|
|
<h2>Layout Property Transitions</h2>
|
|
|
|
<div class="demo width-transition">
|
|
<h3>transition: width</h3>
|
|
<p>Animating width causes layout thrash.</p>
|
|
</div>
|
|
|
|
<div class="demo height-transition">
|
|
<h3>transition: height</h3>
|
|
<p>Animating height causes layout thrash.</p>
|
|
</div>
|
|
|
|
<div class="demo padding-transition">
|
|
<h3>transition: padding</h3>
|
|
<p>Animating padding causes layout thrash.</p>
|
|
</div>
|
|
|
|
<div class="demo margin-transition">
|
|
<h3>transition: margin</h3>
|
|
<p>Animating margin causes layout thrash.</p>
|
|
</div>
|
|
|
|
<div class="demo max-height-transition">
|
|
<h3>transition: max-height</h3>
|
|
<p>Use grid-template-rows instead.</p>
|
|
</div>
|
|
|
|
<div class="demo multi-layout-transition">
|
|
<h3>transition: width, height</h3>
|
|
<p>Multiple layout properties.</p>
|
|
</div>
|
|
|
|
<div class="demo mixed-transition">
|
|
<h3>transition: width, opacity</h3>
|
|
<p>Layout property mixed with OK property.</p>
|
|
</div>
|
|
|
|
<div class="demo transition-property-width">
|
|
<h3>transition-property: width</h3>
|
|
<p>Longhand form.</p>
|
|
</div>
|
|
|
|
<script src="/js/detect-antipatterns-browser.js"></script>
|
|
</body>
|
|
</html>
|