Layer

Read as Markdown

import { Group, Layer, Rectangle } from "@pibbl/core";

Layer uses LayerProps and LayerStyle to render recursive PibblNode children through a persistent offscreen Pibbl instance. It shares root interaction and global paint order, and requires browser OffscreenCanvas. It is a composition boundary, not a retained scene graph.

<Group style={{ translateX: 24, translateY: 24 }}>
  <Layer style={{ width: 160, height: 100 }}>
    <Rectangle style={{ width: 160, height: 100, fill: "#1d4ed8" }} />
  </Layer>
</Group>

See the Layer live example.

API details from source

Describes a retained offscreen composition layer.

Layer: PibblPrimitiveComponent<LayerProps, PrimitiveInput<LayerProps, LayerStyle>>

Related API: Layer, PibblPrimitiveComponent, LayerProps, PrimitiveInput, LayerStyle.

Parameters

• props — Authored component inputs, supplied through JSX or createElement. See the linked props and style types.

Throws

When called directly; Pibbl mounts this component through JSX or createElement.

See also

LayerProps

LayerStyle

View source — packages/core/src/lib/components/layer.ts:222

Implementation guidance for agents

Read the Drawing, layout, and effects companion for ownership, adaptation, failure modes, and verification. Agent start provides the version-selection workflow.

Complete minimal examples

• Drawing composition: Group, cache, and clip a drawing, then add text and an embedded thumbnail. Plain source

Interactive examples

• Underwater scene · Full page
• Rainy Window · Full page

Documentation version

Documentation built with @pibbl/core 0.0.2, revision 2dccb19. ALPHA — NOT FOR PRODUCTION USE.