Compositions
Core Primitives
Transitions
Typography
Customize
24
0
30
1
Installation
$ pnpm dlx shadcn@latest add @framecn/morphing-modal
Usage
import { MorphingModal } from "@/components/framecn/morphing-modal";<MorphingModal />API Reference
MorphingModal
| Prop | Type | Default |
|---|---|---|
from | MorphingModalRect | DEFAULT_FROM |
to | MorphingModalRect | DEFAULT_TO |
borderRadiusFrom | number | 24 |
borderRadiusTo | number | 0 |
morphAt | number | 30 |
background | string | "#050505" |
cardColor | string | "#0a0a0a" |
textColor | string | "#fafafa" |
mutedColor | string | "#71717a" |
source | ReactNode | - |
modal | ReactNode | - |
speed | number | 1 |
fps | number | 30 |
durationInFrames | number | 180 |
width | number | 1280 |
height | number | 720 |
className | string | - |
Notes
State-driven expansion
The modal uses state to control the expansion animation. The card lifts off the grid and expands to full screen with a spring animation.