Motion
Animation guidelines for smooth, purposeful transitions. Motion should enhance usability, not distract.
Transition Timing
Fast
150ms
Hover states, button feedback, small UI changes
Normal
250ms
Card hovers, panel reveals, nav transitions
Slow
400ms
Page transitions, modal opens, large reveals
Glow Effects
Cyan glow effects create a distinctive AI/tech aesthetic. Use sparingly for emphasis.
Default
Hover to preview
General glow, hover emphasis
CTA
Hover to preview
Primary CTA buttons, hero elements
AI Active
Hover to preview
Active AI agent, processing states
Subtle
Hover to preview
Inner glow, selected states
Keyframe Animations
Fade In
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}Scale In
@keyframes scaleIn {
from { transform: scale(0.95); }
to { transform: scale(1); }
}Pulse
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}Reduced Motion
Accessibility: Respecting User Preferences
Always respect the user's motion preferences. Users with vestibular disorders may experience discomfort from animations.
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}CSS Custom Properties
:root {
/* Transitions */
--transition-fast: 150ms ease;
--transition-normal: 250ms ease;
--transition-slow: 400ms ease-out;
/* Glow Effects */
--glow-default: 0 0 20px rgba(0, 183, 255, 0.3);
--glow-cta: 0 0 40px -10px rgba(0, 183, 255, 0.3);
--glow-ai-active: 0 0 30px rgba(0, 183, 255, 0.15);
--glow-subtle: inset 0 0 20px rgba(0, 183, 255, 0.08);
}
/* Usage */
.card {
transition: var(--transition-normal);
}
.card:hover {
box-shadow: var(--glow-default);
}