# Effect parameters
Define typed spawn and render parameters and use them in an effect.

## APIs demonstrated

- [PibblParticleParameterDefinition](/reference/types/particles/) from `@pibbl/core/particles`
- [PibblParticleParameterDefinitions](/reference/types/particles/) from `@pibbl/core/particles`
- [PibblParticleParameterTiming](/reference/types/particles/) from `@pibbl/core/particles`
- [PibblParticleParameterValue](/reference/types/particles/) from `@pibbl/core/particles`
- [PibblParticleParameterValues](/reference/types/particles/) from `@pibbl/core/particles`
- [PibblParticleValueFor](/reference/types/particles/) from `@pibbl/core/particles`
- [PibblParticleValuesOf](/reference/types/particles/) from `@pibbl/core/particles`

## Complete example

[Plain source](/minimal/particles/parameters.ts). Run as a browser module after the document body exists. TSX uses `jsx: "react-jsx"` and `jsxImportSource: "@pibbl/core"`.

```ts
import {
  defineParticleEffect2D,
  particleParameter,
  type PibblParticleParameterDefinition,
  type PibblParticleParameterDefinitions,
  type PibblParticleParameterTiming,
  type PibblParticleParameterValue,
  type PibblParticleParameterValues,
  type PibblParticleValueFor,
  type PibblParticleValuesOf,
} from "@pibbl/core/particles";

const timing: PibblParticleParameterTiming = "spawn";
const windDefinition: PibblParticleParameterDefinition = {
  type: "number",
  default: 0,
  timing,
};
const parameters = {
  wind: windDefinition,
  tint: { type: "color", default: "#60a5fa", timing: "render" },
} as const satisfies PibblParticleParameterDefinitions;
const wind: PibblParticleValueFor<typeof windDefinition> = 20;
const values: PibblParticleValuesOf<typeof parameters> = {
  wind,
  tint: "#facc15",
};
const oneValue: PibblParticleParameterValue = values.tint;
const overrides: PibblParticleParameterValues = { ...values, current: oneValue };
const effect = defineParticleEffect2D({
  parameters,
  emitters: [
    {
      name: "sparks",
      capacity: 100,
      emission: [{ type: "rate", particlesPerSecond: 12 }],
      shape: { type: "point" },
      initial: {
        lifetimeMilliseconds: 600,
        velocity: [particleParameter("wind"), -80],
        color: particleParameter("tint"),
      },
      bounds: { min: [-100, -100], max: [100, 100] },
      renderer: { type: "circle" },
    },
  ],
});

const output = document.createElement("pre");
output.textContent = `${effect.dimension}D effect parameters\n${JSON.stringify(overrides, null, 2)}`;
document.body.append(output);

```

## Usage notes

- Displays the typed parameter values in the document.

## Documentation version

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