MotionReplica

Interaction blueprint

Button press and release

A compact press gives a primary action physical confidence without delaying the result.

Playground

Use the control to try the interaction.

Playhead 0ms / 140ms

Build it

Choose a target and adapt the source to your interface.

58 lines
index.html
<div class="press-demo">
  <button class="press-button" type="button">Continue</button>
  <p role="status" id="press-status"></p>
</div>

<script>
  document.querySelector('.press-button').addEventListener('click', () => {
    document.querySelector('#press-status').textContent = 'Action received.';
  });
</script>

<style>
  .press-button {
    min-height: 44px;
    padding: 12px 20px;
    border: 0;
    border-radius: 6px;
    background: #175bc5;
    color: white;
    font: 600 14px system-ui;
    cursor: pointer;
    box-shadow: 0 3px 0 #123c7d;
    transform: translateY(0);
    transition:
      transform 70ms ease-out,
      box-shadow 70ms ease-out;
  }
  .press-demo {
    position: relative;
    display: grid;
    place-items: start center;
    width: 180px;
    height: 88px;
  }
  #press-status {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    text-align: center;
    font: 12px/20px system-ui;
    color: var(--stage-muted, #68778c);
  }
  .press-button:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 #123c7d;
  }
  .press-button:focus-visible {
    outline: 2px solid #175bc5;
    outline-offset: 5px;
  }
  @media (prefers-reduced-motion: reduce) {
    .press-button {
      transition: none;
    }
  }
</style>

Animation breakdown

Frame phases, motion intent, implementation constraints and accessible alternatives.

140ms
01

Rest: button sits 2px above its shadow.

02

0–70ms: surface moves down 2px and shadow compresses.

03

Release: it returns in 70ms.

Motion intent

A compact press gives a primary action physical confidence without delaying the result.

This is direct manipulation feedback, so it completes within the immediate-response window.

The fast acceleration and long ease-out make the state feel responsive while giving the final pixels time to settle.

Motion specification

Trigger
Pointer or keyboard presses the primary action.
Timing
140ms
Easing
cubic-bezier(.2, .8, .2, 1)

Animated properties

transformopacity

Implementation notes

  • Keep rest and pressed aligned to the same visual anchor.
  • Drive the transition from semantic state, not a timer, when the trigger is interactive.
  • Use transform, opacity and avoid layout work inside the animation loop.

Reduced motion

Swap to the final state instantly, preserving colour, label, and accessible state.

  • Use a minimum 44 by 44 pixel interactive target.
  • Expose the rest and pressed states with aria-pressed, aria-expanded, or an updated accessible label.
  • Keep visible keyboard focus independent from the animation.

Avoid

  • Do not add bounce unless a real object pickup or spring settle is part of the interaction.
  • Do not hide the final state from assistive technology.
  • Do not make the user wait for animation before the underlying state updates.

Related blueprints

Browse all blueprints