Motion and Feedback

Reduced Motion Pulse

Keep Status Visible Without Movement

A recording dot can pulse by default, then become steady when the user asks for reduced motion.

Program

Motion can draw attention, but it should not be required. A reduced-motion media query keeps the status visible while removing the loop.

reduced_motion_pulse.html
Visuals: captured from real browser rendering
<style>
  @keyframes pulse {
    50% { opacity: 1; transform: scale(1.2); }
  }
  .status { display: inline-block; width: 1rem; height: 1rem; border-radius: 999px; background: #dc2626; opacity: 0.55; animation: pulse 1.2s infinite; }
  @media (prefers-reduced-motion: reduce) {
    .status { animation: none; opacity: 1; }
  }
</style>
<span class="status" aria-label="Recording"></span>

  1. Name the pulse keyframes.

    A pulse timeline is introduced for the recording dot.
    The keyframes name gives the motion a reusable timeline.

  2. Define the bright midpoint.

    The recording dot grows brighter and larger at the middle of the pulse.
    The midpoint is the strongest visual emphasis in the loop.

  3. Apply the repeating pulse to the status dot.

    The status dot is shown with a normal pulsing motion path.
    The default path can pulse for users who have not reduced motion.

  4. Listen for reduced motion.

    A reduced-motion branch appears next to the normal pulse path.
    The media query lets CSS respond to the user's motion setting.

  5. Replace the pulse with a steady state.

    The reduced-motion dot stays bright and steady with no pulse loop.
    Reduced motion keeps the status visible without movement.

  6. Attach the status class to the recording dot.

    The Recording status dot is complete with normal and reduced-motion states.
    The component now supports both motion settings.
prefers-reduced-motion prefers-reduced-motion lets CSS respond to a user's motion preference.
animation animation applies keyframes over time; setting it to none removes the motion.