ComponentActor

The render-callback bridge from @motionactor/primitives, for drawing that does not warrant its own actor family.

const PhoneSurface = ComponentActor.withRender(({ frame, width, height }) => {
  return <div style={{ width, height }}>Frame {frame}</div>;
});

ComponentActor lets render code participate in the actor tree — it occupies slots, has a layout box, and resolves per frame — without you designing semantic state and commands first.

Use it for

  • Embedding custom drawing inside the actor runtime.
  • Prototyping a visual before the actor family exists.
  • One-off surfaces that will never be reused.

Do not use it for

  • Actors that need their own semantic state and commands. Once the thing has meaningful state, it wants to be a real actor — otherwise the state ends up in the view, where the timeline cannot author it.

It is a bridge, not a shortcut

A ComponentActor that grows props for every visual variation is an actor family asking to be written. See Creating actors.

On this page