motion-dialog

Modal dialog with spring-physics animation. Slides up on open, springs back down on close. Built on the native <dialog> element for top-layer stacking and keyboard accessibility.

Preview

Spring dialog

Slides up with spring physics. The backdrop fades in simultaneously. Press Esc or use the button to close.

No backdrop

Set backdrop="false" to remove the dimmed overlay. The dialog floats without any overlay.

No backdrop

Floating dialog with no dimmed overlay. Press Esc or use the button to close.

Light dismiss

Add light-dismiss to let users close by clicking the backdrop. By default, only Esc and explicit close actions work.

Light dismiss

Click the backdrop or press Esc to close. Without light-dismiss, only Esc and an explicit close button work.

Import

Usage

Declarative open

Set the open attribute to control the dialog from markup or frameworks that bind attributes:

Listening for close

The motion-close event fires after the exit animation completes — use it to sync state:

Properties

Attribute	Property	Type	Default	Description
open	open	boolean	false	Opens the dialog when present; reflects to attribute
duration	duration	number	0.5	Spring duration for enter/exit animations, in seconds
bounce	bounce	number	0.25	Spring bounciness (0 = critically damped, higher = more elastic)
y	y	number	40	Initial vertical offset for the slide-up entrance, in pixels
no-backdrop	noBackdrop	boolean	false	When present, hides the dimmed/blurred overlay — the dialog floats without any overlay
light-dismiss	lightDismiss	boolean	false	When present, clicking the backdrop outside the panel closes the dialog

CSS custom properties

Style the panel and backdrop without reaching into shadow DOM:

Property	Type	Default	Description
--dialog-bg	color	var(--color-surface)	Panel background color
--dialog-color	color	var(--color-text)	Panel text color
--dialog-radius	length	16px	Panel border radius
--dialog-padding	length	2rem	Panel inner padding
--dialog-max-width	length	min(560px, 100vw - 2rem)	Maximum panel width
--dialog-max-height	length	calc(100dvh - 4rem)	Maximum panel height
--dialog-shadow	shadow	0 8px 32px …	Panel box shadow
--dialog-backdrop-color	color	rgba(0,0,0,0.48)	Backdrop overlay color
--dialog-backdrop-blur	filter	blur(6px)	Backdrop CSS backdrop-filter

Methods

Method	Description
`show()`	Opens the dialog with the entrance animation.
`close()`	Closes the dialog with the exit animation.

Events

Event	Description
`motion-close`	Fired after the close animation completes. Bubbles and is composed.

Accessibility

Uses the native <dialog> element opened via showModal(), which places it in the browser's top layer. Focus is automatically trapped inside the dialog while open, and Esc always closes it. By default, clicking the backdrop does not close the dialog — add light-dismiss to enable that. Screen readers announce the dialog via the browser's built-in role="dialog" and aria-modal semantics. With prefers-reduced-motion active, all animations are skipped and the dialog appears instantly.