PipToggle

The inner pane shrinks into the corner of the frame, morphing rather than swapping between two icons.

Size

Spring

Usage

<PipToggle
  size="md"
  spring="smooth"
/>

How the motion works

Both states describe the same nine geometry numbers for the frame and the inner pane. Sharing one descriptor lets a single spring drive the whole morph, so the pane detaches and travels to the corner continuously instead of cutting between icons.

useMorphusePress

Props

Prop	Type	Default	Description
active / defaultActive	boolean	—	Controlled or initial state.
onChange	(active: boolean) => void	—	Fires when toggled.
label	string	"Picture in picture"	Accessible name.