Search the docs

Search Keyframery's docs

Get started

Introduction Quick start What's automatic Use with AI tools

Components

Accordion Alert Alert Dialog Aspect Ratio Attachment Avatar Badge Breadcrumb Bubble Button Button Group Calendar Card Carousel Chart Checkbox Collapsible Combobox Command Context Menu Dialog Direction Drawer Dropdown Menu Empty Field Form Hover Card Input Input Group Input OTP Item Kbd Label Marker Menubar Message Message Scroller Native Select Navigation Menu Pagination Popover Progress Questionnaire Radio Group Resizable Scroll Area Select Separator Sheet Sidebar Skeleton Slider Sonner Spinner Switch Table Tabs Textarea Toast Toggle Toggle Group Tooltip

Helpers

Cards that open into a page Lists Numbers and statuses Loading states Whole-content states Icon moves

Customize

Speed, easing and cuts Motion themes

Guides

Animations not working Loading data after a click Detail pages on their own route Live data Turning motion off in tests Performance

Reference

How it works Compared with other libraries Reduced motion and accessibility Base UI vs Radix Compatibility Changelog

Aspect Ratio

Nothing changes on screen, so nothing moves. Keyframery leaves the shadcn/ui Aspect Ratio as it ships.

Install

Nothing to install. Keyframery leaves the Aspect Ratio as shadcn ships it, because nothing on screen changes and motion there would only be noise. It works with <Cuts /> mounted, with focus and accessibility intact.

Alert Dialog

Animate the shadcn/ui Alert Dialog: the confirmation grows out of the button that asked for it and closes back into it, with no changes to your code.

Attachment

Attachments ease in when added; a finished upload gives a small punch and a failed one shakes.

Search the docs

Aspect Ratio

InstallCopy Anchor Link

On this page

Install