Components
Dialog
The dialog grows out of the button that opened it, and closes back into it.
with <Cuts />
What it fixes
A stock dialog appears in the middle of the screen, unconnected to what you pressed. With Keyframery it starts out toward the button, slightly small and soft, and sharpens in place. That's a rack focus: the camera pulls focus from the page to the dialog. Closing reverses it, back into the button.
Install
Dialog is shadcn's own component. With <Cuts /> in your layout, there's nothing else to add:
npx shadcn add dialogChoose a cut
// every dialog, alert dialog and command menu
<Cuts dialog="punch-in" />
// this dialog only
<DialogContent data-cut="fade" />
// grow from the centre instead of the button
<DialogContent data-cut-origin="center" />Prop
Type
| Cut | Opening | Closing |
|---|---|---|
rack-focus | from 35% toward the opener, at 0.94 scale and 8px blur, 340 ms | back toward the opener, 220 ms |
punch-in | from the centre, 0.85 to 1.02 to 1, 260 ms | to 0.96 and fade, 160 ms |
fade | opacity only, 200 ms | 150 ms |
A dialog opened from code, with no press, has no opener, so a rack focus starts from the centre.