Future UI

3D Phone Mockup

▧ Blocks

CSS-only 3D phone mockup with drag rotation, tilt, and video/image screen content.

phonemockup3dcss-transformsiphonedraggsapblock

No preview available

CSS 3D Transforms ~ Drag to Rotate

Controls

1

Blocks / React Component

About 3D Phone Mockup

CSS-only 3D phone mockup with drag rotation, tilt, and video/image screen content.

Category Blocks
Framework React + TypeScript
Dependencies gsap
Tags phone, mockup, 3d, css-transforms, iphone, drag, gsap, block

Install 3D Phone Mockup in your project

Copy the shadcn CLI command below. Replace YOUR_LICENSE_KEY with the license key from your FutureUI account — or log in and it will auto-fill for you.

npx shadcn@latest add "https://futureui.studio/api/registry/phone-mockup-3d.json?key=YOUR_LICENSE_KEY"

Usage example

import { PhoneMockup3D } from './PhoneMockup3D';

export default function Example() {
  return (
    <PhoneMockup3D
      colorVariant="black"
      screenSrc="/videos/demo.mp4"
      screenType="video"
      muted={true}
      scale={1}
      showReflection={true}
      autoRotate={true}
      draggable={true}
      hoverTilt={false}
    />
  );
}

// YouTube embed
<PhoneMockup3D
  screenSrc="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
  screenType="youtube"
/>

// Static image
<PhoneMockup3D
  screenSrc="/screenshot.webp"
  screenType="image"
  colorVariant="desert"
/>