Effects

Visual effects that create warmth, depth, and presence. Never decorative—always purposeful.

Gradients

Gradients add atmosphere and depth. Theme-aware for both dark (Cedar) and light (Zen) modes.

Aurora

Multi-color ambient glow

linear-gradient(135deg, rgba(74, 103, 65, 0.15), rgba(212, 168, 74, 0.15), rgba(92, 184, 132, 0.15))

Warm Glow

Centered radial warmth

radial-gradient(circle at 50% 50%, rgba(212, 168, 74, 0.15), transparent 70%)

Sunbeam

Top-down ambient light

linear-gradient(180deg, rgba(212, 168, 74, 0.08), transparent 50%)

Persona Glow

Dynamic per-persona radial

radial-gradient(circle at 50% 50%, var(--persona-glow), transparent 60%)

Mesh Gradient

Complex layered gradient for backgrounds

radial-gradient(at 40% 20%, ...), radial-gradient(at 80% 0%, ...), radial-gradient(at 0% 50%, ...)

Textures

Subtle textures add organic warmth. Very low opacity—felt, not seen.

Paper Grain

Subtle paper texture for warmth

Opacity: 0.03

Linen

Organic linen-like texture

Pattern: 4px × 4px

Film Grain

Noise overlay for depth

Opacity: 0.04

Glass Effects

Glass surfaces create depth without heaviness. Combining blur, background, border, and shadow.

Thickness Scale

Ultra Thin
Blur: 4px Use: List items
Thin
Blur: 8px Use: Cards
Regular
Blur: 12px Use: Popovers
Thick
Blur: 24px Use: Modals
Ultra Thick
Blur: 40px Use: Sheets

Glass Presets

Card

.glass-card {
  backdrop-filter: blur(8px);
  background: var(--glass-thin-background);
  border: 1px solid var(--glass-thin-border);
  border-radius: var(--radius-lg);
}

Modal

.glass-modal {
  backdrop-filter: blur(24px);
  background: var(--glass-thick-background);
  border: 1px solid var(--glass-thick-border);
  border-radius: var(--radius-xl);
}
Tooltip

Tooltip

.glass-tooltip {
  backdrop-filter: blur(12px);
  background: var(--glass-thin-background);
  border: 1px solid var(--glass-thin-border);
  border-radius: var(--radius-md);
}

Sheet

.glass-sheet {
  backdrop-filter: blur(40px);
  background: var(--glass-ultra-thick-background);
  border: 1px solid var(--glass-ultra-thick-border);
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
}

Glass Shadows

Shadows for glass surfaces—diffuse and subtle, suggesting floating surfaces.

Ultra Thin

Subtle list items

0 1px 2px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.02)

Thin

Cards

0 2px 4px rgba(0,0,0,0.06), 0 4px 8px rgba(0,0,0,0.04)

Regular

Default glass

0 4px 6px rgba(0,0,0,0.08), 0 8px 16px rgba(0,0,0,0.06)

Thick

Modals

0 8px 12px rgba(0,0,0,0.10), 0 16px 32px rgba(0,0,0,0.08)

Ultra Thick

System dialogs

0 16px 24px rgba(0,0,0,0.12), 0 32px 64px rgba(0,0,0,0.10)

Blur Scale

none 0
xs 2px
sm 4px
md 8px
lg 16px
xl 24px
2xl 40px

Entrance Animations

Page load animations that make elements "arrive" with personality.

Click to replay

Avatar

  • From: scale(0.8), translateY(20px), opacity 0
  • Duration: 600ms
  • Easing: cubic-bezier(0.34, 1.56, 0.64, 1)
  • Delay: 200ms
Click to replay

Controls

  • From: translateY(10px), opacity 0
  • Duration: 400ms
  • Easing: cubic-bezier(0.16, 1, 0.3, 1)
  • Delay: 400ms
Click to replay

Team (Staggered)

  • Stagger: 80ms between items
  • From: scale(0.9), opacity 0
  • Duration: 300ms
  • Start delay: 500ms

Loading States

Shimmer Effect

Loading skeleton shimmer makes loading feel alive.

.shimmer {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.08) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

Accessibility

Visual effects must respect user preferences.

Reduced Motion

For users with vestibular disorders

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

Focus Ring

High-visibility for keyboard navigation

:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
}

High Contrast

Enhanced contrast for visual impairments

@media (prefers-contrast: high) {
  .glass {
    border-width: 2px;
  }
}