# Particles2D

```ts
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`](/reference/hooks/use-particle-system/).

```tsx
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](/guides/particle-effects/). Types:
[`Particles2DProps`](/reference/types/particles/#particles2dprops),
[`Particles2DStyle`](/reference/types/particles/#particles2dstyle),
[`PibblParticleEffect2D`](/reference/types/particles/#pibblparticleeffect2d), and
[`PibblParticleSystem`](/reference/types/particles/#pibblparticlesystem).

## API details from source

<span id="api-Particles2D"></span>

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

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

Related API: [Particles2D](/reference/components/particles-2d/), [PibblParticleParameterValues](/reference/types/particles/#pibblparticleparametervalues), [Particles2DProps](/reference/types/particles/#particles2dprops), [PibblNode](/reference/types/elements-components/#pibblnode).

### Parameters

- **`props`** — Particle system, drawing configuration, and event handlers. See
[Particles2DProps](/reference/types/particles/#particles2dprops) .

### Returns

Pibbl nodes that paint the system's Canvas particles. See [PibblNode](/reference/types/elements-components/#pibblnode).

### See also

[Particles2DProps](/reference/types/particles/#particles2dprops)

[PibblNode](/reference/types/elements-components/#pibblnode)

[PibblParticleParameterValues](/reference/types/particles/#pibblparticleparametervalues)

[View source — packages/core/src/features/particles/lib/canvas/component.ts:174](/source/packages/core/src/features/particles/lib/canvas/component-ts/#L174)

## Implementation guidance for agents

Read the [Canvas particles companion](/agents/topics/particles/) for ownership, adaptation, failure modes, and verification. [Agent start](/agents/) provides the version-selection workflow.

## Complete minimal examples

- [Mounted particle system](/minimal-examples/particles/system/): Mount a manual burst effect and trigger it with pointer input. [Plain source](/minimal/particles/system.tsx)
## Interactive examples

- [Fire and Flow](/examples/fire-and-flow/) · [Full page](/experience/fire-and-flow/)
## Documentation version

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