Premium UI Refinement

Apply proven animation and visual design patterns to create a premium, refined user experience throughout DesQTA.

Core Principles

1. Easing Functions

Never use linear easing. Always use:

• •cubic-bezier(0.4, 0, 0.2, 1) (Material Design standard)
• •cubicInOut from svelte/easing for Svelte transitions

2. Duration Hierarchy

Match duration to element complexity:

• •150-200ms: Simple UI (buttons, dropdowns, tooltips)
• •300ms: Moderate changes (sidebars, modals, panels)
• •400-500ms: Complex content (page sections, data tables)
• •500-1000ms: Data visualizations (charts, graphs)

3. Multi-Property Animations

Combine multiple properties for richer feel:

• •Opacity + transform (scale/translate)
• •Width + opacity
• •Position + scale
• •Never animate just one property

4. Transform Origin

Set transform-origin to logical anchor points:

• •Text elements: left center (matches reading flow)
• •Buttons: center center (default)
• •Dropdowns: anchor to trigger element

5. Stagger Sequential Elements

Use delays for related elements:

• •First element: 0ms
• •Second: 100ms delay
• •Third: 200ms delay
• •Creates visual hierarchy

6. Visual Effects Layering

Combine effects for depth:

• •backdrop-blur-md for glassmorphism
• •shadow-2xl for elevation
• •Semi-transparent backgrounds (bg-white/95)
• •Multiple effects work together

Common Patterns

Premium Fade-In

<div transition:fade={{ duration: 200 }}>
  <!-- Content -->
</div>

Scale + Fade Animation

<div
  class="transition-all duration-200"
  style="animation: fadeInScale 0.2s cubic-bezier(0.4, 0, 0.2, 1);">
  <!-- Content -->
</div>

CSS:

@keyframes fadeInScale {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

Premium Dropdown

<div
  transition:fly={{ y: -8, duration: 200, opacity: 0 }}
  class="backdrop-blur-md shadow-2xl bg-white/95 dark:bg-zinc-900/90">
  <!-- Dropdown content -->
</div>

Staggered Sequential Loading

<div in:fade={{ duration: 400 }}>Filters</div>
<div in:fade={{ duration: 400, delay: 100 }}>Charts</div>
<div in:fade={{ duration: 400, delay: 200 }}>Table</div>

Chart Animations

// Bar chart - animate from bottom
motion: {
  x: { type: "tween", duration: 500, easing: cubicInOut },
  y: { type: "tween", duration: 500, easing: cubicInOut },
  height: { type: "tween", duration: 500, easing: cubicInOut },
  width: { type: "tween", duration: 500, easing: cubicInOut },
}

// Area chart - clip-path reveal
motion={{
  width: { type: "tween", duration: 1000, easing: cubicInOut }
}}

Sidebar/Major UI Transitions

<aside
  class="transition-all duration-300 ease-in-out overflow-hidden"
  class:w-full={open}
  class:w-0={!open}
  class:opacity-0={!open}
  class:opacity-100={open}
  class:pointer-events-none={!open}
  class:pointer-events-auto={open}>

Implementation Checklist

When adding or refining animations:

• • Easing function is not linear (use cubic-bezier(0.4, 0, 0.2, 1) or cubicInOut)
• • Duration matches element complexity (200ms simple, 300ms moderate, 400-500ms complex)
• • Multiple properties animated (opacity + transform, width + opacity, etc.)
• • Transform origin set appropriately for scaling/rotating
• • Sequential elements staggered with delays (100ms, 200ms)
• • Visual effects layered (blur, shadow, transparency)
• • Pointer events managed during transitions
• • Overflow handled correctly (overflow-hidden when needed)
• • Responsive behavior considered (mobile vs desktop)
• • Consistent with existing patterns in codebase

Examples from Codebase

Editor headings: src/components/Editor/EditorStyles.css (fadeInScale animation) User dropdown: src/lib/components/UserDropdown.svelte (fly transition with blur) Analytics charts: src/lib/components/analytics/ (staggered loading, chart animations) Sidebar: src/lib/components/AppSidebar.svelte (multi-property transitions)

Additional Resources

For detailed analysis of premium animation patterns, see docs/development/premium-animations-analysis.md