Device

Performant CSS device mockup with custom content

device-tw

Scale

0.40

Scrollable ContentEnable Parallax

Parallax Strength

15px

Enable Rotate

Rotate Strength

3.0°

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)

Default1

isScrollableboolean

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

Defaultfalse

enableParallaxboolean

Enable subtle parallax movement effect on hover

Defaulttrue

parallaxStrengthnumber

Parallax movement strength in pixels

Default15

enableRotateboolean

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

Defaulttrue

rotateStrengthnumber

Rotation strength in degrees

Default3

autoAnimateboolean

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

Defaultfalse

classNamestring

Additional CSS classes for the wrapper element

Default""

childrenReactNode

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

Defaultundefined