logo svelte /motion v0.7.17
FIG-001/ FOCUS

while focused.

Tab through the three elements below — whileFocus animates them while they hold focus and reverses on blur. Works on natively focusable elements (button, input) and anything with tabindex.

  • whileFocus fires for both keyboard focus (Tab) and click focus. Same animation shape as whileHover — pass keyframes (or a variant key) and the value lasts as long as the element holds focus.
  • The card uses tabindex="0" to opt into the focus chain — any element can be focusable, not just buttons and inputs. Useful for custom UI surfaces.
  • Pair onFocusStart / onFocusEnd callbacks with your own state if you need to react beyond the visual animation (e.g. announce to screen readers, fetch preview data).
↩ all examples
pattern · focus-driven mode · live running source

Tab through or click the elements below to see focus animations:

Focusable Card
category · focus
sheet · sheet 01 / 01
⟳ to re-run

While Focus