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
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.
