UnBoring

Use a subtle staggered fade-up entrance for the card group. Each item should start at opacity 0 and translateY(12px), then animate to opacity 1 and translateY(0). Use around 420ms duration, 80ms stagger delay, and a calm ease-out curve. The motion should feel premium, quiet, and structured.

Do not use large movement, bounce, rotation, elastic easing, random delays, or a slow dramatic reveal. The entrance should not feel playful, theatrical, or attention-seeking.

{
  "id": "calm-staggered-fade-up",
  "category": "motion",
  "trigger": "on page load or scroll into view",
  "target": "cards or list items",
  "from": { "opacity": 0, "y": "12px" },
  "to": { "opacity": 1, "y": "0px" },
  "duration": "420ms",
  "stagger": "80ms",
  "easing": "cubic-bezier(0.22, 1, 0.36, 1)"
}

Add a soft hover lift interaction to clickable cards. On hover, move the card upward by 2px, slightly increase the shadow, and keep the transition around 180ms. The effect should feel tactile and restrained, not playful or bouncy.

Do not scale the card aggressively, add glow effects, rotate the element, use springy bounce, or move it more than a few pixels. Avoid making every card feel like a toy.

{
  "id": "soft-hover-lift",
  "category": "motion",
  "trigger": "hover",
  "target": "clickable card",
  "from": { "y": "0px", "shadow": "subtle" },
  "to": { "y": "-2px", "shadow": "slightly stronger" },
  "duration": "180ms",
  "easing": "ease-out"
}

Add a snappy button press interaction. On pointer down, scale the button to 0.98, then return to 1 quickly on release. Keep the transition under 120ms. The interaction should feel immediate, physical, and responsive.

Do not add bounce, vibration, rotation, color flashing, or a long press animation. The button should not wobble, jump, or distract from the action.

{
  "id": "snappy-button-press",
  "category": "motion",
  "trigger": "pointer down / click",
  "target": "button",
  "from": { "scale": 1 },
  "to": { "scale": 0.98 },
  "duration": "100ms",
  "easing": "ease-out"
}

Reveal the command menu with a fast, centered entrance. The panel should start at opacity 0, scale 0.98, and translateY(6px), then animate to opacity 1, scale 1, and translateY(0). Use around 160ms duration and ease-out. Keep it focused, fast, and utility-like.

Do not slide the panel from far away, bounce it into place, blur the whole screen heavily, or delay the input field. The menu should feel ready immediately.

{
  "id": "command-menu-reveal",
  "category": "motion",
  "trigger": "open command menu",
  "target": "floating panel",
  "from": { "opacity": 0, "scale": 0.98, "y": "6px" },
  "to": { "opacity": 1, "scale": 1, "y": "0px" },
  "duration": "160ms",
  "easing": "ease-out"
}

Animate accordion expansion with height and opacity together. The content should expand from height 0 and opacity 0 to its natural height and opacity 1. Use around 220ms duration with ease-out. The motion should feel practical, clear, and lightweight.

Do not instantly jump the layout, use a slow dramatic reveal, bounce the content, or animate unrelated elements. Keep frequent interactions short and practical.

{
  "id": "accordion-expand",
  "category": "motion",
  "trigger": "click accordion header",
  "target": "accordion content",
  "from": { "height": 0, "opacity": 0 },
  "to": { "height": "auto", "opacity": 1 },
  "duration": "220ms",
  "easing": "ease-out"
}

Show toast notifications with a subtle slide-and-fade entrance. The toast should start at opacity 0 and translateX(16px), then animate to opacity 1 and translateX(0). Use around 220ms duration and ease-out. Keep the motion lightweight and non-interruptive.

Do not cover primary content, shake the toast, bounce it, use aggressive success colors, or make it feel like a modal. It should stay out of the way.

{
  "id": "toast-slide-in",
  "category": "motion",
  "trigger": "show notification",
  "target": "toast",
  "from": { "opacity": 0, "x": "16px" },
  "to": { "opacity": 1, "x": "0px" },
  "duration": "220ms",
  "easing": "ease-out"
}