Animation frame budget of 16ms maintained

At 60fps, each animation frame has a 16ms budget. Any JavaScript that runs synchronously inside a frame — including a setInterval callback or a DOM layout read followed by a write — can consume that budget entirely, causing the browser to skip the frame and produce visible stutter. ISO 25010:2011 time-behaviour captures the responsiveness requirement; the user-visible failure is an animation that stutters at irregular intervals, particularly during scroll or on lower-powered devices.

Replace setInterval-driven animations with CSS transitions or requestAnimationFrame. For values that animate over time, CSS transform and opacity are GPU-composited and do not trigger layout.

/* components/animated-card.module.css — GPU-composited animation */
.card {
  transition: transform 0.25s ease, opacity 0.25s ease;
  will-change: transform;  /* hint GPU layer promotion */
}

.card:hover {
  transform: translateY(-4px);
}

For JS-driven values, schedule work with requestAnimationFrame rather than setInterval to stay synchronized with the browser's paint cycle.