> For the complete documentation index, see [llms.txt](https://zypec.gitbook.io/particles/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://zypec.gitbook.io/particles/configuration/gui-config.md).

# GUI Config

This page was last updated for version v1.2.0

{% tabs %}
{% tab title="Animations" %}

```yml
animation: # GUI animations
    enabled: true
    interval: 2 # in ticks
    color-cycle-speed: 0.85 # in decimal
```

{% endtab %}

{% tab title="Sounds" %}

## Sound Format

**`event:`**`"<sound> <volume> <pitch>"`

{% hint style="info" %}
Leave the sound value blank if you don't want it to play sound.
{% endhint %}

## Examples

* **`select-effect:`**`"minecraft:block.note_block.pling 0.1 1.5"`
* **`random-effect:`**`""`

## Available Events

### Common

* next-page
* previous-page
* reset
* filter

### Effects GUI

* select-effect
* random-effect

### Colors GUI

* select-color
* random-color

### Mixer GUI

* select-effect
* confirm

### Handlers GUI

* select-handler
* unselect-handler
  {% endtab %}

{% tab title="Styles" %}

```yaml
current-style: <ID>
styles:
    style-id:
        effects:
            layout:
                ..
            elements:
                .. 
        colors:
            layout:
                ..
            elements:
                ..
        mixer:
            layout:
                ..
            elements:
                ..
        handlers:
            elements:
                ..
```

{% hint style="info" %}
You can create multiple GUI styles, and use one of them by setting the `current-style` value to that style's id.
{% endhint %}
{% endtab %}

{% tab title="Layouts" %}
Layout determines how elements are placed in the GUI. It's a list of character arrays. Every character array must have exactly 9 characters.

{% hint style="info" %}
If you use a character that doesn't match any element's key, that slot will be set to air.
{% endhint %}

#### Example Layout

```yaml
# B for borders
# E for effect icon
# r for random effect
# R for reset effect
# C for close button
# P for previous page
# N for next page
layout:
  - "BBBBBBBBB"
  - "BEEEEEEEB"
  - "BEEEEEEEB"
  - "BEEEEEEEB"
  - "BEEEEEEEB"
  - "PBBrCRBBN"
```

{% endtab %}

{% tab title="Elements" %}

## Properties

<table data-view="cards"><thead><tr><th>Property</th><th>Description</th></tr></thead><tbody><tr><td><code>key</code></td><td>Every character in layout that matches with that element's character will be replaced with that element's item.</td></tr><tr><td><code>item</code></td><td>See <mark style="color:blue;">Item Properties</mark> below.</td></tr></tbody></table>

{% hint style="warning" %}
Every element must have its own unique `key` character.
{% endhint %}

{% hint style="info" %}
`key` characters are case-sensitive.
{% endhint %}

### Example

```yaml
elements:
    borders:
        key: 'B'
        item:
            material: BLACK_STAINED_GLASS_PANE
```

## Available Elements

### Effects GUI

*The GUI that opens when `/trparticles` command is executed.*

| Available Elements |
| ------------------ |
| borders            |
| default-icon       |
| next-page          |
| previous-page      |
| random-effect      |
| reset              |
| close              |
| filter             |
| mixer              |

### Colors GUI

*The color selection GUI.*

| Available Elements |
| ------------------ |
| borders            |
| color-icon         |
| next-page          |
| previous-page      |
| random-color       |
| back               |

### Mixer GUI

*The effect mixer GUI*

| Available Elements |
| ------------------ |
| borders            |
| default-icon       |
| next-page          |
| previous-page      |
| reset              |
| close              |
| filter             |
| confirm            |

### Handlers GUI

{% endtab %}
{% endtabs %}

![GUI Slots](http://i.imgur.com/hkzyTZO.png)