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

svelte
1<div transition:fade={{ duration: 200 }}>
2  <!-- Content -->
3</div>

Scale + Fade Animation

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

CSS:

css
1@keyframes fadeInScale {
2  0% {
3    opacity: 0;
4    transform: scale(0.95);
5  }
6  100% {
7    opacity: 1;
8    transform: scale(1);
9  }
10}

Premium Dropdown

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

Staggered Sequential Loading

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

Chart Animations

javascript
1// Bar chart - animate from bottom
2motion: {
3  x: { type: "tween", duration: 500, easing: cubicInOut },
4  y: { type: "tween", duration: 500, easing: cubicInOut },
5  height: { type: "tween", duration: 500, easing: cubicInOut },
6  width: { type: "tween", duration: 500, easing: cubicInOut },
7}
8
9// Area chart - clip-path reveal
10motion={{
11  width: { type: "tween", duration: 1000, easing: cubicInOut }
12}}

Sidebar/Major UI Transitions

svelte
1<aside
2  class="transition-all duration-300 ease-in-out overflow-hidden"
3  class:w-full={open}
4  class:w-0={!open}
5  class:opacity-0={!open}
6  class:opacity-100={open}
7  class:pointer-events-none={!open}
8  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