Device Mockup Zoom

Pull back from a UI to reveal it inside a phone or laptop frame.

Customize

Background

Device

Frame color

Screen color

Speed1

Installation


$ pnpm dlx shadcn@latest add @framecn/device-mockup-zoom

Usage

import { DeviceMockupZoom } from "@/components/framecn/device-mockup-zoom";

<DeviceMockupZoom />

API Reference

DeviceMockupZoom

Prop	Type	Default
`children`	`ReactNode`	`-`
`device`	`"laptop" \| "phone"`	`"laptop"`
`frameColor`	`string`	`"#1f1f1f"`
`screenColor`	`string`	`"#0a0a0a"`
`background`	`string`	`"#fafafa"`
`speed`	`number`	`1`
`fps`	`number`	`30`
`durationInFrames`	`number`	`120`
`width`	`number`	`1280`
`height`	`number`	`720`
`className`	`string`	`-`

Zoom Through Transition Morphing Modal

On This Page

Installation Usage API Reference DeviceMockupZoom

Edit this page Follow @shadcnlabs Join community