Device

Performant CSS device mockup with custom content

device-tw

Tweak the props live

Example

Scale0.4

Content Type

Scrollable Content

Enable Parallax

Parallax Strength15px

Enable Rotate

Rotate Strength3°

Auto Animate

Name	Type	Default	Description
`image`	string	`"https://images.unsplash.com/photo-1579546929518-9e396f3cc809?w=800&q=80"`	URL of the image displayed on the device screen
`scale`	number	`1`	Scale factor for the device size (recommended range: 0.5 to 1.5)
`isScrollable`	boolean	`false`	Whether the screen content can scroll vertically (uses Lenis for smooth scrolling)
`enableParallax`	boolean	`true`	Enable subtle parallax movement effect on hover
`parallaxStrength`	number	`15`	Parallax movement strength in pixels
`enableRotate`	boolean	`true`	Enable subtle rotation effect on hover (includes Z-axis rotation)
`rotateStrength`	number	`3`	Rotation strength in degrees
`autoAnimate`	boolean	`false`	Auto-animate with smooth simulated cursor movement in a figure-8 pattern
`className`	string	`""`	Additional CSS classes for the wrapper element
`children`	ReactNode	`undefined`	Custom content to display inside the device screen (overrides image prop)

imagestring

URL of the image displayed on the device screen

Default:"https://images.unsplash.com/photo-1579546929518-9e396f3cc809?w=800&q=80"

scalenumber

Scale factor for the device size (recommended range: 0.5 to 1.5)

Default:1

isScrollableboolean

Whether the screen content can scroll vertically (uses Lenis for smooth scrolling)

Default:false

enableParallaxboolean

Enable subtle parallax movement effect on hover

Default:true

parallaxStrengthnumber

Parallax movement strength in pixels

Default:15

enableRotateboolean

Enable subtle rotation effect on hover (includes Z-axis rotation)

Default:true

rotateStrengthnumber

Rotation strength in degrees

Default:3

autoAnimateboolean

Auto-animate with smooth simulated cursor movement in a figure-8 pattern

Default:false

classNamestring

Additional CSS classes for the wrapper element

Default:""

childrenReactNode

Custom content to display inside the device screen (overrides image prop)

Default:undefined