Spacial Stage

Selected

Active state Home

Generated implementation

SVG object · Home

Updates live

Element CSSDestination + motion variables

Parent / group CSSOnly rules this behaviour requires

Editing

SVG object

Shared object in Home

Saved

State name The tab label for this named destination. Edit it directly; no save dialog required.

Animations

Choose zero, one or several effects. Zero means the object snaps straight to its destination state.

Layout effect

Controls what the object's arrival does to neighbouring stage content. This is separate from the object's own animations.

Attachment

Defines how the destination position relates to the stage rather than how it animates.

Coordination

Controls timing relationships between this object, collections and other moving stage objects.

Depth

Depth now controls only visual softness: opacity, desaturation/softening and blur. Stacking order is handled separately by Z-index.

Blur Focus

Z-index

Controls stacking order independently from Depth. Higher numbers sit above lower numbers.

Z-index Destination stacking order for this object in the active state.

Direction / edge

Provides an edge/vector for Reveal, Collapse, Dock and layout effects. Slide itself travels between actual state positions.

Position

Defines the object's final destination coordinates. Dragging the object edits these values directly.

Horizontal anchor

Left Centre Right

Vertical anchor

Top Centre Bottom

Offset units

Pixels Percent

X offsetpxHorizontal distance from the selected anchor. Y offsetpxVertical distance from the selected anchor.

Drag the selected object directly on stage to author its destination position.

Size

Destination geometry. Size changes width/height; Scale below is only a visual transform.

Size units

Natural Pixels Percent

WidthpxFinal layout width before visual Scale. HeightpxFinal layout height before visual Scale.

Drag the bottom-right destination handle to resize. Natural becomes Pixels on first resize.

Rotation

Rotation is part of the destination state, just like position and size. Slide animates between the previous and current state's angle.

Rotate Z Normal 2D clockwise/counter-clockwise rotation around the object's Z axis.

3D transform

Tilts or moves the whole object in local 3D space. This is single-object 3D; multi-layer scene approaches are described below.

Rotate X Tilt around the horizontal axis; useful for pitching a card toward or away from you. Rotate Y Tilt around the vertical axis; useful for turning a panel or card side-to-side. Translate Z Move the object toward (+) or away from (−) the viewer in pixels. Perspective Camera distance in pixels. Smaller values create stronger perspective distortion.

3D layering approaches

1. Single transformed object — implemented now. Treat the whole object as one plane and animate Rotate X/Y/Z, Translate Z and Perspective. Simple and predictable, but internal content stays flat.

2. Child layer stack. Let one stage object contain named sub-layers, each with its own local Z offset. Good for cards, mock device screens and parallax without turning the whole stage into a scene graph.

3. 3D object group / scene graph. Create a parent object with shared position/rotation/perspective and multiple child stage objects at independent X/Y/Z coordinates. Most powerful and best for true spatial scenes, but introduces hierarchy, group selection, inherited transforms and more complex hit-testing.

4. Visual-only pseudo layers. Generate decorative front/back/shadow faces from one object using CSS/pseudo-elements. Cheap and useful for thickness, but those layers are not independently authorable or interactive.

Numeric / custom parametersFine-tune the presets without giving up the semantic model.

Direction XCustom direction's horizontal vector component; used when Direction = Custom. Direction YCustom direction's vertical vector component; used when Direction = Custom. DistanceMagnitude used by Push/Replace/Reflow and directional companion movement. DurationTotal time for this object's selected animations. Stagger gapDelay between collection children or followers. BlurExtra blur added to the chosen destination Depth. ScaleVisual transform multiplier; does not change layout width/height. OpacityMultiplier applied to the destination Depth opacity. EasingCSS easing curve used for this object's animation timing. Custom CSSDeclarations applied last to the destination frame as an escape hatch.

Why named states, not “in / out”?

An object can be background on Home, focused in Room and docked in Cloud. The state owns the destination; the transition and layout effect describe how it arrives there.