UltraVisiondocs

Changing it

Mockup controls

The studio is one scene, not two hundred, so its controls are declared once — as 6 titled groups holding 22 controls, in three3d/mockupControls.ts. Every panel below is read from that file: real ranges, real defaults, live.

This is the studio side. The motion side — declared per template, one panel per family — is Library controls.

How this differs from a template’s panel

LibraryMockup
Declared byeach template, in its own filethe studio, in one schema file
Shapea flat list; section on each entry groups the paneltitled groups, each holding its own list
Scopeonly that motion — hundreds of families, hundreds of panelsone panel for the whole studio
Resetpicking a template wipes and refills from the declarationpersistent; it is the studio’s state, not a motion’s

What the two share is the vocabulary and the renderer: the same nine types and the same row component, so a control looks and behaves identically in either place. Notice what the studio actually uses — almost all sliders, a few toggles, two colours. A 3D studio does not need a wider vocabulary than a 2D motion does, and it did not get one.

The studio’s panels

01Camera & Hardware2 controls
42°
112°

The lens, and the one part of the device that moves.

Field of View is the lens, not the camera position. Widening it fits more in the frame but also bends the device — a wide angle exaggerates the perspective on its edges, a narrow one flattens the whole thing toward an elevation drawing. If you want the device bigger without that distortion, move the camera instead, which is what the animation presets do.

Laptop Lid only applies to the laptop slot, and it is the one piece of the hardware itself that animates: the presets keyframe it open or shut along the same pose timeline that carries the camera.

02Material7 controls
#D8D8DC
#000000
1.0
100

Overrides on top of the model’s own materials.

The device arrives with real materials of its own, and Use Model Materials keeps them. Everything below it is an override for when you deliberately turn that off — a tint, a glow, transparency, or the two diagnostic looks.

Emissive is not lighting: it makes the body emit rather than reflect, so it stays bright no matter where the key light is. Wireframe and Flat Shading are there to inspect the mesh and the shading, not to ship a product shot.

03Screen2 controls
1.00
0

How the panel emits, and how much room it mirrors.

Brightness scales the screen’s own emission, so your artwork can hold up against a bright studio without being washed out by it.

Glare defaults to zero on purpose. The studio environment has rectangular panels baked into it, and a mirror-smooth display returns one as a hard softbox — the single clearest tell that an image was rendered rather than photographed. Raise it when a glossy screen is the look you want, not as a default.

04Lights7 controls
-26
0
3.2
1.0
0.6
1.10
0.60

The studio rig: direction, balance, reflection, exposure.

Light Direction X and Y are the two axes of a direction pad, and they are applied as an OFFSET on top of whatever the active animation preset is doing with the key light. So a preset can swing the light through a shot and your offset still means the same thing relative to it.

Key, Fill and Ambient are the balance. A strong key against a low fill and ambient floor is what actually reads as sharp — enough contrast that the device’s edges and its finish stay defined instead of washing into a bright backdrop. Raising all three together just flattens the shot.

Reflections is how much of the room the surfaces return. Exposure is the render’s own exposure, and it is the control on this page that changes the render itself rather than grading it afterwards.

05Adjustments3 controls
100
100
100

Post-grade on the rendered device, not lighting.

These are filters applied to the canvas after the device is rendered, and they touch the device only — the backdrop keeps its own colours.

Which means: if the device looks too dark, Exposure up in Lights is the honest fix. Brightness here will lift it, and it will lift the noise and flatten the blacks with it. Use these for finishing, the way you would grade a photo.

06Ground1 control
0

The contact shadow under the device.

Zero by default, because the default shot has no contact shadow at all: the device floats on a plain backdrop. Raising this introduces a ground plane for the device to sit on and cast onto.

Worth knowing before you reach for it: a shadow needs a floor, and a floor is a real plane in the scene. On a pose that floats or tilts far, that plane can end up crossing the device rather than sitting under it — if you see a straight dark edge that does not follow the device’s shape, that is the ground, not the shadow.

07Orientationoutside the vocabulary

Three rotations in one widget.

Drag inside the disc for X and Y, drag the outer ring for Z, and type the fields for the degrees a drag cannot land on. It replaced an XY pad, which could only ever reach two of the three axes.

Degrees here, radians in the store, converted at the boundary — because degrees are what you read and type, and radians are what the scene does maths with.

Two rules that cover all of them

  • The groups are declared, not derived. A motion control carries a section and the panel groups by it; a studio panel carries a title and holds its own controls. Adding a panel here means adding an object to the schema, not inventing a section name somewhere.
  • Nothing resets. These values belong to the studio, so they survive switching device, finish and animation preset. Motion values are wiped on every template pick, by design — which is the sharpest difference between the two sides.

The one control that is not on this page

The view gizmo: six axis balls showing how the camera sits relative to the world, drag to orbit, double-click a ball to snap to that axis. Like the trackball above it refused the nine-type vocabulary for the same reason — it is spatial, and a list of words would make you translate language back into geometry.

It is not mounted here because it needs a real camera rig to point at; it lives over the 3D stage in the editor. Its axis colours are the one place in the app that uses hue deliberately, following the red/green/blue convention for X/Y/Z — see Design and theming.

Easing →