Motion
Motion in Syhrezz is subtle and purposeful. Every transition serves a function — communicating state change, providing feedback, or guiding attention. Never add animation purely for decoration.
Transition Tokens
| Token | Value | Usage |
|---|---|---|
| --transition-fast | all 0.15s ease | Row hover backgrounds, feed items, tooltip appearance |
| --transition-base | all 0.2s ease | Buttons, badges, nav items (Dark), inputs border/shadow |
| --transition-smooth | all 0.2s cubic-bezier(0.4,0,0.2,1) | Nav items (Accent), card hover, button hover lift, dropdown |
| --transition-sidebar | all 0.35s cubic-bezier(0.4,0,0.2,1) | Sidebar collapse/expand width change |
Hover Behaviors
Card hover (translateY -3px)
Hover me
Button hover (translateY -2px)
Nav item (translateX 4px)
Dashboard
Keyframe Animations
| Name | Keyframe | Duration | Usage |
|---|---|---|---|
| fadeIn | opacity:0 + translateY(10px) → full | 0.4s ease | General content reveal on page load — .fade-in |
| fadeUp | opacity:0 + translateY(18px) → full | 0.4s ease | Dashboard KPI cards staggered entrance — .fade-up |
| modalIn | scale(0.95)+opacity:0 → scale(1)+opacity:1 | 0.3s ease | Modal dialog open animation |
| shimmer | bg-position sweep left→right | 1.5s infinite | Skeleton loading state |
| pulseDot | opacity + scale oscillate | 2s ease infinite | Live Location indicator, real-time data dot |
| spin | rotate 0→360deg | 0.7s linear infinite | Button loading spinner |
| toastIn | opacity:0 + translateY(10px) → full | 0.3s ease | Toast notification entrance |
Live Examples
Fade Up (.fade-up)
Animated in
Skeleton shimmer
Pulse dot (live)
Live tracking
Spinner (loading)
Stagger Pattern
Dashboard KPI cards animate in with staggered delays. Add .fade-up to each card, then .fu-1 through .fu-4 for the delay offsets.
/* CSS */
.fade-up { animation: fadeUp .4s ease forwards; opacity: 0; }
.fu-1 { animation-delay: .05s; }
.fu-2 { animation-delay: .10s; }
.fu-3 { animation-delay: .15s; }
.fu-4 { animation-delay: .20s; }
<!-- HTML -->
<div class="kpi-card kpi-blue fade-up fu-1">...</div>
<div class="kpi-card kpi-green fade-up fu-2">...</div>
<div class="kpi-card kpi-amber fade-up fu-3">...</div>
<div class="kpi-card kpi-red fade-up fu-4">...</div>AI Implementation Notes
For AI coding assistants: Every interactive element must have a transition. Use
var(--transition-smooth) for most UI elements. Use var(--transition-fast) for hover backgrounds only. Never use transitions longer than 0.35s — that is reserved for sidebar collapse only. Button hover always uses transform:translateY(-2px). Card hover always uses transform:translateY(-3px). KPI card hover always uses transform:translateY(-4px). Ghost buttons do NOT lift on hover.