Group

Read as Markdown

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

Group uses GroupProps and GStyle to transform recursive PibblNode children. Interaction regions, clips, layers, and paint share the transformed Canvas geometry. A receiving filter captures the group’s recursive output before its own transform is presented.

<Group style={{ translateX: 48, rotationDegrees: 15 }}>
  <Rectangle style={{ width: 100, height: 60, fill: "#2563eb" }} />
</Group>

See the Group live example.

API details from source

Describes a transformation group for JSX or createElement authoring.

Group: PibblPrimitiveComponent<GroupProps, PrimitiveInput<GroupProps, GStyle>>

Related API: Group, PibblPrimitiveComponent, GroupProps, PrimitiveInput, GStyle.

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

GroupProps

GStyle

View source — packages/core/src/lib/components/g.ts:81

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

• Filters · Full page
• Reusable physics panels · Full page
• Living Ink · Full page
• Material Lab · Full page
• Growing Reveal · Full page
• Underwater scene · Full page
• Optional filters · Full page
• Visibility Transitions · Full page

Documentation version

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