Primitive

TiltFrame

Pointer-aware depth container for one highlighted surface.

Use TiltFrame for one highlighted surface, not for every card in a dense grid. Keep the intensity subtle and pair with ScaleFrame when fixed preview scaling is needed.
surface
DOM renderImage render
TiltFrameDefault

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

Stable container for live controls with subtle pointer depth.
Render state

Surface

Sunken depth keeps the highlight quiet inside dense product surfaces.
Generated panel

One focused output, returned from typed props.

Render state

Public contract

The public prop table is generated from item metadata and schema-backed controls.
NameTypeDefaultDescription
interactivebooleantrueEnables cursor-driven rotation.
intensity'subtle' | 'medium'subtleRotation strength.
surface'raised' | 'sunken' | 'transparent'raisedFrame surface treatment.
childrenReactNode-Frame content.