Mockup 3D de vídeo: como colocar sua gravação dentro de um iPhone ou notebook animado

O que é um mockup 3D de vídeo

Mockup 3D de vídeo é quando a gravação da tela do seu produto aparece dentro de um dispositivo tridimensional, um iPhone, um notebook ou um monitor, com o ângulo, a perspectiva e a sombra de um objeto real. Diferente do mockup estático, que é uma imagem parada, aqui o vídeo continua rodando dentro da tela do dispositivo, e o dispositivo pode ser girado para mostrar profundidade.

Esse formato virou padrão porque resolve um problema simples: uma gravação de tela crua, sem moldura, parece um print. Dentro de um dispositivo 3D, o mesmo vídeo parece o produto pronto, do jeito que o usuário vai vê-lo na mão ou na mesa.

Onde o mockup 3D é usado

• Hero de landing page. Um notebook ou celular levemente inclinado com o produto rodando dentro, em loop, sem áudio.
• App Store, Play Store e páginas de app. Mockups de iPhone em 9:16 com o fluxo principal do app, em vídeo curto ou em imagem estática.
• Product Hunt e lançamentos. O vídeo de apresentação com o dispositivo girando na abertura e o produto em uso no meio.
• LinkedIn, X e Instagram. Posts de funcionalidade nova em que o mockup dá acabamento e evita a cara de print de tela.
• Anúncios. Criativos em vídeo para Meta e YouTube em que o dispositivo isola o produto do resto da imagem e prende o olhar.

Como fazer um mockup 3D de vídeo no Xscreen

1. 1

   Grave ou importe o vídeo

   Abra o Xscreen e grave a tela com o botão Gravar, ou arraste um vídeo já pronto em MP4, WebM, MOV ou MKV. Para mockup de celular, grave a tela do app num emulador, numa janela em proporção 9:16 ou use a gravação nativa do celular e importe o arquivo.

2. 2

   Abra o menu Mockup e escolha Dispositivos 3D

   No editor, entre em Mockup. Existem duas famílias: as molduras 2D de navegador (Safari, Chrome, Arc e Samsung) e os Dispositivos 3D. Escolha iPhone, notebook ou monitor conforme o produto: app mobile no iPhone, software web no notebook ou no monitor.

3. 3

   Ajuste rotação, perspectiva e escala

   Gire o dispositivo até o ângulo que mostra profundidade sem esconder a tela. Inclinações leves, em torno de 10 a 20 graus, costumam ser as mais legíveis. Ajuste a escala para o dispositivo ocupar o quadro sem cortar as bordas e, no notebook, controle a abertura da tampa.

4. 4

   Defina sombra e fundo

   Ative a sombra para o dispositivo assentar no cenário. Depois escolha o fundo: cor sólida ou gradiente para landing pages e anúncios, wallpaper ou imagem sua para redes. Ajuste espaçamento e desfoque para o dispositivo respirar.

5. 5

   Adicione zoom e elementos, se precisar

   Você pode combinar o mockup com trechos de zoom na timeline, textos, formas e logotipo por cima do cenário. Em vídeos de lançamento, um texto curto ao lado do dispositivo costuma bastar.

6. 6

   Ajuste a proporção do canvas

   Use 16:9 para site, LinkedIn e YouTube; 9:16 para Reels, Shorts e lojas de app; 1:1 ou 4:5 para feed. O mockup se reposiciona dentro do novo canvas e você só reajusta a escala.

7. 7

   Exporte

   Para vídeo, exporte em MP4 até 4K a 30 fps. Para sobrepor o dispositivo num fundo da própria landing page, exporte em WebM com fundo transparente. Para lojas, redes e apresentações, exporte um frame como imagem em PNG, WEBP, JPG ou AVIF. Nenhum export tem marca d'água.

Fundo transparente: o mockup por cima da sua landing page

O export em WebM com transparência (VP9 com canal alfa) permite colocar o dispositivo girando direto sobre o fundo do site, sem retângulo por trás. Você posiciona o vídeo com CSS como se fosse uma imagem PNG, e o fundo da página continua visível ao redor. É o efeito que muitos sites de produto usam no hero. A limitação é de compatibilidade: o Safari trata transparência em WebM de forma diferente dos outros navegadores, então tenha um MP4 com fundo sólido como alternativa.

Mockup estático: quando a imagem resolve

Nem tudo precisa ser vídeo. Para capturas da App Store, thumbnails, posts de feed e slides, um frame do mockup exportado em PNG ou WEBP funciona melhor e carrega mais rápido. No Xscreen, o mesmo projeto serve para os dois: você monta o dispositivo, o ângulo e o fundo uma vez, exporta o vídeo e depois exporta o frame que quiser como imagem. AVIF e WEBP são os formatos mais leves para web; PNG preserva transparência para composição em outras ferramentas.

Molduras 2D de navegador: a alternativa leve

Para software web, às vezes um mockup 3D inteiro é demais. As molduras 2D de navegador (Safari, Chrome ou Arc, em modo claro ou escuro, com a URL que você quiser na barra de endereço) dão o mesmo acabamento de “produto pronto” com menos peso visual, e funcionam muito bem em documentação, changelogs e tutoriais. Um bom critério: mockup 3D para vender e lançar, moldura 2D para explicar e ensinar.

Xscreen, Rotato ou mockup estático no Figma e Canva?

O Rotato é a referência de mercado em mockups 3D animados, com uma biblioteca grande de dispositivos e export em resoluções muito altas. O Figma e o Canva têm mockups estáticos e são ótimos para imagem, mas não colocam vídeo rodando dentro do dispositivo com rotação 3D. O Xscreen é um gravador e editor de demos com mockup 3D embutido: a vantagem é fazer gravação, zoom, mockup e export no mesmo lugar. A tabela compara só fatos verificados em setembro de 2026.

Dicas de proporção e ângulo

• Celular em 9:16. Grave o app na proporção do aparelho e use canvas 9:16 para lojas e Reels, ou 16:9 com o iPhone centralizado e texto ao lado para site.
• Notebook em 16:9. Grave a janela em 16:9 para a tela do notebook não ficar com barras pretas.
• Ângulo discreto. Rotações grandes ficam bonitas por dois segundos e depois atrapalham a leitura. Gire na abertura e estabilize enquanto o produto é mostrado.
• Sombra coerente com o fundo. Fundo claro pede sombra suave; fundo escuro aceita sombra mais forte.
• Um dispositivo por cena. Dois dispositivos ao mesmo tempo dividem a atenção. Se precisar mostrar web e mobile, faça duas cenas.

O mockup é a etapa final de uma demo bem feita. Se ainda não tem a gravação, comece pelo guia de como criar um vídeo demo de produto e pelo passo a passo de zoom cinematográfico.