← Brand System
Motion System

Precision in Motion

Motion design principles that communicate reliability, precision, and intelligent responsiveness—the core of Solmex brand character.

01 — Principles

Motion Philosophy

Every animation should feel intentional, efficient, and engineered—reflecting the precision of logistics operations.

⚡
Fast Response
Interactions should feel immediate. The system responds instantly to user input with quick onset animations (100-150ms).
🎯
Slow Settle
Elements ease gently into their final position. Deceleration creates a sense of precision landing (200-300ms).
🔄
Continuous Flow
Like logistics operations, motion should feel continuous and connected. Stagger animations create visual flow.
02 — Easing

Timing Functions

Custom easing curves that define the Solmex motion character. Hover to preview.

Standard
cubic-bezier(0.4, 0, 0.2, 1)
Default for most animations
Decelerate
cubic-bezier(0.0, 0, 0.2, 1)
Enter transitions
Accelerate
cubic-bezier(0.4, 0, 1, 1)
Exit transitions
Emphasis
cubic-bezier(0.25, 0.1, 0.25, 1)
Attention-grabbing
03 — Duration

Timing Scale

A consistent duration scale ensures predictable, professional motion.

100ms
Instant
Micro-interactions
150ms
Fast
Button states
200ms
Normal
Default transitions
300ms
Slow
Complex transitions
500ms
Emphasis
Page transitions
04 — Micro-interactions

Component Motion

Interactive examples of motion applied to common UI elements.

Button Hover
Lift effect with shadow expansion. 200ms standard easing.

Card Component

Hover to see elevation change

Card Elevation
Subtle lift with increased shadow depth. 300ms standard easing.
Toggle Switch
Click to toggle. Spring-like motion with 300ms emphasis easing.
Loading Spinner
Continuous rotation with standard easing. 1000ms loop.
05 — Brand Animation

Logo Reveal Sequence

The official logo animation for video intros and loading screens.

Solmex Logo
0s
2s
06 — Implementation

CSS Variables

Copy these motion tokens for consistent animation implementation.

/* Grupo Solmex - Motion System */
:root {
  /* Easing Functions */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-decelerate: cubic-bezier(0.0, 0, 0.2, 1);
  --ease-accelerate: cubic-bezier(0.4, 0, 1, 1);
  --ease-emphasis: cubic-bezier(0.25, 0.1, 0.25, 1);
  
  /* Duration Scale */
  --duration-instant: 100ms;
  --duration-fast: 150ms;
  --duration-normal: 200ms;
  --duration-slow: 300ms;
  --duration-emphasis: 500ms;
  
  /* Common Transitions */
  --transition-fast: all 150ms var(--ease-standard);
  --transition-normal: all 200ms var(--ease-standard);
  --transition-slow: all 300ms var(--ease-standard);
}

/* Button Hover */
.btn {
  transition: transform var(--duration-normal) var(--ease-standard),
              box-shadow var(--duration-normal) var(--ease-standard);
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255, 148, 59, 0.3);
}

/* Card Elevation */
.card {
  transition: var(--transition-slow);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}