Skip to content
AstraFoundry

Motion

Four curves and a short duration budget. A scene plays once when it is seen and rests on its result.

Curves

Each curve plays once when the page reaches it. Press play to run it again.

  • --ease-outAnything entering or moving.
    cubic-bezier(0.22, 1, 0.36, 1) · 600ms
  • --ease-springSmall things appearing: chips, bubbles, badges.
    cubic-bezier(0.34, 1.4, 0.64, 1) · 450ms
  • --ease-in-outSomething already on screen changing shape.
    cubic-bezier(0.65, 0, 0.35, 1) · 600ms
  • --ease-drawerSheets and drawers.
    cubic-bezier(0.32, 0.72, 0, 1) · 500ms

Durations

Drawn to scale against a three-second scene.

  • Hover and press150msColor changes and the 0.97 press scale.
  • Popovers200–300msMenus, tooltips and segmented pills.
  • One scene move250–600msEach step of a demo or tile scene.
  • Whole scene≤ 3sFrom the first move to the resting frame.

Playback

The same rules drive the hero card, product demos and feature tiles.

  1. 1Resting styles are the final frame. Keyframes only describe where things come from.
  2. 2Play once when about 70% is visible, after a short wait. Neighbors start a beat apart, in reading order.
  3. 3Replay on mouse hover or keyboard focus under a 160ms blur. Never restart a play that has not finished.
  4. 4Loop only real waiting, such as a shimmer while work is running.
  5. 5Animate transform, opacity and filter. Exits are faster than entrances.
  6. 6With reduced motion, show the final frame and hide replay controls.