# Device Frame

Aparelho em CSS 3D com a tela viva dentro: celular, tablet ou notebook, cinco poses, entrada animada e balanço por ponteiro, flutuação ou rolagem.

- Nome no registry: `device-frame`
- Tipo: componente
- Dependências npm: motion
- Demo: https://ui.visantlabs.com/c/device-frame
- Categorias: conteudo, mockup, celular, aparelho, 3d, tela

## Quando usar

- Use quando: Mostrar uma tela de app funcionando em hero ou página de produto
- Evite quando: Giro de 360° ou objeto de verdade: lathe-object; só uma foto de tela, photo-frame

## Instalar

```bash
npx shadcn@latest add @visant/device-frame
```

## Usar

```tsx
<DeviceFrame />
```

## API

### DeviceFrame

Aparelho em CSS 3D com a tela viva dentro. Só `transform`, então a animação não refaz layout. A espessura são camadas empilhadas em Z: convence até uns 60° de giro, mas não dá a volta inteira. Para isso seria preciso um modelo em WebGL, e a tela deixaria de ser HTML de verdade.

- `children?: any` — A tela: qualquer coisa viva, com largura e altura de 100%.
- `className?: string`
- `device?: "phone" | "tablet" | "laptop" = "phone"` — O notebook tem base articulada: fica melhor visto de cima, com `rotation` e X negativo.
- `finish?: "graphite" | "silver" = "graphite"`
- `intro?: boolean = true` — Entra girando até a pose. Com movimento reduzido, já nasce nela.
- `pose?: "front" | "hero" | "left" | "right" | "flat" = "hero"`
- `rotation?: { x: MotionValue<number>; y: MotionValue<number>; z: MotionValue<number>; }` — Ângulos dirigidos por fora: ignora `pose`, `tilt` e `intro`. Para quem controla o tempo, como uma exportação quadro a quadro, onde mola nenhuma pode interferir.
- `scrollContainer?: RefObject<HTMLElement>` — Quem rola, se não for a página. Só vale com `tilt="scroll"`.
- `scrollTarget?: RefObject<HTMLElement>` — O que tem a rolagem medida. Aparelho em `sticky` não sai do lugar: passe o trilho dele aqui.
- `style?: CSSProperties`
- `tilt?: "none" | "pointer" | "float" | "scroll" = "none"` — `pointer` cai em `float` no toque, porque celular não tem hover.