React 3D Mockups

2026

Live 3D device mockups for React. Real DOM on the glass.

Links
https://area.is/react-3d-mockupsSourcenpm
About

React 3D Mockups is an open-source library of 3D device and object mockups for React, built on three.js. Whatever goes on a screen, a component, a video or an iframe, stays live DOM and stays sharp at any angle.

All 58 models, from phones and foldables to a billboard and a semi trailer, are generated in code at runtime, with no 3D files to host. The package is on npm under the MIT license.

StackTypeScript, React 19, three.js, react-three-fiber, three-bvh-csg
Packagereact-3d-mockups 0.2.0 on npm
LicenseMIT

Live screens

Screen content is real DOM, placed on the glass with CSS 3D transforms under a transparent WebGL canvas that masks it pixel for pixel. Text stays crisp, and state, video and iframes keep running.

The mark: three rounded screens stacked in isometric view, in four greens.
The landing carousel: picking a finish, then stepping through models and their screen sizes.
Live: one React state on a MacBook, an iPhone and an Apple Watch. Drag to turn.

Lineup

There are 33 devices and 25 objects. Each screen defaults to the real device’s logical resolution, so breakpoints match the hardware.

The gallery filtered to phones, foldables, tablets, laptops and wearables.
Print, packaging, out-of-home and vehicle models, each surface a live DOM area.
Live: a book, a tea carton, a poster and a card, each wearing generated art.

Prop explorer

Every model has a page with a live prop explorer, and its demo.tsx rewrites itself to the props being passed.

Galaxy Z Fold 8: a lavender finish, then folding to 15°, where the cover screen lights.
iPhone 18 Pro: picking Burgundy, turning to the back, then laying it in landscape.
MacBook Pro 14″: lowering the lid with openAngle, switching to Space Black, then raising it.

Taking input

Screens are display-only by default. The experimentalScreenInput prop lifts each screen above the canvas and clips it every frame to the pixels no hardware covers.

Typing into a form on a MacBook’s screen, signing up, then turning the laptop.
With screenDrag off, every drag on the iPad’s screen draws in a sketch pad.
Spinning a phone, filtering the gallery, folding a Z Fold 8 and adding expenses in Ledger.

How it is built

Ports and speaker holes are cut with CSG at runtime, and a frame is drawn only when something changes. A renderer-agnostic core holds the specs; the React layer renders them with react-three-fiber.

Example scenes

Twelve scenes for fictional brands, most with Tabbied patterns, show the library at work.

Ledger: adding expenses updates one React state on a watch, a MacBook and an iPhone.
Aperture Festival: turning the 14 × 48 ft billboard to walk around it.
Live: one sneaker campaign on a billboard and a bus shelter.
Grid Editions: a new design, ink, frame and mat reprint the poster.
Carton & Co: the size sliders and board choice rebuild the mailer box proof.
Northline: switching the van’s wrap coverage and livery colors.
Ninefold: closing and repainting the shop; the door sign, glass and fascia follow.
Ampersand: one set of names, a palette and a typeface set four wedding pieces.
Moth: a real canvas game runs on the TV’s screen and reports back to the page.
The landing carousel on a phone, changing finish and model.
Ledger on a phone: adding expenses updates all three devices.

Shipping

Since 0.1.1, releases go to npm from GitHub Actions with Trusted Publishing and signed SLSA provenance.