Kinetics System

Micro Patterns

Kinetics System

We have identified unique motion patterns that were designed from the core Kinetics Principles and the Kinetics Personality

Border Swirl

A border swirl draws the border line around a component to provide a decorative feedback for a click event. The origin of the border swirl starts from the bottom left of a component. The border swirl can also be informed by the cursor position as an aesthetic choice.

Best Practices

  • Do: Use it for components with a visible container.
  • Use caution with: Larger components where a border swirl effect may increase latency, and be mindful of transition times in components that enlarge, like input fields.

Examples of components that use this pattern:

  • Checkbox
  • Radio buttons
  • Menu button
Three examples of a border swirl animation: A list of checkboxes, a clickable icon, and a list of radio buttons.

Spotlight

A spotlight brings the components within an interaction into quick focus by scaling in the background fill of the component. It is used to provide quick and dramatic feedback for an interaction and hence utilized for elements of smaller real estate

Best Practices

  • Do: Use for components without a visible container and with 1:1 aspect ratios
  • Use caution with How close you place to other elements to ensure the spotlight doesn't impede their space.

Examples of components that use this pattern:

  • Button icons
  • Menu items
  • Tabs
Four examples of a spotlight animation. When a cursor hovers over an icon, a blue circle shaped spotlight appears behind the icon.

Ripple

A ripple is a Kinetics feedback that a user sees when they interact with a component. It provides instant response and reinforcement to the user action.

Best Practices

  • Do: Use when you want to provide instant feedback for a click action within smaller components. For example, use ripple animation to emphasize success feedback behind smaller components like icons, badges, or buttons.
  • Use caution with: Ripples behind larger components may negatively impact the perceived latency

Examples of components that use this pattern:

  • Buttons
  • Button Icons
  • Menu
  • Tabs
  • Vertical Navigation
  • Progress Indicator
Various examples of ripple and spotlight animation. As a cursor hovers and clicks navigation items and buttons, a blue ripple emanates through the background of the clicked shape

Mouse-Aware Underline

A Mouse-Aware underline pattern implies the direction of origin of a component. While moving from component to component it can be used as a signifier for position and hierarchy.

Best Practices

  • Do: Best used for interactive components that contain text
  • Avoid: text that's not clickable or longer text phrases

Examples of components that use this pattern:

  • Tabs
  • Breadcrumbs
  • Progress Indicator
Examples of tabs and breadcrumbs using mouse-aware underline when hovered over.