Installation

npx kinetic-ui-cli@latest add css-device-mockup

How It Works

Traditionally, high-fidelity 3D device mockups require heavy libraries like three.js. The CssDeviceMockup component bypasses this by stacking layers of CSS divs with translate-z offsets and preserve-3d wrappers. It dynamically tracks the mouse pointer to rotate the entire chassis using framer-motion springs. Best of all, because it's just CSS, you can pass standard React children directly into the screen container and they remain fully interactive!

Usage Guide

1. Import the Component

Import the component into your React or Next.js page:

import { CssDeviceMockup } from "@/components/creative/css-device-mockup";

2. Implementation Example

Render the component and customize its behavior by passing props:

import { CssDeviceMockup } from "@/components/creative/css-device-mockup";

export default function Example() {
  return (
    <div className="w-full flex items-center justify-center p-8">
      <CssDeviceMockup
        mockupWidth{10}
      >
        <div>Content goes here</div>
      </CssDeviceMockup>
    </div>
  );
}