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.

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.

Add it to a project

Ask your agent

Add the iPhone & MacBook 3D Showcase block from the HyperFrames Catalog to this project.
Replace the demo content with mine and match the existing design and timing.

Terminal

npx hyperframes add vfx-iphone-device

Details

Property	Value
Type	Block
Dimensions	1920×1080
Duration	15s

Installed 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

Use it

Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.

Wiring it by hand. The installed block can be added to a host composition with:

<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>