mockup-device-3d

[Template: Device 3D Showcase (Device 3D Showcase / HTML-in-Canvas)] [Intent] Product launch, app demo, design mockup showcase. Actually render the user-provided UI content into the iPhone / MacBook "screens", surrounded by CSS 3D transform to simulate the glass / highlights / refraction of a GLTF model. Inspired by hyperframes vfx-iphone-device.

[Hard composition]

• Canvas: 1920×1080, warm gray gradient background radial-gradient(#1a1a1f → #0a0a0f), bottom reflective floor (mirror gradient).
• iPhone 15 Pro model: left / center, transform: rotateY(-12deg) rotateX(4deg) translateZ(40px); titanium silver frame #a8a8ad (solid 4px) + screen corner radius 56px; screen has an iframe-like div embedded, actually rendering the user's HTML content (mobile viewport 375×812).
• MacBook Pro 14" (optional second unit): right side, slightly smaller, rotateY(8deg); top lid screen embeds desktop viewport content (1440×900 scaled); base keyboard + trackpad drawn with CSS shadow lines (no keycap details).
• Glass / lens flare: add 2-3 radial-gradient(ellipse, rgba(255,255,255,0.4) 0%, transparent 60%) elliptical highlights at the top, simulating a morphing glass lens.
• Floor reflection: below the device transform: scaleY(-1) + mask-image: linear-gradient(to bottom, rgba(0,0,0,0.4), transparent 70%)。

[Screen content source]

• If the user provides text/data → automatically render it as a mock app interface (top status bar + title + body + bottom tab bar or home indicator).
• If the user provides HTML → embed it as-is inside the screen div (note the scale transform so it fits the screen width and height).
• Use Tailwind for the in-screen UI, and use real mobile font sizes (text-sm / text-base, not text-9xl).

[Optional additional elements]

• Bottom-right "product slug" badge: large logo + one line of tagline + subtitle hairline.
• One line caption at the top (English sans, small size, 0.6 opacity): product codename / date / version.
• Add an 8s automatic CSS turntable: @keyframes turntable rotateY -12 ↔ 12, ease-in-out infinite alternate; can be prefers-reduced-motion disabled.

[Design details]

• Never: use external mockup image URLs (any unsplash / dribbble link), draw all devices with CSS / SVG.
• Fonts: use Inter Tight / SF Pro style for captions / logos outside the device; adapt inside the device based on the user's content.
• 4 optional background color palettes: charcoal / pearl / midnight blue / mocha; no rainbow gradients.
• Single-file HTML; do not use srcdoc nesting for iframes (prone to problems), use <div class="screen"> + Tailwind to render content.
• The screen content must be filled with the user's real data; lorem ipsum or "Your text here" is strictly prohibited.