DOCS
HOW THE STUDIO WORKS.
THE FLOW
SCREEN → DEVICE → LIGHT → CAMERA → SCENE → MOTION → EXPORT. Drop a screenshot or recording, SuperMock recommends a device from its pixel size, and the stage renders live. Everything you see is what exports.
MODES
- STILL — fast single shots. The Motion Deck stays hidden.
- MOTION — opens the deck. Set a pose, ADD SHOT, move things, ADD SHOT again; SuperMock interpolates. ADVANCED shows property tracks. DIRECTOR ✦ writes the camera move from focus beats.
- COMPOSE — multi-device scenes with one lighting rig, AUTO ARRANGE presets, alignment tools and SMART COMPOSE styles.
STUDIO RAIL & LIVE INSPECTOR
The left rail opens floating drawers: MEDIA, DEVICES, SCENES, LAYERS, RECIPES, TEMPLATES, CAPTURES, HISTORY. The right inspector only shows controls for what is selected — a device, the camera, a light, or the set. Click empty stage to deselect; use the OBJECT / CAMERA / LIGHT / SET / FX tabs to jump.
LIGHTING
Pick a rig (Clean Product, Soft Wrap, Dramatic Key, Edge Light, Dark Rim, Sunlight, Editorial, Neon Edge) then refine with LIGHT ORBIT: drag the lamp around the subject for azimuth, the rail for elevation. Key, fill and rim each have intensity, softness and colour temperature. SCREEN LIGHT lets bright UIs cast onto keyboards and floors.
CAMERA & LENSES
Lenses are 35mm-equivalent focal lengths: 24mm wide, 50mm natural, 85mm product portrait, 105mm macro. Camera presets frame the selection. Depth of field supports auto focus, click-to-focus on any device, manual distance, aperture, range and bokeh — and focus distance is animatable for rack-focus shots.
EXPORT
- Stills: PNG, JPEG, WebP at 720p → 4K (or custom), in 16:9, 9:16, 1:1, 4:5, 3:4, 4:3, 3:2, 2:3, 21:9. Rendered at the exact output resolution. Transparent PNG/WebP keeps device, glass and a soft shadow.
- Video: WebM (VP9) or MP4 (H.264) via WebCodecs, 30/60 fps, WEB/HIGH/ULTRA quality, optional temporal motion blur and WebM alpha. Frames are rendered deterministically and source videos are seeked per frame. Browsers without WebCodecs fall back to MediaRecorder.
- Capture (⌘S) saves a quick frame to the CAPTURES drawer to compare compositions.
CAPTURE WEBSITE
MEDIA → CAPTURE WEBSITE takes a URL at desktop (1440×900), tablet or mobile size, viewport or full page. It needs a screenshot provider on the server: set SCREENSHOT_PROVIDER to screenshotone, browserless or custom with the matching key. Without one the studio says so and you can drop a screenshot instead.
STORAGE & PRIVACY
SuperMock is local-first. Media lives in your browser's IndexedDB; projects autosave locally and appear under PROJECTS. Click the project name in the studio top bar to rename, start a NEW PROJECT (blank or from a template), duplicate, delete or jump between recent projects. Nothing is uploaded to render. Accounts (Supabase) sync project configuration — not your media — when configured.
DEVICES
All models are generic SuperMock devices built procedurally with separate PBR materials for chassis, cover glass, display, keys and lenses. They are not official Apple, Samsung or Google assets. The library is designed so licensed GLB models can be installed later by pointing a device entry at a file and naming its screen mesh.