# Estojo

Um iPhone desenhado em SVG, com a ilha no topo e o print do seu app ocupando a tela.

> Estojo é um componente do THM Componentes que desenha um iPhone em SVG, com botões laterais e a ilha no topo, e encaixa o print do seu aplicativo na tela com cantos arredondados. É um SVG estático, sem animação, que troca de cor no modo escuro e serve para landing pages de app, pitches e propostas comerciais.

- Categoria: Imagem e mídia
- Origem: Adaptado de código aberto sob licença MIT, com prompt pronto da THM
- Peso no carregamento: Leve: CSS ou JavaScript leve, sem custo perceptível
- Tecnologia: Vue 3, TypeScript, Tailwind CSS v4
- Interação: Nenhuma: o efeito roda sozinho
- URL: https://vibecode.thmtecnologia.com/componentes/estojo/

## Como ele é

Parece a foto oficial de um iPhone visto de frente, só que desenhada em traço limpo. O corpo tem cantos bem arredondados, três botões no lado esquerdo e um no direito, uma borda em volta da tela e, no alto, a pílula da ilha dinâmica com a câmera, no mesmo tom da borda. A imagem que você passa preenche a tela inteira, recortada nos cantos, e a ilha fica por cima dela. No modo claro, o aparelho é cinza-claro com borda branca; no escuro, grafite com borda quase preta. Nada se mexe: é uma moldura parada.

## Você pode estar procurando isto se pediu algo assim

- “mostrar o print do meu app dentro de um iPhone”
- “moldura de celular para colocar a tela do aplicativo na landing page”
- “aquela imagem de iPhone com a tela do app dentro, tipo site da Apple”
- “desenho de celular em volta da captura de tela do meu sistema”
- “deixar os prints do app com cara de apresentação profissional”
- “mockup de telefone que fique bonito no modo escuro”
- “colocar a tela do app num iPhone para a proposta comercial”

## Também chamado de

mockup de iPhone, moldura de celular, device mockup, phone frame, iPhone frame, mockup de aplicativo

## Quando usar

- Landing page de aplicativo mobile mostrando a tela principal
- Pitch ou proposta comercial com prints do app
- Seção de recursos com uma tela diferente para cada funcionalidade
- Portfólio de quem cria interfaces de aplicativos

## Quando evitar

- Telas que precisam ser interativas ou mostrar vídeo, já que a moldura recebe só imagem
- Apps exclusivos para Android, em que a moldura de iPhone confunde o público

## Como pedir para a sua IA

```text
Crie uma moldura de iPhone em SVG para a landing page do meu app, com o print da tela principal preenchendo a tela com cantos arredondados, cores que acompanhem o modo escuro, tamanho responsivo no celular e sem atrasar o carregamento da imagem principal.
```

Com o THM Componentes, você cola o prompt completo do catálogo junto com o código deste componente, e a IA reproduz este efeito exato em vez de improvisar.

## Perguntas sobre Estojo

### Dá para colocar vídeo ou uma tela ao vivo dentro de Estojo?

Não do jeito que vem. Estojo recebe uma imagem pela prop src e a recorta para preencher a tela com os cantos arredondados do aparelho. Para vídeo ou interface ao vivo, peça à IA para sobrepor o conteúdo à área da tela, mantendo a ilha por cima.

### Estojo funciona no modo escuro?

Sim. As cores de Estojo mudam com a classe dark do Tailwind: corpo cinza-claro e borda branca no modo claro, grafite e quase preto no escuro. O prompt do THM Componentes ainda orienta a IA a trocar esses tons fixos pelos tokens de cor do seu projeto.

### Estojo pesa no carregamento da página?

Quase nada. Estojo é um único SVG, sem animação, e tem peso Leve no THM Componentes. O que pesa é a imagem da tela: use um print otimizado, no tamanho em que ele aparece, e compare o LCP antes e depois, como o prompt pede.

## Componentes relacionados

- [Postigo](https://vibecode.thmtecnologia.com/componentes/postigo/): Uma janela do Safari desenhada em SVG, com barra de endereço e o print do seu site ocupando a página.
- [Cavalete](https://vibecode.thmtecnologia.com/componentes/cavalete/): Uma tela de produto que começa inclinada para trás e fica de frente enquanto a página rola, com o título subindo.
- [Atol](https://vibecode.thmtecnologia.com/componentes/atol/): Uma pílula preta no topo da tela que cresce e muda de formato para mostrar música, chamada, aviso ou cronômetro.
- [Tirinha](https://vibecode.thmtecnologia.com/componentes/tirinha/): Cartões verticais em tela de celular que passam sozinhos, com barrinhas de progresso no topo e toque para avançar.
- [Convite](https://vibecode.thmtecnologia.com/componentes/convite/): Card que se ergue, inclina em 3D e ganha um reflexo de luz seguindo o cursor, sobre uma sombra profunda.

---
THM Componentes: O THM Componentes é um catálogo de 268 componentes de interface para Vue 3 e Nuxt, 115 deles exclusivos, com demonstração ao vivo e um prompt pronto para Claude Code, Cursor e outros assistentes. Você escolhe o efeito, copia o prompt e a sua IA aplica no projeto. Acesso vitalício por R$ 497.