🔧 GTK3 fixes

Makefile

@@ -30,7 +30,7 @@ burn-my-windows@schneegans.github.com.zip: schemas/gschemas.compiled resources/b
 	
 	@echo "Packing zip file..."
 	@rm --force burn-my-windows@schneegans.github.com.zip
-	@zip -r burn-my-windows@schneegans.github.com.zip -- *.js src/*/*.js resources/burn-my-windows.gresource schemas/gschemas.compiled metadata.json LICENSE
+	@zip -r burn-my-windows@schneegans.github.com.zip -- *.js src/*.js resources/burn-my-windows.gresource schemas/gschemas.compiled metadata.json LICENSE
 	
 	@#Check if the zip size is too big to be uploaded
 	@if [[ "$$(stat -c %s burn-my-windows@schneegans.github.com.zip)" -gt 4096000 ]]; then \

README.md

@@ -1,8 +1,4 @@
-<p align="center">
-  <img src ="docs/pics/teaser.gif" />
-</p>
-
-# Set your Windows on Fire!
+# 🔥 Set GNOME Shell on Fire!
 
 <a href="https://github.com/Schneegans/Burn-My-Windows/actions"><img src="https://github.com/Schneegans/Burn-My-Windows/workflows/Checks/badge.svg?branch=main" /></a>
 <a href="LICENSE"><img src="https://img.shields.io/badge/License-GPLv3-blue.svg?labelColor=303030" /></a>
@@ -11,8 +7,51 @@
 When I released the [Desktop Cube Extension](https://github.com/Schneegans/Desktop-Cube/), many people requested to revive one of the most useless features of Linux desktop history: Setting windows on fire!
 This extension is not only more useless than the cube, but it is also much more hacky. So I expect some bug! [Let's incinerate them all](https://github.com/Schneegans/Burn-My-Windows/issues)!
 
+For a list of things changed in previous releases, you can have a look at the [changelog](docs/changelog.md)!
 
-## Installation
+
+Effect | Preview
+-----|--------
+**Energize A** <br> Beam your windows away! | <img src ="docs/pics/energizeA.gif" />
+**Energize B** <br> Using different transporter technology results in an alternative visual effect. | <img src ="docs/pics/energizeB.gif" />
+**Fire** <br> The classic effect inspired by Compiz. However, this is implemented using a GLSL shader and not with a particle system like in the old days. | <img src ="docs/pics/fire.gif" />
+**Matrix** <br> Turn your windows into a shower of green letters! The color is actually configurable. <br><br> _Only available in GNOME Shell 40+_ | <img src ="docs/pics/matrix.gif" />
+**T-Rex Attack** <br> Destroy your windows with a series of violent slashes! <br><br> _Only available in GNOME Shell 40+_ | <img src ="docs/pics/trex.gif" />
+**TV-Effect** <br> This is a very simple effect to demonstrate that this extension could also be used in a more professional environment. | <img src ="docs/pics/tv.gif" />
+**Wisps** <br> Let your windows be carried away to the realm of dreams by these little fairies! | <img src ="docs/pics/wisps.gif" />
+**Your Effect!** <br> The extension is very modular and with a bit of creativity and GLSL knowledge, [you can easily create your own effects](docs/how-to-create-new-effects.md). | [![Create your own effects](docs/pics/custom.jpg)](docs/how-to-create-new-effects.md)
+
+
+## 💞 These People _love_ this Extension
+
+While coding new features is the most awesome way to contribute, providing financial support will help me stay motivated to invest my spare time to keep the project alive in the future.
+
+<h3 align="center">🥇 Current Gold Sponsors</h3>
+<p align="center">
+  <a href="https://github.com/dennis1248">Dennis ten Hoove</a><br>
+</p>
+
+<h3 align="center">🥈 Current Silver Sponsors</h3>
+<p align="center">
+  <a href="https://github.com/MRR-dev">@MRR-dev</a><br>
+  <a href="https://github.com/castrojo">Jorge Castro</a><br>
+</p>
+
+<h3 align="center">🥉 Current Bronze Sponsors</h3>
+<p align="center">
+  <a href="https://github.com/sponsors/Schneegans">Be the first!</a>
+</p>
+
+<h3 align="center">🏅 Previous Sponsors and One-Time Donators</h3>
+<p align="center">
+  <a href="https://github.com/RickStanley">@RickStanley</a><br>
+</p>
+
+
+Do you want to show that you love it too? You may <a href="https://github.com/sponsors/Schneegans">become a sponsor for as little as 1$ / month</a>!
+If you like this extension, you may also want to try one of my other extensions: [🧊 Desktop-Cube](https://github.com/Schneegans/Desktop-Cube) or [🍰 Fly-Pie](https://github.com/Schneegans/Fly-Pie/)!
+
+## ⬇️ Installation
 
 You can either install the Burn-My-Windows extension from extensions.gnome.org (a), download a stable release
 from GitHub (b) or clone the latest version directly with `git` (c).
@@ -74,7 +113,8 @@ gnome-extensions enable burn-my-windows@schneegans.github.com
 ## :octocat: I want to contribute!
 
 That's great!
-Here are some basic rulles to get you started:
+Most likely, you want to [create a new effect](docs/how-to-create-new-effects.md)?
+Here are some basic rules to get you started:
 Commits should start with a Capital letter and should be written in present tense (e.g. __:tada: Add cool new feature__ instead of __:tada: Added cool new feature__).
 You should also start your commit message with **one** applicable emoji.
 This does not only look great but also makes you rethink what to add to a commit. Make many but small commits!

assets/README.md

@@ -0,0 +1,7 @@
+# Notes for `claws.blend`
+
+This is the source file for `resources/img/claws.png`. To generate the image, the animation in `claws.blend` is rendered to 256 PNG files and then combined using this command:
+
+```bash
+convert *.png -average claws.png
+```

docs/changelog.md

@@ -1,5 +1,71 @@
 # Changelog of the Burn-My-Windows Extension
 
+## [Burn My Window 8](https://github.com/schneegans/Burn-My-Windows/releases/tag/v8)
+
+**Release Date:** TBD
+
+#### New Features
+
+* **Random effects!** You can now select a set of effects of which one will be chosen randomly whenever you close a window. **This changes how effects are selected, so you will have to re-select your desired effect(s)**.
+* **New Effect: Energize A.** Beam your windows away!
+* **New Effect: Energize B.** Using different transporter technology results in an alternative visual effect.
+* **New Effect: Wisps.** These little fairies carry your windows to the realm of dreams!
+* Each effect has its own "Animation Time" setting now. The global animation time has been replaced by those, so **you may have to adjust the sliders to match your previous settings**. 
+
+#### Other Enhancements
+
+* A [guide for creating new effects](how-to-create-new-effects.md) has been added.
+* The source code has received a **major refactoring**. This will make the addition of new effects much easier in the future.
+* The **layout of the settings dialog** has been reworked to make it easier to expand it in the future.
+* The lower limit of the **animation time of the TV Effect** has been reduced.
+* The T-Rex-Attack effect is not shown in fully transparent regions of a window any more.
+* The shaders now use a different noise implementation which produces better 3D noise.
+
+#### Fixes
+
+* The extension now works even if GNOME Shell's animations are disabled globally.
+
+
+## [Burn My Window 7](https://github.com/schneegans/Burn-My-Windows/releases/tag/v7)
+
+**Release Date:** 2022-01-03
+
+#### New Features
+
+* An option to use a 3D noise for the fire shader has been added. This will add some more temporal variation to the flames at the cost of slightly decreased rendering performance.
+* A changelog entry has been added to the menu of the preferences dialog.
+
+#### Fixes
+
+* Resolve copyright issues by using a MIT-licensed noise implementation.
+
+
+## [Burn My Window 6](https://github.com/schneegans/Burn-My-Windows/releases/tag/v6)
+
+**Release Date:** 2022-01-02
+
+#### Fixes
+
+* Removed a debug log message.
+
+## [Burn My Window 5](https://github.com/schneegans/Burn-My-Windows/releases/tag/v5)
+
+**Release Date:** 2022-01-02
+
+#### New Features
+
+* Added a new ridiculous close-animation: the T-Rex-Attack!
+* Added a new simple close-animation: the TV-Effect!
+* Added a menu to the preferences dialog with links for bug reporting and donations.
+
+#### Other Enhancements
+
+* The fire shader now uses a `smoothstep` to make it less blocky.
+
+#### Bug Fixes
+
+* Fixed a bug which messed up the overview of GNOME Shell 3.36.
+
 ## [Burn My Window 4](https://github.com/schneegans/Burn-My-Windows/releases/tag/v4)
 
 **Release Date:** 2021-12-25

docs/how-to-create-new-effects.md

@@ -0,0 +1,575 @@
+# 🔥 Creating a new Effect for Burn-My-Windows
+
+The extension is very modular and with a bit of creativity and GLSL knowledge, you can easily create your own effects.
+If you are happy with your results, please open a pull request so that we can include your effect in the next version of Burn-My-Windows!
+
+### Before you Start
+
+First you should [fork the repository](https://github.com/Schneegans/Burn-My-Windows/fork) and clone it to your PC.
+Afterwards, use a terminal in the directory of the cloned repository to install the extension.
+
+```bash
+make install
+```
+
+_:information_source: Whenever you changed something in the source code, you will have to call this command and restart GNOME Shell with <kbd>Alt</kbd> + <kbd>F2</kbd>, <kbd>r</kbd> + <kbd>Enter</kbd>.
+Or logout / login if you are on Wayland to see the changes._
+
+### Debugging
+
+Debugging GNOME Shell extensions is a bit difficult.
+Most of the time, you will print messages to a log in order to understand what is going on.
+To make this a bit more convenient, Burn-My-Windows includes the method `utils.debug("Hello World")`.
+With this, each line will be prefixed with the extension's name, which will make spotting log messages more easy. You can use the following command to watch the log output; it will highlight all messages from Burn-My-Windows:
+
+```bash
+journalctl -f -o cat | grep -E 'burn-my-windows|'
+```
+
+## Adding a new Effect
+
+For the sake of this tutorial, we will create a **"Simple Fade"** effect.
+Of course, you can replace any occurrence of this name and its nick `simple-fade` with your custom effect name.
+
+Three simple steps are required to create a new effect. 
+You will have to ...
+
+1. add a preferences key for enabling the effect,
+2. create an additional effects class, and finally
+3. register the new effect in two places.
+
+### 1. Expanding the Schema
+
+For enabling the new effect, the boolean settings key `simple-fade-close-effect` is required.
+In this example, we also add an integer valued settings key for storing the animation time of the new effect and a floating point value for storing another property of the effect - we will use them later in the tutorial.
+Just copy the XML code below to the file [`schemas/org.gnome.shell.extensions.burn-my-windows.gschema.xml`](../schemas/org.gnome.shell.extensions.burn-my-windows.gschema.xml).
+Just remember to replace `simple-fade` with your custom name!
+
+```xml
+<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
+<!-- Simple Fade Effect Options                                                    -->
+<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
+
+<key name="simple-fade-close-effect" type="b">
+  <default>false</default>
+  <summary>Simple Fade Close Effect</summary>
+  <description>Use the Simple Fade effect for window closing.</description>
+</key>
+
+<key name="simple-fade-animation-time" type="i">
+  <default>1500</default>
+  <summary>Simple Fade Animation Time</summary>
+  <description>The time the Simple Fade effect takes.</description>
+</key>
+
+<key name="simple-fade-width" type="d">
+  <default>0.1</default>
+  <summary>Simple Fade Width</summary>
+  <description>Width of the fading effect.</description>
+</key>
+```
+
+### 2. Creating the Effect Class
+
+You will have to create a new file called `src/SimpleFade.js` and paste the following code to it.
+Please study this code carefully, all of it is explained with inline comments.
+
+<details>
+  <summary>Expand this to show the code.</summary>
+
+```javascript
+//////////////////////////////////////////////////////////////////////////////////////////
+//          )                                                   (                       //
+//       ( /(   (  (               )    (       (  (  (         )\ )    (  (            //
+//       )\()) ))\ )(   (         (     )\ )    )\))( )\  (    (()/( (  )\))(  (        //
+//      ((_)\ /((_|()\  )\ )      )\  '(()/(   ((_)()((_) )\ )  ((_)))\((_)()\ )\       //
+//      | |(_|_))( ((_)_(_/(    _((_))  )(_))  _(()((_|_)_(_/(  _| |((_)(()((_|(_)      //
+//      | '_ \ || | '_| ' \))  | '  \()| || |  \ V  V / | ' \)) _` / _ \ V  V (_-<      //
+//      |_.__/\_,_|_| |_||_|   |_|_|_|  \_, |   \_/\_/|_|_||_|\__,_\___/\_/\_//__/      //
+//                                 |__/                                                 //
+//                       Copyright (c) 2021 Simon Schneegans                            //
+//          Released under the GPLv3 or later. See LICENSE file for details.            //
+//////////////////////////////////////////////////////////////////////////////////////////
+
+'use strict';
+
+const GObject = imports.gi.GObject;
+
+const ExtensionUtils = imports.misc.extensionUtils;
+const Me             = imports.misc.extensionUtils.getCurrentExtension();
+const utils          = Me.imports.src.utils;
+
+//////////////////////////////////////////////////////////////////////////////////////////
+// This effect ...                                                                      //
+// <- Please add a description of your effect here ->                                   //
+//////////////////////////////////////////////////////////////////////////////////////////
+
+// The shader class for this effect is registered further down in this file.
+let Shader = null;
+
+// The effect class is completely static. It can be used to get some metadata (like the
+// effect's name or supported GNOME Shell versions), to initialize the respective page of
+// the settings dialog, as well as to create the actual shader for the effect.
+var SimpleFade = class SimpleFade {
+
+  // ---------------------------------------------------------------------------- metadata
+
+  // The effect is available on all GNOME Shell versions supported by this extension.
+  static getMinShellVersion() {
+    return [3, 36];
+  }
+
+  // This will be called in various places where a unique identifier for this effect is
+  // required. It should match the prefix of the settings keys which store whether the
+  // effect is enabled currently (e.g. the '*-close-effect').
+  static getNick() {
+    return 'simple-fade';
+  }
+
+  // This will be shown in the sidebar of the preferences dialog as well as in the
+  // drop-down menus where the user can choose the effect.
+  static getLabel() {
+    return 'Simple Fade Effect';
+  }
+
+  // -------------------------------------------------------------------- API for prefs.js
+
+  // This is called by the preferences dialog. It loads the settings page for this effect,
+  // binds all properties to the settings and appends the page to the main stack of the
+  // preferences dialog.
+  static initPreferences(dialog) {
+    // Empty for now... Code is added here later in the tutorial!
+  }
+
+  // ---------------------------------------------------------------- API for extension.js
+
+  // This is called from extension.js whenever a window is closed with this effect.
+  static createShader(settings) {
+    return new Shader(settings);
+  }
+
+  // This is also called from extension.js. It is used to tweak the ongoing transitions of
+  // the actor - usually windows are faded to transparency and scaled down slightly by
+  // GNOME Shell. Here, we modify this behavior as well as the transition duration.
+  static tweakTransitions(actor, settings) {
+    const animationTime = settings.get_int('simple-fade-animation-time');
+
+    const tweakTransition = (property, value) => {
+      const transition = actor.get_transition(property);
+      if (transition) {
+        transition.set_to(value);
+        transition.set_duration(animationTime);
+      }
+    };
+
+    // We re-target these transitions so that the window is neither scaled nor faded.
+    tweakTransition('opacity', 255);
+    tweakTransition('scale-x', 1);
+    tweakTransition('scale-y', 1);
+  }
+}
+
+
+//////////////////////////////////////////////////////////////////////////////////////////
+// The shader class for this effect will only be registered in GNOME Shell's process    //
+// (not in the preferences process). It's done this way as Clutter may not be installed //
+// on the system and therefore the preferences would crash.                             //
+//////////////////////////////////////////////////////////////////////////////////////////
+
+if (utils.isInShellProcess()) {
+
+  const Clutter        = imports.gi.Clutter;
+  const shaderSnippets = Me.imports.src.shaderSnippets;
+
+  Shader = GObject.registerClass({}, class Shader extends Clutter.ShaderEffect {
+    _init(settings) {
+      super._init({shader_type: Clutter.ShaderType.FRAGMENT_SHADER});
+
+      this.set_shader_source(`
+
+        // The code below injects some standard uniforms which will be updated during the
+        // animation. This includes:
+        // uTexture:    Contains the texture of the window.
+        // uProgress:   A value which transitions from 0 to 1 during the entire animation.
+        // uTime:       A steadily increasing value in seconds.
+        // uSizeX:      The horizontal size of uTexture in pixels.
+        // uSizeY:      The vertical size of uTexture in pixels.
+        ${shaderSnippets.standardUniforms()}
+
+        // The width of the fading effect is directly loaded from the settings.
+        const float FADE_WIDTH = ${settings.get_double('simple-fade-width')};
+
+        void main() {
+
+          // Get the color from the window texture.
+          vec4 windowColor = texture2D(uTexture, cogl_tex_coord_in[0].st);
+
+          // Radial distance from window edge to the window's center.
+          float dist = length(cogl_tex_coord_in[0].st - 0.5) * 2.0 / sqrt(2.0);
+
+          // This gradually dissolves from [1..0] from the outside to the center.
+          float mask = (1.0 - uProgress * (1.0 + FADE_WIDTH) - dist + FADE_WIDTH) / FADE_WIDTH;
+
+          // Make the mask smoother.
+          mask = smoothstep(0, 1, mask);
+
+          // Set the final output color. This uses premultiplied alpha.
+          cogl_color_out = windowColor * mask;
+        }
+      `);
+    };
+  });
+}
+```
+
+</details>
+
+### 3. Registering the new Effect
+
+You will have to register the new effect in two files.
+Both, [`extension.js`](../extension.js) and [`prefs.js`](../prefs.js) define an array in the beginning where you have to add an import to your new effect.
+Like this:
+
+```javascript
+const ALL_EFFECTS = [
+  ...
+  Me.imports.src.SimpleFade.SimpleFade,
+  ...
+];
+```
+
+
+
+### Testing your Effect
+
+Now you can call `make install` and restart GNOME Shell with <kbd>Alt</kbd> + <kbd>F2</kbd>, <kbd>r</kbd> + <kbd>Enter</kbd>.
+Or logout / login if you are on Wayland.
+You can open the extension's preferences and choose the new effect!
+However, there are no configuration options yet.
+It is also not possible to adjust the animation time setting.
+
+```bash
+gnome-extensions prefs burn-my-windows@schneegans.github.com
+```
+
+## Adding a Preferences Page
+
+There should be two sliders in this example: The animation duration and the width of the fading gradient.
+
+If your effect supports GNOME Shell 3.3x _and_ GNOME Shell 40+, you will have to provide two `*.ui` files for this.
+This is because starting with GNOME Shell 40, the preference dialog uses GTK4, before it used to use GTK3.
+Usually, there are only a few minor differences between the two files.
+We will load the respective file in the `initPreferences()` method of your new effect class.
+
+Just save the code below to `resources/ui/gtk3/SimpleFade.ui` and `resources/ui/gtk4/SimpleFade.ui` respectively.
+Remember to replace any occurrence of `simple-fade` with your effect's nick-name!
+
+<details>
+  <summary>Expand this to show the GTK3 code.</summary>
+
+```xml
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+
+  <object class="GtkAdjustment" id="simple-fade-animation-time">
+    <property name="upper">5000</property>
+    <property name="lower">100</property>
+    <property name="step-increment">10</property>
+    <property name="page-increment">100</property>
+  </object>
+
+  <object class="GtkAdjustment" id="simple-fade-width">
+    <property name="upper">1</property>
+    <property name="lower">0</property>
+    <property name="step-increment">0.01</property>
+    <property name="page-increment">0.1</property>
+  </object>
+
+  <object class="GtkBox" id="simple-fade-prefs">
+    <property name="orientation">vertical</property>
+    <property name="margin-start">60</property>
+    <property name="margin-end">60</property>
+    <property name="margin-top">60</property>
+    <property name="margin-bottom">60</property>
+
+    <child>
+      <object class="GtkFrame">
+        <child>
+          <object class="GtkListBox">
+            <property name="selection-mode">none</property>
+            <style>
+              <class name="rich-list" />
+            </style>
+
+            <child>
+              <object class="GtkListBoxRow">
+                <property name="margin-start">10</property>
+                <property name="margin-end">10</property>
+                <property name="margin-top">10</property>
+                <property name="margin-bottom">10</property>
+                <property name="activatable">0</property>
+                <child>
+                  <object class="GtkBox">
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="label" translatable="yes">Animation Time [ms]</property>
+                        <property name="xalign">0</property>
+                        <property name="halign">start</property>
+                        <property name="valign">center</property>
+                        <property name="hexpand">1</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkScale">
+                        <property name="halign">end</property>
+                        <property name="valign">center</property>
+                        <property name="draw-value">1</property>
+                        <property name="digits">0</property>
+                        <property name="value-pos">left</property>
+                        <property name="width-request">300</property>
+                        <property name="adjustment">simple-fade-animation-time</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkButton" id="reset-simple-fade-animation-time">
+                        <child>
+                          <object class="GtkImage">
+                            <property name="icon-name">edit-clear-symbolic</property>
+                            <property name="icon-size">1</property>
+                          </object>
+                        </child>
+                        <property name="tooltip-text">Reset to Default Value</property>
+                        <style>
+                          <class name="flat" />
+                        </style>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+
+            <child>
+              <object class="GtkListBoxRow">
+                <property name="margin-start">10</property>
+                <property name="margin-end">10</property>
+                <property name="margin-top">10</property>
+                <property name="margin-bottom">10</property>
+                <property name="activatable">0</property>
+                <child>
+                  <object class="GtkBox">
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="label" translatable="yes">Fade Width</property>
+                        <property name="xalign">0</property>
+                        <property name="halign">start</property>
+                        <property name="valign">center</property>
+                        <property name="hexpand">1</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkScale">
+                        <property name="halign">end</property>
+                        <property name="valign">center</property>
+                        <property name="draw-value">1</property>
+                        <property name="digits">2</property>
+                        <property name="value-pos">left</property>
+                        <property name="width-request">300</property>
+                        <property name="adjustment">simple-fade-width</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkButton" id="reset-simple-fade-width">
+                        <child>
+                          <object class="GtkImage">
+                            <property name="icon-name">edit-clear-symbolic</property>
+                            <property name="icon-size">1</property>
+                          </object>
+                        </child>
+                        <property name="tooltip-text">Reset to Default Value</property>
+                        <style>
+                          <class name="flat" />
+                        </style>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+
+          </object>
+        </child>
+      </object>
+    </child>
+
+  </object>
+
+</interface>
+```
+
+</details>
+
+<details>
+  <summary>Expand this to show the GTK4 code.</summary>
+
+```xml
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+
+  <object class="GtkAdjustment" id="simple-fade-animation-time">
+    <property name="upper">5000</property>
+    <property name="lower">100</property>
+    <property name="step-increment">10</property>
+    <property name="page-increment">100</property>
+  </object>
+
+  <object class="GtkAdjustment" id="simple-fade-width">
+    <property name="upper">1</property>
+    <property name="lower">0</property>
+    <property name="step-increment">0.01</property>
+    <property name="page-increment">0.1</property>
+  </object>
+
+  <object class="GtkBox" id="simple-fade-prefs">
+    <property name="orientation">vertical</property>
+    <property name="margin-start">60</property>
+    <property name="margin-end">60</property>
+    <property name="margin-top">60</property>
+    <property name="margin-bottom">60</property>
+
+    <child>
+      <object class="GtkFrame">
+        <child>
+          <object class="GtkListBox">
+            <property name="selection-mode">none</property>
+            <property name="show-separators">1</property>
+            <style>
+              <class name="rich-list" />
+            </style>
+
+            <child>
+              <object class="GtkListBoxRow">
+                <property name="activatable">0</property>
+                <child>
+                  <object class="GtkBox">
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="label" translatable="yes">Animation Time [ms]</property>
+                        <property name="xalign">0</property>
+                        <property name="halign">start</property>
+                        <property name="valign">center</property>
+                        <property name="hexpand">1</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkScale">
+                        <property name="halign">end</property>
+                        <property name="valign">center</property>
+                        <property name="draw-value">1</property>
+                        <property name="digits">0</property>
+                        <property name="value-pos">left</property>
+                        <property name="width-request">300</property>
+                        <property name="adjustment">simple-fade-animation-time</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkButton" id="reset-simple-fade-animation-time">
+                        <property name="icon-name">edit-clear-symbolic</property>
+                        <property name="tooltip-text">Reset to Default Value</property>
+                        <style>
+                          <class name="flat" />
+                        </style>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+
+            <child>
+              <object class="GtkListBoxRow">
+                <property name="activatable">0</property>
+                <child>
+                  <object class="GtkBox">
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="label" translatable="yes">Fade Width</property>
+                        <property name="xalign">0</property>
+                        <property name="halign">start</property>
+                        <property name="valign">center</property>
+                        <property name="hexpand">1</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkScale">
+                        <property name="halign">end</property>
+                        <property name="valign">center</property>
+                        <property name="draw-value">1</property>
+                        <property name="digits">2</property>
+                        <property name="value-pos">left</property>
+                        <property name="width-request">300</property>
+                        <property name="adjustment">simple-fade-width</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkButton" id="reset-simple-fade-width">
+                        <property name="icon-name">edit-clear-symbolic</property>
+                        <property name="tooltip-text">Reset to Default Value</property>
+                        <style>
+                          <class name="flat" />
+                        </style>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+
+          </object>
+        </child>
+      </object>
+    </child>
+
+  </object>
+
+</interface>
+```
+
+</details>
+
+### Loading the Preferences Page
+
+In order to load the above `*.ui` files, add the following code to your effect's `initPreferences()` method.
+
+```javascript
+static initPreferences(dialog) {
+
+  // Add the settings page to the builder.
+  dialog.getBuilder().add_from_resource(`/ui/${utils.getGTKString()}/SimpleFade.ui`);
+
+  // These connect the settings to the UI elements. Have a look at prefs.js
+  // on how to bind other types of UI elements.
+  dialog.bindAdjustment('simple-fade-animation-time');
+  dialog.bindAdjustment('simple-fade-width');
+
+  // Finally, append the settings page to the main stack.
+  const stack = dialog.getBuilder().get_object('main-stack');
+  stack.add_titled(
+      dialog.getBuilder().get_object(SimpleFade.getNick() + '-prefs'),
+      SimpleFade.getNick(), SimpleFade.getLabel());
+  }
+```
+
+Once this is in place, you can kill the extension-preferences process and re-open the settings.
+It is not required to reload GNOME Shell for developing the preferences dialog!
+Here's a handy one-liner to do this:
+
+```bash
+make install && pkill -f '.Extensions' && sleep 2 ; gnome-extensions prefs burn-my-windows@schneegans.github.com
+```
+
+## Summing Up
+
+That's it!
+If you have any questions, feel free to [ask them on the discussions board](https://github.com/Schneegans/Burn-My-Windows/discussions).
+If you are happy with your effect, submit a pull request, and it may get included in the next version!

docs/pics/README.md

@@ -0,0 +1,7 @@
+# Preview GIFs
+
+The preview GIFs are recorded with OBS Studio and converted to a GIF with the following command:
+
+```bash
+gifski --fps 30 -W 400 -H 225 -o effect.gif effect.mp4
+```

extension.js

@@ -21,15 +21,27 @@ const WINDOW_REPOSITIONING_DELAY = imports.ui.workspace.WINDOW_REPOSITIONING_DEL
 
 const ExtensionUtils = imports.misc.extensionUtils;
 const Me             = imports.misc.extensionUtils.getCurrentExtension();
-const utils          = Me.imports.src.common.utils;
-const FireShader     = Me.imports.src.extension.FireShader.FireShader;
-const MatrixShader   = Me.imports.src.extension.MatrixShader.MatrixShader;
+const utils          = Me.imports.src.utils;
+
+// New effects must be registered here and in prefs.js.
+const ALL_EFFECTS = [
+  Me.imports.src.EnergizeA.EnergizeA,
+  Me.imports.src.EnergizeB.EnergizeB,
+  Me.imports.src.Fire.Fire,
+  Me.imports.src.Matrix.Matrix,
+  Me.imports.src.TRexAttack.TRexAttack,
+  Me.imports.src.TVEffect.TVEffect,
+  Me.imports.src.Wisps.Wisps,
+];
 
 //////////////////////////////////////////////////////////////////////////////////////////
 // This extensions modifies the window-close animation to look like the window was set  //
-// on fire. While this is definitely a homage to the good old Compiz plugin, it is      //
-// implemented differently. While Compiz used a particle system, this extension uses a  //
-// perlin noise shader.                                                                 //
+// on fire. There are also a few other effects available. All of them are implemented   //
+// using GLSL shaders which are applied to the window's Clutter.Actor. The extension is //
+// actually very simple, most of the complexity comes from the fact that GNOME Shell    //
+// usually does not show an animation when a window is closed in the overview. Several  //
+// methods need to be monkey-patched to get this working. For more details, read the    //
+// other comments in this file...                                                       //
 //////////////////////////////////////////////////////////////////////////////////////////
 
 class Extension {
@@ -50,31 +62,26 @@ class Extension {
     // We will monkey-patch these three methods. Let's store the original ones.
     this._origWindowRemoved      = Workspace.prototype._windowRemoved;
     this._origDoRemoveWindow     = Workspace.prototype._doRemoveWindow;
+    this._origAddWindowClone     = Workspace.prototype._addWindowClone;
     this._origShouldAnimateActor = WindowManager.prototype._shouldAnimateActor;
 
-    // We may also override these animation times.
-    this._origWindowTime = imports.ui.windowManager.DESTROY_WINDOW_ANIMATION_TIME;
-    this._origDialogTime = imports.ui.windowManager.DIALOG_DESTROY_WINDOW_ANIMATION_TIME;
-
-    // Update animation times if the respective settings are changed.
-    const loadAnimationTimes = () => {
-      imports.ui.windowManager.DESTROY_WINDOW_ANIMATION_TIME =
-          this._settings.get_int('destroy-animation-time');
-
-      imports.ui.windowManager.DIALOG_DESTROY_WINDOW_ANIMATION_TIME =
-          this._settings.get_boolean('destroy-dialogs') ?
-          this._settings.get_int('destroy-animation-time') :
-          this._origDialogTime;
-    };
-
-    this._settings.connect('changed::destroy-animation-time', loadAnimationTimes);
-    this._settings.connect('changed::destroy-dialogs', loadAnimationTimes);
-    loadAnimationTimes();
-
     // We will use extensionThis to refer to the extension inside the patched methods of
     // the WorkspacesView.
     const extensionThis = this;
 
+    // On GNOME 3.36, the window clone's 'destroy' handler only calls _removeWindowClone
+    // but not _doRemoveWindow. The latter is required to trigger the repositioning of the
+    // overview window layout. Therefore we call this method in addition.
+    // https://gitlab.gnome.org/GNOME/gnome-shell/-/blob/gnome-3-36/js/ui/workspace.js#L1877
+    // https://gitlab.gnome.org/GNOME/gnome-shell/-/blob/main/js/ui/workspace.js#L1415
+    if (utils.shellVersionIs(3, 36)) {
+      Workspace.prototype._addWindowClone = function(...params) {
+        const [clone, overlay] = extensionThis._origAddWindowClone.apply(this, params);
+        clone.connect('destroy', () => this._doRemoveWindow(clone.metaWindow));
+        return [clone, overlay];
+      };
+    }
+
     // These three method overrides are mega-hacky! They are only required to make the
     // fire animation work in the overview. Usually, windows are not faded when closed
     // from the overview (why?). With these overrides we make sure that they are actually
@@ -104,11 +111,11 @@ class Extension {
     // whether it was called by _destroyWindow. If so, we return true. Let's see if this
     // breaks stuff left and right...
     // https://gitlab.gnome.org/GNOME/gnome-shell/-/blob/main/js/ui/windowManager.js#L1125
-    WindowManager.prototype._shouldAnimateActor = function(actor, types) {
+    WindowManager.prototype._shouldAnimateActor = function(...params) {
       if ((new Error()).stack.split('\n')[1].includes('_destroyWindow@')) {
         return true;
       }
-      return extensionThis._origShouldAnimateActor.apply(this, [actor, types]);
+      return extensionThis._origShouldAnimateActor.apply(this, params);
     };
 
     // The close animation is set up in WindowManager's _destroyWindow:
@@ -132,29 +139,24 @@ class Extension {
         return;
       }
 
-      // If there's a transition in progress, we re-target these transitions so that the
-      // window is neither scaled nor faded.
-      const tweakTransition = (property, value) => {
-        const transition = actor.get_transition(property);
-        if (transition) {
-          transition.set_to(value);
-          transition.set_progress_mode(Clutter.AnimationMode.EASE_OUT_QUAD);
-        }
-      };
+      // Create a list of all currently enabled effects.
+      const enabledEffects = ALL_EFFECTS.filter(Effect => {
+        return this._settings.get_boolean(`${Effect.getNick()}-close-effect`);
+      });
 
-      tweakTransition('opacity', 255);
-      tweakTransition('scale-x', 1);
-      tweakTransition('scale-y', 1);
+      // Nothing is enabled...
+      if (enabledEffects.length == 0) {
+        return;
+      }
 
-      let shader = null;
+      // Choose a random effect.
+      const Effect = enabledEffects[Math.floor(Math.random() * enabledEffects.length)];
+
+      // The effect usually will choose to override the present transitions on the actor.
+      Effect.tweakTransitions(actor, this._settings);
 
       // Add a cool shader to our window actor!
-      const mode = this._settings.get_enum('close-animation');
-      if (mode == 1) {
-        shader = new FireShader(this._settings);
-      } else if (mode == 2) {
-        shader = new MatrixShader(this._settings);
-      }
+      const shader = Effect.createShader(this._settings);
 
       if (shader) {
         actor.add_effect(shader);
@@ -182,11 +184,9 @@ class Extension {
 
     Workspace.prototype._windowRemoved          = this._origWindowRemoved;
     Workspace.prototype._doRemoveWindow         = this._origDoRemoveWindow;
+    Workspace.prototype._addWindowClone         = this._origAddWindowClone;
     WindowManager.prototype._shouldAnimateActor = this._origShouldAnimateActor;
 
-    imports.ui.windowManager.DESTROY_WINDOW_ANIMATION_TIME        = this._origWindowTime;
-    imports.ui.windowManager.DIALOG_DESTROY_WINDOW_ANIMATION_TIME = this._origDialogTime;
-
     this._settings = null;
   }
 
@@ -200,7 +200,9 @@ class Extension {
       return true;
     }
 
-    const actor = workspace._windows[index]._windowActor;
+    // This was called "realWindow" in GNOME 3.36.
+    const propertyName = utils.shellVersionIs(3, 36) ? 'realWindow' : '_windowActor';
+    const actor        = workspace._windows[index][propertyName];
     if (!actor.get_transition('scale-y')) {
       return true;
     }

metadata.json

@@ -1,6 +1,6 @@
 {
     "uuid": "burn-my-windows@schneegans.github.com",
-    "description": "Disintegrate your apps the old-school way.",
+    "description": "Disintegrate your apps with style.",
     "name": "Burn My Windows",
     "gettext-domain": "burn-my-windows",
     "settings-schema": "org.gnome.shell.extensions.burn-my-windows",
@@ -11,5 +11,5 @@
         "41"
     ],
     "url": "https://github.com/Schneegans/Burn-My-Windows",
-    "version": 4
+    "version": 8
 }

prefs.js

@@ -17,14 +17,27 @@ const {Gio, Gtk, Gdk} = imports.gi;
 
 const ExtensionUtils = imports.misc.extensionUtils;
 const Me             = imports.misc.extensionUtils.getCurrentExtension();
-const utils          = Me.imports.src.common.utils;
+const utils          = Me.imports.src.utils;
+
+// New effects must be registered here and in extension.js.
+const ALL_EFFECTS = [
+  Me.imports.src.EnergizeA.EnergizeA,
+  Me.imports.src.EnergizeB.EnergizeB,
+  Me.imports.src.Fire.Fire,
+  Me.imports.src.Matrix.Matrix,
+  Me.imports.src.TRexAttack.TRexAttack,
+  Me.imports.src.TVEffect.TVEffect,
+  Me.imports.src.Wisps.Wisps,
+];
 
 //////////////////////////////////////////////////////////////////////////////////////////
-// For now, the preferences dialog of this extension is very simple. In the future, if  //
-// we might consider to improve its layout...                                           //
+// The preferences dialog is organized in pages, each of which is loaded from a         //
+// separate ui file. There's one page with general options, all other paged are loaded  //
+// from the respective effects.                                                         //
 //////////////////////////////////////////////////////////////////////////////////////////
 
 var PreferencesDialog = class PreferencesDialog {
+
   // ------------------------------------------------------------ constructor / destructor
 
   constructor() {
@@ -32,43 +45,90 @@ var PreferencesDialog = class PreferencesDialog {
     this._resources = Gio.Resource.load(Me.path + '/resources/burn-my-windows.gresource');
     Gio.resources_register(this._resources);
 
-    // Load the user interface file.
-    this._builder = new Gtk.Builder();
-    this._builder.add_from_resource(`/ui/${utils.gtk4() ? 'gtk4' : 'gtk3'}.ui`);
-
-    // This is our top-level widget which we will return later.
-    this._widget = this._builder.get_object('settings-widget');
+    // Make sure custom icons are found.
+    if (utils.isGTK4()) {
+      Gtk.IconTheme.get_for_display(Gdk.Display.get_default()).add_resource_path('/img');
+    } else {
+      Gtk.IconTheme.get_default().add_resource_path('/img');
+    }
 
     // Store a reference to the settings object.
     this._settings = ExtensionUtils.getSettings();
 
-    // Bind all properties.
-    this._bindCombobox('close-animation');
-    this._bindAdjustment('destroy-animation-time');
-    this._bindSwitch('destroy-dialogs');
-    this._bindAdjustment('flame-movement-speed');
-    this._bindAdjustment('flame-scale');
-    this._bindColorButton('fire-color-1');
-    this._bindColorButton('fire-color-2');
-    this._bindColorButton('fire-color-3');
-    this._bindColorButton('fire-color-4');
-    this._bindColorButton('fire-color-5');
-    this._bindAdjustment('matrix-scale');
-    this._bindAdjustment('matrix-randomness');
-    this._bindColorButton('matrix-trail-color');
-    this._bindColorButton('matrix-tip-color');
+    // Load the general user interface files.
+    this._builder = new Gtk.Builder();
+    this._builder.add_from_resource(`/ui/common/main-menu.ui`);
+    this._builder.add_from_resource(`/ui/${utils.getGTKString()}/prefs.ui`);
 
-    // The fire-gradient-reset button needs to by bound explicitly.
-    this._builder.get_object('reset-fire-colors').connect('clicked', () => {
-      this._settings.reset('fire-color-1');
-      this._settings.reset('fire-color-2');
-      this._settings.reset('fire-color-3');
-      this._settings.reset('fire-color-4');
-      this._settings.reset('fire-color-5');
+    // Bind general options properties.
+    this.bindSwitch('destroy-dialogs');
+
+    // Add all other effect pages.
+    ALL_EFFECTS.forEach(Effect => {
+      const [minMajor, minMinor] = Effect.getMinShellVersion();
+      if (utils.shellVersionIsAtLeast(minMajor, minMinor)) {
+        Effect.initPreferences(this);
+      }
     });
 
-    // Initialize the fire-preset dropdown.
-    this._createFirePresets();
+    // This is our top-level widget which we will return later.
+    this._widget = this._builder.get_object('settings-widget');
+
+    // Some things can only be done once the widget is shown as we do not have access to
+    // the toplevel widget before.
+    this._widget.connect('realize', (widget) => {
+      const window = utils.isGTK4() ? widget.get_root() : widget.get_toplevel();
+
+      // Show the version number in the title bar.
+      window.set_title(`Burn-My-Windows ${Me.metadata.version}`);
+
+      // Add the main menu to the title bar.
+      {
+        // Add the menu button to the title bar.
+        const menu = this._builder.get_object('menu-button');
+        window.get_titlebar().pack_end(menu);
+
+        // Populate the menu with actions.
+        const group = Gio.SimpleActionGroup.new();
+        window.insert_action_group('prefs', group);
+
+        const addAction = (name, uri) => {
+          const action = Gio.SimpleAction.new(name, null);
+          action.connect('activate', () => Gtk.show_uri(null, uri, Gdk.CURRENT_TIME));
+          group.add_action(action);
+        };
+
+        // clang-format off
+        addAction('homepage',      'https://github.com/Schneegans/Burn-My-Windows');
+        addAction('changelog',     'https://github.com/Schneegans/Burn-My-Windows/blob/main/docs/changelog.md');
+        addAction('bugs',          'https://github.com/Schneegans/Burn-My-Windows/issues');
+        addAction('donate-paypal', 'https://www.paypal.com/donate/?hosted_button_id=3F7UFL8KLVPXE');
+        addAction('donate-github', 'https://github.com/sponsors/Schneegans');
+        // clang-format on
+      }
+
+      // Populate the close-effects drop-down menu.
+      {
+        const menu  = this._builder.get_object('close-effect-menu');
+        const group = Gio.SimpleActionGroup.new();
+        window.insert_action_group('close-effects', group);
+
+        ALL_EFFECTS.forEach(Effect => {
+          const [minMajor, minMinor] = Effect.getMinShellVersion();
+          if (utils.shellVersionIsAtLeast(minMajor, minMinor)) {
+            const nick       = Effect.getNick();
+            const label      = Effect.getLabel();
+            const actionName = nick + '-close-effect';
+            const fullName   = 'close-effects.' + actionName;
+
+            const action = this._settings.create_action(actionName);
+            group.add_action(action);
+
+            menu.append_item(Gio.MenuItem.new(label, fullName));
+          }
+        });
+      }
+    });
 
     // As we do not have something like a destructor, we just listen for the destroy
     // signal of our main widget.
@@ -78,42 +138,51 @@ var PreferencesDialog = class PreferencesDialog {
     });
 
     // Show the widgets on GTK3.
-    if (!utils.gtk4()) {
+    if (!utils.isGTK4()) {
       this._widget.show_all();
     }
   }
 
   // -------------------------------------------------------------------- public interface
 
+  // Returns the internally used Gtk.Builder. Effects can use this to modify the UI of the
+  // preferences dialog.
+  getBuilder() {
+    return this._builder;
+  }
+
+  // Returns a Gio.Settings object for this extension.
+  getSettings() {
+    return this._settings;
+  }
+
   // Returns the widget used for the settings of this extension.
   getWidget() {
     return this._widget;
   }
 
-  // ----------------------------------------------------------------------- private stuff
-
   // Connects a Gtk.ComboBox (or anything else which has an 'active-id' property) to a
   // settings key. It also binds the corresponding reset button.
-  _bindCombobox(settingsKey) {
+  bindCombobox(settingsKey) {
     this._bind(settingsKey, 'active-id');
   }
 
   // Connects a Gtk.Adjustment (or anything else which has a 'value' property) to a
   // settings key. It also binds the corresponding reset button.
-  _bindAdjustment(settingsKey) {
+  bindAdjustment(settingsKey) {
     this._bind(settingsKey, 'value');
   }
 
   // Connects a Gtk.Switch (or anything else which has an 'active' property) to a settings
   // key. It also binds the corresponding reset button.
-  _bindSwitch(settingsKey) {
+  bindSwitch(settingsKey) {
     this._bind(settingsKey, 'active');
   }
 
   // Colors are stored as strings like 'rgb(1, 0.5, 0)'. As Gio.Settings.bind_with_mapping
   // is not available yet, we need to do the color conversion manually. It also binds the
   // corresponding reset button.
-  _bindColorButton(settingsKey) {
+  bindColorButton(settingsKey) {
 
     const button = this._builder.get_object(settingsKey);
 
@@ -140,17 +209,7 @@ var PreferencesDialog = class PreferencesDialog {
     this._bindResetButton(settingsKey);
   }
 
-  // Connects any widget's property to a settings key. The widget must have the same ID as
-  // the settings key. It also binds the corresponding reset button.
-  _bind(settingsKey, property) {
-    const object = this._builder.get_object(settingsKey);
-
-    if (object) {
-      this._settings.bind(settingsKey, object, property, Gio.SettingsBindFlags.DEFAULT);
-    }
-
-    this._bindResetButton(settingsKey);
-  }
+  // ----------------------------------------------------------------------- private stuff
 
   // Searches for a reset button for the given settings key and make it reset the settings
   // key when clicked.
@@ -163,91 +222,16 @@ var PreferencesDialog = class PreferencesDialog {
     }
   }
 
-  // This populates the preset dropdown menu for the fire options.
-  _createFirePresets() {
-    this._widget.connect('realize', (widget) => {
-      const presets = [
-        {
-          name: 'Default Fire',
-          scale: 1.0,
-          speed: 0.5,
-          color1: 'rgba(76, 51, 25, 0.0)',
-          color2: 'rgba(180, 55, 30, 0.7)',
-          color3: 'rgba(255, 76, 38, 0.9)',
-          color4: 'rgba(255, 166, 25, 1)',
-          color5: 'rgba(255, 255, 255, 1)'
-        },
-        {
-          name: 'Hell Fire',
-          scale: 1.5,
-          speed: 0.2,
-          color1: 'rgba(0,0,0,0)',
-          color2: 'rgba(103,7,80,0.5)',
-          color3: 'rgba(150,0,24,0.9)',
-          color4: 'rgb(255,200,0)',
-          color5: 'rgba(255, 255, 255, 1)'
-        },
-        {
-          name: 'Dark and Smutty',
-          scale: 1.0,
-          speed: 0.5,
-          color1: 'rgba(0,0,0,0)',
-          color2: 'rgba(36,3,0,0.5)',
-          color3: 'rgba(150,0,24,0.9)',
-          color4: 'rgb(255,177,21)',
-          color5: 'rgb(255,238,166)'
-        },
-        {
-          name: 'Cold Breeze',
-          scale: 1.5,
-          speed: -0.1,
-          color1: 'rgba(0,110,255,0)',
-          color2: 'rgba(30,111,180,0.24)',
-          color3: 'rgba(38,181,255,0.54)',
-          color4: 'rgba(34,162,255,0.84)',
-          color5: 'rgb(97,189,255)'
-        },
-        {
-          name: 'Santa is Coming',
-          scale: 0.4,
-          speed: -0.5,
-          color1: 'rgba(0,110,255,0)',
-          color2: 'rgba(208,233,255,0.24)',
-          color3: 'rgba(207,235,255,0.84)',
-          color4: 'rgb(208,243,255)',
-          color5: 'rgb(255,255,255)'
-        }
-      ];
+  // Connects any widget's property to a settings key. The widget must have the same ID as
+  // the settings key. It also binds the corresponding reset button.
+  _bind(settingsKey, property) {
+    const object = this._builder.get_object(settingsKey);
 
-      const menu      = Gio.Menu.new();
-      const group     = Gio.SimpleActionGroup.new();
-      const groupName = 'presets';
+    if (object) {
+      this._settings.bind(settingsKey, object, property, Gio.SettingsBindFlags.DEFAULT);
+    }
 
-      // Add all presets.
-      presets.forEach((preset, i) => {
-        const actionName = 'fire' + i;
-        menu.append(preset.name, groupName + '.' + actionName);
-        let action = Gio.SimpleAction.new(actionName, null);
-
-        // Load the preset on activation.
-        action.connect('activate', () => {
-          this._settings.set_double('flame-movement-speed', preset.speed);
-          this._settings.set_double('flame-scale', preset.scale);
-          this._settings.set_string('fire-color-1', preset.color1);
-          this._settings.set_string('fire-color-2', preset.color2);
-          this._settings.set_string('fire-color-3', preset.color3);
-          this._settings.set_string('fire-color-4', preset.color4);
-          this._settings.set_string('fire-color-5', preset.color5);
-        });
-
-        group.add_action(action);
-      });
-
-      this._builder.get_object('fire-preset-button').set_menu_model(menu);
-
-      const root = utils.gtk4() ? widget.get_root() : widget.get_toplevel();
-      root.insert_action_group(groupName, group);
-    });
+    this._bindResetButton(settingsKey);
   }
 }
 

resources/ui/common/main-menu.ui

@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <menu id="main-menu">
+    <section>
+      <item>
+        <attribute name="label" translatable="yes">Visit Homepage</attribute>
+        <attribute name="action">prefs.homepage</attribute>
+      </item>
+      <item>
+        <attribute name="label" translatable="yes">View Changelog</attribute>
+        <attribute name="action">prefs.changelog</attribute>
+      </item>
+      <item>
+        <attribute name="label" translatable="yes">Report a Bug</attribute>
+        <attribute name="action">prefs.bugs</attribute>
+      </item>
+    </section>
+    <section>
+      <submenu>
+        <attribute name="label" translatable="yes">Donate</attribute>
+        <item>
+          <attribute name="label" translatable="yes">Via PayPal</attribute>
+          <attribute name="action">prefs.donate-paypal</attribute>
+        </item>
+        <item>
+          <attribute name="label" translatable="yes">Via GitHub</attribute>
+          <attribute name="action">prefs.donate-github</attribute>
+        </item>
+      </submenu>
+    </section>
+  </menu>
+</interface>

resources/ui/gtk3.ui

@@ -1,689 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<interface domain="desktop-cube">
-  <requires lib="gtk" version="3.0" />
-
-  <object class="GtkListStore" id="animation-mode-list">
-    <columns>
-      <column type="gchararray" />
-      <column type="gchararray" />
-    </columns>
-    <data>
-      <row>
-        <col id="0">Fire</col>
-        <col id="1">fire</col>
-      </row>
-      <row>
-        <col id="0">Matrix</col>
-        <col id="1">matrix</col>
-      </row>
-    </data>
-  </object>
-
-  <object class="GtkAdjustment" id="destroy-animation-time">
-    <property name="upper">10000</property>
-    <property name="lower">500</property>
-    <property name="step-increment">10</property>
-    <property name="page-increment">100</property>
-  </object>
-
-  <object class="GtkAdjustment" id="flame-scale">
-    <property name="upper">3</property>
-    <property name="lower">0.1</property>
-    <property name="step-increment">0.01</property>
-    <property name="page-increment">0.1</property>
-  </object>
-
-  <object class="GtkAdjustment" id="flame-movement-speed">
-    <property name="upper">2.0</property>
-    <property name="lower">-2.0</property>
-    <property name="step-increment">0.01</property>
-    <property name="page-increment">0.1</property>
-  </object>
-
-  <object class="GtkAdjustment" id="matrix-scale">
-    <property name="upper">50</property>
-    <property name="lower">5</property>
-    <property name="step-increment">1</property>
-    <property name="page-increment">5</property>
-  </object>
-
-  <object class="GtkAdjustment" id="matrix-randomness">
-    <property name="upper">1</property>
-    <property name="lower">0</property>
-    <property name="step-increment">0.01</property>
-    <property name="page-increment">0.1</property>
-  </object>
-
-  <object class="GtkScrolledWindow" id="settings-widget">
-    <property name="hscrollbar-policy">never</property>
-    <property name="min-content-height">200</property>
-    <property name="hexpand">0</property>
-    <property name="vexpand">1</property>
-    <child>
-      <object class="GtkViewport">
-        <child>
-          <object class="GtkBox">
-            <property name="orientation">vertical</property>
-            <property name="margin-start">60</property>
-            <property name="margin-end">60</property>
-            <property name="margin-top">30</property>
-            <property name="margin-bottom">30</property>
-
-            <child>
-              <object class="GtkLabel">
-                <property name="margin-top">30</property>
-                <property name="margin-bottom">10</property>
-                <property name="label">General Options</property>
-                <property name="xalign">0</property>
-                <style>
-                  <class name="title-4" />
-                </style>
-              </object>
-            </child>
-
-
-            <child>
-              <object class="GtkFrame">
-                <child>
-                  <object class="GtkListBox">
-                    <property name="selection-mode">none</property>
-
-                    <!-- <child>
-                      <object class="GtkListBoxRow">
-                        <property name="margin-start">10</property>
-                        <property name="margin-end">10</property>
-                        <property name="margin-top">10</property>
-                        <property name="margin-bottom">10</property>
-                        <property name="activatable">0</property>
-                        <child>
-                          <object class="GtkBox">
-                            <property name="spacing">8</property>
-                            <child>
-                              <object class="GtkLabel">
-                                <property name="label" translatable="yes">Close Window Animation</property>
-                                <property name="xalign">0</property>
-                                <property name="halign">start</property>
-                                <property name="valign">center</property>
-                                <property name="hexpand">1</property>
-                              </object>
-                            </child>
-                            <child>
-                              <object class="GtkComboBox" id="close-animation">
-                                <property name="valign">center</property>
-                                <property name="model">animation-mode-list</property>
-                                <property name="id_column">1</property>
-                                <property name="active_id">fire</property>
-                                <child>
-                                  <object class="GtkCellRendererText" />
-                                  <attributes>
-                                    <attribute name="text">0</attribute>
-                                  </attributes>
-                                </child>
-                              </object>
-                            </child>
-                            <child>
-                              <object class="GtkButton" id="reset-close-animation">
-                                <child>
-                                  <object class="GtkImage">
-                                    <property name="icon-name">edit-clear-symbolic</property>
-                                    <property name="icon-size">1</property>
-                                  </object>
-                                </child>
-                                <property name="tooltip-text">Reset to Default Value</property>
-                                <style>
-                                  <class name="flat" />
-                                </style>
-                              </object>
-                            </child>
-                          </object>
-                        </child>
-                      </object>
-                    </child> -->
-
-                    <child>
-                      <object class="GtkListBoxRow">
-                        <property name="margin-start">10</property>
-                        <property name="margin-end">10</property>
-                        <property name="margin-top">10</property>
-                        <property name="margin-bottom">10</property>
-                        <property name="activatable">0</property>
-                        <child>
-                          <object class="GtkBox">
-                            <property name="spacing">8</property>
-                            <child>
-                              <object class="GtkLabel">
-                                <property name="label" translatable="yes">Animation Time [ms]</property>
-                                <property name="xalign">0</property>
-                                <property name="halign">start</property>
-                                <property name="valign">center</property>
-                                <property name="hexpand">1</property>
-                              </object>
-                            </child>
-                            <child>
-                              <object class="GtkScale">
-                                <property name="halign">end</property>
-                                <property name="valign">center</property>
-                                <property name="draw-value">1</property>
-                                <property name="digits">0</property>
-                                <property name="value-pos">left</property>
-                                <property name="width-request">300</property>
-                                <property name="adjustment">destroy-animation-time</property>
-                              </object>
-                            </child>
-                            <child>
-                              <object class="GtkButton" id="reset-destroy-animation-time">
-                                <child>
-                                  <object class="GtkImage">
-                                    <property name="icon-name">edit-clear-symbolic</property>
-                                    <property name="icon-size">1</property>
-                                  </object>
-                                </child>
-                                <property name="tooltip-text">Reset to Default Value</property>
-                                <style>
-                                  <class name="flat" />
-                                </style>
-                              </object>
-                            </child>
-                          </object>
-                        </child>
-                      </object>
-                    </child>
-
-                    <child>
-                      <object class="GtkListBoxRow">
-                        <property name="margin-start">10</property>
-                        <property name="margin-end">10</property>
-                        <property name="margin-top">10</property>
-                        <property name="margin-bottom">10</property>
-                        <property name="activatable">0</property>
-                        <child>
-                          <object class="GtkBox">
-                            <property name="spacing">8</property>
-                            <child>
-                              <object class="GtkLabel">
-                                <property name="label" translatable="yes">Also Burn Dialogs</property>
-                                <property name="xalign">0</property>
-                                <property name="halign">start</property>
-                                <property name="valign">center</property>
-                                <property name="hexpand">1</property>
-                              </object>
-                            </child>
-                            <child>
-                              <object class="GtkSwitch" id="destroy-dialogs">
-                                <property name="halign">end</property>
-                                <property name="valign">center</property>
-                              </object>
-                            </child>
-                            <child>
-                              <object class="GtkButton" id="reset-destroy-dialogs">
-                                <child>
-                                  <object class="GtkImage">
-                                    <property name="icon-name">edit-clear-symbolic</property>
-                                    <property name="icon-size">1</property>
-                                  </object>
-                                </child>
-                                <property name="tooltip-text">Reset to Default Value</property>
-                                <style>
-                                  <class name="flat" />
-                                </style>
-                              </object>
-                            </child>
-                          </object>
-                        </child>
-                      </object>
-                    </child>
-
-                  </object>
-                </child>
-              </object>
-            </child>
-
-
-            <child>
-              <object class="GtkBox">
-                <property name="margin-top">30</property>
-                <property name="margin-bottom">10</property>
-                <child>
-                  <object class="GtkLabel">
-                    <property name="label">Fire Animation Options</property>
-                    <property name="xalign">0</property>
-                    <property name="hexpand">1</property>
-                    <style>
-                      <class name="title-4" />
-                    </style>
-                  </object>
-                </child>
-                <child>
-                  <object class="GtkMenuButton" id="fire-preset-button">
-                    <property name="relief">none</property>
-                    <child>
-                      <object class="GtkBox">
-                        <property name="spacing">8</property>
-                        <child>
-                          <object class="GtkLabel">
-                            <property name="label" translatable="yes">Choose a Preset</property>
-                          </object>
-                        </child>
-                        <child>
-                          <object class="GtkImage">
-                            <property name="icon-name">pan-down-symbolic</property>
-                            <property name="icon-size">1</property>
-                          </object>
-                        </child>
-                      </object>
-                    </child>
-                  </object>
-                </child>
-              </object>
-            </child>
-
-            <child>
-              <object class="GtkFrame">
-                <child>
-                  <object class="GtkListBox">
-                    <property name="selection-mode">none</property>
-                    <style>
-                      <class name="rich-list" />
-                    </style>
-
-                    <child>
-                      <object class="GtkListBoxRow">
-                        <property name="margin-start">10</property>
-                        <property name="margin-end">10</property>
-                        <property name="margin-top">10</property>
-                        <property name="margin-bottom">10</property>
-                        <property name="activatable">0</property>
-                        <child>
-                          <object class="GtkBox">
-                            <property name="spacing">8</property>
-                            <child>
-                              <object class="GtkLabel">
-                                <property name="label" translatable="yes">Scale</property>
-                                <property name="xalign">0</property>
-                                <property name="halign">start</property>
-                                <property name="valign">center</property>
-                                <property name="hexpand">1</property>
-                              </object>
-                            </child>
-                            <child>
-                              <object class="GtkScale">
-                                <property name="halign">end</property>
-                                <property name="valign">center</property>
-                                <property name="draw-value">1</property>
-                                <property name="digits">2</property>
-                                <property name="value-pos">left</property>
-                                <property name="width-request">300</property>
-                                <property name="adjustment">flame-scale</property>
-                              </object>
-                            </child>
-                            <child>
-                              <object class="GtkButton" id="reset-flame-scale">
-                                <child>
-                                  <object class="GtkImage">
-                                    <property name="icon-name">edit-clear-symbolic</property>
-                                    <property name="icon-size">1</property>
-                                  </object>
-                                </child>
-                                <property name="tooltip-text">Reset to Default Value</property>
-                                <style>
-                                  <class name="flat" />
-                                </style>
-                              </object>
-                            </child>
-                          </object>
-                        </child>
-                      </object>
-                    </child>
-
-                    <child>
-                      <object class="GtkListBoxRow">
-                        <property name="margin-start">10</property>
-                        <property name="margin-end">10</property>
-                        <property name="margin-top">10</property>
-                        <property name="margin-bottom">10</property>
-                        <property name="activatable">0</property>
-                        <child>
-                          <object class="GtkBox">
-                            <property name="spacing">8</property>
-                            <child>
-                              <object class="GtkLabel">
-                                <property name="label" translatable="yes">Speed</property>
-                                <property name="xalign">0</property>
-                                <property name="halign">start</property>
-                                <property name="valign">center</property>
-                                <property name="hexpand">1</property>
-                              </object>
-                            </child>
-                            <child>
-                              <object class="GtkScale">
-                                <property name="halign">end</property>
-                                <property name="valign">center</property>
-                                <property name="draw-value">1</property>
-                                <property name="digits">2</property>
-                                <property name="value-pos">left</property>
-                                <property name="width-request">300</property>
-                                <property name="adjustment">flame-movement-speed</property>
-                              </object>
-                            </child>
-                            <child>
-                              <object class="GtkButton" id="reset-flame-movement-speed">
-                                <child>
-                                  <object class="GtkImage">
-                                    <property name="icon-name">edit-clear-symbolic</property>
-                                    <property name="icon-size">1</property>
-                                  </object>
-                                </child>
-                                <property name="tooltip-text">Reset to Default Value</property>
-                                <style>
-                                  <class name="flat" />
-                                </style>
-                              </object>
-                            </child>
-                          </object>
-                        </child>
-                      </object>
-                    </child>
-
-                    <child>
-                      <object class="GtkListBoxRow">
-                        <property name="margin-start">10</property>
-                        <property name="margin-end">10</property>
-                        <property name="margin-top">10</property>
-                        <property name="margin-bottom">10</property>
-                        <property name="activatable">0</property>
-                        <child>
-
-                          <object class="GtkBox">
-                            <property name="spacing">8</property>
-                            <child>
-                              <object class="GtkLabel">
-                                <property name="label" translatable="yes">Gradient</property>
-                                <property name="xalign">0</property>
-                                <property name="halign">start</property>
-                                <property name="valign">center</property>
-                                <property name="hexpand">1</property>
-                              </object>
-                            </child>
-                            <child>
-                              <object class="GtkColorButton" id="fire-color-1">
-                                <property name="use_alpha">1</property>
-                                <property name="show_editor">1</property>
-                              </object>
-                            </child>
-                            <child>
-                              <object class="GtkColorButton" id="fire-color-2">
-                                <property name="use_alpha">1</property>
-                                <property name="show_editor">1</property>
-                              </object>
-                            </child>
-                            <child>
-                              <object class="GtkColorButton" id="fire-color-3">
-                                <property name="use_alpha">1</property>
-                                <property name="show_editor">1</property>
-                              </object>
-                            </child>
-                            <child>
-                              <object class="GtkColorButton" id="fire-color-4">
-                                <property name="use_alpha">1</property>
-                                <property name="show_editor">1</property>
-                              </object>
-                            </child>
-                            <child>
-                              <object class="GtkColorButton" id="fire-color-5">
-                                <property name="use_alpha">1</property>
-                                <property name="show_editor">1</property>
-                              </object>
-                            </child>
-                            <child>
-                              <object class="GtkButton" id="reset-fire-colors">
-                                <child>
-                                  <object class="GtkImage">
-                                    <property name="icon-name">edit-clear-symbolic</property>
-                                    <property name="icon-size">1</property>
-                                  </object>
-                                </child>
-                                <property name="tooltip-text">Reset to Default Value</property>
-                                <style>
-                                  <class name="flat" />
-                                </style>
-                              </object>
-                            </child>
-                          </object>
-                        </child>
-                      </object>
-                    </child>
-
-
-                  </object>
-                </child>
-              </object>
-            </child>
-
-            <!-- <child>
-              <object class="GtkBox">
-                <property name="margin-top">30</property>
-                <property name="margin-bottom">10</property>
-                <child>
-                  <object class="GtkLabel">
-                    <property name="label">Matrix Animation Options</property>
-                    <property name="xalign">0</property>
-                    <property name="hexpand">1</property>
-                    <style>
-                      <class name="title-4" />
-                    </style>
-                  </object>
-                </child>
-              </object>
-            </child> -->
-
-            <!-- <child>
-              <object class="GtkFrame">
-                <child>
-                  <object class="GtkListBox">
-                    <property name="selection-mode">none</property>
-                    <style>
-                      <class name="rich-list" />
-                    </style>
-
-                    <child>
-                      <object class="GtkListBoxRow">
-                        <property name="margin-start">10</property>
-                        <property name="margin-end">10</property>
-                        <property name="margin-top">10</property>
-                        <property name="margin-bottom">10</property>
-                        <property name="activatable">0</property>
-                        <child>
-                          <object class="GtkBox">
-                            <property name="spacing">8</property>
-                            <child>
-                              <object class="GtkLabel">
-                                <property name="label" translatable="yes">Scale</property>
-                                <property name="xalign">0</property>
-                                <property name="halign">start</property>
-                                <property name="valign">center</property>
-                                <property name="hexpand">1</property>
-                              </object>
-                            </child>
-                            <child>
-                              <object class="GtkScale">
-                                <property name="halign">end</property>
-                                <property name="valign">center</property>
-                                <property name="draw-value">1</property>
-                                <property name="digits">0</property>
-                                <property name="value-pos">left</property>
-                                <property name="width-request">300</property>
-                                <property name="adjustment">matrix-scale</property>
-                              </object>
-                            </child>
-                            <child>
-                              <object class="GtkButton" id="reset-matrix-scale">
-                                <child>
-                                  <object class="GtkImage">
-                                    <property name="icon-name">edit-clear-symbolic</property>
-                                    <property name="icon-size">1</property>
-                                  </object>
-                                </child>
-                                <property name="tooltip-text">Reset to Default Value</property>
-                                <style>
-                                  <class name="flat" />
-                                </style>
-                              </object>
-                            </child>
-                          </object>
-                        </child>
-                      </object>
-                    </child>
-
-                    <child>
-                      <object class="GtkListBoxRow">
-                        <property name="margin-start">10</property>
-                        <property name="margin-end">10</property>
-                        <property name="margin-top">10</property>
-                        <property name="margin-bottom">10</property>
-                        <property name="activatable">0</property>
-                        <child>
-                          <object class="GtkBox">
-                            <property name="spacing">8</property>
-                            <child>
-                              <object class="GtkLabel">
-                                <property name="label" translatable="yes">Randomness</property>
-                                <property name="xalign">0</property>
-                                <property name="halign">start</property>
-                                <property name="valign">center</property>
-                                <property name="hexpand">1</property>
-                              </object>
-                            </child>
-                            <child>
-                              <object class="GtkScale">
-                                <property name="halign">end</property>
-                                <property name="valign">center</property>
-                                <property name="draw-value">1</property>
-                                <property name="digits">2</property>
-                                <property name="value-pos">left</property>
-                                <property name="width-request">300</property>
-                                <property name="adjustment">matrix-randomness</property>
-                              </object>
-                            </child>
-                            <child>
-                              <object class="GtkButton" id="reset-matrix-randomness">
-                                <child>
-                                  <object class="GtkImage">
-                                    <property name="icon-name">edit-clear-symbolic</property>
-                                    <property name="icon-size">1</property>
-                                  </object>
-                                </child>
-                                <property name="tooltip-text">Reset to Default Value</property>
-                                <style>
-                                  <class name="flat" />
-                                </style>
-                              </object>
-                            </child>
-                          </object>
-                        </child>
-                      </object>
-                    </child>
-
-                    <child>
-                      <object class="GtkListBoxRow">
-                        <property name="margin-start">10</property>
-                        <property name="margin-end">10</property>
-                        <property name="margin-top">10</property>
-                        <property name="margin-bottom">10</property>
-                        <property name="activatable">0</property>
-                        <child>
-
-                          <object class="GtkBox">
-                            <property name="spacing">8</property>
-                            <child>
-                              <object class="GtkLabel">
-                                <property name="label" translatable="yes">Trail Color</property>
-                                <property name="xalign">0</property>
-                                <property name="halign">start</property>
-                                <property name="valign">center</property>
-                                <property name="hexpand">1</property>
-                              </object>
-                            </child>
-                            <child>
-                              <object class="GtkColorButton" id="matrix-trail-color">
-                                <property name="use_alpha">1</property>
-                                <property name="show_editor">1</property>
-                              </object>
-                            </child>
-                            <child>
-                              <object class="GtkButton" id="reset-matrix-trail-color">
-                                <child>
-                                  <object class="GtkImage">
-                                    <property name="icon-name">edit-clear-symbolic</property>
-                                    <property name="icon-size">1</property>
-                                  </object>
-                                </child>
-                                <property name="tooltip-text">Reset to Default Value</property>
-                                <style>
-                                  <class name="flat" />
-                                </style>
-                              </object>
-                            </child>
-                          </object>
-                        </child>
-                      </object>
-                    </child>
-
-                    <child>
-                      <object class="GtkListBoxRow">
-                        <property name="margin-start">10</property>
-                        <property name="margin-end">10</property>
-                        <property name="margin-top">10</property>
-                        <property name="margin-bottom">10</property>
-                        <property name="activatable">0</property>
-                        <child>
-
-                          <object class="GtkBox">
-                            <property name="spacing">8</property>
-                            <child>
-                              <object class="GtkLabel">
-                                <property name="label" translatable="yes">Tip Color</property>
-                                <property name="xalign">0</property>
-                                <property name="halign">start</property>
-                                <property name="valign">center</property>
-                                <property name="hexpand">1</property>
-                              </object>
-                            </child>
-                            <child>
-                              <object class="GtkColorButton" id="matrix-tip-color">
-                                <property name="use_alpha">1</property>
-                                <property name="show_editor">1</property>
-                              </object>
-                            </child>
-                            <child>
-                              <object class="GtkButton" id="reset-matrix-tip-color">
-                                <child>
-                                  <object class="GtkImage">
-                                    <property name="icon-name">edit-clear-symbolic</property>
-                                    <property name="icon-size">1</property>
-                                  </object>
-                                </child>
-                                <property name="tooltip-text">Reset to Default Value</property>
-                                <style>
-                                  <class name="flat" />
-                                </style>
-                              </object>
-                            </child>
-                          </object>
-                        </child>
-                      </object>
-                    </child>
-
-
-                  </object>
-                </child>
-              </object>
-            </child> -->
-
-          </object>
-        </child>
-      </object>
-    </child>
-  </object>
-
-
-</interface>

resources/ui/gtk3/EnergizeA.ui

@@ -0,0 +1,183 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+
+  <object class="GtkAdjustment" id="energize-a-animation-time">
+    <property name="upper">10000</property>
+    <property name="lower">500</property>
+    <property name="step-increment">10</property>
+    <property name="page-increment">100</property>
+  </object>
+
+  <object class="GtkAdjustment" id="energize-a-scale">
+    <property name="upper">10</property>
+    <property name="lower">0.1</property>
+    <property name="step-increment">0.01</property>
+    <property name="page-increment">0.1</property>
+  </object>
+
+  <object class="GtkBox" id="energize-a-prefs">
+    <property name="orientation">vertical</property>
+    <property name="margin-start">60</property>
+    <property name="margin-end">60</property>
+    <property name="margin-top">60</property>
+    <property name="margin-bottom">60</property>
+
+    <child>
+      <object class="GtkFrame">
+        <child>
+          <object class="GtkListBox">
+            <property name="selection-mode">none</property>
+            <style>
+              <class name="rich-list" />
+            </style>
+
+            <child>
+              <object class="GtkListBoxRow">
+                <property name="margin-start">10</property>
+                <property name="margin-end">10</property>
+                <property name="margin-top">10</property>
+                <property name="margin-bottom">10</property>
+                <property name="activatable">0</property>
+                <child>
+                  <object class="GtkBox">
+                    <property name="spacing">8</property>
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="label" translatable="yes">Animation Time [ms]</property>
+                        <property name="xalign">0</property>
+                        <property name="halign">start</property>
+                        <property name="valign">center</property>
+                        <property name="hexpand">1</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkScale">
+                        <property name="halign">end</property>
+                        <property name="valign">center</property>
+                        <property name="draw-value">1</property>
+                        <property name="digits">0</property>
+                        <property name="value-pos">left</property>
+                        <property name="width-request">300</property>
+                        <property name="adjustment">energize-a-animation-time</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkButton" id="reset-energize-a-animation-time">
+                        <child>
+                          <object class="GtkImage">
+                            <property name="icon-name">edit-clear-symbolic</property>
+                            <property name="icon-size">1</property>
+                          </object>
+                        </child>
+                        <property name="tooltip-text">Reset to Default Value</property>
+                        <style>
+                          <class name="flat" />
+                        </style>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+
+            <child>
+              <object class="GtkListBoxRow">
+                <property name="margin-start">10</property>
+                <property name="margin-end">10</property>
+                <property name="margin-top">10</property>
+                <property name="margin-bottom">10</property>
+                <property name="activatable">0</property>
+                <child>
+                  <object class="GtkBox">
+                    <property name="spacing">8</property>
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="label" translatable="yes">Scale</property>
+                        <property name="xalign">0</property>
+                        <property name="halign">start</property>
+                        <property name="valign">center</property>
+                        <property name="hexpand">1</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkScale">
+                        <property name="halign">end</property>
+                        <property name="valign">center</property>
+                        <property name="draw-value">1</property>
+                        <property name="digits">2</property>
+                        <property name="value-pos">left</property>
+                        <property name="width-request">300</property>
+                        <property name="adjustment">energize-a-scale</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkButton" id="reset-energize-a-scale">
+                        <child>
+                          <object class="GtkImage">
+                            <property name="icon-name">edit-clear-symbolic</property>
+                            <property name="icon-size">1</property>
+                          </object>
+                        </child>
+                        <property name="tooltip-text">Reset to Default Value</property>
+                        <style>
+                          <class name="flat" />
+                        </style>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+
+            <child>
+              <object class="GtkListBoxRow">
+                <property name="margin-start">10</property>
+                <property name="margin-end">10</property>
+                <property name="margin-top">10</property>
+                <property name="margin-bottom">10</property>
+                <property name="activatable">0</property>
+                <child>
+                  <object class="GtkBox">
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="label" translatable="yes">Color</property>
+                        <property name="xalign">0</property>
+                        <property name="halign">start</property>
+                        <property name="valign">center</property>
+                        <property name="hexpand">1</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkColorButton" id="energize-a-color">
+                        <property name="use_alpha">0</property>
+                        <property name="show_editor">1</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkButton" id="reset-energize-a-color">
+                        <child>
+                          <object class="GtkImage">
+                            <property name="icon-name">edit-clear-symbolic</property>
+                            <property name="icon-size">1</property>
+                          </object>
+                        </child>
+                        <property name="tooltip-text">Reset to Default Value</property>
+                        <style>
+                          <class name="flat" />
+                        </style>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+
+          </object>
+        </child>
+      </object>
+    </child>
+
+
+  </object>
+
+</interface>

resources/ui/gtk3/EnergizeB.ui

@@ -0,0 +1,183 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+
+  <object class="GtkAdjustment" id="energize-b-animation-time">
+    <property name="upper">10000</property>
+    <property name="lower">500</property>
+    <property name="step-increment">10</property>
+    <property name="page-increment">100</property>
+  </object>
+
+  <object class="GtkAdjustment" id="energize-b-scale">
+    <property name="upper">10</property>
+    <property name="lower">0.1</property>
+    <property name="step-increment">0.01</property>
+    <property name="page-increment">0.1</property>
+  </object>
+
+  <object class="GtkBox" id="energize-b-prefs">
+    <property name="orientation">vertical</property>
+    <property name="margin-start">60</property>
+    <property name="margin-end">60</property>
+    <property name="margin-top">60</property>
+    <property name="margin-bottom">60</property>
+
+    <child>
+      <object class="GtkFrame">
+        <child>
+          <object class="GtkListBox">
+            <property name="selection-mode">none</property>
+            <style>
+              <class name="rich-list" />
+            </style>
+
+            <child>
+              <object class="GtkListBoxRow">
+                <property name="margin-start">10</property>
+                <property name="margin-end">10</property>
+                <property name="margin-top">10</property>
+                <property name="margin-bottom">10</property>
+                <property name="activatable">0</property>
+                <child>
+                  <object class="GtkBox">
+                    <property name="spacing">8</property>
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="label" translatable="yes">Animation Time [ms]</property>
+                        <property name="xalign">0</property>
+                        <property name="halign">start</property>
+                        <property name="valign">center</property>
+                        <property name="hexpand">1</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkScale">
+                        <property name="halign">end</property>
+                        <property name="valign">center</property>
+                        <property name="draw-value">1</property>
+                        <property name="digits">0</property>
+                        <property name="value-pos">left</property>
+                        <property name="width-request">300</property>
+                        <property name="adjustment">energize-b-animation-time</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkButton" id="reset-energize-b-animation-time">
+                        <child>
+                          <object class="GtkImage">
+                            <property name="icon-name">edit-clear-symbolic</property>
+                            <property name="icon-size">1</property>
+                          </object>
+                        </child>
+                        <property name="tooltip-text">Reset to Default Value</property>
+                        <style>
+                          <class name="flat" />
+                        </style>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+
+            <child>
+              <object class="GtkListBoxRow">
+                <property name="margin-start">10</property>
+                <property name="margin-end">10</property>
+                <property name="margin-top">10</property>
+                <property name="margin-bottom">10</property>
+                <property name="activatable">0</property>
+                <child>
+                  <object class="GtkBox">
+                    <property name="spacing">8</property>
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="label" translatable="yes">Scale</property>
+                        <property name="xalign">0</property>
+                        <property name="halign">start</property>
+                        <property name="valign">center</property>
+                        <property name="hexpand">1</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkScale">
+                        <property name="halign">end</property>
+                        <property name="valign">center</property>
+                        <property name="draw-value">1</property>
+                        <property name="digits">2</property>
+                        <property name="value-pos">left</property>
+                        <property name="width-request">300</property>
+                        <property name="adjustment">energize-b-scale</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkButton" id="reset-energize-b-scale">
+                        <child>
+                          <object class="GtkImage">
+                            <property name="icon-name">edit-clear-symbolic</property>
+                            <property name="icon-size">1</property>
+                          </object>
+                        </child>
+                        <property name="tooltip-text">Reset to Default Value</property>
+                        <style>
+                          <class name="flat" />
+                        </style>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+
+            <child>
+              <object class="GtkListBoxRow">
+                <property name="margin-start">10</property>
+                <property name="margin-end">10</property>
+                <property name="margin-top">10</property>
+                <property name="margin-bottom">10</property>
+                <property name="activatable">0</property>
+                <child>
+                  <object class="GtkBox">
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="label" translatable="yes">Color</property>
+                        <property name="xalign">0</property>
+                        <property name="halign">start</property>
+                        <property name="valign">center</property>
+                        <property name="hexpand">1</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkColorButton" id="energize-b-color">
+                        <property name="use_alpha">0</property>
+                        <property name="show_editor">1</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkButton" id="reset-energize-b-color">
+                        <child>
+                          <object class="GtkImage">
+                            <property name="icon-name">edit-clear-symbolic</property>
+                            <property name="icon-size">1</property>
+                          </object>
+                        </child>
+                        <property name="tooltip-text">Reset to Default Value</property>
+                        <style>
+                          <class name="flat" />
+                        </style>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+
+          </object>
+        </child>
+      </object>
+    </child>
+
+
+  </object>
+
+</interface>

resources/ui/gtk3/Fire.ui

@@ -0,0 +1,379 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+
+  <object class="GtkAdjustment" id="fire-animation-time">
+    <property name="upper">10000</property>
+    <property name="lower">500</property>
+    <property name="step-increment">10</property>
+    <property name="page-increment">100</property>
+  </object>
+
+  <object class="GtkAdjustment" id="flame-scale">
+    <property name="upper">3</property>
+    <property name="lower">0.1</property>
+    <property name="step-increment">0.01</property>
+    <property name="page-increment">0.1</property>
+  </object>
+
+  <object class="GtkAdjustment" id="flame-movement-speed">
+    <property name="upper">2.0</property>
+    <property name="lower">-2.0</property>
+    <property name="step-increment">0.01</property>
+    <property name="page-increment">0.1</property>
+  </object>
+
+  <object class="GtkBox" id="fire-prefs">
+    <property name="orientation">vertical</property>
+    <property name="margin-start">60</property>
+    <property name="margin-end">60</property>
+    <property name="margin-top">60</property>
+    <property name="margin-bottom">60</property>
+
+    <child>
+      <object class="GtkFrame">
+        <property name="margin-bottom">20</property>
+        <child>
+          <object class="GtkListBox">
+            <property name="selection-mode">none</property>
+            <style>
+              <class name="rich-list" />
+            </style>
+
+            <child>
+              <object class="GtkListBoxRow">
+                <property name="margin-start">10</property>
+                <property name="margin-end">10</property>
+                <property name="margin-top">10</property>
+                <property name="margin-bottom">10</property>
+                <property name="activatable">0</property>
+                <child>
+                  <object class="GtkBox">
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="label" translatable="yes">Presets</property>
+                        <property name="xalign">0</property>
+                        <property name="halign">start</property>
+                        <property name="valign">center</property>
+                        <property name="hexpand">1</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkMenuButton" id="fire-preset-button">
+                        <child>
+                          <object class="GtkBox">
+                            <property name="spacing">8</property>
+                            <child>
+                              <object class="GtkLabel">
+                                <property name="label" translatable="yes">Choose a Preset</property>
+                              </object>
+                            </child>
+                            <child>
+                              <object class="GtkImage">
+                                <property name="icon-name">pan-down-symbolic</property>
+                                <property name="icon-size">1</property>
+                              </object>
+                            </child>
+                          </object>
+                        </child>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+          </object>
+        </child>
+      </object>
+    </child>
+
+    <child>
+      <object class="GtkFrame">
+        <child>
+          <object class="GtkListBox">
+            <property name="selection-mode">none</property>
+            <style>
+              <class name="rich-list" />
+            </style>
+
+            <child>
+              <object class="GtkListBoxRow">
+                <property name="margin-start">10</property>
+                <property name="margin-end">10</property>
+                <property name="margin-top">10</property>
+                <property name="margin-bottom">10</property>
+                <property name="activatable">0</property>
+                <child>
+                  <object class="GtkBox">
+                    <property name="spacing">8</property>
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="label" translatable="yes">Animation Time [ms]</property>
+                        <property name="xalign">0</property>
+                        <property name="halign">start</property>
+                        <property name="valign">center</property>
+                        <property name="hexpand">1</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkScale">
+                        <property name="halign">end</property>
+                        <property name="valign">center</property>
+                        <property name="draw-value">1</property>
+                        <property name="digits">0</property>
+                        <property name="value-pos">left</property>
+                        <property name="width-request">300</property>
+                        <property name="adjustment">fire-animation-time</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkButton" id="reset-fire-animation-time">
+                        <child>
+                          <object class="GtkImage">
+                            <property name="icon-name">edit-clear-symbolic</property>
+                            <property name="icon-size">1</property>
+                          </object>
+                        </child>
+                        <property name="tooltip-text">Reset to Default Value</property>
+                        <style>
+                          <class name="flat" />
+                        </style>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+
+            <child>
+              <object class="GtkListBoxRow">
+                <property name="margin-start">10</property>
+                <property name="margin-end">10</property>
+                <property name="margin-top">10</property>
+                <property name="margin-bottom">10</property>
+                <property name="activatable">0</property>
+                <child>
+                  <object class="GtkBox">
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="label" translatable="yes">Scale</property>
+                        <property name="xalign">0</property>
+                        <property name="halign">start</property>
+                        <property name="valign">center</property>
+                        <property name="hexpand">1</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkScale">
+                        <property name="halign">end</property>
+                        <property name="valign">center</property>
+                        <property name="draw-value">1</property>
+                        <property name="digits">2</property>
+                        <property name="value-pos">left</property>
+                        <property name="width-request">300</property>
+                        <property name="adjustment">flame-scale</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkButton" id="reset-flame-scale">
+                        <child>
+                          <object class="GtkImage">
+                            <property name="icon-name">edit-clear-symbolic</property>
+                            <property name="icon-size">1</property>
+                          </object>
+                        </child>
+                        <property name="tooltip-text">Reset to Default Value</property>
+                        <style>
+                          <class name="flat" />
+                        </style>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+
+            <child>
+              <object class="GtkListBoxRow">
+                <property name="margin-start">10</property>
+                <property name="margin-end">10</property>
+                <property name="margin-top">10</property>
+                <property name="margin-bottom">10</property>
+                <property name="activatable">0</property>
+                <child>
+                  <object class="GtkBox">
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="label" translatable="yes">Speed</property>
+                        <property name="xalign">0</property>
+                        <property name="halign">start</property>
+                        <property name="valign">center</property>
+                        <property name="hexpand">1</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkScale">
+                        <property name="halign">end</property>
+                        <property name="valign">center</property>
+                        <property name="draw-value">1</property>
+                        <property name="digits">2</property>
+                        <property name="value-pos">left</property>
+                        <property name="width-request">300</property>
+                        <property name="adjustment">flame-movement-speed</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkButton" id="reset-flame-movement-speed">
+                        <child>
+                          <object class="GtkImage">
+                            <property name="icon-name">edit-clear-symbolic</property>
+                            <property name="icon-size">1</property>
+                          </object>
+                        </child>
+                        <property name="tooltip-text">Reset to Default Value</property>
+                        <style>
+                          <class name="flat" />
+                        </style>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+
+            <child>
+              <object class="GtkListBoxRow">
+                <property name="margin-start">10</property>
+                <property name="margin-end">10</property>
+                <property name="margin-top">10</property>
+                <property name="margin-bottom">10</property>
+                <property name="activatable">0</property>
+                <child>
+                  <object class="GtkBox">
+                    <child>
+                      <object class="GtkBox">
+                        <property name="orientation">vertical</property>
+                        <property name="spacing">3</property>
+                        <child>
+                          <object class="GtkLabel">
+                            <property name="label" translatable="yes">3D Noise</property>
+                            <property name="xalign">0</property>
+                            <property name="halign">start</property>
+                            <property name="valign">center</property>
+                            <property name="hexpand">1</property>
+                          </object>
+                        </child>
+                        <child>
+                          <object class="GtkLabel">
+                            <property name="label" translatable="yes">Creates a more dynamic fire but requires more GPU power.</property>
+                            <property name="xalign">0</property>
+                            <property name="halign">start</property>
+                            <property name="valign">center</property>
+                            <property name="hexpand">1</property>
+                            <style>
+                              <class name="dim-label" />
+                              <class name="caption" />
+                            </style>
+                          </object>
+                        </child>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkSwitch" id="flame-3d-noise">
+                        <property name="halign">end</property>
+                        <property name="valign">center</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkButton" id="reset-flame-3d-noise">
+                        <child>
+                          <object class="GtkImage">
+                            <property name="icon-name">edit-clear-symbolic</property>
+                            <property name="icon-size">1</property>
+                          </object>
+                        </child>
+                        <property name="tooltip-text">Reset to Default Value</property>
+                        <style>
+                          <class name="flat" />
+                        </style>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+
+            <child>
+              <object class="GtkListBoxRow">
+                <property name="margin-start">10</property>
+                <property name="margin-end">10</property>
+                <property name="margin-top">10</property>
+                <property name="margin-bottom">10</property>
+                <property name="activatable">0</property>
+                <child>
+                  <object class="GtkBox">
+                    <property name="spacing">8</property>
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="label" translatable="yes">Gradient</property>
+                        <property name="xalign">0</property>
+                        <property name="halign">start</property>
+                        <property name="valign">center</property>
+                        <property name="hexpand">1</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkColorButton" id="fire-color-1">
+                        <property name="use_alpha">1</property>
+                        <property name="show_editor">1</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkColorButton" id="fire-color-2">
+                        <property name="use_alpha">1</property>
+                        <property name="show_editor">1</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkColorButton" id="fire-color-3">
+                        <property name="use_alpha">1</property>
+                        <property name="show_editor">1</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkColorButton" id="fire-color-4">
+                        <property name="use_alpha">1</property>
+                        <property name="show_editor">1</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkColorButton" id="fire-color-5">
+                        <property name="use_alpha">1</property>
+                        <property name="show_editor">1</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkButton" id="reset-fire-colors">
+                        <child>
+                          <object class="GtkImage">
+                            <property name="icon-name">edit-clear-symbolic</property>
+                            <property name="icon-size">1</property>
+                          </object>
+                        </child>
+                        <property name="tooltip-text">Reset to Default Value</property>
+                        <style>
+                          <class name="flat" />
+                        </style>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+
+          </object>
+        </child>
+      </object>
+    </child>
+  </object>
+
+</interface>

resources/ui/gtk3/TVEffect.ui

@@ -0,0 +1,127 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+
+  <object class="GtkAdjustment" id="tv-animation-time">
+    <property name="upper">5000</property>
+    <property name="lower">100</property>
+    <property name="step-increment">10</property>
+    <property name="page-increment">100</property>
+  </object>
+
+  <object class="GtkBox" id="tv-prefs">
+    <property name="orientation">vertical</property>
+    <property name="margin-start">60</property>
+    <property name="margin-end">60</property>
+    <property name="margin-top">60</property>
+    <property name="margin-bottom">60</property>
+
+    <child>
+      <object class="GtkFrame">
+        <child>
+          <object class="GtkListBox">
+            <property name="selection-mode">none</property>
+            <style>
+              <class name="rich-list" />
+            </style>
+
+            <child>
+              <object class="GtkListBoxRow">
+                <property name="margin-start">10</property>
+                <property name="margin-end">10</property>
+                <property name="margin-top">10</property>
+                <property name="margin-bottom">10</property>
+                <property name="activatable">0</property>
+                <child>
+                  <object class="GtkBox">
+                    <property name="spacing">8</property>
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="label" translatable="yes">Animation Time [ms]</property>
+                        <property name="xalign">0</property>
+                        <property name="halign">start</property>
+                        <property name="valign">center</property>
+                        <property name="hexpand">1</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkScale">
+                        <property name="halign">end</property>
+                        <property name="valign">center</property>
+                        <property name="draw-value">1</property>
+                        <property name="digits">0</property>
+                        <property name="value-pos">left</property>
+                        <property name="width-request">300</property>
+                        <property name="adjustment">tv-animation-time</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkButton" id="reset-tv-animation-time">
+                        <child>
+                          <object class="GtkImage">
+                            <property name="icon-name">edit-clear-symbolic</property>
+                            <property name="icon-size">1</property>
+                          </object>
+                        </child>
+                        <property name="tooltip-text">Reset to Default Value</property>
+                        <style>
+                          <class name="flat" />
+                        </style>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+
+            <child>
+              <object class="GtkListBoxRow">
+                <property name="margin-start">10</property>
+                <property name="margin-end">10</property>
+                <property name="margin-top">10</property>
+                <property name="margin-bottom">10</property>
+                <property name="activatable">0</property>
+                <child>
+                  <object class="GtkBox">
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="label" translatable="yes">Color</property>
+                        <property name="xalign">0</property>
+                        <property name="halign">start</property>
+                        <property name="valign">center</property>
+                        <property name="hexpand">1</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkColorButton" id="tv-effect-color">
+                        <property name="use_alpha">0</property>
+                        <property name="show_editor">1</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkButton" id="reset-tv-effect-color">
+                        <child>
+                          <object class="GtkImage">
+                            <property name="icon-name">edit-clear-symbolic</property>
+                            <property name="icon-size">1</property>
+                          </object>
+                        </child>
+                        <property name="tooltip-text">Reset to Default Value</property>
+                        <style>
+                          <class name="flat" />
+                        </style>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+
+          </object>
+        </child>
+      </object>
+    </child>
+
+
+  </object>
+
+</interface>

resources/ui/gtk3/Wisps.ui

@@ -0,0 +1,183 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+
+  <object class="GtkAdjustment" id="wisps-animation-time">
+    <property name="upper">10000</property>
+    <property name="lower">500</property>
+    <property name="step-increment">10</property>
+    <property name="page-increment">100</property>
+  </object>
+
+  <object class="GtkAdjustment" id="wisps-scale">
+    <property name="upper">10</property>
+    <property name="lower">0.1</property>
+    <property name="step-increment">0.01</property>
+    <property name="page-increment">0.1</property>
+  </object>
+
+  <object class="GtkBox" id="wisps-prefs">
+    <property name="orientation">vertical</property>
+    <property name="margin-start">60</property>
+    <property name="margin-end">60</property>
+    <property name="margin-top">60</property>
+    <property name="margin-bottom">60</property>
+
+    <child>
+      <object class="GtkFrame">
+        <child>
+          <object class="GtkListBox">
+            <property name="selection-mode">none</property>
+            <style>
+              <class name="rich-list" />
+            </style>
+
+            <child>
+              <object class="GtkListBoxRow">
+                <property name="margin-start">10</property>
+                <property name="margin-end">10</property>
+                <property name="margin-top">10</property>
+                <property name="margin-bottom">10</property>
+                <property name="activatable">0</property>
+                <child>
+                  <object class="GtkBox">
+                    <property name="spacing">8</property>
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="label" translatable="yes">Animation Time [ms]</property>
+                        <property name="xalign">0</property>
+                        <property name="halign">start</property>
+                        <property name="valign">center</property>
+                        <property name="hexpand">1</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkScale">
+                        <property name="halign">end</property>
+                        <property name="valign">center</property>
+                        <property name="draw-value">1</property>
+                        <property name="digits">0</property>
+                        <property name="value-pos">left</property>
+                        <property name="width-request">300</property>
+                        <property name="adjustment">wisps-animation-time</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkButton" id="reset-wisps-animation-time">
+                        <child>
+                          <object class="GtkImage">
+                            <property name="icon-name">edit-clear-symbolic</property>
+                            <property name="icon-size">1</property>
+                          </object>
+                        </child>
+                        <property name="tooltip-text">Reset to Default Value</property>
+                        <style>
+                          <class name="flat" />
+                        </style>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+
+            <child>
+              <object class="GtkListBoxRow">
+                <property name="margin-start">10</property>
+                <property name="margin-end">10</property>
+                <property name="margin-top">10</property>
+                <property name="margin-bottom">10</property>
+                <property name="activatable">0</property>
+                <child>
+                  <object class="GtkBox">
+                    <property name="spacing">8</property>
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="label" translatable="yes">Scale</property>
+                        <property name="xalign">0</property>
+                        <property name="halign">start</property>
+                        <property name="valign">center</property>
+                        <property name="hexpand">1</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkScale">
+                        <property name="halign">end</property>
+                        <property name="valign">center</property>
+                        <property name="draw-value">1</property>
+                        <property name="digits">2</property>
+                        <property name="value-pos">left</property>
+                        <property name="width-request">300</property>
+                        <property name="adjustment">wisps-scale</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkButton" id="reset-wisps-scale">
+                        <child>
+                          <object class="GtkImage">
+                            <property name="icon-name">edit-clear-symbolic</property>
+                            <property name="icon-size">1</property>
+                          </object>
+                        </child>
+                        <property name="tooltip-text">Reset to Default Value</property>
+                        <style>
+                          <class name="flat" />
+                        </style>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+
+            <child>
+              <object class="GtkListBoxRow">
+                <property name="margin-start">10</property>
+                <property name="margin-end">10</property>
+                <property name="margin-top">10</property>
+                <property name="margin-bottom">10</property>
+                <property name="activatable">0</property>
+                <child>
+                  <object class="GtkBox">
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="label" translatable="yes">Color</property>
+                        <property name="xalign">0</property>
+                        <property name="halign">start</property>
+                        <property name="valign">center</property>
+                        <property name="hexpand">1</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkColorButton" id="wisps-color">
+                        <property name="use_alpha">0</property>
+                        <property name="show_editor">1</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkButton" id="reset-wisps-color">
+                        <child>
+                          <object class="GtkImage">
+                            <property name="icon-name">edit-clear-symbolic</property>
+                            <property name="icon-size">1</property>
+                          </object>
+                        </child>
+                        <property name="tooltip-text">Reset to Default Value</property>
+                        <style>
+                          <class name="flat" />
+                        </style>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+
+          </object>
+        </child>
+      </object>
+    </child>
+
+
+  </object>
+
+</interface>

resources/ui/gtk3/prefs.ui

@@ -0,0 +1,198 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <requires lib="gtk" version="3.0" />
+
+  <menu id="close-effect-menu"></menu>
+
+  <object class="GtkMenuButton" id="menu-button">
+    <property name="menu-model">main-menu</property>
+    <property name="visible">1</property>
+    <child>
+      <object class="GtkImage">
+        <property name="icon-name">open-menu-symbolic</property>
+        <property name="visible">1</property>
+        <property name="icon-size">1</property>
+      </object>
+    </child>
+  </object>
+
+  <object class="GtkBox" id="settings-widget">
+    <child>
+      <object class="GtkStackSidebar">
+        <property name="stack">main-stack</property>
+      </object>
+    </child>
+    <child>
+      <object class="GtkStack" id="main-stack">
+        <property name="transition-type">slide-up-down</property>
+        <property name="hexpand">1</property>
+
+        <child>
+          <object class="GtkBox" id="general-prefs">
+            <property name="orientation">vertical</property>
+            <property name="margin-start">60</property>
+            <property name="margin-end">60</property>
+            <property name="margin-top">30</property>
+            <property name="margin-bottom">30</property>
+
+            <child>
+              <object class="GtkImage">
+                <property name="valign">center</property>
+                <property name="icon-name">burn-my-windows-symbolic</property>
+                <property name="pixel_size">128</property>
+              </object>
+            </child>
+
+            <child>
+              <object class="GtkLabel">
+                <property name="label" translatable="yes">Welcome to Burn-My-Windows!</property>
+                <property name="margin-top">8</property>
+                <property name="margin-bottom">6</property>
+                <style>
+                  <class name="large-title" />
+                </style>
+              </object>
+            </child>
+
+            <child>
+              <object class="GtkLabel">
+                <property name="label" translatable="yes">If you like this extension, recommend it to your friends :)</property>
+                <property name="margin-bottom">36</property>
+              </object>
+            </child>
+
+
+            <child>
+              <object class="GtkFrame">
+                <child>
+                  <object class="GtkListBox">
+                    <property name="selection-mode">none</property>
+
+                    <child>
+                      <object class="GtkListBoxRow">
+                        <property name="margin-start">10</property>
+                        <property name="margin-end">10</property>
+                        <property name="margin-top">10</property>
+                        <property name="margin-bottom">10</property>
+                        <property name="activatable">0</property>
+                        <child>
+                          <object class="GtkBox">
+                            <property name="spacing">8</property>
+                            <child>
+                              <object class="GtkBox">
+                                <property name="orientation">vertical</property>
+                                <property name="spacing">3</property>
+                                <child>
+                                  <object class="GtkLabel">
+                                    <property name="label" translatable="yes">Close Window Animation</property>
+                                    <property name="xalign">0</property>
+                                    <property name="halign">start</property>
+                                    <property name="valign">center</property>
+                                    <property name="hexpand">1</property>
+                                  </object>
+                                </child>
+                                <child>
+                                  <object class="GtkLabel">
+                                    <property name="label" translatable="yes">If multiple are selected, one is chosen randomly.</property>
+                                    <property name="xalign">0</property>
+                                    <property name="halign">start</property>
+                                    <property name="valign">center</property>
+                                    <property name="hexpand">1</property>
+                                    <style>
+                                      <class name="dim-label" />
+                                      <class name="caption" />
+                                    </style>
+                                  </object>
+                                </child>
+                              </object>
+                            </child>
+                            <child>
+                              <object class="GtkMenuButton" id="close-effect-button">
+                                <property name="menu-model">close-effect-menu</property>
+                                <child>
+                                  <object class="GtkBox">
+                                    <property name="spacing">8</property>
+                                    <child>
+                                      <object class="GtkLabel">
+                                        <property name="label" translatable="yes">Choose Effects</property>
+                                      </object>
+                                    </child>
+                                    <child>
+                                      <object class="GtkImage">
+                                        <property name="icon-name">pan-down-symbolic</property>
+                                        <property name="icon-size">1</property>
+                                      </object>
+                                    </child>
+                                  </object>
+                                </child>
+                              </object>
+                            </child>
+                          </object>
+                        </child>
+                      </object>
+                    </child>
+
+                    <child>
+                      <object class="GtkListBoxRow">
+                        <property name="margin-start">10</property>
+                        <property name="margin-end">10</property>
+                        <property name="margin-top">10</property>
+                        <property name="margin-bottom">10</property>
+                        <property name="activatable">0</property>
+                        <child>
+                          <object class="GtkBox">
+                            <property name="spacing">8</property>
+                            <child>
+                              <object class="GtkLabel">
+                                <property name="label" translatable="yes">Also Burn Dialogs</property>
+                                <property name="xalign">0</property>
+                                <property name="halign">start</property>
+                                <property name="valign">center</property>
+                                <property name="hexpand">1</property>
+                              </object>
+                            </child>
+                            <child>
+                              <object class="GtkSwitch" id="destroy-dialogs">
+                                <property name="halign">end</property>
+                                <property name="valign">center</property>
+                              </object>
+                            </child>
+                            <child>
+                              <object class="GtkButton" id="reset-destroy-dialogs">
+                                <child>
+                                  <object class="GtkImage">
+                                    <property name="icon-name">edit-clear-symbolic</property>
+                                    <property name="icon-size">1</property>
+                                  </object>
+                                </child>
+                                <property name="tooltip-text">Reset to Default Value</property>
+                                <style>
+                                  <class name="flat" />
+                                </style>
+                              </object>
+                            </child>
+                          </object>
+                        </child>
+                      </object>
+                    </child>
+
+                  </object>
+                </child>
+              </object>
+            </child>
+          </object>
+          <packing>
+            <property name="name">general</property>
+            <property name="title" translatable="yes">General Options</property>
+          </packing>
+
+        </child>
+
+        <!-- Stack pages are inserted here -->
+
+      </object>
+    </child>
+  </object>
+
+
+</interface>

resources/ui/gtk4.ui

@@ -1,580 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<interface domain="desktop-cube">
-  <requires lib="gtk" version="4.0" />
-
-  <object class="GtkListStore" id="animation-mode-list">
-    <columns>
-      <column type="gchararray" />
-      <column type="gchararray" />
-    </columns>
-    <data>
-      <row>
-        <col id="0">Fire</col>
-        <col id="1">fire</col>
-      </row>
-      <row>
-        <col id="0">Matrix</col>
-        <col id="1">matrix</col>
-      </row>
-    </data>
-  </object>
-
-  <object class="GtkScrolledWindow" id="settings-widget">
-    <property name="hscrollbar-policy">never</property>
-    <property name="min-content-height">200</property>
-    <property name="hexpand">0</property>
-    <property name="vexpand">1</property>
-    <child>
-      <object class="GtkViewport">
-        <property name="scroll-to-focus">1</property>
-        <child>
-          <object class="GtkBox">
-            <property name="orientation">vertical</property>
-            <property name="margin-start">60</property>
-            <property name="margin-end">60</property>
-            <property name="margin-top">30</property>
-            <property name="margin-bottom">30</property>
-
-            <child>
-              <object class="GtkLabel">
-                <property name="margin-top">30</property>
-                <property name="margin-bottom">10</property>
-                <property name="label">General Options</property>
-                <property name="xalign">0</property>
-                <style>
-                  <class name="title-4" />
-                </style>
-              </object>
-            </child>
-
-
-            <child>
-              <object class="GtkFrame">
-                <child>
-                  <object class="GtkListBox">
-                    <property name="selection-mode">none</property>
-                    <property name="show-separators">1</property>
-                    <style>
-                      <class name="rich-list" />
-                    </style>
-
-
-                    <child>
-                      <object class="GtkListBoxRow">
-                        <property name="activatable">0</property>
-                        <child>
-                          <object class="GtkBox">
-                            <child>
-                              <object class="GtkLabel">
-                                <property name="label" translatable="yes">Close Window Animation</property>
-                                <property name="xalign">0</property>
-                                <property name="halign">start</property>
-                                <property name="valign">center</property>
-                                <property name="hexpand">1</property>
-                              </object>
-                            </child>
-                            <child>
-                              <object class="GtkComboBox" id="close-animation">
-                                <property name="valign">center</property>
-                                <property name="model">animation-mode-list</property>
-                                <property name="id_column">1</property>
-                                <property name="active_id">fire</property>
-                                <child>
-                                  <object class="GtkCellRendererText" />
-                                  <attributes>
-                                    <attribute name="text">0</attribute>
-                                  </attributes>
-                                </child>
-                              </object>
-                            </child>
-                            <child>
-                              <object class="GtkButton" id="reset-close-animation">
-                                <property name="icon-name">edit-clear-symbolic</property>
-                                <property name="tooltip-text">Reset to Default Value</property>
-                                <style>
-                                  <class name="flat" />
-                                </style>
-                              </object>
-                            </child>
-                          </object>
-                        </child>
-                      </object>
-                    </child>
-
-                    <child>
-                      <object class="GtkListBoxRow">
-                        <property name="activatable">0</property>
-                        <child>
-                          <object class="GtkBox">
-                            <child>
-                              <object class="GtkLabel">
-                                <property name="label" translatable="yes">Animation Time [ms]</property>
-                                <property name="xalign">0</property>
-                                <property name="halign">start</property>
-                                <property name="valign">center</property>
-                                <property name="hexpand">1</property>
-                              </object>
-                            </child>
-                            <child>
-                              <object class="GtkScale">
-                                <property name="halign">end</property>
-                                <property name="valign">center</property>
-                                <property name="draw-value">1</property>
-                                <property name="digits">0</property>
-                                <property name="value-pos">left</property>
-                                <property name="width-request">300</property>
-                                <property name="adjustment">
-                                  <object class="GtkAdjustment" id="destroy-animation-time">
-                                    <property name="upper">10000</property>
-                                    <property name="lower">500</property>
-                                    <property name="step-increment">10</property>
-                                    <property name="page-increment">100</property>
-                                  </object>
-                                </property>
-                              </object>
-                            </child>
-                            <child>
-                              <object class="GtkButton" id="reset-destroy-animation-time">
-                                <property name="icon-name">edit-clear-symbolic</property>
-                                <property name="tooltip-text">Reset to Default Value</property>
-                                <style>
-                                  <class name="flat" />
-                                </style>
-                              </object>
-                            </child>
-                          </object>
-                        </child>
-                      </object>
-                    </child>
-
-                    <child>
-                      <object class="GtkListBoxRow">
-                        <property name="activatable">0</property>
-                        <child>
-                          <object class="GtkBox">
-                            <child>
-                              <object class="GtkLabel">
-                                <property name="label" translatable="yes">Also Burn Dialogs</property>
-                                <property name="xalign">0</property>
-                                <property name="halign">start</property>
-                                <property name="valign">center</property>
-                                <property name="hexpand">1</property>
-                              </object>
-                            </child>
-                            <child>
-                              <object class="GtkSwitch" id="destroy-dialogs">
-                                <property name="halign">end</property>
-                                <property name="valign">center</property>
-                              </object>
-                            </child>
-                            <child>
-                              <object class="GtkButton" id="reset-destroy-dialogs">
-                                <property name="icon-name">edit-clear-symbolic</property>
-                                <property name="tooltip-text">Reset to Default Value</property>
-                                <style>
-                                  <class name="flat" />
-                                </style>
-                              </object>
-                            </child>
-                          </object>
-                        </child>
-                      </object>
-                    </child>
-
-                  </object>
-                </child>
-              </object>
-            </child>
-
-
-            <child>
-              <object class="GtkBox">
-                <property name="margin-top">30</property>
-                <property name="margin-bottom">10</property>
-                <child>
-                  <object class="GtkLabel">
-                    <property name="label">Fire Animation Options</property>
-                    <property name="xalign">0</property>
-                    <property name="hexpand">1</property>
-                    <style>
-                      <class name="title-4" />
-                    </style>
-                  </object>
-                </child>
-                <child>
-                  <object class="GtkMenuButton" id="fire-preset-button">
-                    <property name="label">Choose a Preset</property>
-                    <property name="has-frame">0</property>
-                  </object>
-                </child>
-              </object>
-            </child>
-
-            <child>
-              <object class="GtkFrame">
-                <child>
-                  <object class="GtkListBox">
-                    <property name="selection-mode">none</property>
-                    <property name="show-separators">1</property>
-                    <style>
-                      <class name="rich-list" />
-                    </style>
-
-                    <child>
-                      <object class="GtkListBoxRow">
-                        <property name="activatable">0</property>
-                        <child>
-                          <object class="GtkBox">
-                            <child>
-                              <object class="GtkLabel">
-                                <property name="label" translatable="yes">Scale</property>
-                                <property name="xalign">0</property>
-                                <property name="halign">start</property>
-                                <property name="valign">center</property>
-                                <property name="hexpand">1</property>
-                              </object>
-                            </child>
-                            <child>
-                              <object class="GtkScale">
-                                <property name="halign">end</property>
-                                <property name="valign">center</property>
-                                <property name="draw-value">1</property>
-                                <property name="digits">2</property>
-                                <property name="value-pos">left</property>
-                                <property name="width-request">300</property>
-                                <property name="adjustment">
-                                  <object class="GtkAdjustment" id="flame-scale">
-                                    <property name="upper">3</property>
-                                    <property name="lower">0.1</property>
-                                    <property name="step-increment">0.01</property>
-                                    <property name="page-increment">0.1</property>
-                                  </object>
-                                </property>
-                              </object>
-                            </child>
-                            <child>
-                              <object class="GtkButton" id="reset-flame-scale">
-                                <property name="icon-name">edit-clear-symbolic</property>
-                                <property name="tooltip-text">Reset to Default Value</property>
-                                <style>
-                                  <class name="flat" />
-                                </style>
-                              </object>
-                            </child>
-                          </object>
-                        </child>
-                      </object>
-                    </child>
-
-                    <child>
-                      <object class="GtkListBoxRow">
-                        <property name="activatable">0</property>
-                        <child>
-                          <object class="GtkBox">
-                            <child>
-                              <object class="GtkLabel">
-                                <property name="label" translatable="yes">Speed</property>
-                                <property name="xalign">0</property>
-                                <property name="halign">start</property>
-                                <property name="valign">center</property>
-                                <property name="hexpand">1</property>
-                              </object>
-                            </child>
-                            <child>
-                              <object class="GtkScale">
-                                <property name="halign">end</property>
-                                <property name="valign">center</property>
-                                <property name="draw-value">1</property>
-                                <property name="digits">2</property>
-                                <property name="value-pos">left</property>
-                                <property name="width-request">300</property>
-                                <property name="adjustment">
-                                  <object class="GtkAdjustment" id="flame-movement-speed">
-                                    <property name="upper">2.0</property>
-                                    <property name="lower">-2.0</property>
-                                    <property name="step-increment">0.01</property>
-                                    <property name="page-increment">0.1</property>
-                                  </object>
-                                </property>
-                              </object>
-                            </child>
-                            <child>
-                              <object class="GtkButton" id="reset-flame-movement-speed">
-                                <property name="icon-name">edit-clear-symbolic</property>
-                                <property name="tooltip-text">Reset to Default Value</property>
-                                <style>
-                                  <class name="flat" />
-                                </style>
-                              </object>
-                            </child>
-                          </object>
-                        </child>
-                      </object>
-                    </child>
-
-                    <child>
-                      <object class="GtkListBoxRow">
-                        <property name="activatable">0</property>
-                        <child>
-                          <object class="GtkBox">
-                            <child>
-                              <object class="GtkLabel">
-                                <property name="label" translatable="yes">Gradient</property>
-                                <property name="xalign">0</property>
-                                <property name="halign">start</property>
-                                <property name="valign">center</property>
-                                <property name="hexpand">1</property>
-                              </object>
-                            </child>
-                            <child>
-                              <object class="GtkColorButton" id="fire-color-1">
-                                <property name="use_alpha">1</property>
-                                <property name="show_editor">1</property>
-                              </object>
-                            </child>
-                            <child>
-                              <object class="GtkColorButton" id="fire-color-2">
-                                <property name="use_alpha">1</property>
-                                <property name="show_editor">1</property>
-                              </object>
-                            </child>
-                            <child>
-                              <object class="GtkColorButton" id="fire-color-3">
-                                <property name="use_alpha">1</property>
-                                <property name="show_editor">1</property>
-                              </object>
-                            </child>
-                            <child>
-                              <object class="GtkColorButton" id="fire-color-4">
-                                <property name="use_alpha">1</property>
-                                <property name="show_editor">1</property>
-                              </object>
-                            </child>
-                            <child>
-                              <object class="GtkColorButton" id="fire-color-5">
-                                <property name="use_alpha">1</property>
-                                <property name="show_editor">1</property>
-                              </object>
-                            </child>
-                            <child>
-                              <object class="GtkButton" id="reset-fire-colors">
-                                <property name="icon-name">edit-clear-symbolic</property>
-                                <property name="tooltip-text">Reset to Default Value</property>
-                                <style>
-                                  <class name="flat" />
-                                </style>
-                              </object>
-                            </child>
-                          </object>
-                        </child>
-                      </object>
-                    </child>
-
-
-                  </object>
-                </child>
-              </object>
-            </child>
-
-            <child>
-              <object class="GtkBox">
-                <property name="margin-top">30</property>
-                <property name="margin-bottom">10</property>
-                <child>
-                  <object class="GtkLabel">
-                    <property name="label">Matrix Animation Options</property>
-                    <property name="xalign">0</property>
-                    <property name="hexpand">1</property>
-                    <style>
-                      <class name="title-4" />
-                    </style>
-                  </object>
-                </child>
-              </object>
-            </child>
-
-            <child>
-              <object class="GtkFrame">
-                <child>
-                  <object class="GtkListBox">
-                    <property name="selection-mode">none</property>
-                    <property name="show-separators">1</property>
-                    <style>
-                      <class name="rich-list" />
-                    </style>
-
-                    <child>
-                      <object class="GtkListBoxRow">
-                        <property name="activatable">0</property>
-                        <child>
-                          <object class="GtkBox">
-                            <child>
-                              <object class="GtkLabel">
-                                <property name="label" translatable="yes">Scale</property>
-                                <property name="xalign">0</property>
-                                <property name="halign">start</property>
-                                <property name="valign">center</property>
-                                <property name="hexpand">1</property>
-                              </object>
-                            </child>
-                            <child>
-                              <object class="GtkScale">
-                                <property name="halign">end</property>
-                                <property name="valign">center</property>
-                                <property name="draw-value">1</property>
-                                <property name="digits">0</property>
-                                <property name="value-pos">left</property>
-                                <property name="width-request">300</property>
-                                <property name="adjustment">
-                                  <object class="GtkAdjustment" id="matrix-scale">
-                                    <property name="upper">50</property>
-                                    <property name="lower">5</property>
-                                    <property name="step-increment">1</property>
-                                    <property name="page-increment">5</property>
-                                  </object>
-                                </property>
-                              </object>
-                            </child>
-                            <child>
-                              <object class="GtkButton" id="reset-matrix-scale">
-                                <property name="icon-name">edit-clear-symbolic</property>
-                                <property name="tooltip-text">Reset to Default Value</property>
-                                <style>
-                                  <class name="flat" />
-                                </style>
-                              </object>
-                            </child>
-                          </object>
-                        </child>
-                      </object>
-                    </child>
-
-                    <child>
-                      <object class="GtkListBoxRow">
-                        <property name="activatable">0</property>
-                        <child>
-                          <object class="GtkBox">
-                            <child>
-                              <object class="GtkLabel">
-                                <property name="label" translatable="yes">Randomness</property>
-                                <property name="xalign">0</property>
-                                <property name="halign">start</property>
-                                <property name="valign">center</property>
-                                <property name="hexpand">1</property>
-                              </object>
-                            </child>
-                            <child>
-                              <object class="GtkScale">
-                                <property name="halign">end</property>
-                                <property name="valign">center</property>
-                                <property name="draw-value">1</property>
-                                <property name="digits">2</property>
-                                <property name="value-pos">left</property>
-                                <property name="width-request">300</property>
-                                <property name="adjustment">
-                                  <object class="GtkAdjustment" id="matrix-randomness">
-                                    <property name="upper">1.0</property>
-                                    <property name="lower">0.0</property>
-                                    <property name="step-increment">0.01</property>
-                                    <property name="page-increment">0.1</property>
-                                  </object>
-                                </property>
-                              </object>
-                            </child>
-                            <child>
-                              <object class="GtkButton" id="reset-matrix-randomness">
-                                <property name="icon-name">edit-clear-symbolic</property>
-                                <property name="tooltip-text">Reset to Default Value</property>
-                                <style>
-                                  <class name="flat" />
-                                </style>
-                              </object>
-                            </child>
-                          </object>
-                        </child>
-                      </object>
-                    </child>
-
-                    <child>
-                      <object class="GtkListBoxRow">
-                        <property name="activatable">0</property>
-                        <child>
-                          <object class="GtkBox">
-                            <child>
-                              <object class="GtkLabel">
-                                <property name="label" translatable="yes">Trail Color</property>
-                                <property name="xalign">0</property>
-                                <property name="halign">start</property>
-                                <property name="valign">center</property>
-                                <property name="hexpand">1</property>
-                              </object>
-                            </child>
-                            <child>
-                              <object class="GtkColorButton" id="matrix-trail-color">
-                                <property name="use_alpha">0</property>
-                                <property name="show_editor">1</property>
-                              </object>
-                            </child>
-                            <child>
-                              <object class="GtkButton" id="reset-matrix-trail-color">
-                                <property name="icon-name">edit-clear-symbolic</property>
-                                <property name="tooltip-text">Reset to Default Value</property>
-                                <style>
-                                  <class name="flat" />
-                                </style>
-                              </object>
-                            </child>
-                          </object>
-                        </child>
-                      </object>
-                    </child>
-
-                    <child>
-                      <object class="GtkListBoxRow">
-                        <property name="activatable">0</property>
-                        <child>
-                          <object class="GtkBox">
-                            <child>
-                              <object class="GtkLabel">
-                                <property name="label" translatable="yes">Tip Color</property>
-                                <property name="xalign">0</property>
-                                <property name="halign">start</property>
-                                <property name="valign">center</property>
-                                <property name="hexpand">1</property>
-                              </object>
-                            </child>
-                            <child>
-                              <object class="GtkColorButton" id="matrix-tip-color">
-                                <property name="use_alpha">0</property>
-                                <property name="show_editor">1</property>
-                              </object>
-                            </child>
-                            <child>
-                              <object class="GtkButton" id="reset-matrix-tip-color">
-                                <property name="icon-name">edit-clear-symbolic</property>
-                                <property name="tooltip-text">Reset to Default Value</property>
-                                <style>
-                                  <class name="flat" />
-                                </style>
-                              </object>
-                            </child>
-                          </object>
-                        </child>
-                      </object>
-                    </child>
-
-
-                  </object>
-                </child>
-              </object>
-            </child>
-
-
-          </object>
-        </child>
-      </object>
-    </child>
-  </object>
-
-
-</interface>

resources/ui/gtk4/EnergizeA.ui

@@ -0,0 +1,155 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+
+  <object class="GtkBox" id="energize-a-prefs">
+    <property name="orientation">vertical</property>
+    <property name="margin-start">60</property>
+    <property name="margin-end">60</property>
+    <property name="margin-top">60</property>
+    <property name="margin-bottom">60</property>
+
+    <child>
+      <object class="GtkFrame">
+        <child>
+          <object class="GtkListBox">
+            <property name="selection-mode">none</property>
+            <property name="show-separators">1</property>
+            <style>
+              <class name="rich-list" />
+            </style>
+
+            <child>
+              <object class="GtkListBoxRow">
+                <property name="activatable">0</property>
+                <child>
+                  <object class="GtkBox">
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="label" translatable="yes">Animation Time [ms]</property>
+                        <property name="xalign">0</property>
+                        <property name="halign">start</property>
+                        <property name="valign">center</property>
+                        <property name="hexpand">1</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkScale">
+                        <property name="halign">end</property>
+                        <property name="valign">center</property>
+                        <property name="draw-value">1</property>
+                        <property name="digits">0</property>
+                        <property name="value-pos">left</property>
+                        <property name="width-request">300</property>
+                        <property name="adjustment">
+                          <object class="GtkAdjustment" id="energize-a-animation-time">
+                            <property name="upper">10000</property>
+                            <property name="lower">500</property>
+                            <property name="step-increment">10</property>
+                            <property name="page-increment">100</property>
+                          </object>
+                        </property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkButton" id="reset-energize-a-animation-time">
+                        <property name="icon-name">edit-clear-symbolic</property>
+                        <property name="tooltip-text">Reset to Default Value</property>
+                        <style>
+                          <class name="flat" />
+                        </style>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+
+            <child>
+              <object class="GtkListBoxRow">
+                <property name="activatable">0</property>
+                <child>
+                  <object class="GtkBox">
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="label" translatable="yes">Scale</property>
+                        <property name="xalign">0</property>
+                        <property name="halign">start</property>
+                        <property name="valign">center</property>
+                        <property name="hexpand">1</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkScale">
+                        <property name="halign">end</property>
+                        <property name="valign">center</property>
+                        <property name="draw-value">1</property>
+                        <property name="digits">2</property>
+                        <property name="value-pos">left</property>
+                        <property name="width-request">300</property>
+                        <property name="adjustment">
+                          <object class="GtkAdjustment" id="energize-a-scale">
+                            <property name="upper">10</property>
+                            <property name="lower">0.1</property>
+                            <property name="step-increment">0.01</property>
+                            <property name="page-increment">0.1</property>
+                          </object>
+                        </property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkButton" id="reset-energize-a-scale">
+                        <property name="icon-name">edit-clear-symbolic</property>
+                        <property name="tooltip-text">Reset to Default Value</property>
+                        <style>
+                          <class name="flat" />
+                        </style>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+
+            <child>
+              <object class="GtkListBoxRow">
+                <property name="activatable">0</property>
+                <child>
+                  <object class="GtkBox">
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="label" translatable="yes">Color</property>
+                        <property name="xalign">0</property>
+                        <property name="halign">start</property>
+                        <property name="valign">center</property>
+                        <property name="hexpand">1</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkColorButton" id="energize-a-color">
+                        <property name="use_alpha">0</property>
+                        <property name="show_editor">1</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkButton" id="reset-energize-a-color">
+                        <property name="icon-name">edit-clear-symbolic</property>
+                        <property name="tooltip-text">Reset to Default Value</property>
+                        <style>
+                          <class name="flat" />
+                        </style>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+
+          </object>
+        </child>
+      </object>
+    </child>
+
+
+  </object>
+
+</interface>

resources/ui/gtk4/EnergizeB.ui

@@ -0,0 +1,155 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+
+  <object class="GtkBox" id="energize-b-prefs">
+    <property name="orientation">vertical</property>
+    <property name="margin-start">60</property>
+    <property name="margin-end">60</property>
+    <property name="margin-top">60</property>
+    <property name="margin-bottom">60</property>
+
+    <child>
+      <object class="GtkFrame">
+        <child>
+          <object class="GtkListBox">
+            <property name="selection-mode">none</property>
+            <property name="show-separators">1</property>
+            <style>
+              <class name="rich-list" />
+            </style>
+
+            <child>
+              <object class="GtkListBoxRow">
+                <property name="activatable">0</property>
+                <child>
+                  <object class="GtkBox">
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="label" translatable="yes">Animation Time [ms]</property>
+                        <property name="xalign">0</property>
+                        <property name="halign">start</property>
+                        <property name="valign">center</property>
+                        <property name="hexpand">1</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkScale">
+                        <property name="halign">end</property>
+                        <property name="valign">center</property>
+                        <property name="draw-value">1</property>
+                        <property name="digits">0</property>
+                        <property name="value-pos">left</property>
+                        <property name="width-request">300</property>
+                        <property name="adjustment">
+                          <object class="GtkAdjustment" id="energize-b-animation-time">
+                            <property name="upper">10000</property>
+                            <property name="lower">500</property>
+                            <property name="step-increment">10</property>
+                            <property name="page-increment">100</property>
+                          </object>
+                        </property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkButton" id="reset-energize-b-animation-time">
+                        <property name="icon-name">edit-clear-symbolic</property>
+                        <property name="tooltip-text">Reset to Default Value</property>
+                        <style>
+                          <class name="flat" />
+                        </style>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+
+            <child>
+              <object class="GtkListBoxRow">
+                <property name="activatable">0</property>
+                <child>
+                  <object class="GtkBox">
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="label" translatable="yes">Scale</property>
+                        <property name="xalign">0</property>
+                        <property name="halign">start</property>
+                        <property name="valign">center</property>
+                        <property name="hexpand">1</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkScale">
+                        <property name="halign">end</property>
+                        <property name="valign">center</property>
+                        <property name="draw-value">1</property>
+                        <property name="digits">2</property>
+                        <property name="value-pos">left</property>
+                        <property name="width-request">300</property>
+                        <property name="adjustment">
+                          <object class="GtkAdjustment" id="energize-b-scale">
+                            <property name="upper">10</property>
+                            <property name="lower">0.1</property>
+                            <property name="step-increment">0.01</property>
+                            <property name="page-increment">0.1</property>
+                          </object>
+                        </property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkButton" id="reset-energize-b-scale">
+                        <property name="icon-name">edit-clear-symbolic</property>
+                        <property name="tooltip-text">Reset to Default Value</property>
+                        <style>
+                          <class name="flat" />
+                        </style>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+
+            <child>
+              <object class="GtkListBoxRow">
+                <property name="activatable">0</property>
+                <child>
+                  <object class="GtkBox">
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="label" translatable="yes">Color</property>
+                        <property name="xalign">0</property>
+                        <property name="halign">start</property>
+                        <property name="valign">center</property>
+                        <property name="hexpand">1</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkColorButton" id="energize-b-color">
+                        <property name="use_alpha">0</property>
+                        <property name="show_editor">1</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkButton" id="reset-energize-b-color">
+                        <property name="icon-name">edit-clear-symbolic</property>
+                        <property name="tooltip-text">Reset to Default Value</property>
+                        <style>
+                          <class name="flat" />
+                        </style>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+
+          </object>
+        </child>
+      </object>
+    </child>
+
+
+  </object>
+
+</interface>

resources/ui/gtk4/Fire.ui

@@ -0,0 +1,315 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+
+  <object class="GtkBox" id="fire-prefs">
+    <property name="orientation">vertical</property>
+    <property name="margin-start">60</property>
+    <property name="margin-end">60</property>
+    <property name="margin-top">60</property>
+    <property name="margin-bottom">60</property>
+
+    <child>
+      <object class="GtkFrame">
+        <property name="margin-bottom">20</property>
+        <child>
+          <object class="GtkListBox">
+            <property name="selection-mode">none</property>
+            <property name="show-separators">1</property>
+            <style>
+              <class name="rich-list" />
+            </style>
+
+            <child>
+              <object class="GtkListBoxRow">
+                <property name="activatable">0</property>
+                <child>
+                  <object class="GtkBox">
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="label" translatable="yes">Presets</property>
+                        <property name="xalign">0</property>
+                        <property name="halign">start</property>
+                        <property name="valign">center</property>
+                        <property name="hexpand">1</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkMenuButton" id="fire-preset-button">
+                        <property name="label">Choose a Preset</property>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+          </object>
+        </child>
+      </object>
+    </child>
+
+    <child>
+      <object class="GtkFrame">
+        <child>
+          <object class="GtkListBox">
+            <property name="selection-mode">none</property>
+            <property name="show-separators">1</property>
+            <style>
+              <class name="rich-list" />
+            </style>
+
+            <child>
+              <object class="GtkListBoxRow">
+                <property name="activatable">0</property>
+                <child>
+                  <object class="GtkBox">
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="label" translatable="yes">Animation Time [ms]</property>
+                        <property name="xalign">0</property>
+                        <property name="halign">start</property>
+                        <property name="valign">center</property>
+                        <property name="hexpand">1</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkScale">
+                        <property name="halign">end</property>
+                        <property name="valign">center</property>
+                        <property name="draw-value">1</property>
+                        <property name="digits">0</property>
+                        <property name="value-pos">left</property>
+                        <property name="width-request">300</property>
+                        <property name="adjustment">
+                          <object class="GtkAdjustment" id="fire-animation-time">
+                            <property name="upper">10000</property>
+                            <property name="lower">500</property>
+                            <property name="step-increment">10</property>
+                            <property name="page-increment">100</property>
+                          </object>
+                        </property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkButton" id="reset-fire-animation-time">
+                        <property name="icon-name">edit-clear-symbolic</property>
+                        <property name="tooltip-text">Reset to Default Value</property>
+                        <style>
+                          <class name="flat" />
+                        </style>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+
+            <child>
+              <object class="GtkListBoxRow">
+                <property name="activatable">0</property>
+                <child>
+                  <object class="GtkBox">
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="label" translatable="yes">Scale</property>
+                        <property name="xalign">0</property>
+                        <property name="halign">start</property>
+                        <property name="valign">center</property>
+                        <property name="hexpand">1</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkScale">
+                        <property name="halign">end</property>
+                        <property name="valign">center</property>
+                        <property name="draw-value">1</property>
+                        <property name="digits">2</property>
+                        <property name="value-pos">left</property>
+                        <property name="width-request">300</property>
+                        <property name="adjustment">
+                          <object class="GtkAdjustment" id="flame-scale">
+                            <property name="upper">3</property>
+                            <property name="lower">0.1</property>
+                            <property name="step-increment">0.01</property>
+                            <property name="page-increment">0.1</property>
+                          </object>
+                        </property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkButton" id="reset-flame-scale">
+                        <property name="icon-name">edit-clear-symbolic</property>
+                        <property name="tooltip-text">Reset to Default Value</property>
+                        <style>
+                          <class name="flat" />
+                        </style>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+
+            <child>
+              <object class="GtkListBoxRow">
+                <property name="activatable">0</property>
+                <child>
+                  <object class="GtkBox">
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="label" translatable="yes">Speed</property>
+                        <property name="xalign">0</property>
+                        <property name="halign">start</property>
+                        <property name="valign">center</property>
+                        <property name="hexpand">1</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkScale">
+                        <property name="halign">end</property>
+                        <property name="valign">center</property>
+                        <property name="draw-value">1</property>
+                        <property name="digits">2</property>
+                        <property name="value-pos">left</property>
+                        <property name="width-request">300</property>
+                        <property name="adjustment">
+                          <object class="GtkAdjustment" id="flame-movement-speed">
+                            <property name="upper">2.0</property>
+                            <property name="lower">-2.0</property>
+                            <property name="step-increment">0.01</property>
+                            <property name="page-increment">0.1</property>
+                          </object>
+                        </property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkButton" id="reset-flame-movement-speed">
+                        <property name="icon-name">edit-clear-symbolic</property>
+                        <property name="tooltip-text">Reset to Default Value</property>
+                        <style>
+                          <class name="flat" />
+                        </style>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+
+            <child>
+              <object class="GtkListBoxRow">
+                <property name="activatable">0</property>
+                <child>
+                  <object class="GtkBox">
+                    <child>
+                      <object class="GtkBox">
+                        <property name="orientation">vertical</property>
+                        <property name="spacing">3</property>
+                        <child>
+                          <object class="GtkLabel">
+                            <property name="label" translatable="yes">3D Noise</property>
+                            <property name="xalign">0</property>
+                            <property name="halign">start</property>
+                            <property name="valign">center</property>
+                            <property name="hexpand">1</property>
+                          </object>
+                        </child>
+                        <child>
+                          <object class="GtkLabel">
+                            <property name="label" translatable="yes">Creates a more dynamic fire but requires more GPU power.</property>
+                            <property name="xalign">0</property>
+                            <property name="halign">start</property>
+                            <property name="valign">center</property>
+                            <property name="hexpand">1</property>
+                            <style>
+                              <class name="dim-label" />
+                              <class name="caption" />
+                            </style>
+                          </object>
+                        </child>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkSwitch" id="flame-3d-noise">
+                        <property name="halign">end</property>
+                        <property name="valign">center</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkButton" id="reset-flame-3d-noise">
+                        <property name="icon-name">edit-clear-symbolic</property>
+                        <property name="tooltip-text">Reset to Default Value</property>
+                        <style>
+                          <class name="flat" />
+                        </style>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+
+            <child>
+              <object class="GtkListBoxRow">
+                <property name="activatable">0</property>
+                <child>
+                  <object class="GtkBox">
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="label" translatable="yes">Gradient</property>
+                        <property name="xalign">0</property>
+                        <property name="halign">start</property>
+                        <property name="valign">center</property>
+                        <property name="hexpand">1</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkColorButton" id="fire-color-1">
+                        <property name="use_alpha">1</property>
+                        <property name="show_editor">1</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkColorButton" id="fire-color-2">
+                        <property name="use_alpha">1</property>
+                        <property name="show_editor">1</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkColorButton" id="fire-color-3">
+                        <property name="use_alpha">1</property>
+                        <property name="show_editor">1</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkColorButton" id="fire-color-4">
+                        <property name="use_alpha">1</property>
+                        <property name="show_editor">1</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkColorButton" id="fire-color-5">
+                        <property name="use_alpha">1</property>
+                        <property name="show_editor">1</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkButton" id="reset-fire-colors">
+                        <property name="icon-name">edit-clear-symbolic</property>
+                        <property name="tooltip-text">Reset to Default Value</property>
+                        <style>
+                          <class name="flat" />
+                        </style>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+
+          </object>
+        </child>
+      </object>
+    </child>
+  </object>
+
+</interface>

resources/ui/gtk4/Matrix.ui

@@ -0,0 +1,234 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+
+  <object class="GtkBox" id="matrix-prefs">
+    <property name="orientation">vertical</property>
+    <property name="margin-start">60</property>
+    <property name="margin-end">60</property>
+    <property name="margin-top">60</property>
+    <property name="margin-bottom">60</property>
+
+    <child>
+      <object class="GtkFrame">
+        <child>
+          <object class="GtkListBox">
+            <property name="selection-mode">none</property>
+            <property name="show-separators">1</property>
+            <style>
+              <class name="rich-list" />
+            </style>
+
+            <child>
+              <object class="GtkListBoxRow">
+                <property name="activatable">0</property>
+                <child>
+                  <object class="GtkBox">
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="label" translatable="yes">Animation Time [ms]</property>
+                        <property name="xalign">0</property>
+                        <property name="halign">start</property>
+                        <property name="valign">center</property>
+                        <property name="hexpand">1</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkScale">
+                        <property name="halign">end</property>
+                        <property name="valign">center</property>
+                        <property name="draw-value">1</property>
+                        <property name="digits">0</property>
+                        <property name="value-pos">left</property>
+                        <property name="width-request">300</property>
+                        <property name="adjustment">
+                          <object class="GtkAdjustment" id="matrix-animation-time">
+                            <property name="upper">10000</property>
+                            <property name="lower">500</property>
+                            <property name="step-increment">10</property>
+                            <property name="page-increment">100</property>
+                          </object>
+                        </property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkButton" id="reset-matrix-animation-time">
+                        <property name="icon-name">edit-clear-symbolic</property>
+                        <property name="tooltip-text">Reset to Default Value</property>
+                        <style>
+                          <class name="flat" />
+                        </style>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+
+            <child>
+              <object class="GtkListBoxRow">
+                <property name="activatable">0</property>
+                <child>
+                  <object class="GtkBox">
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="label" translatable="yes">Scale</property>
+                        <property name="xalign">0</property>
+                        <property name="halign">start</property>
+                        <property name="valign">center</property>
+                        <property name="hexpand">1</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkScale">
+                        <property name="halign">end</property>
+                        <property name="valign">center</property>
+                        <property name="draw-value">1</property>
+                        <property name="digits">0</property>
+                        <property name="value-pos">left</property>
+                        <property name="width-request">300</property>
+                        <property name="adjustment">
+                          <object class="GtkAdjustment" id="matrix-scale">
+                            <property name="upper">50</property>
+                            <property name="lower">5</property>
+                            <property name="step-increment">1</property>
+                            <property name="page-increment">5</property>
+                          </object>
+                        </property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkButton" id="reset-matrix-scale">
+                        <property name="icon-name">edit-clear-symbolic</property>
+                        <property name="tooltip-text">Reset to Default Value</property>
+                        <style>
+                          <class name="flat" />
+                        </style>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+
+            <child>
+              <object class="GtkListBoxRow">
+                <property name="activatable">0</property>
+                <child>
+                  <object class="GtkBox">
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="label" translatable="yes">Randomness</property>
+                        <property name="xalign">0</property>
+                        <property name="halign">start</property>
+                        <property name="valign">center</property>
+                        <property name="hexpand">1</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkScale">
+                        <property name="halign">end</property>
+                        <property name="valign">center</property>
+                        <property name="draw-value">1</property>
+                        <property name="digits">2</property>
+                        <property name="value-pos">left</property>
+                        <property name="width-request">300</property>
+                        <property name="adjustment">
+                          <object class="GtkAdjustment" id="matrix-randomness">
+                            <property name="upper">1.0</property>
+                            <property name="lower">0.0</property>
+                            <property name="step-increment">0.01</property>
+                            <property name="page-increment">0.1</property>
+                          </object>
+                        </property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkButton" id="reset-matrix-randomness">
+                        <property name="icon-name">edit-clear-symbolic</property>
+                        <property name="tooltip-text">Reset to Default Value</property>
+                        <style>
+                          <class name="flat" />
+                        </style>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+
+            <child>
+              <object class="GtkListBoxRow">
+                <property name="activatable">0</property>
+                <child>
+                  <object class="GtkBox">
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="label" translatable="yes">Trail Color</property>
+                        <property name="xalign">0</property>
+                        <property name="halign">start</property>
+                        <property name="valign">center</property>
+                        <property name="hexpand">1</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkColorButton" id="matrix-trail-color">
+                        <property name="use_alpha">0</property>
+                        <property name="show_editor">1</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkButton" id="reset-matrix-trail-color">
+                        <property name="icon-name">edit-clear-symbolic</property>
+                        <property name="tooltip-text">Reset to Default Value</property>
+                        <style>
+                          <class name="flat" />
+                        </style>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+
+            <child>
+              <object class="GtkListBoxRow">
+                <property name="activatable">0</property>
+                <child>
+                  <object class="GtkBox">
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="label" translatable="yes">Tip Color</property>
+                        <property name="xalign">0</property>
+                        <property name="halign">start</property>
+                        <property name="valign">center</property>
+                        <property name="hexpand">1</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkColorButton" id="matrix-tip-color">
+                        <property name="use_alpha">0</property>
+                        <property name="show_editor">1</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkButton" id="reset-matrix-tip-color">
+                        <property name="icon-name">edit-clear-symbolic</property>
+                        <property name="tooltip-text">Reset to Default Value</property>
+                        <style>
+                          <class name="flat" />
+                        </style>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+
+
+          </object>
+        </child>
+      </object>
+    </child>
+
+  </object>
+</interface>

resources/ui/gtk4/TRexAttack.ui

@@ -0,0 +1,246 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+
+  <object class="GtkBox" id="trex-prefs">
+    <property name="orientation">vertical</property>
+    <property name="margin-start">60</property>
+    <property name="margin-end">60</property>
+    <property name="margin-top">60</property>
+    <property name="margin-bottom">60</property>
+
+    <child>
+      <object class="GtkFrame">
+        <child>
+          <object class="GtkListBox">
+            <property name="selection-mode">none</property>
+            <property name="show-separators">1</property>
+            <style>
+              <class name="rich-list" />
+            </style>
+
+            <child>
+              <object class="GtkListBoxRow">
+                <property name="activatable">0</property>
+                <child>
+                  <object class="GtkBox">
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="label" translatable="yes">Animation Time [ms]</property>
+                        <property name="xalign">0</property>
+                        <property name="halign">start</property>
+                        <property name="valign">center</property>
+                        <property name="hexpand">1</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkScale">
+                        <property name="halign">end</property>
+                        <property name="valign">center</property>
+                        <property name="draw-value">1</property>
+                        <property name="digits">0</property>
+                        <property name="value-pos">left</property>
+                        <property name="width-request">300</property>
+                        <property name="adjustment">
+                          <object class="GtkAdjustment" id="trex-animation-time">
+                            <property name="upper">10000</property>
+                            <property name="lower">500</property>
+                            <property name="step-increment">10</property>
+                            <property name="page-increment">100</property>
+                          </object>
+                        </property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkButton" id="reset-trex-animation-time">
+                        <property name="icon-name">edit-clear-symbolic</property>
+                        <property name="tooltip-text">Reset to Default Value</property>
+                        <style>
+                          <class name="flat" />
+                        </style>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+
+            <child>
+              <object class="GtkListBoxRow">
+                <property name="activatable">0</property>
+                <child>
+                  <object class="GtkBox">
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="label" translatable="yes">Claw Scratch Scale</property>
+                        <property name="xalign">0</property>
+                        <property name="halign">start</property>
+                        <property name="valign">center</property>
+                        <property name="hexpand">1</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkScale">
+                        <property name="halign">end</property>
+                        <property name="valign">center</property>
+                        <property name="draw-value">1</property>
+                        <property name="digits">1</property>
+                        <property name="value-pos">left</property>
+                        <property name="width-request">300</property>
+                        <property name="adjustment">
+                          <object class="GtkAdjustment" id="claw-scratch-scale">
+                            <property name="upper">10</property>
+                            <property name="lower">0.1</property>
+                            <property name="step-increment">0.1</property>
+                            <property name="page-increment">1</property>
+                          </object>
+                        </property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkButton" id="reset-claw-scratch-scale">
+                        <property name="icon-name">edit-clear-symbolic</property>
+                        <property name="tooltip-text">Reset to Default Value</property>
+                        <style>
+                          <class name="flat" />
+                        </style>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+
+            <child>
+              <object class="GtkListBoxRow">
+                <property name="activatable">0</property>
+                <child>
+                  <object class="GtkBox">
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="label" translatable="yes">Claw Scratch Count</property>
+                        <property name="xalign">0</property>
+                        <property name="halign">start</property>
+                        <property name="valign">center</property>
+                        <property name="hexpand">1</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkScale">
+                        <property name="halign">end</property>
+                        <property name="valign">center</property>
+                        <property name="draw-value">1</property>
+                        <property name="digits">0</property>
+                        <property name="value-pos">left</property>
+                        <property name="width-request">300</property>
+                        <property name="adjustment">
+                          <object class="GtkAdjustment" id="claw-scratch-count">
+                            <property name="upper">50</property>
+                            <property name="lower">1</property>
+                            <property name="step-increment">1</property>
+                            <property name="page-increment">10</property>
+                          </object>
+                        </property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkButton" id="reset-claw-scratch-count">
+                        <property name="icon-name">edit-clear-symbolic</property>
+                        <property name="tooltip-text">Reset to Default Value</property>
+                        <style>
+                          <class name="flat" />
+                        </style>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+
+            <child>
+              <object class="GtkListBoxRow">
+                <property name="activatable">0</property>
+                <child>
+                  <object class="GtkBox">
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="label" translatable="yes">Warp Effect</property>
+                        <property name="xalign">0</property>
+                        <property name="halign">start</property>
+                        <property name="valign">center</property>
+                        <property name="hexpand">1</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkScale">
+                        <property name="halign">end</property>
+                        <property name="valign">center</property>
+                        <property name="draw-value">1</property>
+                        <property name="digits">2</property>
+                        <property name="value-pos">left</property>
+                        <property name="width-request">300</property>
+                        <property name="adjustment">
+                          <object class="GtkAdjustment" id="claw-scratch-warp">
+                            <property name="upper">1</property>
+                            <property name="lower">0</property>
+                            <property name="step-increment">0.01</property>
+                            <property name="page-increment">0.1</property>
+                          </object>
+                        </property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkButton" id="reset-claw-scratch-warp">
+                        <property name="icon-name">edit-clear-symbolic</property>
+                        <property name="tooltip-text">Reset to Default Value</property>
+                        <style>
+                          <class name="flat" />
+                        </style>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+
+            <child>
+              <object class="GtkListBoxRow">
+                <property name="activatable">0</property>
+                <child>
+                  <object class="GtkBox">
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="label" translatable="yes">Flash Color</property>
+                        <property name="xalign">0</property>
+                        <property name="halign">start</property>
+                        <property name="valign">center</property>
+                        <property name="hexpand">1</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkColorButton" id="claw-scratch-color">
+                        <property name="use_alpha">1</property>
+                        <property name="show_editor">1</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkButton" id="reset-claw-scratch-color">
+                        <property name="icon-name">edit-clear-symbolic</property>
+                        <property name="tooltip-text">Reset to Default Value</property>
+                        <style>
+                          <class name="flat" />
+                        </style>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+
+          </object>
+        </child>
+      </object>
+    </child>
+
+  </object>
+
+</interface>

resources/ui/gtk4/TVEffect.ui

@@ -0,0 +1,109 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+
+  <object class="GtkBox" id="tv-prefs">
+    <property name="orientation">vertical</property>
+    <property name="margin-start">60</property>
+    <property name="margin-end">60</property>
+    <property name="margin-top">60</property>
+    <property name="margin-bottom">60</property>
+
+    <child>
+      <object class="GtkFrame">
+        <child>
+          <object class="GtkListBox">
+            <property name="selection-mode">none</property>
+            <property name="show-separators">1</property>
+            <style>
+              <class name="rich-list" />
+            </style>
+
+            <child>
+              <object class="GtkListBoxRow">
+                <property name="activatable">0</property>
+                <child>
+                  <object class="GtkBox">
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="label" translatable="yes">Animation Time [ms]</property>
+                        <property name="xalign">0</property>
+                        <property name="halign">start</property>
+                        <property name="valign">center</property>
+                        <property name="hexpand">1</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkScale">
+                        <property name="halign">end</property>
+                        <property name="valign">center</property>
+                        <property name="draw-value">1</property>
+                        <property name="digits">0</property>
+                        <property name="value-pos">left</property>
+                        <property name="width-request">300</property>
+                        <property name="adjustment">
+                          <object class="GtkAdjustment" id="tv-animation-time">
+                            <property name="upper">5000</property>
+                            <property name="lower">100</property>
+                            <property name="step-increment">10</property>
+                            <property name="page-increment">100</property>
+                          </object>
+                        </property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkButton" id="reset-tv-animation-time">
+                        <property name="icon-name">edit-clear-symbolic</property>
+                        <property name="tooltip-text">Reset to Default Value</property>
+                        <style>
+                          <class name="flat" />
+                        </style>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+
+            <child>
+              <object class="GtkListBoxRow">
+                <property name="activatable">0</property>
+                <child>
+                  <object class="GtkBox">
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="label" translatable="yes">Color</property>
+                        <property name="xalign">0</property>
+                        <property name="halign">start</property>
+                        <property name="valign">center</property>
+                        <property name="hexpand">1</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkColorButton" id="tv-effect-color">
+                        <property name="use_alpha">0</property>
+                        <property name="show_editor">1</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkButton" id="reset-tv-effect-color">
+                        <property name="icon-name">edit-clear-symbolic</property>
+                        <property name="tooltip-text">Reset to Default Value</property>
+                        <style>
+                          <class name="flat" />
+                        </style>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+
+          </object>
+        </child>
+      </object>
+    </child>
+
+
+  </object>
+
+</interface>

resources/ui/gtk4/Wisps.ui

@@ -0,0 +1,155 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+
+  <object class="GtkBox" id="wisps-prefs">
+    <property name="orientation">vertical</property>
+    <property name="margin-start">60</property>
+    <property name="margin-end">60</property>
+    <property name="margin-top">60</property>
+    <property name="margin-bottom">60</property>
+
+    <child>
+      <object class="GtkFrame">
+        <child>
+          <object class="GtkListBox">
+            <property name="selection-mode">none</property>
+            <property name="show-separators">1</property>
+            <style>
+              <class name="rich-list" />
+            </style>
+
+            <child>
+              <object class="GtkListBoxRow">
+                <property name="activatable">0</property>
+                <child>
+                  <object class="GtkBox">
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="label" translatable="yes">Animation Time [ms]</property>
+                        <property name="xalign">0</property>
+                        <property name="halign">start</property>
+                        <property name="valign">center</property>
+                        <property name="hexpand">1</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkScale">
+                        <property name="halign">end</property>
+                        <property name="valign">center</property>
+                        <property name="draw-value">1</property>
+                        <property name="digits">0</property>
+                        <property name="value-pos">left</property>
+                        <property name="width-request">300</property>
+                        <property name="adjustment">
+                          <object class="GtkAdjustment" id="wisps-animation-time">
+                            <property name="upper">10000</property>
+                            <property name="lower">500</property>
+                            <property name="step-increment">10</property>
+                            <property name="page-increment">100</property>
+                          </object>
+                        </property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkButton" id="reset-wisps-animation-time">
+                        <property name="icon-name">edit-clear-symbolic</property>
+                        <property name="tooltip-text">Reset to Default Value</property>
+                        <style>
+                          <class name="flat" />
+                        </style>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+
+            <child>
+              <object class="GtkListBoxRow">
+                <property name="activatable">0</property>
+                <child>
+                  <object class="GtkBox">
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="label" translatable="yes">Scale</property>
+                        <property name="xalign">0</property>
+                        <property name="halign">start</property>
+                        <property name="valign">center</property>
+                        <property name="hexpand">1</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkScale">
+                        <property name="halign">end</property>
+                        <property name="valign">center</property>
+                        <property name="draw-value">1</property>
+                        <property name="digits">2</property>
+                        <property name="value-pos">left</property>
+                        <property name="width-request">300</property>
+                        <property name="adjustment">
+                          <object class="GtkAdjustment" id="wisps-scale">
+                            <property name="upper">10</property>
+                            <property name="lower">0.1</property>
+                            <property name="step-increment">0.01</property>
+                            <property name="page-increment">0.1</property>
+                          </object>
+                        </property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkButton" id="reset-wisps-scale">
+                        <property name="icon-name">edit-clear-symbolic</property>
+                        <property name="tooltip-text">Reset to Default Value</property>
+                        <style>
+                          <class name="flat" />
+                        </style>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+
+            <child>
+              <object class="GtkListBoxRow">
+                <property name="activatable">0</property>
+                <child>
+                  <object class="GtkBox">
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="label" translatable="yes">Color</property>
+                        <property name="xalign">0</property>
+                        <property name="halign">start</property>
+                        <property name="valign">center</property>
+                        <property name="hexpand">1</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkColorButton" id="wisps-color">
+                        <property name="use_alpha">0</property>
+                        <property name="show_editor">1</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkButton" id="reset-wisps-color">
+                        <property name="icon-name">edit-clear-symbolic</property>
+                        <property name="tooltip-text">Reset to Default Value</property>
+                        <style>
+                          <class name="flat" />
+                        </style>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+
+          </object>
+        </child>
+      </object>
+    </child>
+
+
+  </object>
+
+</interface>

resources/ui/gtk4/prefs.ui

@@ -0,0 +1,167 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <requires lib="gtk" version="4.0" />
+
+  <menu id="close-effect-menu"></menu>
+
+  <object class="GtkMenuButton" id="menu-button">
+    <property name="menu-model">main-menu</property>
+    <property name="icon-name">open-menu-symbolic</property>
+  </object>
+
+  <object class="GtkBox" id="settings-widget">
+    <child>
+      <object class="GtkStackSidebar">
+        <property name="stack">main-stack</property>
+      </object>
+    </child>
+    <child>
+      <object class="GtkStack" id="main-stack">
+        <property name="transition-type">slide-up-down</property>
+        <property name="hexpand">1</property>
+
+        <child>
+          <object class="GtkStackPage">
+            <property name="name">general</property>
+            <property name="title" translatable="yes">General Options</property>
+
+            <property name="child">
+              <object class="GtkBox" id="general-prefs">
+                <property name="orientation">vertical</property>
+                <property name="margin-start">60</property>
+                <property name="margin-end">60</property>
+                <property name="margin-top">60</property>
+                <property name="margin-bottom">60</property>
+
+                <child>
+                  <object class="GtkImage">
+                    <property name="valign">center</property>
+                    <property name="icon-name">burn-my-windows-symbolic</property>
+                    <property name="pixel_size">128</property>
+                  </object>
+                </child>
+
+                <child>
+                  <object class="GtkLabel">
+                    <property name="label" translatable="yes">Welcome to Burn-My-Windows!</property>
+                    <property name="margin-top">8</property>
+                    <property name="margin-bottom">6</property>
+                    <style>
+                      <class name="large-title" />
+                    </style>
+                  </object>
+                </child>
+
+                <child>
+                  <object class="GtkLabel">
+                    <property name="label" translatable="yes">If you like this extension, recommend it to your friends :)</property>
+                    <property name="margin-bottom">36</property>
+                  </object>
+                </child>
+
+                <child>
+                  <object class="GtkFrame">
+                    <child>
+                      <object class="GtkListBox">
+                        <property name="selection-mode">none</property>
+                        <property name="show-separators">1</property>
+                        <style>
+                          <class name="rich-list" />
+                        </style>
+
+
+                        <child>
+                          <object class="GtkListBoxRow">
+                            <property name="activatable">0</property>
+                            <child>
+                              <object class="GtkBox">
+                                <child>
+                                  <object class="GtkBox">
+                                    <property name="orientation">vertical</property>
+                                    <property name="spacing">3</property>
+                                    <child>
+                                      <object class="GtkLabel">
+                                        <property name="label" translatable="yes">Close Window Animation</property>
+                                        <property name="xalign">0</property>
+                                        <property name="halign">start</property>
+                                        <property name="valign">center</property>
+                                        <property name="hexpand">1</property>
+                                      </object>
+                                    </child>
+                                    <child>
+                                      <object class="GtkLabel">
+                                        <property name="label" translatable="yes">If multiple are selected, one is chosen randomly.</property>
+                                        <property name="xalign">0</property>
+                                        <property name="halign">start</property>
+                                        <property name="valign">center</property>
+                                        <property name="hexpand">1</property>
+                                        <style>
+                                          <class name="dim-label" />
+                                          <class name="caption" />
+                                        </style>
+                                      </object>
+                                    </child>
+                                  </object>
+                                </child>
+                                <child>
+                                  <object class="GtkMenuButton" id="close-effect-button">
+                                    <property name="label">Choose Effects</property>
+                                    <property name="menu-model">close-effect-menu</property>
+                                  </object>
+                                </child>
+                              </object>
+                            </child>
+                          </object>
+                        </child>
+
+                        <child>
+                          <object class="GtkListBoxRow">
+                            <property name="activatable">0</property>
+                            <child>
+                              <object class="GtkBox">
+                                <child>
+                                  <object class="GtkLabel">
+                                    <property name="label" translatable="yes">Also Burn Dialogs</property>
+                                    <property name="xalign">0</property>
+                                    <property name="halign">start</property>
+                                    <property name="valign">center</property>
+                                    <property name="hexpand">1</property>
+                                  </object>
+                                </child>
+                                <child>
+                                  <object class="GtkSwitch" id="destroy-dialogs">
+                                    <property name="halign">end</property>
+                                    <property name="valign">center</property>
+                                  </object>
+                                </child>
+                                <child>
+                                  <object class="GtkButton" id="reset-destroy-dialogs">
+                                    <property name="icon-name">edit-clear-symbolic</property>
+                                    <property name="tooltip-text">Reset to Default Value</property>
+                                    <style>
+                                      <class name="flat" />
+                                    </style>
+                                  </object>
+                                </child>
+                              </object>
+                            </child>
+                          </object>
+                        </child>
+
+                      </object>
+                    </child>
+                  </object>
+                </child>
+
+              </object>
+            </property>
+          </object>
+        </child>
+
+        <!-- Stack pages are inserted here -->
+
+      </object>
+    </child>
+  </object>
+
+</interface>

schemas/org.gnome.shell.extensions.burn-my-windows.gschema.xml

@@ -1,25 +1,11 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <schemalist>
 
-  <enum id='org.gnome.shell.extensions.burn-my-windows.AnimationType'>
-    <value value='1' nick='fire' />
-    <value value='2' nick='matrix' />
-  </enum>
-
   <schema path="/org/gnome/shell/extensions/burn-my-windows/" id="org.gnome.shell.extensions.burn-my-windows">
 
-    <key name="close-animation" enum="org.gnome.shell.extensions.burn-my-windows.AnimationType">
-      <default>"fire"</default>
-      <summary>Close Animation</summary>
-      <description>The animation used for window closing.</description>
-    </key>
-
-
-    <key name="destroy-animation-time" type="i">
-      <default>1500</default>
-      <summary>Destroy Animation Time</summary>
-      <description>The time it takes to burn the windows.</description>
-    </key>
+    <!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
+    <!-- General Options                                                               -->
+    <!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
 
     <key name="destroy-dialogs" type="b">
       <default>false</default>
@@ -27,16 +13,38 @@
       <description>Set to true to burn dialogs as well.</description>
     </key>
 
+    <!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
+    <!-- Fire Options                                                                  -->
+    <!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
+
+    <key name="fire-close-effect" type="b">
+      <default>true</default>
+      <summary>Fire Close Effect</summary>
+      <description>Use the fire effect for window closing.</description>
+    </key>
+
+    <key name="fire-animation-time" type="i">
+      <default>1500</default>
+      <summary>Fire Animation Time</summary>
+      <description>The time the fire effect takes.</description>
+    </key>
+
     <key name="flame-movement-speed" type="d">
       <default>0.5</default>
-      <summary>Flame Movement Speed</summary>
-      <description>The speed at which the flames move.</description>
+      <summary>Fire Movement Speed</summary>
+      <description>The speed at which the fire moves.</description>
     </key>
 
     <key name="flame-scale" type="d">
       <default>1.0</default>
-      <summary>Flame Scale</summary>
-      <description>The size of the flames.</description>
+      <summary>Fire Scale</summary>
+      <description>The size of the fire.</description>
+    </key>
+
+    <key name="flame-3d-noise" type="b">
+      <default>false</default>
+      <summary>Fire 3D Noise</summary>
+      <description>Use a 3D noise for the fire.</description>
     </key>
 
     <key name="fire-color-1" type="s">
@@ -69,6 +77,21 @@
       <description>The fifth color of the fire gradient.</description>
     </key>
 
+    <!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
+    <!-- Matrix Options                                                                -->
+    <!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
+
+    <key name="matrix-close-effect" type="b">
+      <default>false</default>
+      <summary>Matrix Close Effect</summary>
+      <description>Use the matrix effect for window closing.</description>
+    </key>
+
+    <key name="matrix-animation-time" type="i">
+      <default>3000</default>
+      <summary>Matrix Animation Time</summary>
+      <description>The time the matrix effect takes.</description>
+    </key>
 
     <key name="matrix-scale" type="i">
       <default>20</default>
@@ -94,6 +117,152 @@
       <description>The color matrix trails.</description>
     </key>
 
+    <!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
+    <!-- TV Effect Options                                                             -->
+    <!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
+
+    <key name="tv-close-effect" type="b">
+      <default>false</default>
+      <summary>TV Close Effect</summary>
+      <description>Use the tv effect for window closing.</description>
+    </key>
+
+    <key name="tv-animation-time" type="i">
+      <default>400</default>
+      <summary>TV Animation Time</summary>
+      <description>The time the tv effect takes.</description>
+    </key>
+
+    <key name="tv-effect-color" type="s">
+      <default>"rgb(255, 255, 255)"</default>
+      <summary>TV Effect Color</summary>
+      <description>The color of the TV effect.</description>
+    </key>
+
+    <!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
+    <!-- T-Rex Attack Options                                                          -->
+    <!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
+
+    <key name="trex-close-effect" type="b">
+      <default>false</default>
+      <summary>T-Rex Close Effect</summary>
+      <description>Use the trex effect for window closing.</description>
+    </key>
+
+    <key name="trex-animation-time" type="i">
+      <default>1500</default>
+      <summary>T-Rex Animation Time</summary>
+      <description>The time the trex effect takes.</description>
+    </key>
+
+    <key name="claw-scratch-color" type="s">
+      <default>"rgb(170, 0, 0)"</default>
+      <summary>Claw Scratch Color</summary>
+      <description>The color of the claw scratches.</description>
+    </key>
+
+    <key name="claw-scratch-scale" type="d">
+      <default>1.0</default>
+      <summary>Claw Scratch Scale</summary>
+      <description>Size of the claw scratches.</description>
+    </key>
+
+    <key name="claw-scratch-warp" type="d">
+      <default>0.15</default>
+      <summary>Claw Scratch Warp</summary>
+      <description>Intensity of the claw scratch warp effect.</description>
+    </key>
+
+    <key name="claw-scratch-count" type="i">
+      <default>5</default>
+      <summary>Claw Scratch Count</summary>
+      <description>Number of claw scratches drawn on top of each other.</description>
+    </key>
+
+    <!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
+    <!-- Energize A Options                                                            -->
+    <!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
+
+    <key name="energize-a-close-effect" type="b">
+      <default>false</default>
+      <summary>Energize A Close Effect</summary>
+      <description>Use the Energize A effect for window closing.</description>
+    </key>
+
+    <key name="energize-a-animation-time" type="i">
+      <default>2000</default>
+      <summary>Energize A Animation Time</summary>
+      <description>The time the Energize A effect takes.</description>
+    </key>
+
+    <key name="energize-a-scale" type="d">
+      <default>1.0</default>
+      <summary>Energize A Scale</summary>
+      <description>The size of the effect.</description>
+    </key>
+
+    <key name="energize-a-color" type="s">
+      <default>"rgb(255, 200, 50)"</default>
+      <summary>Energize A Color</summary>
+      <description>The color of the effect.</description>
+    </key>
+
+    <!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
+    <!-- Energize B Options                                                            -->
+    <!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
+
+    <key name="energize-b-close-effect" type="b">
+      <default>false</default>
+      <summary>Energize B Close Effect</summary>
+      <description>Use the Energize B effect for window closing.</description>
+    </key>
+
+    <key name="energize-b-animation-time" type="i">
+      <default>2000</default>
+      <summary>Energize B Animation Time</summary>
+      <description>The time the Energize B effect takes.</description>
+    </key>
+
+    <key name="energize-b-scale" type="d">
+      <default>1.0</default>
+      <summary>Energize B Scale</summary>
+      <description>The size of the effect.</description>
+    </key>
+
+    <key name="energize-b-color" type="s">
+      <default>"rgb(160, 180, 255)"</default>
+      <summary>Energize B Color</summary>
+      <description>The color of the effect.</description>
+    </key>
+
+    <!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
+    <!-- Wisps Effect Options                                                          -->
+    <!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
+
+    <key name="wisps-close-effect" type="b">
+      <default>false</default>
+      <summary>Wisps Close Effect</summary>
+      <description>Use the wisps effect for window closing.</description>
+    </key>
+
+    <key name="wisps-animation-time" type="i">
+      <default>2000</default>
+      <summary>Wisps Animation Time</summary>
+      <description>The time the wisps effect takes.</description>
+    </key>
+
+    <key name="wisps-scale" type="d">
+      <default>1.0</default>
+      <summary>Wisps Scale</summary>
+      <description>The size of the wisps.</description>
+    </key>
+
+    <key name="wisps-color" type="s">
+      <default>"rgb(255, 100, 200)"</default>
+      <summary>Wisps Effect Color</summary>
+      <description>The color of the wisps effect.</description>
+    </key>
+
   </schema>
 
 </schemalist>

src/EnergizeA.js

@@ -0,0 +1,202 @@
+//////////////////////////////////////////////////////////////////////////////////////////
+//          )                                                   (                       //
+//       ( /(   (  (               )    (       (  (  (         )\ )    (  (            //
+//       )\()) ))\ )(   (         (     )\ )    )\))( )\  (    (()/( (  )\))(  (        //
+//      ((_)\ /((_|()\  )\ )      )\  '(()/(   ((_)()((_) )\ )  ((_)))\((_)()\ )\       //
+//      | |(_|_))( ((_)_(_/(    _((_))  )(_))  _(()((_|_)_(_/(  _| |((_)(()((_|(_)      //
+//      | '_ \ || | '_| ' \))  | '  \()| || |  \ V  V / | ' \)) _` / _ \ V  V (_-<      //
+//      |_.__/\_,_|_| |_||_|   |_|_|_|  \_, |   \_/\_/|_|_||_|\__,_\___/\_/\_//__/      //
+//                                 |__/                                                 //
+//                       Copyright (c) 2021 Simon Schneegans                            //
+//          Released under the GPLv3 or later. See LICENSE file for details.            //
+//////////////////////////////////////////////////////////////////////////////////////////
+
+'use strict';
+
+const GObject = imports.gi.GObject;
+
+const ExtensionUtils = imports.misc.extensionUtils;
+const Me             = imports.misc.extensionUtils.getCurrentExtension();
+const utils          = Me.imports.src.utils;
+
+//////////////////////////////////////////////////////////////////////////////////////////
+// This effect looks a bit like the transporter effect from TOS.                        //
+//////////////////////////////////////////////////////////////////////////////////////////
+
+// The shader class for this effect is registered further down in this file.
+let Shader = null;
+
+// The effect class is completely static. It can be used to get some metadata (like the
+// effect's name or supported GNOME Shell versions), to initialize the respective page of
+// the settings dialog, as well as to create the actual shader for the effect.
+var EnergizeA = class EnergizeA {
+
+  // ---------------------------------------------------------------------------- metadata
+
+  // The effect is available on all GNOME Shell versions supported by this extension.
+  static getMinShellVersion() {
+    return [3, 36];
+  }
+
+  // This will be called in various places where a unique identifier for this effect is
+  // required. It should match the prefix of the settings keys which store whether the
+  // effect is enabled currently (e.g. the '*-close-effect').
+  static getNick() {
+    return 'energize-a';
+  }
+
+  // This will be shown in the sidebar of the preferences dialog as well as in the
+  // drop-down menus where the user can choose the effect.
+  static getLabel() {
+    return 'Energize A';
+  }
+
+  // -------------------------------------------------------------------- API for prefs.js
+
+  // This is called by the preferences dialog. It loads the settings page for this effect,
+  // binds all properties to the settings and appends the page to the main stack of the
+  // preferences dialog.
+  static initPreferences(dialog) {
+
+    // Add the settings page to the builder.
+    dialog.getBuilder().add_from_resource(`/ui/${utils.getGTKString()}/EnergizeA.ui`);
+
+    // Bind all properties.
+    dialog.bindAdjustment('energize-a-animation-time');
+    dialog.bindAdjustment('energize-a-scale');
+    dialog.bindColorButton('energize-a-color');
+
+    // Finally, append the settings page to the main stack.
+    const stack = dialog.getBuilder().get_object('main-stack');
+    stack.add_titled(
+        dialog.getBuilder().get_object('energize-a-prefs'), EnergizeA.getNick(),
+        EnergizeA.getLabel());
+  }
+
+  // ---------------------------------------------------------------- API for extension.js
+
+  // This is called from extension.js whenever a window is closed with this effect.
+  static createShader(settings) {
+    return new Shader(settings);
+  }
+
+  // This is also called from extension.js. It is used to tweak the ongoing transitions of
+  // the actor - usually windows are faded to transparency and scaled down slightly by
+  // GNOME Shell. Here, we modify this behavior as well as the transition duration.
+  static tweakTransitions(actor, settings) {
+    const animationTime = settings.get_int('energize-a-animation-time');
+
+    const tweakTransition = (property, value) => {
+      const transition = actor.get_transition(property);
+      if (transition) {
+        transition.set_to(value);
+        transition.set_duration(animationTime);
+      }
+    };
+
+    // We re-target these transitions so that the window is neither scaled nor faded.
+    tweakTransition('opacity', 255);
+    tweakTransition('scale-x', 1);
+    tweakTransition('scale-y', 1);
+  }
+}
+
+
+//////////////////////////////////////////////////////////////////////////////////////////
+// The shader class for this effect will only be registered in GNOME Shell's process    //
+// (not in the preferences process). It's done this way as Clutter may not be installed //
+// on the system and therefore the preferences would crash.                             //
+//////////////////////////////////////////////////////////////////////////////////////////
+
+if (utils.isInShellProcess()) {
+
+  const Clutter        = imports.gi.Clutter;
+  const shaderSnippets = Me.imports.src.shaderSnippets;
+
+  Shader = GObject.registerClass({}, class Shader extends Clutter.ShaderEffect {
+    _init(settings) {
+      super._init({shader_type: Clutter.ShaderType.FRAGMENT_SHADER});
+
+      const color = Clutter.Color.from_string(settings.get_string('energize-a-color'))[1];
+
+      this.set_shader_source(`
+
+      // Inject some common shader snippets.
+      ${shaderSnippets.standardUniforms()}
+      ${shaderSnippets.noise()}
+      ${shaderSnippets.edgeMask()}
+
+      const vec2  SEED            = vec2(${Math.random()}, ${Math.random()});
+      const float FADE_IN_TIME    = 0.3;
+      const float FADE_OUT_TIME   = 0.6;
+      const float HEART_FADE_TIME = 0.3;
+      const float EDGE_FADE_WIDTH = 50;
+
+      // This method returns two values:
+      //  result.x: A mask for the particles.
+      //  result.y: The opacity of the fading window.
+      vec2 getMasks() {
+        float fadeInProgress  = clamp(uProgress/FADE_IN_TIME, 0, 1);
+        float fadeOutProgress = clamp((uProgress-FADE_IN_TIME)/FADE_OUT_TIME, 0, 1);
+        float heartProgress   = clamp((uProgress-(1.0-HEART_FADE_TIME))/HEART_FADE_TIME, 0, 1);
+
+        // Compute mask for the "atom" particles.
+        float dist = length(cogl_tex_coord_in[0].st - 0.5) * 4.0;
+        float atomMask = smoothstep(0.0, 1.0, (fadeInProgress * 2.0 - dist + 1.0));
+        atomMask *= fadeInProgress;
+        atomMask *= smoothstep(1.0, 0.0, fadeOutProgress);
+
+        // Fade-out the masks at the window edges.
+        float edgeFade = getAbsoluteEdgeMask(EDGE_FADE_WIDTH);
+        atomMask *= edgeFade;
+
+        float heartMask = getRelativeEdgeMask(0.5);
+        heartMask = 3.0 * pow(heartMask, 5);
+        heartMask *= fadeOutProgress;
+        heartMask *= 1.0 - heartProgress;
+        atomMask = clamp(heartMask+atomMask, 0, 1);
+
+        // Compute fading window opacity.
+        float windowMask = pow(1.0 - fadeOutProgress, 2.0);
+
+        return vec2(atomMask, windowMask);
+      }
+
+      void main() {
+        
+        vec2 masks       = getMasks();
+        vec4 windowColor = texture2D(uTexture, cogl_tex_coord_in[0].st);
+        vec3 effectColor = vec3(${color.red / 255},
+                                ${color.green / 255},
+                                ${color.blue / 255});
+
+        // Dissolve window to effect color / transparency.
+        cogl_color_out = mix(vec4(effectColor, 1.0) * windowColor.a, windowColor, 0.2 * masks.y + 0.8) * masks.y;
+
+        vec2 scaledUV = (cogl_tex_coord_in[0].st-0.5) * (1.0 + 0.1*uProgress);
+        scaledUV /= ${settings.get_double('energize-a-scale')};
+
+        // Add molecule particles.
+        vec2 uv = scaledUV + vec2(0, 0.1*uTime);
+        uv *= 0.010598 * vec2(0.5*uSizeX, uSizeY);
+        float particles = 0.2 * pow((simplex3D(vec3(uv, 0.0*uTime))), 3.0);
+
+        // Add more molecule particles.
+        for (int i=1; i<=3;++i) {
+          vec2 uv = scaledUV * 0.12154 / pow(1.5, i) * vec2(uSizeX, uSizeY);
+          float atoms = simplex3D(vec3(uv, 2.0*uTime/i));
+          particles += 0.5 * pow(0.2 * (1.0 / (1.0 - atoms)-1.0), 2);
+        }
+
+        cogl_color_out.rgb += effectColor * particles * masks.x;
+
+        // These are pretty useful for understanding how this works.
+        // cogl_color_out = vec4(masks, 0.0, 1.0);
+        // cogl_color_out = vec4(vec3(masks.x), 1.0);
+        // cogl_color_out = vec4(vec3(masks.y), 1.0);
+        // cogl_color_out = vec4(vec3(particles), 1.0);
+      }
+      `);
+    };
+  });
+}

src/EnergizeB.js

@@ -0,0 +1,225 @@
+//////////////////////////////////////////////////////////////////////////////////////////
+//          )                                                   (                       //
+//       ( /(   (  (               )    (       (  (  (         )\ )    (  (            //
+//       )\()) ))\ )(   (         (     )\ )    )\))( )\  (    (()/( (  )\))(  (        //
+//      ((_)\ /((_|()\  )\ )      )\  '(()/(   ((_)()((_) )\ )  ((_)))\((_)()\ )\       //
+//      | |(_|_))( ((_)_(_/(    _((_))  )(_))  _(()((_|_)_(_/(  _| |((_)(()((_|(_)      //
+//      | '_ \ || | '_| ' \))  | '  \()| || |  \ V  V / | ' \)) _` / _ \ V  V (_-<      //
+//      |_.__/\_,_|_| |_||_|   |_|_|_|  \_, |   \_/\_/|_|_||_|\__,_\___/\_/\_//__/      //
+//                                 |__/                                                 //
+//                       Copyright (c) 2021 Simon Schneegans                            //
+//          Released under the GPLv3 or later. See LICENSE file for details.            //
+//////////////////////////////////////////////////////////////////////////////////////////
+
+'use strict';
+
+const GObject = imports.gi.GObject;
+
+const ExtensionUtils = imports.misc.extensionUtils;
+const Me             = imports.misc.extensionUtils.getCurrentExtension();
+const utils          = Me.imports.src.utils;
+
+//////////////////////////////////////////////////////////////////////////////////////////
+// This effect looks a bit like the transporter effect from TNG.                        //
+//////////////////////////////////////////////////////////////////////////////////////////
+
+// The shader class for this effect is registered further down in this file.
+let Shader = null;
+
+// The effect class is completely static. It can be used to get some metadata (like the
+// effect's name or supported GNOME Shell versions), to initialize the respective page of
+// the settings dialog, as well as to create the actual shader for the effect.
+var EnergizeB = class EnergizeB {
+
+  // ---------------------------------------------------------------------------- metadata
+
+  // The effect is available on all GNOME Shell versions supported by this extension.
+  static getMinShellVersion() {
+    return [3, 36];
+  }
+
+  // This will be called in various places where a unique identifier for this effect is
+  // required. It should match the prefix of the settings keys which store whether the
+  // effect is enabled currently (e.g. the '*-close-effect').
+  static getNick() {
+    return 'energize-b';
+  }
+
+  // This will be shown in the sidebar of the preferences dialog as well as in the
+  // drop-down menus where the user can choose the effect.
+  static getLabel() {
+    return 'Energize B';
+  }
+
+  // -------------------------------------------------------------------- API for prefs.js
+
+  // This is called by the preferences dialog. It loads the settings page for this effect,
+  // binds all properties to the settings and appends the page to the main stack of the
+  // preferences dialog.
+  static initPreferences(dialog) {
+
+    // Add the settings page to the builder.
+    dialog.getBuilder().add_from_resource(`/ui/${utils.getGTKString()}/EnergizeB.ui`);
+
+    // Bind all properties.
+    dialog.bindAdjustment('energize-b-animation-time');
+    dialog.bindAdjustment('energize-b-scale');
+    dialog.bindColorButton('energize-b-color');
+
+    // Finally, append the settings page to the main stack.
+    const stack = dialog.getBuilder().get_object('main-stack');
+    stack.add_titled(
+        dialog.getBuilder().get_object('energize-b-prefs'), EnergizeB.getNick(),
+        EnergizeB.getLabel());
+  }
+
+  // ---------------------------------------------------------------- API for extension.js
+
+  // This is called from extension.js whenever a window is closed with this effect.
+  static createShader(settings) {
+    return new Shader(settings);
+  }
+
+  // This is also called from extension.js. It is used to tweak the ongoing transitions of
+  // the actor - usually windows are faded to transparency and scaled down slightly by
+  // GNOME Shell. Here, we modify this behavior as well as the transition duration.
+  static tweakTransitions(actor, settings) {
+    const animationTime = settings.get_int('energize-b-animation-time');
+
+    const tweakTransition = (property, value) => {
+      const transition = actor.get_transition(property);
+      if (transition) {
+        transition.set_to(value);
+        transition.set_duration(animationTime);
+      }
+    };
+
+    // We re-target these transitions so that the window is neither scaled nor faded.
+    tweakTransition('opacity', 255);
+    tweakTransition('scale-x', 1);
+    tweakTransition('scale-y', 1);
+  }
+}
+
+
+//////////////////////////////////////////////////////////////////////////////////////////
+// The shader class for this effect will only be registered in GNOME Shell's process    //
+// (not in the preferences process). It's done this way as Clutter may not be installed //
+// on the system and therefore the preferences would crash.                             //
+//////////////////////////////////////////////////////////////////////////////////////////
+
+if (utils.isInShellProcess()) {
+
+  const Clutter        = imports.gi.Clutter;
+  const shaderSnippets = Me.imports.src.shaderSnippets;
+
+  Shader = GObject.registerClass({}, class Shader extends Clutter.ShaderEffect {
+    _init(settings) {
+      super._init({shader_type: Clutter.ShaderType.FRAGMENT_SHADER});
+
+      const color = Clutter.Color.from_string(settings.get_string('energize-b-color'))[1];
+
+      this.set_shader_source(`
+
+      // Inject some common shader snippets.
+      ${shaderSnippets.standardUniforms()}
+      ${shaderSnippets.noise()}
+      ${shaderSnippets.edgeMask()}
+
+      const vec2  SEED         = vec2(${Math.random()}, ${Math.random()});
+      const float SHOWER_TIME  = 0.2;
+      const float SHOWER_WIDTH = 0.3;
+      const float STREAK_TIME  = 0.6;
+      const float EDGE_FADE    = 50;
+      const float SCALE        = ${settings.get_double('energize-b-scale')};
+
+      // This method returns four values:
+      //  result.x: A mask for the particles which lead the shower.
+      //  result.y: A mask for the streaks which follow the shower particles.
+      //  result.z: A mask for the final "atom" particles.
+      //  result.w: The opacity of the fading window.
+      vec4 getMasks() {
+        float showerProgress = uProgress/SHOWER_TIME;
+        float streakProgress = clamp((uProgress-SHOWER_TIME)/STREAK_TIME, 0, 1);
+        float fadeProgress  = clamp((uProgress-SHOWER_TIME)/(1.0 - SHOWER_TIME), 0, 1);
+
+        // Gradient from top to bottom.
+        float t = cogl_tex_coord_in[0].t;
+
+        // A smooth gradient which moves to the bottom within the showerProgress.
+        float showerMask = smoothstep(1, 0, abs(showerProgress - t - SHOWER_WIDTH) / SHOWER_WIDTH);
+
+        // This is 1 above the streak mask.
+        float streakMask = (showerProgress - t - SHOWER_WIDTH) > 0 ? 1 : 0;
+
+        // Compute mask for the "atom" particles.
+        float atomMask = getRelativeEdgeMask(0.2);
+        atomMask = max(0, atomMask - showerMask);
+        atomMask *= streakMask;
+        atomMask *= (1.0 - fadeProgress);
+
+        // Make some particles visible in the streaks.
+        showerMask += 0.05 * streakMask;
+
+        // Add shower mask to streak mask.
+        streakMask = max(streakMask, showerMask);
+
+        // Fade-out the masks at the window edges.
+        float edgeFade = getAbsoluteEdgeMask(EDGE_FADE);
+        streakMask *= edgeFade;
+        showerMask *= edgeFade;
+        
+        // Fade-out the masks from top to bottom.
+        float fade = smoothstep(0.0, 1.0, 1.0 + t - 2.0 * streakProgress);
+        streakMask *= fade;
+        showerMask *= fade;
+
+        // Compute fading window opacity.
+        float windowMask = pow(1.0 - fadeProgress, 2.0);
+
+        return vec4(showerMask, streakMask, atomMask, windowMask);
+      }
+
+      void main() {
+        
+        vec4 masks       = getMasks();
+        vec4 windowColor = texture2D(uTexture, cogl_tex_coord_in[0].st);
+        vec3 effectColor = vec3(${color.red / 255},
+                                ${color.green / 255},
+                                ${color.blue / 255});
+
+        // Dissolve window to effect color / transparency.
+        cogl_color_out = mix(vec4(effectColor, 1.0) * windowColor.a, windowColor, 0.5 * masks.w + 0.5) * masks.w;
+
+        // Add leading shower particles.
+        vec2 showerUV = cogl_tex_coord_in[0].st + vec2(0, -0.7*uProgress/SHOWER_TIME);
+        showerUV *= 0.02 * vec2(uSizeX, uSizeY) / SCALE;
+        float shower = pow(simplex2D(showerUV), 10.0);
+        cogl_color_out.rgb += effectColor * shower * masks.x;
+
+        // Add trailing streak lines.
+        vec2 streakUV = cogl_tex_coord_in[0].st + vec2(0, -uProgress/SHOWER_TIME);
+        streakUV *= vec2(0.05 * uSizeX, 0.001 * uSizeY) / SCALE;
+        float streaks = simplex2DFractal(streakUV) * 0.5;
+        cogl_color_out.rgb += effectColor * streaks * masks.y;
+
+        // Add glimmering atoms.
+        vec2 atomUV = cogl_tex_coord_in[0].st + vec2(0, -0.025*uProgress/SHOWER_TIME);
+        atomUV *= 0.2 * vec2(uSizeX, uSizeY) / SCALE;
+        float atoms = pow((simplex3D(vec3(atomUV, uTime))), 5.0);
+        cogl_color_out.rgb += effectColor * atoms * masks.z;
+
+        // These are pretty useful for understanding how this works.
+        // cogl_color_out = vec4(masks.rgb, 1.0);
+        // cogl_color_out = vec4(vec3(masks.x), 1.0);
+        // cogl_color_out = vec4(vec3(masks.y), 1.0);
+        // cogl_color_out = vec4(vec3(masks.z), 1.0);
+        // cogl_color_out = vec4(vec3(masks.w), 1.0);
+        // cogl_color_out = vec4(vec3(shower), 1.0);
+        // cogl_color_out = vec4(vec3(streaks), 1.0);
+        // cogl_color_out = vec4(vec3(atoms), 1.0);
+      }
+      `);
+    };
+  });
+}

src/Fire.js

@@ -0,0 +1,349 @@
+//////////////////////////////////////////////////////////////////////////////////////////
+//          )                                                   (                       //
+//       ( /(   (  (               )    (       (  (  (         )\ )    (  (            //
+//       )\()) ))\ )(   (         (     )\ )    )\))( )\  (    (()/( (  )\))(  (        //
+//      ((_)\ /((_|()\  )\ )      )\  '(()/(   ((_)()((_) )\ )  ((_)))\((_)()\ )\       //
+//      | |(_|_))( ((_)_(_/(    _((_))  )(_))  _(()((_|_)_(_/(  _| |((_)(()((_|(_)      //
+//      | '_ \ || | '_| ' \))  | '  \()| || |  \ V  V / | ' \)) _` / _ \ V  V (_-<      //
+//      |_.__/\_,_|_| |_||_|   |_|_|_|  \_, |   \_/\_/|_|_||_|\__,_\___/\_/\_//__/      //
+//                                 |__/                                                 //
+//                       Copyright (c) 2021 Simon Schneegans                            //
+//          Released under the GPLv3 or later. See LICENSE file for details.            //
+//////////////////////////////////////////////////////////////////////////////////////////
+
+'use strict';
+
+const {Gio, GObject} = imports.gi;
+
+const ExtensionUtils = imports.misc.extensionUtils;
+const Me             = imports.misc.extensionUtils.getCurrentExtension();
+const utils          = Me.imports.src.utils;
+
+//////////////////////////////////////////////////////////////////////////////////////////
+// This effect is a homage to the good old Compiz days. However, it is implemented      //
+// quite differently. While Compiz used a particle system, this effect uses a noise     //
+// shader. The noise is moved  vertically over time and mapped to a configurable color  //
+// gradient. It is faded to transparency towards the edges of the window. In addition,  //
+// there are a couple of moving gradients which fade-in or fade-out the fire effect.    //
+//////////////////////////////////////////////////////////////////////////////////////////
+
+// The shader class for this effect is registered further down in this file.
+let Shader = null;
+
+// The effect class is completely static. It can be used to get some metadata (like the
+// effect's name or supported GNOME Shell versions), to initialize the respective page of
+// the settings dialog, as well as to create the actual shader for the effect.
+var Fire = class Fire {
+
+  // ---------------------------------------------------------------------------- metadata
+
+  // The effect is available on all GNOME Shell versions supported by this extension.
+  static getMinShellVersion() {
+    return [3, 36];
+  }
+
+  // This will be called in various places where a unique identifier for this effect is
+  // required. It should match the prefix of the settings keys which store whether the
+  // effect is enabled currently (e.g. the '*-close-effect').
+  static getNick() {
+    return 'fire';
+  }
+
+  // This will be shown in the sidebar of the preferences dialog as well as in the
+  // drop-down menus where the user can choose the effect.
+  static getLabel() {
+    return 'Fire';
+  }
+
+  // -------------------------------------------------------------------- API for prefs.js
+
+  // This is called by the preferences dialog. It loads the settings page for this effect,
+  // binds all properties to the settings and appends the page to the main stack of the
+  // preferences dialog.
+  static initPreferences(dialog) {
+
+    // Add the settings page to the builder.
+    dialog.getBuilder().add_from_resource(`/ui/${utils.getGTKString()}/Fire.ui`);
+
+    // Bind all properties.
+    dialog.bindAdjustment('fire-animation-time');
+    dialog.bindAdjustment('flame-movement-speed');
+    dialog.bindAdjustment('flame-scale');
+    dialog.bindSwitch('flame-3d-noise');
+    dialog.bindColorButton('fire-color-1');
+    dialog.bindColorButton('fire-color-2');
+    dialog.bindColorButton('fire-color-3');
+    dialog.bindColorButton('fire-color-4');
+    dialog.bindColorButton('fire-color-5');
+
+    // The fire-gradient-reset button needs to be bound explicitly.
+    dialog.getBuilder().get_object('reset-fire-colors').connect('clicked', () => {
+      dialog.getSettings().reset('fire-color-1');
+      dialog.getSettings().reset('fire-color-2');
+      dialog.getSettings().reset('fire-color-3');
+      dialog.getSettings().reset('fire-color-4');
+      dialog.getSettings().reset('fire-color-5');
+    });
+
+    // Initialize the fire-preset dropdown.
+    Fire._createFirePresets(dialog);
+
+    // Finally, append the settings page to the main stack.
+    const stack = dialog.getBuilder().get_object('main-stack');
+    stack.add_titled(
+        dialog.getBuilder().get_object('fire-prefs'), Fire.getNick(), Fire.getLabel());
+  }
+
+  // ---------------------------------------------------------------- API for extension.js
+
+  // This is called from extension.js whenever a window is closed with this effect.
+  static createShader(settings) {
+    return new Shader(settings);
+  }
+
+  // This is also called from extension.js. It is used to tweak the ongoing transitions of
+  // the actor - usually windows are faded to transparency and scaled down slightly by
+  // GNOME Shell. Here, we modify this behavior as well as the transition duration.
+  static tweakTransitions(actor, settings) {
+    const animationTime = settings.get_int('fire-animation-time');
+
+    const tweakTransition = (property, value) => {
+      const transition = actor.get_transition(property);
+      if (transition) {
+        transition.set_to(value);
+        transition.set_duration(animationTime);
+      }
+    };
+
+    // We re-target these transitions so that the window is neither scaled nor faded.
+    tweakTransition('opacity', 255);
+    tweakTransition('scale-x', 1);
+    tweakTransition('scale-y', 1);
+  }
+
+  // ----------------------------------------------------------------------- private stuff
+
+  // This populates the preset dropdown menu for the fire options.
+  static _createFirePresets(dialog) {
+    dialog.getBuilder().get_object('settings-widget').connect('realize', (widget) => {
+      const presets = [
+        {
+          name: 'Default Fire',
+          scale: 1.0,
+          speed: 0.5,
+          color1: 'rgba(76, 51, 25, 0.0)',
+          color2: 'rgba(180, 55, 30, 0.7)',
+          color3: 'rgba(255, 76, 38, 0.9)',
+          color4: 'rgba(255, 166, 25, 1)',
+          color5: 'rgba(255, 255, 255, 1)'
+        },
+        {
+          name: 'Hell Fire',
+          scale: 1.5,
+          speed: 0.2,
+          color1: 'rgba(0,0,0,0)',
+          color2: 'rgba(103,7,80,0.5)',
+          color3: 'rgba(150,0,24,0.9)',
+          color4: 'rgb(255,200,0)',
+          color5: 'rgba(255, 255, 255, 1)'
+        },
+        {
+          name: 'Dark and Smutty',
+          scale: 1.0,
+          speed: 0.5,
+          color1: 'rgba(0,0,0,0)',
+          color2: 'rgba(36,3,0,0.5)',
+          color3: 'rgba(150,0,24,0.9)',
+          color4: 'rgb(255,177,21)',
+          color5: 'rgb(255,238,166)'
+        },
+        {
+          name: 'Cold Breeze',
+          scale: 1.5,
+          speed: -0.1,
+          color1: 'rgba(0,110,255,0)',
+          color2: 'rgba(30,111,180,0.24)',
+          color3: 'rgba(38,181,255,0.54)',
+          color4: 'rgba(34,162,255,0.84)',
+          color5: 'rgb(97,189,255)'
+        },
+        {
+          name: 'Santa is Coming',
+          scale: 0.4,
+          speed: -0.5,
+          color1: 'rgba(0,110,255,0)',
+          color2: 'rgba(208,233,255,0.24)',
+          color3: 'rgba(207,235,255,0.84)',
+          color4: 'rgb(208,243,255)',
+          color5: 'rgb(255,255,255)'
+        }
+      ];
+
+      const menu      = Gio.Menu.new();
+      const group     = Gio.SimpleActionGroup.new();
+      const groupName = 'presets';
+
+      // Add all presets.
+      presets.forEach((preset, i) => {
+        const actionName = 'fire' + i;
+        menu.append(preset.name, groupName + '.' + actionName);
+        let action = Gio.SimpleAction.new(actionName, null);
+
+        // Load the preset on activation.
+        action.connect('activate', () => {
+          dialog.getSettings().set_double('flame-movement-speed', preset.speed);
+          dialog.getSettings().set_double('flame-scale', preset.scale);
+          dialog.getSettings().set_string('fire-color-1', preset.color1);
+          dialog.getSettings().set_string('fire-color-2', preset.color2);
+          dialog.getSettings().set_string('fire-color-3', preset.color3);
+          dialog.getSettings().set_string('fire-color-4', preset.color4);
+          dialog.getSettings().set_string('fire-color-5', preset.color5);
+        });
+
+        group.add_action(action);
+      });
+
+      dialog.getBuilder().get_object('fire-preset-button').set_menu_model(menu);
+
+      const root = utils.isGTK4() ? widget.get_root() : widget.get_toplevel();
+      root.insert_action_group(groupName, group);
+    });
+  }
+}
+
+
+//////////////////////////////////////////////////////////////////////////////////////////
+// The shader class for this effect will only be registered in GNOME Shell's process    //
+// (not in the preferences process). It's done this way as Clutter may not be installed //
+// on the system and therefore the preferences would crash.                             //
+//////////////////////////////////////////////////////////////////////////////////////////
+
+if (utils.isInShellProcess()) {
+
+  const Clutter        = imports.gi.Clutter;
+  const shaderSnippets = Me.imports.src.shaderSnippets;
+
+  Shader = GObject.registerClass({}, class Shader extends Clutter.ShaderEffect {
+    _init(settings) {
+      super._init({shader_type: Clutter.ShaderType.FRAGMENT_SHADER});
+
+      // Load the gradient values from the settings. We directly inject the values in the
+      // GLSL code below. The shader is compiled once for each window-closing anyways. In
+      // the future, we may want to prevent this frequent recompilations of shaders,
+      // though.
+      const gradient = [];
+      for (let i = 1; i <= 5; i++) {
+        const color =
+            Clutter.Color.from_string(settings.get_string('fire-color-' + i))[1];
+        gradient.push(`vec4(${color.red / 255}, ${color.green / 255}, ${
+            color.blue / 255}, ${color.alpha / 255})`);
+      }
+
+      this.set_shader_source(`
+
+        // Inject some common shader snippets.
+        ${shaderSnippets.standardUniforms()}
+        ${shaderSnippets.noise()}
+        ${shaderSnippets.edgeMask()}
+
+        // These may be configurable in the future.
+        const float EDGE_FADE  = 90;
+        const float FADE_WIDTH = 0.1;
+        const float HIDE_TIME  = 0.4;
+        const vec2  FIRE_SCALE = vec2(400, 600) * ${settings.get_double('flame-scale')};
+        const float FIRE_SPEED = ${settings.get_double('flame-movement-speed')};
+
+        // This maps the input value from [0..1] to a color from the gradient.
+        vec4 getFireColor(float v) {
+          const float steps[5] = float[](0.0, 0.2, 0.35, 0.5, 0.8);
+          const vec4 colors[5] = vec4[](
+            ${gradient[0]},
+            ${gradient[1]},
+            ${gradient[2]},
+            ${gradient[3]},
+            ${gradient[4]}
+          );
+
+          if (v < steps[0]) {
+            return colors[0];
+          }
+
+          for (int i=0; i<4; ++i) {
+            if (v <= steps[i+1]) {
+              return mix(colors[i], colors[i+1], vec4(v - steps[i])/(steps[i+1]-steps[i]));
+            }
+          }
+
+          return colors[4];
+        }
+
+        // This method requires the uniforms from standardUniforms() to be available.
+        // It returns two values: The first is an alpha value which can be used for the window
+        // texture. This gradually dissolves the window from top to bottom. The second can be used
+        // to mask any effect, it will be most opaque where the window is currently fading and
+        // gradually dissolve to zero over time.
+        // hideTime:      A value in [0..1]. It determines the percentage of the animation which
+        //                is spent for hiding the window. 1-hideTime will be spent thereafter for
+        //                dissolving the effect mask.
+        // fadeWidth:     The relative size of the window-hiding gradient in [0..1].
+        // edgeFadeWidth: The pixel width of the effect fading range at the edges of the window.
+        vec2 effectMask(float hideTime, float fadeWidth, float edgeFadeWidth) {
+          float burnProgress      = clamp(uProgress/hideTime, 0, 1);
+          float afterBurnProgress = clamp((uProgress-hideTime)/(1-hideTime), 0, 1);
+
+          // Gradient from top to bottom.
+          float t = cogl_tex_coord_in[0].t * (1 - fadeWidth);
+
+          // Visible part of the window. Gradually dissolves towards the bottom.
+          float windowMask = 1 - clamp((burnProgress - t) / fadeWidth, 0, 1);
+
+          // Gradient from top burning window.
+          float effectMask = clamp(t*(1-windowMask)/burnProgress, 0, 1);
+
+          // Fade-out when the window burned down.
+          if (uProgress > hideTime) {
+            float fade = sqrt(1-afterBurnProgress*afterBurnProgress);
+            effectMask *= mix(1, 1-t, afterBurnProgress) * fade;
+          }
+
+          // Fade at window borders.
+          effectMask *= getAbsoluteEdgeMask(edgeFadeWidth);
+
+          return vec2(windowMask, effectMask);
+        }
+
+        void main() {
+
+          // Get a noise value which moves vertically in time.
+          vec2 uv = cogl_tex_coord_in[0].st * vec2(uSizeX, uSizeY) / FIRE_SCALE;
+          uv.y += uTime * FIRE_SPEED;
+
+          #if ${settings.get_boolean('flame-3d-noise') ? 1 : 0}
+            float noise = simplex3DFractal(vec3(uv*4.0, uTime*FIRE_SPEED*1.5));
+          #else
+            float noise = simplex2DFractal(uv * 4.0);
+          #endif
+
+          // Modulate noise by effect mask.
+          vec2 effectMask = effectMask(HIDE_TIME, FADE_WIDTH, EDGE_FADE);
+          noise *= effectMask.y;
+
+          // Map noise value to color.
+          vec4 fire = getFireColor(noise);
+          fire.rgb *= fire.a;
+
+          // Get the window texture and fade it according to the effect mask.
+          cogl_color_out = texture2D(uTexture, cogl_tex_coord_in[0].st) * effectMask.x;
+
+          // Add the fire to the window.
+          cogl_color_out += fire;
+
+          // These are pretty useful for understanding how this works.
+          // cogl_color_out = vec4(vec3(noise), 1);
+          // cogl_color_out = vec4(vec3(effectMask.x), 1);
+          // cogl_color_out = vec4(vec3(effectMask.y), 1);
+        }
+      `);
+    };
+  });
+}

src/Matrix.js

@@ -0,0 +1,238 @@
+//////////////////////////////////////////////////////////////////////////////////////////
+//          )                                                   (                       //
+//       ( /(   (  (               )    (       (  (  (         )\ )    (  (            //
+//       )\()) ))\ )(   (         (     )\ )    )\))( )\  (    (()/( (  )\))(  (        //
+//      ((_)\ /((_|()\  )\ )      )\  '(()/(   ((_)()((_) )\ )  ((_)))\((_)()\ )\       //
+//      | |(_|_))( ((_)_(_/(    _((_))  )(_))  _(()((_|_)_(_/(  _| |((_)(()((_|(_)      //
+//      | '_ \ || | '_| ' \))  | '  \()| || |  \ V  V / | ' \)) _` / _ \ V  V (_-<      //
+//      |_.__/\_,_|_| |_||_|   |_|_|_|  \_, |   \_/\_/|_|_||_|\__,_\___/\_/\_//__/      //
+//                                 |__/                                                 //
+//                       Copyright (c) 2021 Simon Schneegans                            //
+//          Released under the GPLv3 or later. See LICENSE file for details.            //
+//////////////////////////////////////////////////////////////////////////////////////////
+
+'use strict';
+
+const GObject = imports.gi.GObject;
+
+const ExtensionUtils = imports.misc.extensionUtils;
+const Me             = imports.misc.extensionUtils.getCurrentExtension();
+const utils          = Me.imports.src.utils;
+
+//////////////////////////////////////////////////////////////////////////////////////////
+// The Matrix shader multiplies a grid of random letters with some gradients which are  //
+// moving from top to bottom. The speed of the moving gradients is chosen randomly.     //
+// Also, there is a random delay making the gradients not drop all at the same time.    //
+// This effect is not available on GNOME 3.3x, due to the limitation described in the   //
+// documentation of vfunc_paint_target further down in this file.                       //
+//////////////////////////////////////////////////////////////////////////////////////////
+
+// The shader class for this effect is registered further down in this file.
+let Shader = null;
+
+// The effect class is completely static. It can be used to get some metadata (like the
+// effect's name or supported GNOME Shell versions), to initialize the respective page of
+// the settings dialog, as well as to create the actual shader for the effect.
+var Matrix = class Matrix {
+
+  // ---------------------------------------------------------------------------- metadata
+
+  // This effect is only available on GNOME Shell 40+.
+  static getMinShellVersion() {
+    return [40, 0];
+  }
+
+  // This will be called in various places where a unique identifier for this effect is
+  // required. It should match the prefix of the settings keys which store whether the
+  // effect is enabled currently (e.g. the '*-close-effect').
+  static getNick() {
+    return 'matrix';
+  }
+
+  // This will be shown in the sidebar of the preferences dialog as well as in the
+  // drop-down menus where the user can choose the effect.
+  static getLabel() {
+    return 'Matrix';
+  }
+
+  // -------------------------------------------------------------------- API for prefs.js
+
+  // This is called by the preferences dialog. It loads the settings page for this effect,
+  // binds all properties to the settings and appends the page to the main stack of the
+  // preferences dialog.
+  static initPreferences(dialog) {
+
+    // Add the settings page to the builder.
+    dialog.getBuilder().add_from_resource('/ui/gtk4/Matrix.ui');
+
+    // Bind all properties.
+    dialog.bindAdjustment('matrix-animation-time');
+    dialog.bindAdjustment('matrix-scale');
+    dialog.bindAdjustment('matrix-randomness');
+    dialog.bindColorButton('matrix-trail-color');
+    dialog.bindColorButton('matrix-tip-color');
+
+    // Finally, append the settings page to the main stack.
+    const stack = dialog.getBuilder().get_object('main-stack');
+    stack.add_titled(
+        dialog.getBuilder().get_object('matrix-prefs'), Matrix.getNick(),
+        Matrix.getLabel());
+  }
+
+  // ---------------------------------------------------------------- API for extension.js
+
+  // This is called from extension.js whenever a window is closed with this effect.
+  static createShader(settings) {
+    return new Shader(settings);
+  }
+
+  // This is also called from extension.js. It is used to tweak the ongoing transitions of
+  // the actor - usually windows are faded to transparency and scaled down slightly by
+  // GNOME Shell. Here, we modify this behavior as well as the transition duration.
+  static tweakTransitions(actor, settings) {
+    const animationTime = settings.get_int('matrix-animation-time');
+
+    const tweakTransition = (property, value) => {
+      const transition = actor.get_transition(property);
+      if (transition) {
+        transition.set_to(value);
+        transition.set_duration(animationTime);
+      }
+    };
+
+    // We re-target these transitions so that the window is neither scaled nor faded.
+    tweakTransition('opacity', 255);
+    tweakTransition('scale-x', 1);
+    tweakTransition('scale-y', 1);
+  }
+}
+
+
+//////////////////////////////////////////////////////////////////////////////////////////
+// The shader class for this effect will only be registered in GNOME Shell's process    //
+// (not in the preferences process). It's done this way as Clutter may not be installed //
+// on the system and therefore the preferences would crash.                             //
+//////////////////////////////////////////////////////////////////////////////////////////
+
+if (utils.isInShellProcess()) {
+
+  const {Clutter, GdkPixbuf, Cogl} = imports.gi;
+  const shaderSnippets             = Me.imports.src.shaderSnippets;
+
+  Shader = GObject.registerClass({}, class Shader extends Clutter.ShaderEffect {
+    _init(settings) {
+      super._init({shader_type: Clutter.ShaderType.FRAGMENT_SHADER});
+
+      // Load the font texture. As the shader is re-created for each window animation,
+      // this texture is also re-created each time. This could be improved in the future!
+      const fontData    = GdkPixbuf.Pixbuf.new_from_resource('/img/matrixFont.png');
+      this._fontTexture = new Clutter.Image();
+      this._fontTexture.set_data(
+          fontData.get_pixels(),
+          fontData.has_alpha ? Cogl.PixelFormat.RGBA_8888 : Cogl.PixelFormat.RGB_888,
+          fontData.width, fontData.height, fontData.rowstride);
+
+      const trailColor =
+          Clutter.Color.from_string(settings.get_string('matrix-trail-color'))[1];
+      const tipColor =
+          Clutter.Color.from_string(settings.get_string('matrix-tip-color'))[1];
+
+      // The technique for this effect was inspired by
+      // https://www.shadertoy.com/view/ldccW4, however the implementation is quite
+      // different as the letters drop only once and there is no need for a noise texture.
+      this.set_shader_source(`
+
+        // Inject some common shader snippets.
+        ${shaderSnippets.standardUniforms()}
+        ${shaderSnippets.noise()}
+        ${shaderSnippets.edgeMask()}
+
+        uniform sampler2D uFontTexture;
+
+        // These may be configurable in the future.
+        const float EDGE_FADE             = 30;
+        const float FADE_WIDTH            = 150;
+        const float TRAIL_LENGTH          = 0.2;
+        const float FINAL_FADE_START_TIME = 0.8;
+        const float LETTER_TILES          = 16.0;
+        const float LETTER_SIZE           = ${settings.get_int('matrix-scale')};
+        const float LETTER_FLICKER_SPEED  = 2.0;
+        const float RANDOMNESS            = ${settings.get_double('matrix-randomness')};
+
+        // This returns a flickering grid of random letters.
+        float getText(vec2 fragCoord) {
+          vec2 pixelCoords = fragCoord * vec2(uSizeX, uSizeY);
+          vec2 uv = mod(pixelCoords.xy, LETTER_SIZE)/LETTER_SIZE;
+          vec2 block = pixelCoords/LETTER_SIZE - uv;
+
+          // Choose random letter.
+          uv += floor(hash22(floor(hash22(block)*vec2(12.9898,78.233) + LETTER_FLICKER_SPEED*uTime + 42.254))*LETTER_TILES);
+
+          return texture2D(uFontTexture, uv/LETTER_TILES).r;
+        }
+
+        // This returns two values: The first are gradients for the "raindrops" which move
+        // from top to bottom. This is used for fading the letters. The second value is set
+        // to one below each drop and to zero above it. This second value is used for fading
+        // the window texture. 
+        vec2 getRain(vec2 fragCoord) {
+          vec2 coords = fragCoord * vec2(uSizeX, uSizeY);
+          coords.x -= mod(coords.x, LETTER_SIZE);
+
+          float delay = fract(sin(coords.x)*78.233) * mix(0.0, 1.0, RANDOMNESS);
+          float speed = fract(cos(coords.x)*12.989) * mix(0.0, 0.3, RANDOMNESS) + 1.5;
+
+          float distToDrop  = (uProgress*2-delay)*speed - fragCoord.y;
+
+          float rainAlpha   = distToDrop >= 0 ? exp(-distToDrop/TRAIL_LENGTH) : 0;
+          float windowAlpha = 1 - clamp(uSizeY*distToDrop, 0, FADE_WIDTH) / FADE_WIDTH;
+
+          return vec2(rainAlpha, windowAlpha);
+        }
+
+        void main() {
+
+          // Get a cool matrix effect. See comments for those methods above.
+          vec2  rain = getRain(cogl_tex_coord_in[0].st);
+          float text = getText(cogl_tex_coord_in[0].st);
+
+          // Get the window texture and fade it according to the effect mask.
+          cogl_color_out = texture2D(uTexture, cogl_tex_coord_in[0].st) * rain.y;
+
+          // This is used to fade out the remaining trails in the end.
+          float finalFade = 1-clamp((uProgress-FINAL_FADE_START_TIME)/
+                                    (1-FINAL_FADE_START_TIME), 0, 1);
+          float rainAlpha = finalFade * rain.x;
+
+          // Fade at window borders.
+          rainAlpha *= getAbsoluteEdgeMask(EDGE_FADE);
+
+          // Add the matrix effect to the window.
+          vec3 trailColor = vec3(${trailColor.red / 255}, 
+                                 ${trailColor.green / 255}, 
+                                 ${trailColor.blue / 255});
+          vec3 tipColor =   vec3(${tipColor.red / 255}, 
+                                 ${tipColor.green / 255}, 
+                                 ${tipColor.blue / 255});
+          cogl_color_out.rgb += mix(trailColor, tipColor, min(1, pow(rainAlpha+0.1, 4))) * rainAlpha * text;
+
+          // These are pretty useful for understanding how this works.
+          // cogl_color_out = vec4(vec3(text), 1);
+          // cogl_color_out = vec4(vec3(rain.x), 1);
+          // cogl_color_out = vec4(vec3(rain.y), 1);
+        }
+      `);
+    };
+
+    // This is overridden to bind the font texture for drawing. Sadly, this seems to be
+    // impossible under GNOME 3.3x as this.get_pipeline() is not available. It was called
+    // get_target() back then but this is not wrapped in GJS.
+    // https://gitlab.gnome.org/GNOME/mutter/-/blob/gnome-3-36/clutter/clutter/clutter-offscreen-effect.c#L598
+    vfunc_paint_target(node, paint_context) {
+      const pipeline = this.get_pipeline();
+      pipeline.set_layer_texture(1, this._fontTexture.get_texture());
+      this.set_uniform_value('uFontTexture', 1);
+      super.vfunc_paint_target(node, paint_context);
+    }
+  });
+}

src/TRexAttack.js

@@ -0,0 +1,255 @@
+//////////////////////////////////////////////////////////////////////////////////////////
+//          )                                                   (                       //
+//       ( /(   (  (               )    (       (  (  (         )\ )    (  (            //
+//       )\()) ))\ )(   (         (     )\ )    )\))( )\  (    (()/( (  )\))(  (        //
+//      ((_)\ /((_|()\  )\ )      )\  '(()/(   ((_)()((_) )\ )  ((_)))\((_)()\ )\       //
+//      | |(_|_))( ((_)_(_/(    _((_))  )(_))  _(()((_|_)_(_/(  _| |((_)(()((_|(_)      //
+//      | '_ \ || | '_| ' \))  | '  \()| || |  \ V  V / | ' \)) _` / _ \ V  V (_-<      //
+//      |_.__/\_,_|_| |_||_|   |_|_|_|  \_, |   \_/\_/|_|_||_|\__,_\___/\_/\_//__/      //
+//                                 |__/                                                 //
+//                       Copyright (c) 2021 Simon Schneegans                            //
+//          Released under the GPLv3 or later. See LICENSE file for details.            //
+//////////////////////////////////////////////////////////////////////////////////////////
+
+'use strict';
+
+const GObject = imports.gi.GObject;
+
+const ExtensionUtils = imports.misc.extensionUtils;
+const Me             = imports.misc.extensionUtils.getCurrentExtension();
+const utils          = Me.imports.src.utils;
+
+//////////////////////////////////////////////////////////////////////////////////////////
+// This effect tears your windows apart with a series of violent scratches!             //
+// This effect is not available on GNOME 3.3x, due to the limitation described in the   //
+// documentation of vfunc_paint_target further down in this file.                       //
+//////////////////////////////////////////////////////////////////////////////////////////
+
+// The shader class for this effect is registered further down in this file.
+let Shader = null;
+
+// The effect class is completely static. It can be used to get some metadata (like the
+// effect's name or supported GNOME Shell versions), to initialize the respective page of
+// the settings dialog, as well as to create the actual shader for the effect.
+var TRexAttack = class TRexAttack {
+
+  // ---------------------------------------------------------------------------- metadata
+
+  // This effect is only available on GNOME Shell 40+.
+  static getMinShellVersion() {
+    return [40, 0];
+  }
+
+  // This will be called in various places where a unique identifier for this effect is
+  // required. It should match the prefix of the settings keys which store whether the
+  // effect is enabled currently (e.g. the '*-close-effect').
+  static getNick() {
+    return 'trex';
+  }
+
+  // This will be shown in the sidebar of the preferences dialog as well as in the
+  // drop-down menus where the user can choose the effect.
+  static getLabel() {
+    return 'T-Rex Attack';
+  }
+
+  // -------------------------------------------------------------------- API for prefs.js
+
+  // This is called by the preferences dialog. It loads the settings page for this effect,
+  // binds all properties to the settings and appends the page to the main stack of the
+  // preferences dialog.
+  static initPreferences(dialog) {
+
+    // Add the settings page to the builder.
+    dialog.getBuilder().add_from_resource('/ui/gtk4/TRexAttack.ui');
+
+    // Bind all properties.
+    dialog.bindAdjustment('trex-animation-time');
+    dialog.bindColorButton('claw-scratch-color');
+    dialog.bindAdjustment('claw-scratch-scale');
+    dialog.bindAdjustment('claw-scratch-count');
+    dialog.bindAdjustment('claw-scratch-warp');
+
+    // Finally, append the settings page to the main stack.
+    const stack = dialog.getBuilder().get_object('main-stack');
+    stack.add_titled(
+        dialog.getBuilder().get_object('trex-prefs'), TRexAttack.getNick(),
+        TRexAttack.getLabel());
+  }
+
+  // ---------------------------------------------------------------- API for extension.js
+
+  // This is called from extension.js whenever a window is closed with this effect.
+  static createShader(settings) {
+    return new Shader(settings);
+  }
+
+  // This is also called from extension.js. It is used to tweak the ongoing transitions of
+  // the actor - usually windows are faded to transparency and scaled down slightly by
+  // GNOME Shell. Here, we modify this behavior as well as the transition duration.
+  static tweakTransitions(actor, settings) {
+    const animationTime = settings.get_int('trex-animation-time');
+
+    const tweakTransition = (property, value) => {
+      const transition = actor.get_transition(property);
+      if (transition) {
+        transition.set_to(value);
+        transition.set_duration(animationTime);
+      }
+    };
+
+    // For this effect, we slightly increase the window's scale as part of the warp
+    // effect.
+    const warp = 0.5 * settings.get_double('claw-scratch-warp');
+    tweakTransition('opacity', 255);
+    tweakTransition('scale-x', 1.0 + warp);
+    tweakTransition('scale-y', 1.0 + warp);
+  }
+}
+
+
+//////////////////////////////////////////////////////////////////////////////////////////
+// The shader class for this effect will only be registered in GNOME Shell's process    //
+// (not in the preferences process). It's done this way as Clutter may not be installed //
+// on the system and therefore the preferences would crash.                             //
+//////////////////////////////////////////////////////////////////////////////////////////
+
+if (utils.isInShellProcess()) {
+
+  const {Clutter, GdkPixbuf, Cogl} = imports.gi;
+  const shaderSnippets             = Me.imports.src.shaderSnippets;
+
+  Shader = GObject.registerClass({}, class Shader extends Clutter.ShaderEffect {
+    _init(settings) {
+      super._init({shader_type: Clutter.ShaderType.FRAGMENT_SHADER});
+
+      // Load the claw texture. As the shader is re-created for each window animation,
+      // this texture is also re-created each time. This could be improved in the future!
+      // See assets/README.md for how this texture was created.
+      const clawData    = GdkPixbuf.Pixbuf.new_from_resource('/img/claws.png');
+      this._clawTexture = new Clutter.Image();
+      this._clawTexture.set_data(
+          clawData.get_pixels(), Cogl.PixelFormat.RGB_888, clawData.width,
+          clawData.height, clawData.rowstride);
+
+      const color =
+          Clutter.Color.from_string(settings.get_string('claw-scratch-color'))[1];
+
+      this.set_shader_source(`
+
+        // Inject some common shader snippets.
+        ${shaderSnippets.standardUniforms()}
+        ${shaderSnippets.noise()}
+
+        // See assets/README.md for how this texture was created.
+        uniform sampler2D uClawTexture;
+
+        const vec2  SEED            = vec2(${Math.random()}, ${Math.random()});
+        const float CLAW_SIZE       = ${settings.get_double('claw-scratch-scale')};
+        const float NUM_CLAWS       = ${settings.get_int('claw-scratch-count')};
+        const float WARP_INTENSITY  = 1.0 + ${settings.get_double('claw-scratch-warp')};
+        const float FLASH_INTENSITY = 0.1;
+        const float MAX_SPAWN_TIME  = 0.5; // Scratches will only start in the first half of the animation.
+        const float FF_TIME         = 0.5; // Relative time for the final fade to transparency.
+
+        // This method generates a grid of randomly rotated, slightly shifted and scaled 
+        // UV squares. It returns the texture coords of the UV square at the given actor
+        // coordinates. If these do not fall into one of the UV grids, the coordinates of
+        // the closest UV grid will be clamped and returned.
+        vec2 getClawUV(vec2 texCoords, float gridScale, vec2 seed) {
+
+          // Shift coordinates by a random offset and make sure the have a 1:1 aspect ratio.
+          vec2 coords = texCoords + hash22(seed);
+          coords *= uSizeX < uSizeY ? vec2(1.0, 1.0 * uSizeY / uSizeX) : vec2(1.0 * uSizeX / uSizeY, 1.0);
+
+          // Apply global scale.
+          coords *= gridScale;
+
+          // Get grid cell coordinates in [0..1].
+          vec2 cellUV = mod(coords, vec2(1));
+
+          // This is unique for each cell.
+          vec2 cellID = coords-cellUV + vec2(362.456);
+
+          // Add random rotation, scale and offset to each grid cell.
+          float scale    = mix(0.8, 1.0,         hash12(cellID*seed*134.451));
+          float offsetX  = mix(0.0, 1.0 - scale, hash12(cellID*seed*54.4129));
+          float offsetY  = mix(0.0, 1.0 - scale, hash12(cellID*seed*25.3089));
+          float rotation = mix(0.0, 2.0 * 3.141, hash12(cellID*seed*2.99837));
+
+          cellUV -= vec2(offsetX, offsetY);
+          cellUV /= scale;
+
+          cellUV -= 0.5;
+          cellUV = vec2(cellUV.x * cos(rotation) - cellUV.y * sin(rotation),
+                        cellUV.x * sin(rotation) + cellUV.y * cos(rotation));
+          cellUV += 0.5;
+
+          // Clamp resulting coordinates.
+          return clamp(cellUV, vec2(0), vec2(1));
+        }
+
+        void main() {
+
+          // Warp the texture coordinates to create a blow-up effect.
+          vec2  coords = cogl_tex_coord_in[0].st * 2.0 - 1.0;
+          float dist   = length(coords);
+          coords = (coords/dist * pow(dist, WARP_INTENSITY)) * 0.5 + 0.5;
+          coords = mix(cogl_tex_coord_in[0].st, coords, uProgress);
+
+          // Accumulate several random scratches. The color in the scratch map refers to the
+          // relative time when the respective part will become invisible. Therefore we can
+          // add a value to make the scratch appear later.
+          float scratchMap = 1.0;
+          for (int i=0; i<NUM_CLAWS; ++i) {
+            vec2  uv    = getClawUV(coords, 1.0/CLAW_SIZE, SEED*(i+1));
+            float delay = i/NUM_CLAWS * MAX_SPAWN_TIME;
+            scratchMap  = min(scratchMap, clamp(texture2D(uClawTexture, uv).r + delay, 0, 1));
+          }
+
+          // Get the window texture. We shift the texture lookup by the local derivative of
+          // the claw texture in order to mimic some folding distortion.
+          vec2 offset = vec2(dFdx(scratchMap), dFdy(scratchMap)) * uProgress * 0.5;
+          cogl_color_out = texture2D(uTexture, coords + offset);
+
+          // Add colorful flashes.
+          float flashIntensity = 1.0 / FLASH_INTENSITY * (scratchMap - uProgress) + 1;
+          if (flashIntensity < 0 || flashIntensity >= 1) {
+            flashIntensity = 0;
+          }
+
+          // Hide flashes where there is now window.
+          flashIntensity *= cogl_color_out.a;
+
+          // Hide scratched out parts.
+          cogl_color_out *= (scratchMap > uProgress ? 1 : 0);
+
+          vec3 flashColor = vec3(${color.red / 255},
+          ${color.green / 255},
+          ${color.blue / 255}) * ${color.alpha / 255};
+
+          cogl_color_out.rgb += flashIntensity * mix(flashColor, vec3(0), uProgress);
+
+          // Fade out the remaining shards.
+          float fade = smoothstep(0, 1, 1 - clamp((uProgress - 1.0 + FF_TIME)/FF_TIME, 0, 1));
+          cogl_color_out *= fade;
+
+          // These are pretty useful for understanding how this works.
+          // cogl_color_out = vec4(vec3(flashIntensity), 1);
+          // cogl_color_out = vec4(vec3(scratchMap), 1);
+        }
+      `);
+    };
+
+    // This is overridden to bind the claw texture for drawing. Sadly, this seems to be
+    // impossible under GNOME 3.3x as this.get_pipeline() is not available. It was called
+    // get_target() back then but this is not wrapped in GJS.
+    // https://gitlab.gnome.org/GNOME/mutter/-/blob/gnome-3-36/clutter/clutter/clutter-offscreen-effect.c#L598
+    vfunc_paint_target(node, paint_context) {
+      const pipeline = this.get_pipeline();
+      pipeline.set_layer_texture(1, this._clawTexture.get_texture());
+      this.set_uniform_value('uClawTexture', 1);
+      super.vfunc_paint_target(node, paint_context);
+    }
+  });
+}

src/TVEffect.js

@@ -0,0 +1,178 @@
+//////////////////////////////////////////////////////////////////////////////////////////
+//          )                                                   (                       //
+//       ( /(   (  (               )    (       (  (  (         )\ )    (  (            //
+//       )\()) ))\ )(   (         (     )\ )    )\))( )\  (    (()/( (  )\))(  (        //
+//      ((_)\ /((_|()\  )\ )      )\  '(()/(   ((_)()((_) )\ )  ((_)))\((_)()\ )\       //
+//      | |(_|_))( ((_)_(_/(    _((_))  )(_))  _(()((_|_)_(_/(  _| |((_)(()((_|(_)      //
+//      | '_ \ || | '_| ' \))  | '  \()| || |  \ V  V / | ' \)) _` / _ \ V  V (_-<      //
+//      |_.__/\_,_|_| |_||_|   |_|_|_|  \_, |   \_/\_/|_|_||_|\__,_\___/\_/\_//__/      //
+//                                 |__/                                                 //
+//                       Copyright (c) 2021 Simon Schneegans                            //
+//          Released under the GPLv3 or later. See LICENSE file for details.            //
+//////////////////////////////////////////////////////////////////////////////////////////
+
+'use strict';
+
+const GObject = imports.gi.GObject;
+
+const ExtensionUtils = imports.misc.extensionUtils;
+const Me             = imports.misc.extensionUtils.getCurrentExtension();
+const utils          = Me.imports.src.utils;
+
+//////////////////////////////////////////////////////////////////////////////////////////
+// This effect hides the actor by making it first transparent from top and bottom       //
+// towards the middle and then hiding the resulting line from left and right towards    //
+// the center.                                                                          //
+//////////////////////////////////////////////////////////////////////////////////////////
+
+// The shader class for this effect is registered further down in this file.
+let Shader = null;
+
+// The effect class is completely static. It can be used to get some metadata (like the
+// effect's name or supported GNOME Shell versions), to initialize the respective page of
+// the settings dialog, as well as to create the actual shader for the effect.
+var TVEffect = class TVEffect {
+
+  // ---------------------------------------------------------------------------- metadata
+
+  // The effect is available on all GNOME Shell versions supported by this extension.
+  static getMinShellVersion() {
+    return [3, 36];
+  }
+
+  // This will be called in various places where a unique identifier for this effect is
+  // required. It should match the prefix of the settings keys which store whether the
+  // effect is enabled currently (e.g. the '*-close-effect').
+  static getNick() {
+    return 'tv';
+  }
+
+  // This will be shown in the sidebar of the preferences dialog as well as in the
+  // drop-down menus where the user can choose the effect.
+  static getLabel() {
+    return 'TV Effect';
+  }
+
+  // -------------------------------------------------------------------- API for prefs.js
+
+  // This is called by the preferences dialog. It loads the settings page for this effect,
+  // binds all properties to the settings and appends the page to the main stack of the
+  // preferences dialog.
+  static initPreferences(dialog) {
+
+    // Add the settings page to the builder.
+    dialog.getBuilder().add_from_resource(`/ui/${utils.getGTKString()}/TVEffect.ui`);
+
+    // Bind all properties.
+    dialog.bindAdjustment('tv-animation-time');
+    dialog.bindColorButton('tv-effect-color');
+
+    // Finally, append the settings page to the main stack.
+    const stack = dialog.getBuilder().get_object('main-stack');
+    stack.add_titled(
+        dialog.getBuilder().get_object('tv-prefs'), TVEffect.getNick(),
+        TVEffect.getLabel());
+  }
+
+  // ---------------------------------------------------------------- API for extension.js
+
+  // This is called from extension.js whenever a window is closed with this effect.
+  static createShader(settings) {
+    return new Shader(settings);
+  }
+
+  // This is also called from extension.js. It is used to tweak the ongoing transitions of
+  // the actor - usually windows are faded to transparency and scaled down slightly by
+  // GNOME Shell. Here, we modify this behavior as well as the transition duration.
+  static tweakTransitions(actor, settings) {
+    const animationTime = settings.get_int('tv-animation-time');
+
+    const tweakTransition = (property, value) => {
+      const transition = actor.get_transition(property);
+      if (transition) {
+        transition.set_to(value);
+        transition.set_duration(animationTime);
+      }
+    };
+
+    // For this effect, we scale the window only vertically.
+    tweakTransition('opacity', 255);
+    tweakTransition('scale-x', 1);
+    tweakTransition('scale-y', 0.5);
+  }
+}
+
+
+//////////////////////////////////////////////////////////////////////////////////////////
+// The shader class for this effect will only be registered in GNOME Shell's process    //
+// (not in the preferences process). It's done this way as Clutter may not be installed //
+// on the system and therefore the preferences would crash.                             //
+//////////////////////////////////////////////////////////////////////////////////////////
+
+if (utils.isInShellProcess()) {
+
+  const Clutter        = imports.gi.Clutter;
+  const shaderSnippets = Me.imports.src.shaderSnippets;
+
+  Shader = GObject.registerClass({}, class Shader extends Clutter.ShaderEffect {
+    _init(settings) {
+      super._init({shader_type: Clutter.ShaderType.FRAGMENT_SHADER});
+
+      const color = Clutter.Color.from_string(settings.get_string('tv-effect-color'))[1];
+
+      this.set_shader_source(`
+
+      // Inject some common shader snippets.
+      ${shaderSnippets.standardUniforms()}
+
+      const float BLUR_WIDTH = 0.01; // Width of the gradients.
+      const float TB_TIME    = 0.7;  // Relative time for the top/bottom animation.
+      const float LR_TIME    = 0.4;  // Relative time for the left/right animation.
+      const float LR_DELAY   = 0.6;  // Delay after which the left/right animation starts.
+      const float FF_TIME    = 0.2;  // Relative time for the final fade to transparency.
+
+      void main() {
+
+        // All of these are in [0..1] during the different stages of the animation.
+        // tb refers to the top-bottom animation.
+        // lr refers to the left-right animation.
+        // ff refers to the final fade animation.
+        float tbProgress = smoothstep(0, 1, clamp(uProgress/TB_TIME, 0, 1));
+        float lrProgress = smoothstep(0, 1, clamp((uProgress - LR_DELAY)/LR_TIME, 0, 1));
+        float ffProgress = smoothstep(0, 1, clamp((uProgress - 1.0 + FF_TIME)/FF_TIME, 0, 1));
+
+        // This is a top-center-bottom gradient in [0..1..0]
+        float tb = cogl_tex_coord_in[0].t * 2;
+        tb = tb < 1 ? tb : 2 - tb;
+        
+        // This is a left-center-right gradient in [0..1..0]
+        float lr = cogl_tex_coord_in[0].s * 2;
+        lr = lr < 1 ? lr : 2 - lr;
+        
+        // Combine the progress values with the gradients to create the alpha masks.
+        float tbMask = 1 - smoothstep(0, 1, clamp((tbProgress - tb) / BLUR_WIDTH, 0, 1));
+        float lrMask = 1 - smoothstep(0, 1, clamp((lrProgress - lr) / BLUR_WIDTH, 0, 1));
+        float ffMask = 1 - smoothstep(0, 1, ffProgress);
+
+        // Assemble the final alpha value.
+        float mask = tbMask * lrMask * ffMask;
+
+        vec4 windowColor = texture2D(uTexture, cogl_tex_coord_in[0].st);
+        vec4 effectColor = vec4(${color.red / 255},
+                                ${color.green / 255},
+                                ${color.blue / 255}, 1.0) * windowColor.a;
+
+        windowColor.rgb = mix(windowColor.rgb, effectColor.rgb, smoothstep(0, 1, uProgress));
+
+        cogl_color_out = windowColor * mask;
+
+        // These are pretty useful for understanding how this works.
+        // cogl_color_out = vec4(vec3(tbMask), 1);
+        // cogl_color_out = vec4(vec3(lrMask), 1);
+        // cogl_color_out = vec4(vec3(ffMask), 1);
+        // cogl_color_out = vec4(vec3(mask), 1);
+      }
+      `);
+    };
+  });
+}

src/Wisps.js

@@ -0,0 +1,217 @@
+//////////////////////////////////////////////////////////////////////////////////////////
+//          )                                                   (                       //
+//       ( /(   (  (               )    (       (  (  (         )\ )    (  (            //
+//       )\()) ))\ )(   (         (     )\ )    )\))( )\  (    (()/( (  )\))(  (        //
+//      ((_)\ /((_|()\  )\ )      )\  '(()/(   ((_)()((_) )\ )  ((_)))\((_)()\ )\       //
+//      | |(_|_))( ((_)_(_/(    _((_))  )(_))  _(()((_|_)_(_/(  _| |((_)(()((_|(_)      //
+//      | '_ \ || | '_| ' \))  | '  \()| || |  \ V  V / | ' \)) _` / _ \ V  V (_-<      //
+//      |_.__/\_,_|_| |_||_|   |_|_|_|  \_, |   \_/\_/|_|_||_|\__,_\___/\_/\_//__/      //
+//                                 |__/                                                 //
+//                       Copyright (c) 2021 Simon Schneegans                            //
+//          Released under the GPLv3 or later. See LICENSE file for details.            //
+//////////////////////////////////////////////////////////////////////////////////////////
+
+'use strict';
+
+const GObject = imports.gi.GObject;
+
+const ExtensionUtils = imports.misc.extensionUtils;
+const Me             = imports.misc.extensionUtils.getCurrentExtension();
+const utils          = Me.imports.src.utils;
+
+//////////////////////////////////////////////////////////////////////////////////////////
+// This effect lets your windows be carried to the realm of dreams by some little       //
+// fairies. It's implemented with several overlaid grids of randomly moving points.     //
+//////////////////////////////////////////////////////////////////////////////////////////
+
+// The shader class for this effect is registered further down in this file.
+let Shader = null;
+
+// The effect class is completely static. It can be used to get some metadata (like the
+// effect's name or supported GNOME Shell versions), to initialize the respective page of
+// the settings dialog, as well as to create the actual shader for the effect.
+var Wisps = class Wisps {
+
+  // ---------------------------------------------------------------------------- metadata
+
+  // The effect is available on all GNOME Shell versions supported by this extension.
+  static getMinShellVersion() {
+    return [3, 36];
+  }
+
+  // This will be called in various places where a unique identifier for this effect is
+  // required. It should match the prefix of the settings keys which store whether the
+  // effect is enabled currently (e.g. the '*-close-effect').
+  static getNick() {
+    return 'wisps';
+  }
+
+  // This will be shown in the sidebar of the preferences dialog as well as in the
+  // drop-down menus where the user can choose the effect.
+  static getLabel() {
+    return 'Wisps';
+  }
+
+  // -------------------------------------------------------------------- API for prefs.js
+
+  // This is called by the preferences dialog. It loads the settings page for this effect,
+  // binds all properties to the settings and appends the page to the main stack of the
+  // preferences dialog.
+  static initPreferences(dialog) {
+
+    // Add the settings page to the builder.
+    dialog.getBuilder().add_from_resource(`/ui/${utils.getGTKString()}/Wisps.ui`);
+
+    // Bind all properties.
+    dialog.bindAdjustment('wisps-animation-time');
+    dialog.bindAdjustment('wisps-scale');
+    dialog.bindColorButton('wisps-color');
+
+    // Finally, append the settings page to the main stack.
+    const stack = dialog.getBuilder().get_object('main-stack');
+    stack.add_titled(
+        dialog.getBuilder().get_object('wisps-prefs'), Wisps.getNick(), Wisps.getLabel());
+  }
+
+  // ---------------------------------------------------------------- API for extension.js
+
+  // This is called from extension.js whenever a window is closed with this effect.
+  static createShader(settings) {
+    return new Shader(settings);
+  }
+
+  // This is also called from extension.js. It is used to tweak the ongoing transitions of
+  // the actor - usually windows are faded to transparency and scaled down slightly by
+  // GNOME Shell. Here, we modify this behavior as well as the transition duration.
+  static tweakTransitions(actor, settings) {
+    const animationTime = settings.get_int('wisps-animation-time');
+
+    const tweakTransition = (property, value) => {
+      const transition = actor.get_transition(property);
+      if (transition) {
+        transition.set_to(value);
+        transition.set_duration(animationTime);
+      }
+    };
+
+    // We re-target these transitions so that the window is not faded but scaled down a
+    // tiny bit.
+    tweakTransition('opacity', 255);
+    tweakTransition('scale-x', 0.9);
+    tweakTransition('scale-y', 0.9);
+  }
+}
+
+
+//////////////////////////////////////////////////////////////////////////////////////////
+// The shader class for this effect will only be registered in GNOME Shell's process    //
+// (not in the preferences process). It's done this way as Clutter may not be installed //
+// on the system and therefore the preferences would crash.                             //
+//////////////////////////////////////////////////////////////////////////////////////////
+
+if (utils.isInShellProcess()) {
+
+  const Clutter        = imports.gi.Clutter;
+  const shaderSnippets = Me.imports.src.shaderSnippets;
+
+  Shader = GObject.registerClass({}, class Shader extends Clutter.ShaderEffect {
+    _init(settings) {
+      super._init({shader_type: Clutter.ShaderType.FRAGMENT_SHADER});
+
+      const color = Clutter.Color.from_string(settings.get_string('wisps-color'))[1];
+
+      this.set_shader_source(`
+
+      // Inject some common shader snippets.
+      ${shaderSnippets.standardUniforms()}
+      ${shaderSnippets.noise()}
+      ${shaderSnippets.edgeMask()}
+
+      const vec2  SEED            = vec2(${Math.random()}, ${Math.random()});
+      const float WISPS_RADIUS    = 20.0;
+      const float WISPS_SPEED     = 10.0;
+      const float WISPS_SPACING   = 40 + WISPS_RADIUS;
+      const int   WISPS_LAYERS    = 8;
+      const float WISPS_IN_TIME   = 0.5;
+      const float WINDOW_OUT_TIME = 1.0;
+
+      // Returns a grid of randomly moving points. Each grid cell contains one point which
+      // moves on an ellipse. 
+      float getWisps(vec2 texCoords, float gridSize, vec2 seed) {
+
+        // Shift coordinates by a random offset and make sure the have a 1:1 aspect ratio.
+        vec2 coords = (texCoords + hash22(seed)) * vec2(uSizeX, uSizeY);
+
+        // Apply global scale.
+        coords /= gridSize;
+
+        // Get grid cell coordinates in [0..1].
+        vec2 cellUV = mod(coords, vec2(1));
+
+        // This is unique for each cell.
+        vec2 cellID = coords-cellUV + vec2(362.456);
+
+        // Add random rotation, scale and offset to each grid cell.
+        float speed     = mix(10.0, 15.0,   hash12(cellID*seed*134.451)) / gridSize * WISPS_SPEED;
+        float rotation  = mix( 0.0,  6.283, hash12(cellID*seed*54.4129));
+        float radius    = mix( 0.5,  1.0,   hash12(cellID*seed*19.1249)) * WISPS_RADIUS;
+        float roundness = mix(-1.0,  1.0,   hash12(cellID*seed*7.51949));
+
+        vec2 offset = vec2(sin(speed * (uTime+1)) * roundness, cos(speed * (uTime+1)));
+        offset *= 0.5 - 0.5 * radius / gridSize;
+        offset = vec2(offset.x * cos(rotation) - offset.y * sin(rotation),
+                      offset.x * sin(rotation) + offset.y * cos(rotation));
+
+        cellUV += offset;
+
+        // Use distance to center of shifted / rotated UV coordinates to draw a glaring point.
+        float dist = length(cellUV - 0.5) * gridSize / radius;
+        if (dist < 1.0) {
+          return min(10, 0.01 / pow(dist, 2.0));
+        }
+
+        return 0.0;
+      }
+
+      void main() {
+        
+        // Get the color of the window.
+        vec4 windowColor = texture2D(uTexture, cogl_tex_coord_in[0].st);
+        vec4 effectColor = vec4(${color.red / 255},
+          ${color.green / 255},
+          ${color.blue / 255}, 1.0) * windowColor.a;
+        
+        // Compute several layers of moving wisps.
+        vec2 uv = (cogl_tex_coord_in[0].st-0.5) / mix(1.0, 0.5, uProgress) + 0.5;
+        uv /= ${settings.get_double('wisps-scale')};
+        float wisps = 0;
+        for (int i=0; i<WISPS_LAYERS; ++i) {
+          wisps += getWisps(uv*0.3, WISPS_SPACING, SEED * (i+1));
+        }
+
+        // Compute shrinking edge mask.
+        float mask = getRelativeEdgeMask(mix(0.01, 0.5, uProgress));
+
+        // Compute three different progress values.
+        float wispsIn   = smoothstep(0, 1, clamp(uProgress/WISPS_IN_TIME, 0, 1));
+        float wispsOut  = smoothstep(0, 1, clamp((uProgress - WISPS_IN_TIME)/(1.0 - WISPS_IN_TIME), 0, 1));
+        float windowOut = smoothstep(0, 1, clamp(uProgress/WINDOW_OUT_TIME, 0, 1));
+
+        // Use a noise function to dissolve the window.
+        float noise = smoothstep(1.0, 0.0, abs(2.0 * simplex2DFractal(uv * vec2(uSizeX, uSizeY) / 250) - 1.0));
+        float windowMask = 1.0 - (windowOut < 0.5 ? mix(0.0, noise, windowOut * 2.0) : mix(noise, 1.0, windowOut * 2.0 - 1.0));
+        cogl_color_out = windowColor * windowMask * mask;
+
+        // Add the wisps.
+        cogl_color_out += min(wispsIn, 1.0 - wispsOut) * wisps * effectColor * mask;
+
+        // These are pretty useful for understanding how this works.
+        // cogl_color_out = vec4(vec3(windowMask), 1.0);
+        // cogl_color_out = vec4(vec3(wisps), 1.0);
+        // cogl_color_out = vec4(vec3(noise), 1.0);
+        // cogl_color_out = vec4(vec3(mask*min(wispsIn, 1.0 - wispsOut)), 1.0);
+      }
+      `);
+    };
+  });
+}

src/extension/FireShader.js

@@ -1,150 +0,0 @@
-//////////////////////////////////////////////////////////////////////////////////////////
-//          )                                                   (                       //
-//       ( /(   (  (               )    (       (  (  (         )\ )    (  (            //
-//       )\()) ))\ )(   (         (     )\ )    )\))( )\  (    (()/( (  )\))(  (        //
-//      ((_)\ /((_|()\  )\ )      )\  '(()/(   ((_)()((_) )\ )  ((_)))\((_)()\ )\       //
-//      | |(_|_))( ((_)_(_/(    _((_))  )(_))  _(()((_|_)_(_/(  _| |((_)(()((_|(_)      //
-//      | '_ \ || | '_| ' \))  | '  \()| || |  \ V  V / | ' \)) _` / _ \ V  V (_-<      //
-//      |_.__/\_,_|_| |_||_|   |_|_|_|  \_, |   \_/\_/|_|_||_|\__,_\___/\_/\_//__/      //
-//                                 |__/                                                 //
-//                       Copyright (c) 2021 Simon Schneegans                            //
-//          Released under the GPLv3 or later. See LICENSE file for details.            //
-//////////////////////////////////////////////////////////////////////////////////////////
-
-'use strict';
-
-const {Clutter, GObject} = imports.gi;
-
-const ExtensionUtils = imports.misc.extensionUtils;
-const Me             = imports.misc.extensionUtils.getCurrentExtension();
-const shaderSnippets = Me.imports.src.extension.shaderSnippets;
-
-//////////////////////////////////////////////////////////////////////////////////////////
-// The FireShader uses a procedural gray-scale noise texture. This texture is moved     //
-// vertically over time and mapped to a configurable color gradient. It is faded to     //
-// transparency towards the edges of the window. In addition, there are a couple of     //
-// moving gradients which fade-in or fade-out the fire effect.                          //
-//////////////////////////////////////////////////////////////////////////////////////////
-
-var FireShader = GObject.registerClass({Properties: {}, Signals: {}},
-                                       class FireShader extends Clutter.ShaderEffect {
-  _init(settings) {
-    super._init({shader_type: Clutter.ShaderType.FRAGMENT_SHADER});
-
-    // Load the gradient values from the settings. We directly inject the values in the
-    // GLSL code below. The shader is compiled once for each window-closing anyways. In
-    // the future, we may want to prevent this frequent recompilations of shaders,
-    // though.
-    const gradient = [];
-    for (let i = 1; i <= 5; i++) {
-      const color = Clutter.Color.from_string(settings.get_string('fire-color-' + i))[1];
-      gradient.push(`vec4(${color.red / 255}, ${color.green / 255}, ${
-          color.blue / 255}, ${color.alpha / 255})`);
-    }
-
-    this.set_shader_source(`
-
-      // Inject some common shader snippets.
-      ${shaderSnippets.standardUniforms()}
-      ${shaderSnippets.noise()}
-
-      // These may be configurable in the future.
-      const float EDGE_FADE  = 70;
-      const float FADE_WIDTH = 0.1;
-      const float HIDE_TIME  = 0.4;
-      const vec2  FIRE_SCALE = vec2(400, 600) * ${settings.get_double('flame-scale')};
-      const float FIRE_SPEED = ${settings.get_double('flame-movement-speed')};
-
-      // This maps the input value from [0..1] to a color from the gradient.
-      vec4 getFireColor(float v) {
-        const float steps[5] = float[](0.0, 0.2, 0.35, 0.5, 0.8);
-        const vec4 colors[5] = vec4[](
-          ${gradient[0]},
-          ${gradient[1]},
-          ${gradient[2]},
-          ${gradient[3]},
-          ${gradient[4]}
-        );
-
-        if (v < steps[0]) {
-          return colors[0];
-        }
-
-        for (int i=0; i<4; ++i) {
-          if (v <= steps[i+1]) {
-            return mix(colors[i], colors[i+1], vec4(v -
-            steps[i])/(steps[i+1]-steps[i]));
-          }
-        }
-
-        return colors[4];
-      }
-
-      // This method requires the uniforms from standardUniforms() to be available.
-      // It returns two values: The first is an alpha value which can be used for the window
-      // texture. This gradually dissolves the window from top to bottom. The second can be used
-      // to mask any effect, it will be most opaque where the window is currently fading and
-      // gradually dissolve to zero over time.
-      // hideTime:      A value in [0..1]. It determines the percentage of the animation which
-      //                is spent for hiding the window. 1-hideTime will be spent thereafter for
-      //                dissolving the effect mask.
-      // fadeWidth:     The relative size of the window-hiding gradient in [0..1].
-      // edgeFadeWidth: The pixel width of the effect fading range at the edges of the window.
-      vec2 effectMask(float hideTime, float fadeWidth, float edgeFadeWidth) {
-        float burnProgress      = clamp(uProgress/hideTime, 0, 1);
-        float afterBurnProgress = clamp((uProgress-hideTime)/(1-hideTime), 0, 1);
-
-        // Gradient from top to bottom.
-        float t = cogl_tex_coord_in[0].t * (1 - fadeWidth);
-
-        // Visible part of the window. Gradually dissolves towards the bottom.
-        float windowMask = 1 - clamp((burnProgress - t) / fadeWidth, 0, 1);
-
-        // Gradient from top burning window.
-        float effectMask = clamp(t*(1-windowMask)/burnProgress, 0, 1);
-
-        // Fade-out when the window burned down.
-        if (uProgress > hideTime) {
-          float fade = sqrt(1-afterBurnProgress*afterBurnProgress);
-          effectMask *= mix(1, 1-t, afterBurnProgress) * fade;
-        }
-
-        // Fade at window borders.
-        vec2 pos = cogl_tex_coord_in[0].st * vec2(uSizeX, uSizeY);
-        effectMask *= clamp(pos.x / edgeFadeWidth, 0, 1);
-        effectMask *= clamp(pos.y / edgeFadeWidth, 0, 1);
-        effectMask *= clamp((uSizeX - pos.x) / edgeFadeWidth, 0, 1);
-        effectMask *= clamp((uSizeY - pos.y) / edgeFadeWidth, 0, 1);
-
-        return vec2(windowMask, effectMask);
-      }
-
-      void main() {
-
-        // Get a noise value which moves vertically in time.
-        vec2 uv = cogl_tex_coord_in[0].st * vec2(uSizeX, uSizeY) / FIRE_SCALE;
-        uv.y += uTime * FIRE_SPEED;
-        float noise = perlinNoise(uv, 10.0, 5, 0.5);
-
-        // Modulate noise by effect mask.
-        vec2 effectMask = effectMask(HIDE_TIME, FADE_WIDTH, EDGE_FADE);
-        noise *= effectMask.y;
-
-        // Map noise value to color.
-        vec4 fire = getFireColor(noise);
-        fire.rgb *= fire.a;
-
-        // Get the window texture and fade it according to the effect mask.
-        cogl_color_out = texture2D(uTexture, cogl_tex_coord_in[0].st) * effectMask.x;
-
-        // Add the fire to the window.
-        cogl_color_out += fire;
-
-        // These are pretty useful for understanding how this works.
-        // cogl_color_out = vec4(vec3(noise), 1);
-        // cogl_color_out = vec4(vec3(effectMask.x), 1);
-        // cogl_color_out = vec4(vec3(effectMask.y), 1);
-      }
-    `);
-  };
-});

src/extension/MatrixShader.js

@@ -1,145 +0,0 @@
-//////////////////////////////////////////////////////////////////////////////////////////
-//          )                                                   (                       //
-//       ( /(   (  (               )    (       (  (  (         )\ )    (  (            //
-//       )\()) ))\ )(   (         (     )\ )    )\))( )\  (    (()/( (  )\))(  (        //
-//      ((_)\ /((_|()\  )\ )      )\  '(()/(   ((_)()((_) )\ )  ((_)))\((_)()\ )\       //
-//      | |(_|_))( ((_)_(_/(    _((_))  )(_))  _(()((_|_)_(_/(  _| |((_)(()((_|(_)      //
-//      | '_ \ || | '_| ' \))  | '  \()| || |  \ V  V / | ' \)) _` / _ \ V  V (_-<      //
-//      |_.__/\_,_|_| |_||_|   |_|_|_|  \_, |   \_/\_/|_|_||_|\__,_\___/\_/\_//__/      //
-//                                 |__/                                                 //
-//                       Copyright (c) 2021 Simon Schneegans                            //
-//          Released under the GPLv3 or later. See LICENSE file for details.            //
-//////////////////////////////////////////////////////////////////////////////////////////
-
-'use strict';
-
-const {Clutter, GObject, GdkPixbuf, Cogl} = imports.gi;
-
-const ExtensionUtils = imports.misc.extensionUtils;
-const Me             = imports.misc.extensionUtils.getCurrentExtension();
-const shaderSnippets = Me.imports.src.extension.shaderSnippets;
-
-//////////////////////////////////////////////////////////////////////////////////////////
-// The MatrixShader multiplies a grid of random letters with some gradients which are   //
-// moving from top to bottom. The speed of the moving gradients is chosen randomly.     //
-// Also, there is a random delay making the gradients not drop all at the same time.    //
-// This effect is not available on GNOME 3.3x, due to the limitation described in the   //
-// documentation of vfunc_paint_target further down in this file.                       //
-//////////////////////////////////////////////////////////////////////////////////////////
-
-var MatrixShader = GObject.registerClass({Properties: {}, Signals: {}},
-                                         class MatrixShader extends Clutter.ShaderEffect {
-  _init(settings) {
-    super._init({shader_type: Clutter.ShaderType.FRAGMENT_SHADER});
-
-    // Load the font texture. As the shader is re-created for each window animation, this
-    // texture is also re-created each time. This could be improved in the future!
-    const fontData    = GdkPixbuf.Pixbuf.new_from_resource('/img/matrixFont.png');
-    this._fontTexture = new Clutter.Image();
-    this._fontTexture.set_data(
-        fontData.get_pixels(),
-        fontData.has_alpha ? Cogl.PixelFormat.RGBA_8888 : Cogl.PixelFormat.RGB_888,
-        fontData.width, fontData.height, fontData.rowstride);
-
-    const trailColor =
-        Clutter.Color.from_string(settings.get_string('matrix-trail-color'))[1];
-    const tipColor =
-        Clutter.Color.from_string(settings.get_string('matrix-tip-color'))[1];
-
-    // This is partially based on https://www.shadertoy.com/view/ldccW4 (CC-BY-NC-SA).
-    this.set_shader_source(`
-
-      // Inject some common shader snippets.
-      ${shaderSnippets.standardUniforms()}
-      ${shaderSnippets.noise()}
-
-      uniform sampler2D uFontTexture;
-
-      // These may be configurable in the future.
-      const float EDGE_FADE             = 30;
-      const float FADE_WIDTH            = 150;
-      const float TRAIL_LENGTH          = 0.2;
-      const float FINAL_FADE_START_TIME = 0.8;
-      const float LETTER_TILES          = 16.0;
-      const float LETTER_SIZE           = ${settings.get_int('matrix-scale')};
-      const float LETTER_FLICKER_SPEED  = 2.0;
-      const float RANDOMNESS            = ${settings.get_double('matrix-randomness')};
-
-      // This returns a flickering grid of random letters.
-      float getText(vec2 fragCoord) {
-        vec2 pixelCoords = fragCoord * vec2(uSizeX, uSizeY);
-        vec2 uv = mod(pixelCoords.xy, LETTER_SIZE)/LETTER_SIZE;
-        vec2 block = pixelCoords/LETTER_SIZE - uv;
-
-        // Choose random letter.
-        uv += floor(rand2(floor(rand(block)*vec2(12.9898,78.233) + LETTER_FLICKER_SPEED*uTime + 42.254))*LETTER_TILES);
-        
-        return texture2D(uFontTexture, uv/LETTER_TILES).r;
-      }
-
-      // This returns two values: The first are gradients for the "raindrops" which move
-      // from top to bottom. This is used for fading the letters. The second value is set
-      // to one below each drop and to zero above it. This second value is used for fading
-      // the window texture. 
-      vec2 getRain(vec2 fragCoord) {
-        vec2 coords = fragCoord * vec2(uSizeX, uSizeY);
-        coords.x -= mod(coords.x, LETTER_SIZE);
-
-        float delay = fract(sin(coords.x)*78.233) * mix(0.0, 1.0, RANDOMNESS);
-        float speed = fract(cos(coords.x)*12.989) * mix(0.0, 0.3, RANDOMNESS) + 1.5;
-
-        float distToDrop  = (uProgress*2-delay)*speed - fragCoord.y;
-        float rainAlpha   = distToDrop >= 0 ? exp(-distToDrop/TRAIL_LENGTH) : 0;
-        float windowAlpha = 1 - clamp(uSizeY*distToDrop, 0, FADE_WIDTH) / FADE_WIDTH;
-        return vec2(rainAlpha, windowAlpha);
-      }
-
-      void main() {
-
-        // Get a cool matrix effect. See comments for those methods above.
-        vec2  rain = getRain(cogl_tex_coord_in[0].st);
-        float text = getText(cogl_tex_coord_in[0].st);
-
-        // Get the window texture and fade it according to the effect mask.
-        cogl_color_out = texture2D(uTexture, cogl_tex_coord_in[0].st) * rain.y;
-
-        // This is used to fade out the remaining trails in the end.
-        float finalFade = 1-clamp((uProgress-FINAL_FADE_START_TIME)/
-                                  (1-FINAL_FADE_START_TIME), 0, 1);
-        float rainAlpha = finalFade * rain.x;
-
-        // Fade at window borders.
-        vec2 pos = cogl_tex_coord_in[0].st * vec2(uSizeX, uSizeY);
-        rainAlpha *= clamp(pos.x / EDGE_FADE, 0, 1);
-        rainAlpha *= clamp(pos.y / EDGE_FADE, 0, 1);
-        rainAlpha *= clamp((uSizeX - pos.x) / EDGE_FADE, 0, 1);
-        rainAlpha *= clamp((uSizeY - pos.y) / EDGE_FADE, 0, 1);
-
-        // Add the matrix effect to the window.
-        vec3 trailColor = vec3(${trailColor.red / 255}, 
-                               ${trailColor.green / 255}, 
-                               ${trailColor.blue / 255});
-        vec3 tipColor =   vec3(${tipColor.red / 255}, 
-                               ${tipColor.green / 255}, 
-                               ${tipColor.blue / 255});
-        cogl_color_out.rgb += mix(trailColor, tipColor, min(1, pow(rainAlpha+0.1, 4))) * rainAlpha * text;
-
-        // These are pretty useful for understanding how this works.
-        // cogl_color_out = vec4(vec3(text), 1);
-        // cogl_color_out = vec4(vec3(rain.x), 1);
-        // cogl_color_out = vec4(vec3(rain.y), 1);
-      }
-    `);
-  };
-
-  // This is overridden to bind the font texture for drawing. Sadly, this seems to be
-  // impossible under GNOME 3.3x as this.get_pipeline() is not available. It was called
-  // get_target() back then but this is not wrapped in GJS.
-  // https://gitlab.gnome.org/GNOME/mutter/-/blob/gnome-3-36/clutter/clutter/clutter-offscreen-effect.c#L598
-  vfunc_paint_target(node, paint_context) {
-    const pipeline = this.get_pipeline();
-    pipeline.set_layer_texture(1, this._fontTexture.get_texture());
-    this.set_uniform_value('uFontTexture', 1);
-    super.vfunc_paint_target(node, paint_context);
-  }
-});

src/extension/shaderSnippets.js

@@ -1,83 +0,0 @@
-//////////////////////////////////////////////////////////////////////////////////////////
-//          )                                                   (                       //
-//       ( /(   (  (               )    (       (  (  (         )\ )    (  (            //
-//       )\()) ))\ )(   (         (     )\ )    )\))( )\  (    (()/( (  )\))(  (        //
-//      ((_)\ /((_|()\  )\ )      )\  '(()/(   ((_)()((_) )\ )  ((_)))\((_)()\ )\       //
-//      | |(_|_))( ((_)_(_/(    _((_))  )(_))  _(()((_|_)_(_/(  _| |((_)(()((_|(_)      //
-//      | '_ \ || | '_| ' \))  | '  \()| || |  \ V  V / | ' \)) _` / _ \ V  V (_-<      //
-//      |_.__/\_,_|_| |_||_|   |_|_|_|  \_, |   \_/\_/|_|_||_|\__,_\___/\_/\_//__/      //
-//                                 |__/                                                 //
-//                       Copyright (c) 2021 Simon Schneegans                            //
-//          Released under the GPLv3 or later. See LICENSE file for details.            //
-//////////////////////////////////////////////////////////////////////////////////////////
-
-'use strict';
-
-//////////////////////////////////////////////////////////////////////////////////////////
-// These functions return strings which can be injected to GLSL shader code.            //
-//////////////////////////////////////////////////////////////////////////////////////////
-
-// These should be included in every shader.
-// uTexture:    Contains the texture of the window.
-// uProgress:   A value which transitions from 0 to 1 during the entire animation.
-// uTime:       A steadily increasing value in seconds.
-// uSizeX:      The horizontal size of uTexture in pixels.
-// uSizeY:      The vertical size of uTexture in pixels.
-function standardUniforms() {
-  return `
-  uniform sampler2D uTexture;
-  uniform float     uProgress;
-  uniform float     uTime;
-  uniform int       uSizeX;
-  uniform int       uSizeY;
-  `;
-}
-
-// The noise implementation is from https://www.shadertoy.com/view/3tcBzH (CC-BY-NC-SA).
-function noise() {
-  return `
-  float rand(vec2 co) {
-    return fract(sin(dot(co.xy, vec2(12.9898,78.233))) * 43758.5453);
-  }
-
-  vec2 rand2(vec2 co) {
-    return vec2(rand(co), rand(co + vec2(12.9898,78.233)));
-  }
-
-  float hermite(float t) {
-    return t * t * (3.0 - 2.0 * t);
-  }
-
-  float noiseImpl(vec2 co, float frequency) {
-    vec2 v = vec2(co.x * frequency, co.y * frequency);
-
-    float ix1 = floor(v.x);
-    float iy1 = floor(v.y);
-    float ix2 = floor(v.x + 1.0);
-    float iy2 = floor(v.y + 1.0);
-
-    float fx = hermite(fract(v.x));
-    float fy = hermite(fract(v.y));
-
-    float fade1 = mix(rand(vec2(ix1, iy1)), rand(vec2(ix2, iy1)), fx);
-    float fade2 = mix(rand(vec2(ix1, iy2)), rand(vec2(ix2, iy2)), fx);
-
-    return mix(fade1, fade2, fy);
-  }
-
-  float perlinNoise(vec2 co, float freq, int steps, float persistence) {
-    float value = 0.0;
-    float ampl = 1.0;
-    float sum = 0.0;
-
-    for(int i=0 ; i<steps ; i++) {
-      sum += ampl;
-      value += noiseImpl(co, freq) * ampl;
-      freq *= 2.0;
-      ampl *= persistence;
-    }
-
-    return value / sum;
-  }
-  `;
-}

src/shaderSnippets.js

@@ -0,0 +1,275 @@
+//////////////////////////////////////////////////////////////////////////////////////////
+//          )                                                   (                       //
+//       ( /(   (  (               )    (       (  (  (         )\ )    (  (            //
+//       )\()) ))\ )(   (         (     )\ )    )\))( )\  (    (()/( (  )\))(  (        //
+//      ((_)\ /((_|()\  )\ )      )\  '(()/(   ((_)()((_) )\ )  ((_)))\((_)()\ )\       //
+//      | |(_|_))( ((_)_(_/(    _((_))  )(_))  _(()((_|_)_(_/(  _| |((_)(()((_|(_)      //
+//      | '_ \ || | '_| ' \))  | '  \()| || |  \ V  V / | ' \)) _` / _ \ V  V (_-<      //
+//      |_.__/\_,_|_| |_||_|   |_|_|_|  \_, |   \_/\_/|_|_||_|\__,_\___/\_/\_//__/      //
+//                                 |__/                                                 //
+//                       Copyright (c) 2021 Simon Schneegans                            //
+//          Released under the GPLv3 or later. See LICENSE file for details.            //
+//////////////////////////////////////////////////////////////////////////////////////////
+
+'use strict';
+
+//////////////////////////////////////////////////////////////////////////////////////////
+// These functions return strings which can be injected to GLSL shader code.            //
+//////////////////////////////////////////////////////////////////////////////////////////
+
+// These should be included in every shader.
+// uTexture:    Contains the texture of the window.
+// uProgress:   A value which transitions from 0 to 1 during the entire animation.
+// uTime:       A steadily increasing value in seconds.
+// uSizeX:      The horizontal size of uTexture in pixels.
+// uSizeY:      The vertical size of uTexture in pixels.
+function standardUniforms() {
+  return `
+  uniform sampler2D uTexture;
+  uniform float     uProgress;
+  uniform float     uTime;
+  uniform int       uSizeX;
+  uniform int       uSizeY;
+  `;
+}
+
+// This method returns a mask which smoothly transitions towards zero when approaching
+// the window's borders. There is a variant which takes the transition area width in
+// pixels and one which takes this as a percentage.
+function edgeMask() {
+  return `
+  float getEdgeMask(vec2 uv, vec2 maxUV, float fadeWidth) {
+    float mask = 1.0;
+    mask *= smoothstep(0, 1, clamp(uv.x / fadeWidth, 0, 1));
+    mask *= smoothstep(0, 1, clamp(uv.y / fadeWidth, 0, 1));
+    mask *= smoothstep(0, 1, clamp((maxUV.x - uv.x) / fadeWidth, 0, 1));
+    mask *= smoothstep(0, 1, clamp((maxUV.y - uv.y) / fadeWidth, 0, 1));
+
+    return mask;
+  }
+
+  float getAbsoluteEdgeMask(float fadePixels) {
+    vec2 uv = cogl_tex_coord_in[0].st * vec2(uSizeX, uSizeY);
+    return getEdgeMask(uv, vec2(uSizeX, uSizeY), fadePixels);
+  }
+  
+  float getRelativeEdgeMask(float fadeAmount) {
+    vec2 uv = cogl_tex_coord_in[0].st;
+    return getEdgeMask(uv, vec2(1.0), fadeAmount);
+  }
+  `;
+}
+
+// These noise algorithms are based on implementations by various authors from
+// shadertoy.com, which are all available under the MIT License. See the respective links
+// in the comments below.
+function noise() {
+  return `
+
+  ////////////////////////////////////////////////////////////////////////////////////////
+  // Hash without Sine                                                                  //
+  // MIT License, https://www.shadertoy.com/view/4djSRW                                 //
+  // Copyright (c) 2014 David Hoskins.                                                  //
+  ////////////////////////////////////////////////////////////////////////////////////////
+
+  // 1 out, 1 in...
+  float hash11(float p) {
+    p = fract(p * .1031);
+    p *= p + 33.33;
+    p *= p + p;
+    return fract(p);
+  }
+
+  // 1 out, 2 in...
+  float hash12(vec2 p) {
+    vec3 p3  = fract(vec3(p.xyx) * .1031);
+    p3 += dot(p3, p3.yzx + 33.33);
+    return fract((p3.x + p3.y) * p3.z);
+  }
+
+  // 1 out, 3 in...
+  float hash13(vec3 p3) {
+    p3  = fract(p3 * .1031);
+    p3 += dot(p3, p3.zyx + 31.32);
+    return fract((p3.x + p3.y) * p3.z);
+  }
+
+  // 2 out, 1 in...
+  vec2 hash21(float p) {
+    vec3 p3 = fract(vec3(p) * vec3(.1031, .1030, .0973));
+    p3 += dot(p3, p3.yzx + 33.33);
+    return fract((p3.xx+p3.yz)*p3.zy);
+  }
+
+  // 2 out, 2 in...
+  vec2 hash22(vec2 p) {
+    vec3 p3 = fract(vec3(p.xyx) * vec3(.1031, .1030, .0973));
+    p3 += dot(p3, p3.yzx+33.33);
+    return fract((p3.xx+p3.yz)*p3.zy);
+  }
+
+  // 2 out, 3 in...
+  vec2 hash23(vec3 p3) {
+    p3 = fract(p3 * vec3(.1031, .1030, .0973));
+    p3 += dot(p3, p3.yzx+33.33);
+    return fract((p3.xx+p3.yz)*p3.zy);
+  }
+
+  // 3 out, 1 in...
+  vec3 hash31(float p) {
+    vec3 p3 = fract(vec3(p) * vec3(.1031, .1030, .0973));
+    p3 += dot(p3, p3.yzx+33.33);
+    return fract((p3.xxy+p3.yzz)*p3.zyx); 
+  }
+
+  // 3 out, 2 in...
+  vec3 hash32(vec2 p) {
+    vec3 p3 = fract(vec3(p.xyx) * vec3(.1031, .1030, .0973));
+    p3 += dot(p3, p3.yxz+33.33);
+    return fract((p3.xxy+p3.yzz)*p3.zyx);
+  }
+
+  // 3 out, 3 in...
+  vec3 hash33(vec3 p3) {
+    p3 = fract(p3 * vec3(.1031, .1030, .0973));
+    p3 += dot(p3, p3.yxz+33.33);
+    return fract((p3.xxy + p3.yxx)*p3.zyx);
+  }
+
+  // 4 out, 1 in...
+  vec4 hash41(float p) {
+    vec4 p4 = fract(vec4(p) * vec4(.1031, .1030, .0973, .1099));
+    p4 += dot(p4, p4.wzxy+33.33);
+    return fract((p4.xxyz+p4.yzzw)*p4.zywx);
+  }
+
+  // 4 out, 2 in...
+  vec4 hash42(vec2 p) {
+    vec4 p4 = fract(vec4(p.xyxy) * vec4(.1031, .1030, .0973, .1099));
+    p4 += dot(p4, p4.wzxy+33.33);
+    return fract((p4.xxyz+p4.yzzw)*p4.zywx);
+  }
+
+  // 4 out, 3 in...
+  vec4 hash43(vec3 p) {
+    vec4 p4 = fract(vec4(p.xyzx)  * vec4(.1031, .1030, .0973, .1099));
+    p4 += dot(p4, p4.wzxy+33.33);
+    return fract((p4.xxyz+p4.yzzw)*p4.zywx);
+  }
+
+  // 4 out, 4 in...
+  vec4 hash44(vec4 p4) {
+    p4 = fract(p4  * vec4(.1031, .1030, .0973, .1099));
+    p4 += dot(p4, p4.wzxy+33.33);
+    return fract((p4.xxyz+p4.yzzw)*p4.zywx);
+  }
+
+
+  ////////////////////////////////////////////////////////////////////////////////////////
+  // 2D Simplex Noise                                                                   //
+  // MIT License, https://www.shadertoy.com/view/Msf3WH                                 //
+  // Copyright © 2013 Inigo Quilez                                                      //
+  ////////////////////////////////////////////////////////////////////////////////////////
+
+  float simplex2D(vec2 p) {
+    const float K1 = 0.366025404; // (sqrt(3)-1)/2;
+    const float K2 = 0.211324865; // (3-sqrt(3))/6;
+
+    vec2  i = floor( p + (p.x+p.y)*K1 );
+    vec2  a = p - i + (i.x+i.y)*K2;
+    float m = step(a.y,a.x); 
+    vec2  o = vec2(m,1.0-m);
+    vec2  b = a - o + K2;
+    vec2  c = a - 1.0 + 2.0*K2;
+    vec3  h = max( 0.5-vec3(dot(a,a), dot(b,b), dot(c,c) ), 0.0 );
+    vec3  n = h*h*h*h*vec3( dot(a,-1.0 + 2.0 * hash22(i+0.0)),
+                            dot(b,-1.0 + 2.0 * hash22(i+o)),
+                            dot(c,-1.0 + 2.0 * hash22(i+1.0)));
+    return 0.5 + 0.5 * dot( n, vec3(70.0) );
+  }
+
+  float simplex2DFractal(vec2 p) {
+    mat2 m = mat2( 1.6,  1.2, -1.2,  1.6 );
+    float f  = 0.5000*simplex2D( p ); p = m*p;
+    f += 0.2500*simplex2D( p ); p = m*p;
+    f += 0.1250*simplex2D( p ); p = m*p;
+    f += 0.0625*simplex2D( p ); p = m*p;
+
+    return f;
+  }
+
+
+  ////////////////////////////////////////////////////////////////////////////////////////
+  // 3D Simplex Noise                                                                   //
+  // MIT License, https://www.shadertoy.com/view/XsX3zB                                 //
+  // Copyright © 2013 Nikita Miropolskiy                                                //
+  ////////////////////////////////////////////////////////////////////////////////////////
+
+  float simplex3D(vec3 p) {
+
+    // skew constants for 3D simplex functions
+    const float F3 = 0.3333333;
+    const float G3 = 0.1666667;
+
+    // 1. find current tetrahedron T and it's four vertices
+    // s, s+i1, s+i2, s+1.0 - absolute skewed (integer) coordinates of T vertices
+    // x, x1, x2, x3 - unskewed coordinates of p relative to each of T vertice
+
+    // calculate s and x
+    vec3 s = floor(p + dot(p, vec3(F3)));
+    vec3 x = p - s + dot(s, vec3(G3));
+
+    // calculate i1 and i2
+    vec3 e = step(vec3(0.0), x - x.yzx);
+    vec3 i1 = e*(1.0 - e.zxy);
+    vec3 i2 = 1.0 - e.zxy*(1.0 - e);
+
+    // x1, x2, x3
+    vec3 x1 = x - i1 + G3;
+    vec3 x2 = x - i2 + 2.0*G3;
+    vec3 x3 = x - 1.0 + 3.0*G3;
+
+    // 2. find four surflets and store them in d
+    vec4 w, d;
+
+    // calculate surflet weights
+    w.x = dot(x, x);
+    w.y = dot(x1, x1);
+    w.z = dot(x2, x2);
+    w.w = dot(x3, x3);
+
+    // w fades from 0.6 at the center of the surflet to 0.0 at the margin
+    w = max(0.6 - w, 0.0);
+
+    // calculate surflet components
+    d.x = dot(-0.5 + hash33(s), x);
+    d.y = dot(-0.5 + hash33(s + i1), x1);
+    d.z = dot(-0.5 + hash33(s + i2), x2);
+    d.w = dot(-0.5 + hash33(s + 1.0), x3);
+
+    // multiply d by w^4
+    w *= w;
+    w *= w;
+    d *= w;
+
+    // 3. return the sum of the four surflets
+    return dot(d, vec4(52.0)) * 0.5 + 0.5;
+  }
+
+
+  // directional artifacts can be reduced by rotating each octave
+  float simplex3DFractal(vec3 m) {
+
+    // const matrices for 3D rotation
+    const mat3 rot1 = mat3(-0.37, 0.36, 0.85,-0.14,-0.93, 0.34,0.92, 0.01,0.4);
+    const mat3 rot2 = mat3(-0.55,-0.39, 0.74, 0.33,-0.91,-0.24,0.77, 0.12,0.63);
+    const mat3 rot3 = mat3(-0.71, 0.52,-0.47,-0.08,-0.72,-0.68,-0.7,-0.45,0.56);
+
+    return  0.5333333*simplex3D(m*rot1)
+           +0.2666667*simplex3D(2.0*m*rot2)
+           +0.1333333*simplex3D(4.0*m*rot3)
+           +0.0666667*simplex3D(8.0*m);
+  }
+
+  `;
+}

src/utils.js

@@ -15,6 +15,9 @@
 
 const {Gtk} = imports.gi;
 
+const Config               = imports.misc.config;
+const [GS_MAJOR, GS_MINOR] = Config.PACKAGE_VERSION.split('.');
+
 const ExtensionUtils = imports.misc.extensionUtils;
 const Me             = imports.misc.extensionUtils.getCurrentExtension();
 
@@ -39,6 +42,37 @@ function debug(message) {
 }
 
 // This method simply returns true if we are currently using GTK4.
-function gtk4() {
+function isGTK4() {
   return Gtk.get_major_version() == 4;
 }
+
+// This method returns 'gtk3' or 'gtk4' depending on the currently used gtk version.
+function getGTKString() {
+  return isGTK4() ? 'gtk4' : 'gtk3';
+}
+
+// This method returns true if called in GNOME Shell's process, false if called in the
+// preferences process.
+function isInShellProcess() {
+  return window.global && global.stage;
+}
+
+// This method returns true if the current GNOME Shell version matches the given
+// arguments.
+function shellVersionIs(major, minor) {
+  return GS_MAJOR == major && GS_MINOR == minor;
+}
+
+// This method returns true if the current GNOME Shell version is at least as high as the
+// given arguments.
+function shellVersionIsAtLeast(major, minor) {
+  if (GS_MAJOR > major) {
+    return true;
+  }
+
+  if (GS_MAJOR == major) {
+    return GS_MINOR >= minor;
+  }
+
+  return false;
+}