Motion

Movement with meaning.

Every animation serves a purpose — guiding attention, confirming actions, and adding personality without getting in the way.

Motion principles

Four rules govern how things move at Lexonic.

Purposeful Every motion answers "why?"

Swift 150–300ms, never make users wait

Linear (robotic)

Eased (natural) ✓

Natural Ease in/out, never linear

Playful Spring overshoot adds personality

Easing curves

Two primary curves handle most interactions. Click each to see it in action.

Standard

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

For most UI transitions — menus, panels, modals, tooltips. Starts fast, decelerates smoothly.

Spring

cubic-bezier(0.34, 1.56, 0.64, 1)

For playful interactions — buttons, card hovers, tile animations. Overshoots then settles. Adds personality.

Duration scale

Consistent timing creates rhythm. Every duration has a defined use.

150ms Fast

Micro-interactions — button states, toggle switches, icon changes

300ms Normal

Standard transitions — panels, dropdowns, tooltips, focus states

500ms Slow

Emphasis transitions — modal entrances, card reveals, section transitions

700ms Entrance

Page-level — hero animations, scroll-triggered content, staggered lists

1000ms+ Narrative

Storytelling — logo reveals, data visualisation builds, scroll-driven sequences

In practice

Hover and interact to see motion in context.

Hover me

Card lift

translateY(-4px) + shadow increase. Spring easing, 300ms.

Button feedback

scale(0.95) on press, scale(1) on release. Fast 150ms.

Stagger reveal

Each item delays 40ms. translateY(20px) → 0. Spring easing.

Accessibility

Always respect user preferences.

prefers-reduced-motion

When a user has reduced motion enabled in their OS settings, all animations must be disabled or replaced with instant state changes. This is not optional.

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}