example.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>Device 3D Showcase · HTML-in-Canvas</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;600;700;800&family=Inter:wght@400;500;600&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet" />
<style>
body {
font-family:'Inter','Noto Sans SC',system-ui,sans-serif;
background: radial-gradient(ellipse at 50% 40%, #1a1a22 0%, #08080c 70%);
color:#f5f5f7;
min-height:100vh;
margin:0;
}
.stage { perspective: 1800px; }
.iphone {
width:280px; height:580px;
border-radius:46px;
background:linear-gradient(140deg,#3a3a40 0%,#a8a8ad 35%,#1f1f24 60%,#5a5a60 100%);
padding:7px;
box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 60px 80px -20px rgba(0,0,0,0.7);
transform: rotateY(-14deg) rotateX(4deg) translateZ(40px);
transform-style: preserve-3d;
}
.iphone-screen {
width:100%; height:100%; border-radius:40px;
background:#0a0a0e;
overflow:hidden; position:relative;
color:#f5f5f7;
}
.notch { position:absolute; top:6px; left:50%; transform:translateX(-50%); width:108px; height:28px; background:#000; border-radius:18px; z-index:5; }
.lens {
position:absolute; pointer-events:none;
background: radial-gradient(ellipse at center, rgba(255,255,255,0.3) 0%, transparent 60%);
mix-blend-mode: screen;
}
.mbp {
width:520px;
transform: rotateY(10deg) rotateX(-2deg) translateZ(-20px);
transform-style: preserve-3d;
}
.mbp-screen {
width:100%; height:320px;
border-radius:14px 14px 4px 4px;
background:linear-gradient(135deg,#222229 0%,#0a0a0e 100%);
border: 12px solid #1a1a1f;
border-bottom: 16px solid #1a1a1f;
box-shadow: 0 30px 60px -10px rgba(0,0,0,0.7);
overflow:hidden;
position:relative;
color:#f5f5f7;
}
.mbp-base {
width:560px;
height:14px;
margin:-2px auto 0;
background:linear-gradient(180deg,#3a3a40 0%,#1a1a1f 80%);
border-radius:0 0 14px 14px;
box-shadow: 0 30px 40px -20px rgba(0,0,0,0.8);
}
.mbp-notch {
position:absolute; top:0; left:50%; transform:translateX(-50%);
width:90px; height:8px; background:#000; border-radius:0 0 8px 8px; z-index:5;
}
.ground {
position:absolute; bottom:0; left:50%; transform:translateX(-50%);
width:1100px; height:140px;
background: radial-gradient(ellipse at center top, rgba(0,0,0,0.6) 0%, transparent 70%);
}
.chip { font-size:10px; letter-spacing:0.16em; text-transform:uppercase; }
</style>
</head>
<body class="flex flex-col items-center justify-center p-14 min-h-screen relative overflow-hidden">
<!-- caption -->
<header class="absolute top-10 left-12 right-12 flex items-baseline justify-between chip opacity-60">
<span>HTML ANYTHING — CODENAME ATLAS — v0.4</span>
<span>2026 SPRING</span>
<span>HTML-IN-CANVAS</span>
</header>
<!-- devices -->
<div class="stage relative flex items-end gap-20" style="z-index:2">
<!-- iPhone -->
<div class="iphone relative">
<div class="iphone-screen">
<div class="notch"></div>
<!-- status bar -->
<div class="flex items-center justify-between px-7 pt-3 text-[10px] font-semibold relative" style="z-index:6">
<span>9:41</span>
<span class="flex items-center gap-1">▮▮▮▮ 5G</span>
</div>
<!-- header -->
<div class="px-6 pt-10">
<div class="chip opacity-60">新建任务</div>
<h2 class="text-[22px] font-bold mt-1 leading-tight">杂志风网页<br/>PPT</h2>
</div>
<!-- template tile -->
<div class="mx-6 mt-5 rounded-xl p-3 flex items-center gap-2.5" style="background:linear-gradient(135deg,#1a1a22,#222229);border:1px solid rgba(255,255,255,0.06)">
<span class="text-xl">📰</span>
<div class="flex-1">
<div class="text-[12px] font-semibold">杂志风网页 PPT</div>
<div class="text-[10px] opacity-60">16:9 横向翻页 · 9 帧</div>
</div>
<span class="text-[10px] opacity-50">✓</span>
</div>
<!-- input -->
<div class="mx-6 mt-3 rounded-xl p-3" style="background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.06);min-height:140px">
<div class="text-[12px] opacity-90">// 公司 2026 Q1 路线图</div>
<div class="text-[11px] opacity-60 mt-1">- 推出 200 个新模板</div>
<div class="text-[11px] opacity-60">- 接入 28 个本地 agent</div>
<div class="text-[11px] opacity-60">- 周活 12K → 80K</div>
</div>
<!-- CTA -->
<div class="mx-6 mt-3 rounded-full py-3 text-center text-[13px] font-semibold" style="background:linear-gradient(135deg,#ff7849,#d97757);color:#08080c">⌘ + Enter 转换</div>
<!-- tab bar -->
<div class="absolute bottom-0 left-0 right-0 flex items-center justify-around py-3 backdrop-blur" style="background:rgba(10,10,14,0.85);border-top:1px solid rgba(255,255,255,0.06)">
<span class="text-[10px] flex flex-col items-center gap-0.5" style="color:#ff7849">■<span>任务</span></span>
<span class="text-[10px] flex flex-col items-center gap-0.5 opacity-60">▤<span>模板</span></span>
<span class="text-[10px] flex flex-col items-center gap-0.5 opacity-60">◌<span>设置</span></span>
</div>
</div>
<!-- lens flares -->
<div class="lens" style="top:-30px;left:-20px;width:160px;height:200px;transform:rotate(-20deg)"></div>
<div class="lens" style="bottom:50px;right:-30px;width:120px;height:160px"></div>
</div>
<!-- MacBook -->
<div class="mbp relative">
<div class="mbp-screen">
<div class="mbp-notch"></div>
<!-- top bar -->
<div class="flex items-center gap-1.5 px-3 py-1.5" style="background:#161620;border-bottom:1px solid rgba(255,255,255,0.06)">
<span class="w-2 h-2 rounded-full bg-red-500"></span>
<span class="w-2 h-2 rounded-full bg-amber-400"></span>
<span class="w-2 h-2 rounded-full bg-emerald-400"></span>
<span class="ml-3 chip opacity-50">localhost:3456 — HTML Anything</span>
</div>
<!-- 3-pane layout mini -->
<div class="grid grid-cols-[1fr_1.4fr_1.4fr] gap-2 p-2 h-[260px]">
<!-- sidebar -->
<div class="rounded-md p-2 text-[10px] opacity-80" style="background:#1a1a25;border:1px solid rgba(255,255,255,0.04)">
<div class="opacity-50 mb-1.5">任务 / 11</div>
<div class="space-y-1">
<div class="rounded px-1.5 py-1 truncate" style="background:rgba(255,120,73,0.18);color:#ff7849">● 杂志风网页 PPT</div>
<div class="rounded px-1.5 py-1 truncate opacity-60">小红书图文卡</div>
<div class="rounded px-1.5 py-1 truncate opacity-60">Hyperframes 视频</div>
<div class="rounded px-1.5 py-1 truncate opacity-60">Keynote PPT · 产品介绍</div>
</div>
</div>
<!-- editor -->
<div class="rounded-md p-2 text-[10px] opacity-90" style="background:#10101a;border:1px solid rgba(255,255,255,0.04);font-family:'JetBrains Mono',monospace">
<div class="opacity-50">// 输入</div>
<div class="mt-1"># OpenDesign — 2026</div>
<div class="opacity-70">## Q1-Q4 关键指标</div>
<div class="opacity-70">- 模板: 75 → 200</div>
<div class="opacity-70">- WAU: 12K → 80K</div>
<div class="opacity-70">- Agents: 17 → 28</div>
<div class="opacity-70">- Stars: 4.2K → 25K</div>
<div class="mt-2 opacity-50">▍</div>
</div>
<!-- preview -->
<div class="rounded-md overflow-hidden relative" style="background:#002FA7">
<div class="absolute inset-0 p-3 text-white">
<div class="chip opacity-80">№01 / 22</div>
<div class="mt-2 font-black text-[16px] leading-tight">Designing<br/>intelligence on<br/>warm paper.</div>
<div class="absolute bottom-2 left-3 right-3 flex justify-between chip opacity-70">
<span>OPEN-DESIGN</span><span>BERLIN</span>
</div>
</div>
</div>
</div>
</div>
<div class="mbp-base"></div>
<!-- lens flares -->
<div class="lens" style="top:-40px;right:60px;width:200px;height:140px;transform:rotate(10deg)"></div>
</div>
</div>
<!-- ground reflection -->
<div class="ground"></div>
<!-- bottom slug -->
<footer class="absolute bottom-10 left-12 right-12 flex items-baseline justify-between chip opacity-50">
<span>HTML-ANYTHING.DEV</span>
<span>GLTF · LIVE-HTML SCREENS · TURNTABLE</span>
<span>STAGE — 1920 × 1080</span>
</footer>
</body>
</html>
SKILL.md
---
name: mockup-device-3d
zh_name: "iPhone × MacBook 立体展架"
en_name: "Device 3D Showcase"
emoji: "📱"
description: "Static iPhone and MacBook 3D-style showcase with real HTML embedded on screens, glass-lens refraction, and 360-degree turntable composition."
zh_description: "iPhone + MacBook 仿 GLTF 静态展架, 屏幕内嵌真实 HTML 内容, 玻璃镜头折射, 360° 转盘构图"
en_description: "Static iPhone and MacBook 3D-style showcase with real HTML embedded on screens, glass-lens refraction, and 360-degree turntable composition."
category: poster
scenario: product
aspect_hint: "1920×1080 (16:9)"
featured: 47
tags: ["device", "mockup", "iphone", "macbook", "html-in-canvas", "product"]
example_id: sample-mockup-device-3d
example_name: "iPhone × MacBook 立体展架"
example_format: markdown
example_tagline: "HTML-in-Canvas 设备秀"
example_desc: "iPhone 屏幕 + MacBook 屏幕都嵌入真实 UI 内容, 玻璃镜头折射"
example_source_url: "https://hyperframes.heygen.com/catalog"
example_source_label: "hyperframes · vfx-iphone-device"
od:
mode: prototype
surface: web
platform: desktop
scenario: product
upstream: "https://github.com/nexu-io/html-anything"
preview:
type: html
entry: index.html
reload: debounce-100
design_system:
requires: false
example_prompt: "Use the Device 3D Showcase template to turn my content into a static iPhone and MacBook 3D-style showcase with real HTML embedded on the screens. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
example_prompt_i18n:
zh-CN: "用「iPhone × MacBook 立体展架」模板把我的内容做成一份「iPhone + MacBook 仿 GLTF 静态展架, 屏幕内嵌真实 HTML 内容, 玻璃镜头折射, 360° 转盘构图」。保持模板的视觉签名，使用真实内容和数据，避免 lorem ipsum 和占位图片。"
---
【模板: 设备 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"。