Back to Details

mockup-device-3d

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese
【模板: 设备 3D 展架 (Device 3D Showcase / HTML-in-Canvas)】 【意图】产品发布、App 演示、设计稿展示。把用户提供的 UI 内容真实渲染到 iPhone / MacBook "屏幕"里, 周围用 CSS 3D transform 模拟 GLTF 模型的玻璃 / 高光 / 折射。Inspired by hyperframes vfx-iphone-device。
【硬性构图】
  • 画布: 1920×1080, 暖灰渐变背景 
    radial-gradient(#1a1a1f → #0a0a0f)
    , 底部反射地面 (mirror gradient)。
  • iPhone 15 Pro 模型: 左侧 / 中部, 
    transform: rotateY(-12deg) rotateX(4deg) translateZ(40px)
    ; 边框钛金属银 
    #a8a8ad
    (实心 4px) + 屏幕圆角 56px; 屏幕内嵌 iframe-like div, 真实渲染用户的 HTML 内容 (mobile viewport 375×812)。
  • MacBook Pro 14" (可选第二台): 右侧, 略小, 
    rotateY(8deg)
    ; 上盖屏幕嵌入桌面 viewport 内容 (1440×900 缩放); 底座键盘 + trackpad 用 CSS 阴影线条绘制 (不画键帽细节)。
  • 玻璃 / 镜头光斑: 顶部加 2-3 个 
    radial-gradient(ellipse, rgba(255,255,255,0.4) 0%, transparent 60%)
    的椭圆 highlight, 模拟 morphing glass lens。
  • 地面反射: 设备下方 
    transform: scaleY(-1)
    + 
    mask-image: linear-gradient(to bottom, rgba(0,0,0,0.4), transparent 70%)
    。
【屏幕内容来源】
  • 用户提供的是文本/数据 → 自动渲染为一个 mock app 界面 (顶部 status bar + 标题 + body + 底部 tab bar 或 home indicator)。
  • 用户提供的是 HTML → 原样嵌入屏幕 div 内 (注意缩放 transform 让它适配屏幕宽高)。
  • 屏幕内 UI 用 Tailwind, 字号要按 mobile 真实尺寸 (text-sm / text-base, 不要 text-9xl)。
【可选附加元素】
  • 右下角 "product slug" 角标: 大 logo + 一行 tagline + 副标 hairline。
  • 顶部一行 caption (英文 sans, 字号小, 透明 0.6): 产品 codename / 日期 / 版本。
  • 加 8s 自动 CSS 转盘: 
    @keyframes turntable
    rotateY -12 ↔ 12, ease-in-out infinite alternate; 可被 
    prefers-reduced-motion
    关闭。
【设计细节】
  • 绝不: 用外部 mockup 图片 URL (任何 unsplash / dribbble link), 全部用 CSS / SVG 绘制设备。
  • 字体: 设备外的 caption / logo 用 
    Inter Tight
    / 
    SF Pro
    风格; 设备内根据用户内容自适应。
  • 背景可选 4 套调色: charcoal / pearl / midnight blue / mocha; 不要彩虹渐变。
  • 单文件 HTML; iframe 不要用 srcdoc 嵌套 (容易出问题), 用 
    <div class="screen">
    + Tailwind 渲染内容。
  • 必须用用户真实数据填充屏幕内容, 严禁 lorem ipsum 或 "Your text here"。
【Template: Device 3D Showcase / HTML-in-Canvas】 【Purpose】Product launches, app demos, design mockup displays. Render users' provided UI content realistically onto iPhone / MacBook "screens", with CSS 3D transform used to simulate glass/highlights/refractions of GLTF models around them. Inspired by hyperframes vfx-iphone-device.
【Mandatory Composition】
  • Canvas: 1920×1080, warm gray gradient background 
    radial-gradient(#1a1a1f → #0a0a0f)
    , bottom reflective ground (mirror gradient).
  • iPhone 15 Pro Model: Left/center, 
    transform: rotateY(-12deg) rotateX(4deg) translateZ(40px)
    ; titanium silver border 
    #a8a8ad
    (solid 4px) + 56px screen rounded corners; iframe-like div embedded in screen, rendering users' real HTML content (mobile viewport 375×812).
  • MacBook Pro 14" (optional second device): Right side, slightly smaller, 
    rotateY(8deg)
    ; desktop viewport content embedded in the lid screen (1440×900 scaled); base keyboard + trackpad drawn with CSS shadow lines (no keycap details).
  • Glass / Lens Flare: Add 2-3 elliptical highlights of 
    radial-gradient(ellipse, rgba(255,255,255,0.4) 0%, transparent 60%)
    on top to simulate morphing glass lens.
  • Ground Reflection: 
    transform: scaleY(-1)
    + 
    mask-image: linear-gradient(to bottom, rgba(0,0,0,0.4), transparent 70%)
    below the devices.
【Screen Content Sources】
  • If users provide text/data → Automatically render as a mock app interface (top status bar + title + body + bottom tab bar or home indicator).
  • If users provide HTML → Embed directly in the screen div (note to use scale transform to fit the screen width and height).
  • UI inside screens uses Tailwind, font sizes should follow real mobile dimensions (text-sm / text-base, avoid text-9xl).
【Optional Additional Elements】
  • Bottom-right "product slug" badge: Large logo + one line of tagline + thin subtitle hairline.
  • Top caption line (English sans-serif, small font size, 0.6 opacity): Product codename / date / version.
  • Add 8s automatic CSS turntable: 
    @keyframes turntable
    rotateY -12 ↔ 12, ease-in-out infinite alternate; can be disabled by 
    prefers-reduced-motion
    .
【Design Details】
  • Strictly Prohibited: Use external mockup image URLs (any unsplash / dribbble link), draw all devices with CSS / SVG.
  • Fonts: Caption / logo outside devices use 
    Inter Tight
    / 
    SF Pro
    style; inside devices adapt to user content.
  • 4 optional background color schemes: charcoal / pearl / midnight blue / mocha; avoid rainbow gradients.
  • Single-file HTML; do not use srcdoc nesting for iframes (prone to issues), use 
    <div class="screen">
    + Tailwind to render content.
  • Must fill screen content with users' real data, strictly prohibit lorem ipsum or "Your text here".