mockup-device-3d

Original：🇨🇳 Chinese

Translated

iPhone + MacBook GLTF-style static showcase, with real HTML content embedded in screens, glass lens refraction, 360° turntable composition

7installs

Sourcenexu-io/open-design

Added on2026-05-16

NPX Install

npx skill4agent add nexu-io/open-design mockup-device-3d

SKILL.md Content (Chinese)

View Translation Comparison →

【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".

mockup-device-3d

NPX Install

Tags

SKILL.md Content (Chinese)