Device

A studio-lit 3D phone mockup that frames any image or content

device-tw

Customize

Frame Color

Screen Color

Shadow Color

Width

228px

Rotate X

0°

Rotate Y

0°

Rotate Z

0°

Tilt

10°

Float

1.00

Lift

1.00

Reflection

1.00

Shadow

1.00

Bezel

1.00

IslandDragInteractiveIntroPaused

Props

Name	Type	Default	Description
`image`	string	`"/demo-media/abstract-spectrum.webp"`	Image shown on the screen.
`alt`	string	`"Device screen"`	Alt text for the screen image.
`children`	ReactNode	`undefined`	Custom screen content. Replaces the image.
`finish`	"titanium" \| "black" \| "silver" \| "gold" \| "blue"	`"black"`	Metal finish of the frame and buttons.
`frameColor`	string	`undefined`	Custom metal colour. Overrides the finish. Highlights and shades are derived from it.
`screenColor`	string	`"#000000"`	Screen colour behind the content.
`shadowColor`	string	`"#0b0c16"`	Colour of the contact shadow on the page.
`orientation`	"portrait" \| "landscape"	`"portrait"`	Holds the phone upright or sideways. The content stays upright and the change animates.
`width`	number \| string	`undefined`	Width of the phone body in px or any CSS length. Overrides scale.
`scale`	number	`0.5`	Size as a fraction of a 35.6rem wide phone. Used when width is not set.
`rotateX`	number	`0`	Resting tilt forward or back, in degrees.
`rotateY`	number	`0`	Resting turn to the side, in degrees. Shows the side buttons.
`rotateZ`	number	`0`	Resting lean on the page, in degrees.
`tilt`	number	`10`	How far the phone turns toward the pointer, in degrees.
`float`	number	`1`	Strength of the slow idle sway while the pointer is away.
`lift`	number	`1`	How far the phone rises off the page on hover. The shadow softens to match.
`drag`	boolean	`true`	Drag to spin the phone. It keeps its momentum, then springs back.
`reflection`	number	`1`	Strength of the glass reflection. It moves with the angle of the phone.
`shadow`	number	`1`	Strength of the contact shadow.
`bezel`	number	`1`	Thickness of the black border around the screen. The corners stay concentric.
`island`	boolean	`true`	Shows the Dynamic Island.
`isScrollable`	boolean	`false`	Lets tall content scroll inside the screen, with smooth wheel scrolling.
`interactive`	boolean	`true`	Turns the hover tilt, drag and tap nudges on or off. A tap nudges the side you touch.
`intro`	boolean	`true`	Rises into place and wakes the screen when it first appears.
`paused`	boolean	`false`	Freezes the idle sway. Reduced-motion users get a still phone.
`className`	string	`undefined`	Classes for the root element.
`style`	CSSProperties	`undefined`	Inline styles for the root element.
`ref`	HTMLDivElement	`undefined`	The root element.

imagestring

Image shown on the screen.

Default"/demo-media/abstract-spectrum.webp"

altstring

Alt text for the screen image.

Default"Device screen"

childrenReactNode

Custom screen content. Replaces the image.

Defaultundefined

finish"titanium" | "black" | "silver" | "gold" | "blue"

Metal finish of the frame and buttons.

Default"black"

frameColorstring

Custom metal colour. Overrides the finish. Highlights and shades are derived from it.

Defaultundefined

screenColorstring

Screen colour behind the content.

Default"#000000"

shadowColorstring

Colour of the contact shadow on the page.

Default"#0b0c16"

orientation"portrait" | "landscape"

Holds the phone upright or sideways. The content stays upright and the change animates.

Default"portrait"

widthnumber | string

Width of the phone body in px or any CSS length. Overrides scale.

Defaultundefined

scalenumber

Size as a fraction of a 35.6rem wide phone. Used when width is not set.

Default0.5

rotateXnumber

Resting tilt forward or back, in degrees.

Default0

rotateYnumber

Resting turn to the side, in degrees. Shows the side buttons.

Default0

rotateZnumber

Resting lean on the page, in degrees.

Default0

tiltnumber

How far the phone turns toward the pointer, in degrees.

Default10

floatnumber

Strength of the slow idle sway while the pointer is away.

Default1

liftnumber

How far the phone rises off the page on hover. The shadow softens to match.

Default1

dragboolean

Drag to spin the phone. It keeps its momentum, then springs back.

Defaulttrue

reflectionnumber

Strength of the glass reflection. It moves with the angle of the phone.

Default1

shadownumber

Strength of the contact shadow.

Default1

bezelnumber

Thickness of the black border around the screen. The corners stay concentric.

Default1

islandboolean

Shows the Dynamic Island.

Defaulttrue

isScrollableboolean

Lets tall content scroll inside the screen, with smooth wheel scrolling.

Defaultfalse

interactiveboolean

Turns the hover tilt, drag and tap nudges on or off. A tap nudges the side you touch.

Defaulttrue

introboolean

Rises into place and wakes the screen when it first appears.

Defaulttrue

pausedboolean

Freezes the idle sway. Reduced-motion users get a still phone.

Defaultfalse

classNamestring

Classes for the root element.

Defaultundefined

styleCSSProperties

Inline styles for the root element.

Defaultundefined

refHTMLDivElement

The root element.

Defaultundefined

Name

Type

Default

Description

image

string

"/demo-media/abstract-spectrum.webp"

Image shown on the screen.

alt

string

"Device screen"

Alt text for the screen image.

children

ReactNode

undefined

Custom screen content. Replaces the image.

finish

"titanium" | "black" | "silver" | "gold" | "blue"

"black"

Metal finish of the frame and buttons.

frameColor

string

undefined

Custom metal colour. Overrides the finish. Highlights and shades are derived from it.

screenColor

string

"#000000"

Screen colour behind the content.

shadowColor

string

"#0b0c16"

Colour of the contact shadow on the page.

orientation

"portrait" | "landscape"

"portrait"

Holds the phone upright or sideways. The content stays upright and the change animates.

width

number | string

undefined

Width of the phone body in px or any CSS length. Overrides scale.

scale

number

0.5

Size as a fraction of a 35.6rem wide phone. Used when width is not set.

rotateX

number

0

Resting tilt forward or back, in degrees.

rotateY

number

0

Resting turn to the side, in degrees. Shows the side buttons.

rotateZ

number

0

Resting lean on the page, in degrees.

tilt

number

10

How far the phone turns toward the pointer, in degrees.

float

number

1

Strength of the slow idle sway while the pointer is away.

lift

number

1

How far the phone rises off the page on hover. The shadow softens to match.

drag

boolean

true

Drag to spin the phone. It keeps its momentum, then springs back.

reflection

number

1

Strength of the glass reflection. It moves with the angle of the phone.

shadow

number

1

Strength of the contact shadow.

bezel

number

1

Thickness of the black border around the screen. The corners stay concentric.

island

boolean

true

Shows the Dynamic Island.

isScrollable

boolean

false

Lets tall content scroll inside the screen, with smooth wheel scrolling.

interactive

boolean

true

Turns the hover tilt, drag and tap nudges on or off. A tap nudges the side you touch.

intro

boolean

true

Rises into place and wakes the screen when it first appears.

paused

boolean

false

Freezes the idle sway. Reduced-motion users get a still phone.

className

string

undefined

Classes for the root element.

style

CSSProperties

undefined

Inline styles for the root element.

ref

HTMLDivElement

undefined

The root element.