Motion component

Animated Dialog

Adjust a real dialog by eye, compare designed presets, preview reduced motion, and copy the exact values into your interface.

Dialog motion

Motion code

Production values from the current preview.

<motion.div
  initial={{ opacity: 0, y: 16, scale: 0.98, filter: "blur(4px)" }}
  animate={{
    opacity: 1,
    y: 0,
    scale: 1,
    filter: "blur(0px)",
  }}
  exit={{ opacity: 0, y: 8, scale: 0.99, filter: "blur(3px)" }}
  transition={{
  type: "spring",
  visualDuration: 0.32,
  bounce: 0.08
}}
>
  {/* Dialog content */}
</motion.div>

Want the complete component?

Sona UI adds dialog semantics, focus management, and reduced-motion handling around this transition.

Animated Dialog

About this motion

A spring is only good relative to the interface it moves.

A value that feels natural on a small toggle can feel sluggish on a dialog. Tune timing, distance, scale, and backdrop treatment beside the actual interaction instead of an abstract graph.

Start with a restrained preset, adjust only what the interaction needs, then replay it rapidly. Good interface motion preserves orientation without delaying the task.

Reduced motion keeps the state change clear while removing spatial travel, scale, blur, and spring movement.