Primitive

ScaleFrame

Fixed-bounds preview container for scaled product surfaces.

Use ScaleFrame when a real primitive, component, or interface must fit a constrained preview without changing its internal layout.
surface
DOM renderImage render
ScaleFrameDefault

Playground

Controls update query params directly, so every primitive state can be linked, rendered, and screenshotted deterministically.

Loading playground

Rendered matrix

Every state maps to the same primitive render route through the state query param.

Default

A larger control group scaled inside fixed preview bounds.
Render state

Panel

Static product surfaces keep their layout while fitting dense previews.
Latency p95184ms

Scaled output remains deterministic.

Render state

Public contract

The public prop table is generated from item metadata and schema-backed controls.
NameTypeDefaultDescription
scalenumber1Visual scale applied inside stable frame bounds.
align'start' | 'center' | 'end'centerContent alignment inside the frame.
surface'raised' | 'sunken' | 'transparent'transparentOptional frame surface.
childrenReactNode-Scaled frame content.