Pro
Genie minimize
A window that minimises like a genie into its target: the edge nearest the target narrows first, the rest pours after it in a curved funnel, and restoring runs the same path back out. It is drawn with horizontal slices of a copy of the window, so any content works.
pnpm dlx shadcn@latest add @caliper/genie-minimizeWhen to use
Use it for
- Desktop-style workspaces with floating windows and a dock or tray.
- Sending a panel to a tray icon so people see where it went.
Skip it when
- Ordinary dialogs and drawers; they have their own motion.
- Phones, where windows are full screen.
Decisions
Why it is built this way, so you know what to keep when you change your copy.
Behaviour
- Near edge first
- Each slice starts later the further it is from the target, which gives the funnel; then all slices slide and compress into the target together.
- Focus follows
- Closing moves focus to the target and makes the window inert; opening focuses the window.
- Reduced motion
- The window fades instead.
Installation
pnpm dlx shadcn@latest add @caliper/genie-minimize
Adds its 2 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.
Usage
Import it from your copy of the source. The example behind the preview comes with the source.
import { GenieMinimize } from "@/components/ui/genie-minimize"
The worked example comes with Pro
The 43-line example behind the preview opens here, ready to copy.
- 576 Pro parts, blocks and page templates, all with source
- $199 once, with a year of updates. What you have stays yours
- A full refund within 14 days if it is not for you
API reference
GenieMinimize
component
Also accepts the native props of its root element and a ref.
Accessibility
It is built on native elements, so roles and focus come from the browser.
No custom key handling; Tab and the native activation keys do the work.
Motion
It checks prefers-reduced-motion itself and settles immediately instead of travelling. Every state is still reachable.
Related
- Floating panelA small window that floats over the page and stays out of the way: notes beside a record, an assistant beside a form. Drag it, resize it, shrink it to its title bar or let it fill the space.
- DockA floating dock of icon destinations with a gliding active pill.
- Morph surfaceA floating surface that grows out of the element that opened it.