iPhone Duo

Zenora UI

Get Started

iPhone Duo·Gallery

npx zenora-ui-registry@latest add iphone-duo

Gallery

341 views•26 uses

Get this component

Copies the component into your project, installs what it needs, and pulls down its images. Nothing to download by hand.

npx zenora-ui-registry@latest add iphone-duo

Writes to components/zenora-ui/ by default; override with --dir. The file is yours to edit; there is no package to keep in sync.

Or let an AI agent pull it in for you. Set up the MCP server

An interactive 3D foldable phone that opens with a draggable hinge, live screen textures, and a cinematic depth-of-field effect.

KEY FEATURES

·Three.js model rendering with an interactive fold animation
·Customizable phone model, screen images, lighting, blur, and parallax
·Drag, click, and accessible controls for folding and unfolding

Props

11 properties

modelSrcstring/iphone-duo/iphon…

Path to the GLB phone model.

screenSrcstring/iphone-duo/one.w…

Image shown on the phone's inner screen.

coverSrcstring/iphone-duo/two.w…

Image shown on the phone's cover screen.

rotationnumber-6

Horizontal rotation of the phone.

exposurenumber1.2

Scene lighting exposure.

blurnumber48

Depth-of-field blur across the screens.

parallaxnumber1

Screen perspective response while folding.

durationnumber2

Time taken to fold or unfold.

showControlsbooleantrue

Display the fold toggle button.

showCaptionbooleantrue

Display the interaction caption.

captionTextstringDrag to unfold. C…

Text displayed beneath the phone.