Interactive entry
Jank
Jank helps help diagnose stutter and choose more stable implementations.
Active entry
Preview, parameters, and exports
Jank helps help diagnose stutter and choose more stable implementations.
Visible stutter when the browser drops frames because it can't keep up with the animation
Browse categories420ms
28px
0ms
soft
.motion-card {
animation-name: motion-jank;
animation-duration: 420ms;
animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
animation-delay: 0ms;
animation-fill-mode: both;
will-change: transform, opacity;
transform-origin: center;
}
@keyframes motion-jank {
from {
opacity: 0;
transform: translateY(9px);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@media (prefers-reduced-motion: reduce) {
.motion-card {
animation-name: motion-jank-reduced;
animation-duration: 180ms;
animation-delay: 0ms;
transform: none;
animation-iteration-count: 1;
}
}
@keyframes motion-jank-reduced {
from {
opacity: 0;
}
to {
opacity: 1;
}
}Agent prompt
Use Jank for a UI fragment: Jank helps help diagnose stutter and choose more stable implementations. Animate transform and opacity, keep the duration at 420ms, use 28px of visual amplitude, add a 0ms delay, use soft easing (cubic-bezier(0.23, 1, 0.32, 1)), and include a reduced-motion fallback.
intent: entrancefeel: softcontext: card
- Use Jank while reviewing motion risk.
- Align designers, engineers, or agents around implementation standards.
- Turn abstract motion principles into executable checks.
- Use Jank to evaluate whether a motion pattern affects comprehension, performance, or comfort.
- Turn Jank into an explicit review criterion during critique.
- Use Jank as review language instead of relying on vague taste.
- Check whether it serves orientation, feedback, continuity, performance, or comfort.
- If it adds friction to high-frequency work, reduce or remove the related motion.
Under reduced motion, the Jank page keeps the static diagram and text relationships.