Interactive entry

Frame rate (FPS)

Frame rate (FPS) helps help diagnose stutter and choose more stable implementations.

Active entry

Preview, parameters, and exports

Frame rate (FPS) helps help diagnose stutter and choose more stable implementations.

Frames drawn per second. 60fps is the baseline for smooth motion; 120fps on newer displays

Browse categories
Preview
Frame rate (FPS)
420ms
28px
0ms
soft
.motion-card {
  animation-name: motion-frame-rate;
  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-frame-rate {
  from {
    opacity: 0;
    transform: translateY(9px);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .motion-card {
    animation-name: motion-frame-rate-reduced;
    animation-duration: 180ms;
    animation-delay: 0ms;
    transform: none;
    animation-iteration-count: 1;
  }
}

@keyframes motion-frame-rate-reduced {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

Agent prompt

Use Frame rate (FPS) for a UI fragment: Frame rate (FPS) 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
Usage
  • Use Frame rate (FPS) while reviewing motion risk.
  • Align designers, engineers, or agents around implementation standards.
  • Turn abstract motion principles into executable checks.
Examples
  • Use Frame rate (FPS) to evaluate whether a motion pattern affects comprehension, performance, or comfort.
  • Turn Frame rate (FPS) into an explicit review criterion during critique.
Review notes
  • Use Frame rate (FPS) 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.
Reduced motion

Under reduced motion, the Frame rate (FPS) page keeps the static diagram and text relationships.