> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getflowpilot.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Particle effects

> Celebrate a moment with a particle burst (confetti, sparkles, hearts, and more), either automatically on a screen or fired by an action.

Particle effects are short bursts of moving shapes (confetti, sparkles, hearts, and so on) that play over a screen. Use them to mark a success moment, a completed step, or a like. You can play them automatically when a screen appears, or fire them from a tap with an action.

<Note>
  Particle effects are configured in **Advanced mode** (the screen's Particle Effect section and the Trigger Particle Effect action). They are not exposed in [Simple mode](/editor/editing-modes).
</Note>

## Effect types

The **Effect** picker offers nine particle effects:

| Effect        | Look                                            |
| ------------- | ----------------------------------------------- |
| **Confetti**  | Multi-colored paper pieces falling from the top |
| **Sparkles**  | Glittering sparkles bursting from the center    |
| **Fireworks** | Burst explosions rising from the bottom         |
| **Snow**      | Soft snowflakes drifting down                   |
| **Hearts**    | Heart shapes floating up                        |
| **Stars**     | Star shapes twinkling and floating              |
| **Emoji**     | Your own emoji characters falling or floating   |
| **Bubbles**   | Soft circles floating upward                    |
| **Petals**    | Flower petals drifting down                     |

Each effect ships with sensible defaults for direction, color palette, density, and timing, so picking an effect is usually enough.

## Configuration

Wherever you configure particles, you get the same controls. A grid of one-click **presets** sits at the top (Celebration, Subtle Sparkle, Grand Finale, Winter Mood, Love, Gold Stars, Party, Dreamy, Spring). Below that:

* **Effect**: one of the nine types above.
* **Duration**: how long the burst plays, 500 to 15000 ms.
* **Density**: **Light**, **Medium**, or **Heavy** (how many particles).
* **Size**: **Small**, **Medium**, or **Large**.
* **Colors**: **Default** (the effect's palette) or **Custom** (pick your own swatches).
* **Emoji**: shown only for the **Emoji** effect. Add the characters to emit.

An **Advanced** section adds:

* **Direction**: **Top** (fall down), **Bottom** (float up), **Left**, **Right**, **Center** (burst), or **All edges**.
* **Spread**: the emission cone angle, 0 to 360 degrees.
* **Gravity**: -2 to 2, where 1 is normal downward pull and negative values rise.
* **Speed**: a velocity multiplier, 0.1 to 3.
* **Haptic**: **None**, **Light**, **Medium**, **Heavy**, or **Success**.

Particles are positioned by direction and spread, not by exact coordinates. You aim the burst, you do not place each particle.

## Two ways to fire particles

### Auto-play on a screen

Select a screen and open its **Particle Effect** section. Turn on **Enable Particle Effect**, then:

* **Trigger**: **On Appear** (play as soon as the screen shows) or **After Delay** (with a **Delay** slider, 0 to 5000 ms).
* **Loop continuously**: keep replaying the effect instead of playing it once.
* The full particle config from above.

Use this for a screen whose whole purpose is a celebration, like a "You're all set" success screen.

### From an action

To fire particles in response to a tap, add a **Trigger Particle Effect** action in a component's **Interactions** (on the **Logic** tab). It shows the same particle config, plus a per-action **Delay** so you can offset the burst from the tap. See [Interactions and actions](/editor/interactions-and-actions) for how actions are built.

You can also fire a particle burst as a **screen timeline** event by setting an event's action to **Particle Effect**. See [Animations and timeline](/editor/animations#screen-timeline).

## Example: confetti on success, hearts on a tap

<Steps>
  <Step title="Confetti when the success screen appears">
    Select your success screen and open **Particle Effect**. Turn on **Enable Particle Effect**, set **Trigger** to **On Appear**, and pick the **Celebration** preset (Confetti, heavy, with a Success haptic). Leave **Loop continuously** off so it plays once.
  </Step>

  <Step title="A like button that bursts hearts">
    Select the like button and open **Interactions** on the **Logic** tab. Add a **Trigger Particle Effect** action. Set the **Effect** to **Hearts**, and lower the **Duration** so it is a quick burst.
  </Step>

  <Step title="Preview both">
    Open the [preview](/editor/preview-and-live-mirror) and tap the button to see the heart burst, then navigate to the success screen to see the confetti.
  </Step>
</Steps>

## Notes and warnings

* **Use particles sparingly.** They are for moments, not for every screen. A celebration on every step stops feeling like a celebration.
* **Particles plus motion backgrounds can be heavy.** Both animate continuously. Combining a looping particle effect with a [motion background](/editor/backgrounds) can strain older devices. Prefer a one-shot burst.
* **The emoji effect needs emoji.** If you choose the **Emoji** effect and add none, it falls back to a default. Add the characters you actually want.

## Common mistakes

* **A looping effect that never stops.** Turning on **Loop continuously** (or a looping preset like Snow or Bubbles) keeps particles running for as long as the screen is up. Leave loop off for a one-time burst.
* **Emoji effect with no emoji set.** Pick the emoji you want rather than relying on the fallback.
* **Expecting precise placement.** Particles emit from a **Direction** within a **Spread** angle. There is no per-particle position, so aim with direction and spread instead.

## Related pages

* [Animations and timeline](/editor/animations)
* [Interactions and actions](/editor/interactions-and-actions)
* [Backgrounds](/editor/backgrounds)
* [Flow schema reference](/reference/flow-schema)