Device
Performant CSS device mockup with custom content
device-tw
Customize
0.4
15px
3°
Props
| 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) |