Device Stage 3D

The classic product-page shot: put your app inside a phone or a laptop and let it move on the page. Every phone, tablet and laptop frame here is drawn in CSS (rounded corners, bezels, the pill-shaped island, side buttons, a keyboard deck) with no images, and the screen holds live DOM — text is selectable, buttons are clickable and screen readers can read it. Five arrangements are available: pointer tilt, scroll orbit, Y-axis flip (the back shows a second screen or a drawn back shell), a fanned lineup of three devices, and a scroll-driven pull-back from a macro close-up to the full view.

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

<DeviceStage3D/>

    </div>
  );
}

Installation

Usage

import { DeviceStage3D } from "@/components/ui/device-stage-3d";

<DeviceStage3D
  device="phone"
  mode="flip"
  screens={[<HomeScreen key="home" />, <SettingsScreen key="settings" />]}
  caption={<p>點擊手機看設定頁</p>}
  maxTilt={8}
/>;

The caption above reads 點擊手機看設定頁 ("click the phone to see the settings screen").

orbit and macro are scroll-driven. When the stage sits inside a scrollable element, pass that element's ref to container:

const scrollerRef = React.useRef<HTMLDivElement>(null);

<div ref={scrollerRef} className="h-[480px] overflow-y-auto">
  <div className="h-[320px]" />
  <DeviceStage3D mode="macro" container={scrollerRef} screens={[<HomeScreen key="home" />]} />
  <div className="h-[320px]" />
</div>;

Props

The DeviceStage3DDevice, DeviceStage3DMode and DeviceStage3DProps types are also exported by name.

CSS variables

How it works

• tilt: the pointer position relative to the stage center becomes −1 to 1 and maps to rotateY ±maxTilt and rotateX ∓maxTilt, smoothed by a stiffness 150 / damping 18 spring; leaving the stage returns it to center. Touch devices (pointer: coarse) do not follow by default; with gyro on it reads deviceorientation instead, and iOS asks for permission after the first touch
• orbit: scroll progress 0 to 1 maps to rotateY −30° to 30°, and translateZ peaks at 40px in the middle
• flip: rotateY 0 to 180°, screens[0] on the front and screens[1] on the back; with a single screen the back is drawn as a shell (camera module and matte finish). Clicking buttons or links inside the screen does not flip
• lineup: three devices fan out — the outer two turn inward 18°, shift out 60%, step back 80px and shrink to 0.9; when the stage enters the viewport they spring up from below 0.12s apart
• macro: while scrolling until the stage is centered in the viewport, the group pulls back from 1.6× to 1× and its 12% offset returns to zero; the background decoration and side devices (when there is more than one screen) go from depthBlur to sharp
• laptop lid: the screen panel opens around its bottom edge from −90°; normally it springs open when entering the viewport, and in orbit/macro it is bound to the first 30% of scroll

Accessibility

• The outer element is role="group" with aria-roledescription="device showcase"; the frame, side buttons, cameras and keyboard are aria-hidden decoration, and screen content stays readable and focusable
• Flip mode provides a keyboard flip button (aria-pressed reflects whether the back is shown) that stays hidden until it receives Tab focus and responds to Enter/Space; the face turned away from the user is inert, so it cannot be tabbed into
• Side devices in macro are decoration only and are set to aria-hidden and inert
• When the user's system has reduce motion turned on, every mode stays facing front and ignores the pointer and scroll, lineup appears in place, the laptop lid is already open, and flip becomes an in-place cross-fade between the two faces