Particles2D

Read as Markdown

import { Particles2D } from "@pibbl/core/particles";

Particles2D binds a 2D effect or an explicitly owned particle system to the Canvas renderer. Exactly one of effect or system is required. Effect mode can use autoplay and seed; system mode takes its lifecycle from useParticleSystem.

declare const sparks: import("@pibbl/core/particles").PibblParticleEffect2D;

<Particles2D
  effect={sparks}
  autoplay
  seed={42}
  pointerEvents="none"
  style={{ width: 640, height: 360, opacity: 0.9 }}
/>;

The component owns one fixed-capacity birth ledger and draws through one private primitive. It does not create one Pibbl component or event target per particle. pointerEvents="auto" targets the declared component box; individual particles are never retained interaction objects.

Canvas execution runs particle math on the CPU and paints with Canvas 2D. Pibbl does not claim portable GPU acceleration for this path. Use a tight Layer only after measuring a scene; an offscreen bitmap is not automatically faster.

See Create particle effects. Types: Particles2DProps, Particles2DStyle, PibblParticleEffect2D, and PibblParticleSystem.

API details from source

Renders one 2D effect through exactly one private Canvas drawing primitive.

Particles2D: <EmitterName extends string, Parameters extends PibblParticleParameterValues>(props: Particles2DProps<EmitterName, Parameters>) => PibblNode

Parameters

props — Particle system, drawing configuration, and event handlers. See Particles2DProps .

Returns

Pibbl nodes that paint the system’s Canvas particles. See PibblNode.

Implementation guidance for agents

Read the Canvas particles companion for ownership, adaptation, failure modes, and verification. Agent start provides the version-selection workflow.

Complete minimal examples

Mounted particle system: Mount a manual burst effect and trigger it with pointer input. Plain source

Interactive examples

Fire and Flow · Full page

Documentation version

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