Motion System

Motion in the Alterspective brand system creates a sense of polish and responsiveness. Animations should feel natural, purposeful, and never distracting from the content.

Motion Principles

⚡

Purposeful

Every animation should serve a purpose - guiding attention, providing feedback, or enhancing understanding.

👁

Subtle

Animations should enhance, not distract. Users should notice the polish, not the animation itself.

⏳

Responsive

Interactions should feel immediate. Use faster durations for direct manipulation, slower for larger transitions.

Duration Scale

Use consistent duration values to create a cohesive animation language.

duration-fast 150ms

Micro-interactions, button states, tooltips

duration-normal 200ms

Standard transitions, hover effects, toggles

duration-slow 300ms

Page transitions, modals opening, expanding content

duration-slower 500ms

Complex animations, attention-grabbing effects

Easing Curves

Easing determines the feel of an animation - how it accelerates and decelerates.

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

Smooth start and end, ideal for most UI transitions

Use for: General purpose, balanced feel

easing-decelerate cubic-bezier(0, 0, 0.2, 1)

Fast start, gentle landing - perfect for elements appearing

Use for: Elements entering the screen

easing-accelerate cubic-bezier(0.4, 0, 1, 1)

Gentle start, quick exit - ideal for elements disappearing

Use for: Elements leaving the screen

Common Patterns

Button Hover

.button {
  transition:
    background-color var(--as-duration-fast) var(--as-easing-standard),
    transform var(--as-duration-fast) var(--as-easing-standard);
}

.button:hover {
  background-color: var(--as-green);
  transform: translateY(-1px);
}

Card Lift

Card Title

Hover for lift effect

.card {
  transition:
    box-shadow var(--as-duration-normal) var(--as-easing-standard),
    transform var(--as-duration-normal) var(--as-easing-standard);
}

.card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  transform: translateY(-4px);
}

Fade In

Fade In Content

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeIn var(--as-duration-slow) var(--as-easing-decelerate);
}

Expand/Collapse

This content expands and collapses smoothly using the slow duration with standard easing.

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--as-duration-slow) var(--as-easing-standard);
}

.accordion-content.open {
  max-height: 200px;
}

Accessibility Considerations

Respect User Preferences

Always respect the prefers-reduced-motion media query. Users who experience motion sensitivity should have animations disabled or significantly reduced.

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

CSS Variables

Use these CSS custom properties in your stylesheets:

:root {
  /* Duration Scale */
  --as-duration-fast: 150ms;
  --as-duration-normal: 200ms;
  --as-duration-slow: 300ms;
  --as-duration-slower: 500ms;

  /* Easing Curves */
  --as-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --as-easing-decelerate: cubic-bezier(0, 0, 0.2, 1);
  --as-easing-accelerate: cubic-bezier(0.4, 0, 1, 1);
}