mockup-device-3d

【Modelo: Exibição 3D de Dispositivo (Device 3D Showcase / HTML-in-Canvas)】 【Intenção】Lançamento de produto, demonstração de aplicativo, exibição de design. Renderiza conteúdo de UI fornecido pelo usuário em uma "tela" de iPhone / MacBook, com simulação de vidro / brilho / refração de modelo GLTF usando CSS 3D transform ao redor. Inspirado por hyperframes vfx-iphone-device.

【Composição Rígida】

• Tela: 1920×1080, fundo gradiente cinza quente radial-gradient(#1a1a1f → #0a0a0f), chão refletor na parte inferior (gradiente espelhado).
• Modelo iPhone 15 Pro: Lado esquerdo / centro, transform: rotateY(-12deg) rotateX(4deg) translateZ(40px); borda em titânio prateado #a8a8ad (sólido 4px) + cantos da tela 56px; div tipo iframe embutida na tela, renderizando conteúdo HTML do usuário em tempo real (viewport móvel 375×812).
• MacBook Pro 14" (segunda unidade opcional): Lado direito, ligeiramente menor, rotateY(8deg); tela da tampa superior embutindo conteúdo de viewport de desktop (1440×900 escalado); base do teclado + trackpad desenhados com linhas de sombra CSS (sem detalhes de teclas).
• Manchas de luz de vidro / lente: 2-3 elipses de destaque radial-gradient(ellipse, rgba(255,255,255,0.4) 0%, transparent 60%) adicionadas no topo, simulando lente de vidro em morphing.
• Reflexo no chão: Abaixo do dispositivo transform: scaleY(-1) + mask-image: linear-gradient(to bottom, rgba(0,0,0,0.4), transparent 70%).

【Origem do Conteúdo da Tela】

• Se o usuário fornecer texto/dados → renderiza automaticamente uma interface de aplicativo mock (barra de status superior + título + corpo + barra de abas inferior ou indicador de início).
• Se o usuário fornecer HTML → embutido na div da tela como está (preste atenção à transformação de escala para que se ajuste à largura e altura da tela).
• UI dentro da tela usa Tailwind, o tamanho da fonte deve ser em tamanho real para celular (text-sm / text-base, não text-9xl).

【Elementos Adicionais Opcionais】

• Canto inferior direito "product slug" com marca: logo grande + uma linha de tagline + subtítulo fino.
• Uma linha de legenda no topo (sans-serif inglês, tamanho de fonte pequeno, opacidade 0.6): codinome do produto / data / versão.
• Adicionar rotação automática CSS de 8s: @keyframes turntable rotateY -12 ↔ 12, ease-in-out infinite alternate; pode ser desativado por prefers-reduced-motion.

【Detalhes de Design】

• Nunca: Use URLs de imagens de mockup externas (qualquer link do unsplash / dribbble), desenhe todos os dispositivos usando CSS / SVG.
• Fontes: Legenda / logo fora do dispositivo no estilo Inter Tight / SF Pro; adaptação automática dentro do dispositivo com base no conteúdo do usuário.
• Fundo opcional com 4 conjuntos de cores: carvão / pérola / azul meia-noite / mocha; sem gradientes arco-íris.
• HTML de arquivo único; não use srcdoc para aninhar iframes (fácil de causar problemas), use <div class="screen"> + Tailwind para renderizar o conteúdo.
• O conteúdo da tela deve ser preenchido com dados reais do usuário, estritamente proibido lorem ipsum ou "Seu texto aqui".