diff --git a/resources/qml/TimelineView.qml b/resources/qml/TimelineView.qml
index 4621956f..30ad9292 100644
--- a/resources/qml/TimelineView.qml
+++ b/resources/qml/TimelineView.qml
@@ -364,95 +364,10 @@ Item {
         onClicked: Rooms.resetCurrentRoom()
     }
 
-    ParticleSystem {
-        id: particleSystem
+    TimelineEffects {
+        id: timelineEffects
 
-        Component.onCompleted: pause();
-        paused: !shouldEffectsRun
-    }
-
-    Emitter {
-        id: confettiEmitter
-
-        group: "confetti"
-        width: parent.width * 3/4
-        enabled: false
-        anchors.horizontalCenter: parent.horizontalCenter
-        y: parent.height
-        emitRate: Math.min(400 * Math.sqrt(parent.width * parent.height) / 870, 1000)
-        lifeSpan: 15000
-        system: particleSystem
-        maximumEmitted: 500
-        velocityFromMovement: 8
-        size: 16
-        sizeVariation: 4
-        velocity: PointDirection {
-            x: 0
-            y: -Math.min(450 * parent.height / 700, 1000)
-            xVariation: Math.min(4 * parent.width / 7, 450)
-            yVariation: 250
-        }
-    }
-
-    ImageParticle {
-        system: particleSystem
-        groups: ["confetti"]
-        source: "qrc:/confettiparticle.svg"
-        rotationVelocity: 0
-        rotationVelocityVariation: 360
-        colorVariation: 1
-        color: "white"
-        entryEffect: ImageParticle.None
-        xVector: PointDirection {
-            x: 1
-            y: 0
-            xVariation: 0.2
-            yVariation: 0.2
-        }
-        yVector: PointDirection {
-            x: 0
-            y: 0.5
-            xVariation: 0.2
-            yVariation: 0.2
-        }
-    }
-
-    Gravity {
-        system: particleSystem
         anchors.fill: parent
-        magnitude: 350
-        angle: 90
-    }
-
-    Emitter {
-        id: rainfallEmitter
-
-        group: "rain"
-        width: parent.width
-        enabled: false
-        anchors.horizontalCenter: parent.horizontalCenter
-        y: -60
-        emitRate: parent.width / 50
-        lifeSpan: 10000
-        system: particleSystem
-        velocity: PointDirection {
-            x: 0
-            y: 300
-            xVariation: 0
-            yVariation: 75
-        }
-
-        ItemParticle {
-            system: particleSystem
-            groups: ["rain"]
-            fade: false
-            delegate: Rectangle {
-                width: 2
-                height: 30 + 30 * Math.random()
-                radius: 2
-                color: "#0099ff"
-            }
-        }
     }
 
     NhekoDropArea {
@@ -463,7 +378,7 @@ Item {
     Timer {
         id: effectsTimer
         onTriggered: shouldEffectsRun = false;
-        interval: Math.max(confettiEmitter.lifeSpan, rainfallEmitter.lifeSpan)
+        interval: timelineEffects.maxLifespan
         repeat: false
         running: false
     }
@@ -497,7 +412,7 @@ Item {
                 return
 
             shouldEffectsRun = true;
-            confettiEmitter.pulse(parent.height * 2)
+            timelineEffects.pulseConfetti()
             room.markSpecialEffectsDone()
         }
 
@@ -515,7 +430,7 @@ Item {
                 return
 
             shouldEffectsRun = true;
-            rainfallEmitter.pulse(parent.height * 7.5)
+            timelineEffects.pulseRainfall()
             room.markSpecialEffectsDone()
         }
 
diff --git a/resources/qml/ui/TimelineEffects.qml b/resources/qml/ui/TimelineEffects.qml
new file mode 100644
index 00000000..6af2892e
--- /dev/null
+++ b/resources/qml/ui/TimelineEffects.qml
@@ -0,0 +1,111 @@
+// SPDX-FileCopyrightText: Nheko Contributors
+//
+// SPDX-License-Identifier: GPL-3.0-or-later
+
+import QtQuick 2.15
+import QtQuick.Particles 2.15
+
+Item {
+    readonly property int maxLifespan: Math.max(confettiEmitter.lifeSpan, rainfallEmitter.lifeSpan)
+
+    function pulseConfetti()
+    {
+        confettiEmitter.pulse(parent.height * 2)
+    }
+
+    function pulseRainfall()
+    {
+        rainfallEmitter.pulse(parent.height * 7.5)
+    }
+
+    ParticleSystem {
+        id: particleSystem
+
+        Component.onCompleted: pause();
+        paused: !shouldEffectsRun
+    }
+
+    Emitter {
+        id: confettiEmitter
+
+        group: "confetti"
+        width: parent.width * 3/4
+        enabled: false
+        anchors.horizontalCenter: parent.horizontalCenter
+        y: parent.height
+        emitRate: Math.min(400 * Math.sqrt(parent.width * parent.height) / 870, 1000)
+        lifeSpan: 15000
+        system: particleSystem
+        maximumEmitted: 500
+        velocityFromMovement: 8
+        size: 16
+        sizeVariation: 4
+        velocity: PointDirection {
+            x: 0
+            y: -Math.min(450 * parent.height / 700, 1000)
+            xVariation: Math.min(4 * parent.width / 7, 450)
+            yVariation: 250
+        }
+    }
+
+    ImageParticle {
+        system: particleSystem
+        groups: ["confetti"]
+        source: "qrc:/confettiparticle.svg"
+        rotationVelocity: 0
+        rotationVelocityVariation: 360
+        colorVariation: 1
+        color: "white"
+        entryEffect: ImageParticle.None
+        xVector: PointDirection {
+            x: 1
+            y: 0
+            xVariation: 0.2
+            yVariation: 0.2
+        }
+        yVector: PointDirection {
+            x: 0
+            y: 0.5
+            xVariation: 0.2
+            yVariation: 0.2
+        }
+    }
+
+    Gravity {
+        system: particleSystem
+        anchors.fill: parent
+        magnitude: 350
+        angle: 90
+    }
+
+    Emitter {
+        id: rainfallEmitter
+
+        group: "rain"
+        width: parent.width
+        enabled: false
+        anchors.horizontalCenter: parent.horizontalCenter
+        y: -60
+        emitRate: parent.width / 50
+        lifeSpan: 10000
+        system: particleSystem
+        velocity: PointDirection {
+            x: 0
+            y: 300
+            xVariation: 0
+            yVariation: 75
+        }
+
+        ItemParticle {
+            system: particleSystem
+            groups: ["rain"]
+            fade: false
+            delegate: Rectangle {
+                width: 2
+                height: 30 + 30 * Math.random()
+                radius: 2
+                color: "#0099ff"
+            }
+        }
+    }
+}
diff --git a/resources/res.qrc b/resources/res.qrc
index faa90495..3f1b2b65 100644
--- a/resources/res.qrc
+++ b/resources/res.qrc
@@ -197,6 +197,7 @@
         <file>qml/voip/VideoCall.qml</file>
         <file>confettiparticle.svg</file>
         <file>qml/delegates/EncryptionEnabled.qml</file>
+        <file>qml/ui/TimelineEffects.qml</file>
     </qresource>
     <qresource prefix="/media">
         <file>media/ring.ogg</file>