iPhone & MacBook 3D Showcase

Real GLTF iPhone 15 Pro Max and MacBook Pro models with live HTML-in-Canvas screen content, morphing glass lens, product review camera choreography, and 360° turntable.

iPhone & MacBook 3D Showcase

Real GLTF iPhone 15 Pro Max and MacBook Pro models with live HTML-in-Canvas screen content, morphing glass lens, product review camera choreography, and 360° turntable.

html-in-canvas 3d device iphone macbook gltf

Requires Chrome flag. Enable chrome://flags/#canvas-draw-element for live preview. Rendering via CLI enables the flag automatically. Learn more.

Install

Terminal

npx hyperframes add vfx-iphone-device

Details

Property	Value
Type	Block
Dimensions	1920×1080
Duration	15s

Files

File	Target	Type
vfx-iphone-device.html	compositions/vfx-iphone-device.html	hyperframes:composition
models/iphone.glb	models/iphone.glb	asset
models/macbook.glb	models/macbook.glb	asset
models/hyperframes-mobile.png	models/hyperframes-mobile.png	asset
models/hyperframes-desktop.png	models/hyperframes-desktop.png	asset

Usage

After installing, add the block to your host composition:

<div data-composition-id="vfx-iphone-device" data-composition-src="compositions/vfx-iphone-device.html" data-start="0" data-duration="15" data-track-index="1" data-width="1920" data-height="1080"></div>