Command palette entrance

Make it fit your project.

Use a native dialog opened with showModal. Animate its surface from scale .98 and opacity zero to its final state in 140ms. Focus the search input, support Escape, and restore the opening control on close. Keep results updates separate from the entrance animation.

Build and check.

1. Confirm the supplied content, target environment, and required assets before implementing.
2. Use a native dialog opened with showModal. Animate its surface from scale .98 and opacity zero to its final state in 140ms. Focus the search input, support Escape, and restore the opening control on close. Keep results updates separate from the entrance animation.
3. Implement idle, active, keyboard, touch, reduced-motion, and failure states as relevant.
4. Inspect the opening, midpoint, and final state at desktop and mobile sizes; report any dependency or output limitation.

Know the limits.

• Never animate the entire document or hide focus behind the dialog.
• The prompt guides a coding agent; output quality depends on its implementation and review.

Want us to build it?

Send an optional project brief. We’ll receive your contact details, project description, and this recipe’s ID.