Luaris Framework

Appearance

Motion ​

The Luaris Framework includes a small motion system designed for interface feedback rather than decorative animation. The goal is to make components feel responsive, clear, and intentional without slowing the user down.

Principles ​

The motion system is built around a few simple ideas:

  • motion should reinforce state changes, not distract from them
  • most transitions should feel quick and responsive
  • larger or more expressive movement should be used sparingly
  • a shared set of duration and easing tokens should keep interactions feeling consistent across components

In practice, this means buttons, switches, focus states, and other controls should generally animate with the same motion vocabulary.

Duration Tokens ​

The framework provides three duration tokens:

fast (120ms)

Use for small UI feedback such as hover, focus, toggle movement, and subtle colour transitions.

normal (180ms)

Use for standard component state changes where the motion should feel noticeable but still responsive.

slow (260ms)

Use for larger visual changes, more expressive entrances, or transitions with more distance to travel.

Guidance ​

  • fast is the default for micro-feedback
  • normal is best for standard component transitions
  • slow should be reserved for bigger visual changes or more expressive motion

Easing Tokens ​

The easing tokens define how motion accelerates and settles over time. Duration controls how long an animation takes, while easing controls how it feels.

standard
cubic-bezier(0.2, 0, 0, 1)

The default easing for most interface motion. It starts quickly and settles cleanly without feeling theatrical.

emphasised
cubic-bezier(0.2, 0, 0, 1.2)

A more expressive curve for moments that should feel slightly more energetic or deliberate.

Guidance ​

  • standard should be used for most transitions
  • emphasised works best when you want a touch more character or emphasis
  • avoid mixing lots of custom curves within the same flow

Token Reference ​

The current motion tokens are:

  • --lx-motion-duration-fast: 120ms
  • --lx-motion-duration-normal: 180ms
  • --lx-motion-duration-slow: 260ms
  • --lx-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1)
  • --lx-motion-easing-emphasised: cubic-bezier(0.2, 0, 0, 1.2)

Usage Patterns ​

Typical uses across the framework include:

  • hover and focus transitions on controls
  • switch thumb movement
  • colour and box-shadow transitions on interactive components

Examples from the current component library already use the motion tokens for:

  • button background and box-shadow transitions
  • switch background and thumb movement transitions

Recommendations ​

  • Prefer transition over complex keyframe animation for standard component state changes.
  • Keep interface motion short enough that the user never feels blocked waiting for it.
  • Animate properties such as transform, opacity, background-color, and box-shadow where possible.
  • Reserve longer or more expressive motion for larger layout changes or intentional moments of emphasis.