# SnapPiP
A floating picture inside a container, such as the person's own camera in a call, that they drag and throw into a corner, where it comes to rest, as a phone's picture in picture does. Put it in a positioned container (`relative`); it moves within that container's box.
```tsx
import { SnapPiP } from "@/components/ouro/snap-pip/snap-pip";
```
## Example
```tsx
```
## Usage
It follows the pointer from the first pixel and lifts while dragged. On release it works out where the throw would coast to (`project`, at scrolling's deceleration of 0.998), picks the corner whose place, clear of the keep-outs, is nearest that point, and springs there from the release speed (response 0.3s; damping 0.8 after a flick, so it overshoots a little, and 1 after a slow drop). Pressing it in flight catches it. While a pointer holds it, a keep-out or the container changing waits for the release, so it never slides out from under the finger. Dragged past the container's edge, it resists more and more (`rubberband`).
The corners sit `inset` in from the edges and keep clear of `keepOut`. It keeps its corner, not its position: when the keep-outs change it follows its corner with the spring, and while the container resizes it stays in its corner without one, placed in the same frame as the resize. While it springs it carries `data-ouro-settling`.
It is focusable: Option and an arrow key move it to the next corner that way, with the same spring, and the new corner is announced politely once it settles, never during the move; a key toward the side it is already on says the corner again. Its name, corner and `hint` are what screen readers read. The hint also shows beside it, toward the middle of the stage and never over it, when it gets keyboard focus or the pointer rests on it, and stays while the pointer is on either. Escape, a move or a press puts it away until focus and the pointer have both left. Double-click it, or press Option-Return, to toggle small and large.
With reduced motion it jumps straight to its corner: no spring, no lift and no rubberband.
Its agent side, `snapPipAx` in `snap-pip-styles.ts`, declares no reads and one action, `move`, which only the person takes: where their own picture sits is theirs. Hiding the picture is the app's, from its own menu, so the app declares that `hide` action, not SnapPiP.
## Use instead when
- Use `Popover` or `HoverCard` instead for an overlay anchored to a control, `Resizable` for a split layout the person sizes, and `Sheet` for a side panel.
## Props
Type: `SnapPiPProps`.
| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `aspectRatio` | `number` | `1.6` | Width over height, such as a camera's: 1.6 (16:10), or 0.5625 (9:16) for a phone held upright. |
| `children` | `ReactNode` | | The app's content, such as a `