Component / Overlay

Motion Dialog

Present modal work without compromising focus. Radix provides proven semantics and trapping while Easecraft retains the layer through interruptible exit motion.

ClosedDismissibleReduce motion

Release review / modal flow

Ready for review

Open the release checkpoint before publishing this motion catalog.

Delivery contract

Install it

pnpm add easecraft@0.1.0

The component imports stable APIs from easecraft.

Files / 00

Dependencies / 03

easecraft: npm / 0.1.0
react: peer / >=18.2.0 <20.0.0
react-dom: peer / >=18.2.0 <20.0.0

Package usage

Use it

import { MotionDialog } from "easecraft";

<MotionDialog
  title="Publish release?"
  description="Review the release checks first."
  trigger={<button type="button">Review release</button>}
>
  <ReleaseChecklist />
</MotionDialog>

Typed contract

API

Prop	Type	Default	Purpose
trigger	ReactElement	required	Trigger receiving Radix semantics
title	ReactNode	required	Accessible dialog name
description	ReactNode	none	Accessible dialog description
children	ReactNode	required	Modal body content
open	boolean	uncontrolled	Controlled requested state
defaultOpen	boolean	false	Initial uncontrolled state
onOpenChange	(open) => void	none	Requested state callback
onAfterOpen	() => void	none	Entry completion callback
onAfterClose	() => void	none	Exit completion callback
dismissible	boolean	true	Escape and backdrop dismissal
initialFocusRef	RefObject	first focusable	Preferred initial focus
duration	duration token \| number	"normal"	Entry duration
exitDuration	duration token \| number	"fast"	Exit duration
distance	distance token \| number	"medium"	Panel travel distance
easing	easing token \| string	"enter"	Entry easing
exitEasing	easing token \| string	"exit"	Exit easing

Release requirement

Accessibility

Modal focus: Focus moves inside, remains trapped, and returns to the trigger after exit.
Dismissal: Escape and backdrop presses request close when dismissal is enabled.
Exit retention: The modal remains mounted and inaccessible background content stays blocked.
Reduced motion: Open and close state settle immediately while all modal semantics remain.