Your artwork gets
a room of its own.

Three perspective mockup scenes for posters, websites and publications. Put your work in, find its angle and export a finished image. The lighting has already had its morning coffee.

Open the offline editor

Open the kit

1. Extract the ZIP into a folder. Keep its files and subfolders together.
2. Open index.html in a current desktop Chrome, Edge, Firefox or Safari browser. The editor runs locally and works without an account or connection.
3. Select a scene. Each has its own artwork and settings, so you can try a poster and a website in the same session.

The editor keeps changes only while this page stays open. Export your finished work before closing or reloading. Uploaded pictures are read by the local browser and are not sent to Wuren Studio.

Choose the right artwork

Use PNG, JPG or WebP images up to 25 MB. For a sharp result, start near the intended export size. The publication scene splits one full-spread image at its centre and bends the two halves across the fold.

Make it your own

• Fill the surface fills the whole design area and crops around the centre. Keep the whole image preserves the complete picture, with a pale backing where the aspect ratios differ.
• Scene angle leans the artwork and its glass or paper layers together. It is a controlled perspective adjustment, rather than a free camera.
• Shadow depth adjusts the main cast shadow and grounding shadow.
• Room color changes the ambient colour. The scene retains its original lighting accents and materials.
• Show scene caption in export includes or removes the outer Parallax Rooms / Wuren Studio caption. Turning it off leaves the interior scene art and small scene notes.
• Reset this scene restores that scene's original artwork, colour, fit, angle and shadow. Your other scenes stay as they are.

Export your work

PNG: choose 1600 × 1200 or 3200 × 2400, then select Export PNG. The browser renders a finished image and requests a download. Large custom images may take a moment. If the larger size fails on a phone, use 1600 or a desktop browser.

SVG: select Export editable SVG for a self-contained 1600 × 1200 scene. Your image is embedded in the file. Scene paths, lights, text and geometry remain vector elements. The placed artwork uses a triangle mesh and an embedded image; replace the artwork in the editor rather than trying to replace every individual mesh piece in a vector app.

SVG filters, fonts and clipping can look different between design applications. Use PNG when you need the rendered appearance to stay fixed. These are reusable 2D perspective scenes, rather than PSD smart objects or 3D model files.

Keyboard and phone use

Tab reaches every control. On the scene tabs, use Left / Right to move between scenes, Home for the first and End for the last. Range controls support their standard arrow keys. The preview and controls stack on a phone; use a desktop for a larger editing surface.

What's in the folder

• index.html, editor.css, editor.js: the offline editor.
• renderer.js: original perspective and material renderer.
• examples.js: embedded example images used by the editor.
• examples/: three original example designs in SVG and PNG.
• scenes/: three self-contained SVG mockup scenes with the original examples.
• previews/: three finished PNGs at 1600 × 1200.
• product.json, this guide and LICENSE.txt.

License and help

You can use the kit for multiple personal and commercial finished projects, including client work, portfolios, social images and presentations. Credit is optional. Keep the reusable kit and its source files out of asset packs, template libraries and resale products. Read the full license for the details.

For access issues or a repeatable defect, contact Wuren Studio using the support details supplied with your download. Include the browser, scene and steps that caused it. The guide covers everyday use; this free kit does not include custom design or individual lessons.