diff --git a/client/src/components/anims/amplify.jsx b/client/src/components/anims/amplify.jsx
index 6b42f3ff..adf51c93 100644
--- a/client/src/components/anims/amplify.jsx
+++ b/client/src/components/anims/amplify.jsx
@@ -21,7 +21,7 @@ class Amplify extends Component {
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 200 200">
                 <filter id="amplifyFilter">
-                    <feTurbulence type="turbulence" baseFrequency="0.4" numOctaves="2" result="turbulence" style="transform: scale(1);"></feTurbulence>
+                    <feTurbulence type="turbulence" baseFrequency="0.4" numOctaves="2" result="turbulence"></feTurbulence>
                     <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="2" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap>
                 </filter>
                 <path filter='url("#amplifyFilter")' d={path} />
diff --git a/client/src/components/anims/block.jsx b/client/src/components/anims/block.jsx
index f3e215b0..812b32cb 100644
--- a/client/src/components/anims/block.jsx
+++ b/client/src/components/anims/block.jsx
@@ -20,7 +20,7 @@ class Block extends Component {
                 style={{ transform: 'rotate(180deg)' }}
                 viewBox="0 0 256 256">
                 <filter id='blockFilter'>
-                    <feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="2" result="turbulence" style="transform: scale(1);"></feTurbulence>
+                    <feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="2" result="turbulence"></feTurbulence>
                     <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="15" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap>
                 </filter>
                 <polygon
diff --git a/client/src/components/anims/buff.jsx b/client/src/components/anims/buff.jsx
index e14933b7..beca0500 100644
--- a/client/src/components/anims/buff.jsx
+++ b/client/src/components/anims/buff.jsx
@@ -19,7 +19,7 @@ class Buff extends Component {
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 300 300">
                 <filter id='buffFilter'>
-                    <feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="2" result="turbulence" style="transform: scale(1);"></feTurbulence>
+                    <feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="2" result="turbulence"></feTurbulence>
                     <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="15" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap>
                 </filter>
                 <g filter='url("#buffFilter")'>
diff --git a/client/src/components/anims/debuff.jsx b/client/src/components/anims/debuff.jsx
index 6fa300e7..bf7efe98 100644
--- a/client/src/components/anims/debuff.jsx
+++ b/client/src/components/anims/debuff.jsx
@@ -20,7 +20,7 @@ class Debuff extends Component {
                 style={{ transform: 'rotate(180deg)' }}
                 viewBox="0 0 300 300">
                 <filter id='debuffFilter'>
-                    <feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="2" result="turbulence" style="transform: scale(1);"></feTurbulence>
+                    <feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="2" result="turbulence"></feTurbulence>
                     <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="15" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap>
                 </filter>
                 <g filter='url("#debuffFilter")'>
diff --git a/client/src/components/anims/haste.jsx b/client/src/components/anims/haste.jsx
index eab63272..2aaa34a8 100644
--- a/client/src/components/anims/haste.jsx
+++ b/client/src/components/anims/haste.jsx
@@ -2,7 +2,7 @@ const preact = require('preact');
 const { Component } = require('preact');
 const anime = require('animejs').default;
 
-const { TIMES } = require('../../constants');
+const { TIMES, COLOURS } = require('../../constants');
 
 class Haste extends Component {
     constructor() {
@@ -14,15 +14,21 @@ class Haste extends Component {
         return (
             <svg
                 id='haste'
-                class="skill-animation"
+                class="skill-animation white"
                 version="1.1"
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 300 300">
                 <filter id='hasteFilter'>
-                    <feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="2" result="turbulence" style="transform: scale(1);"></feTurbulence>
-                    <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="15" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap>
+                    <feTurbulence type="turbulence"
+                        baseFrequency="0"
+                        numOctaves="1"
+                        result="turbulence">
+                    </feTurbulence>
+                    <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="1" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap>
                 </filter>
-                <g filter='url("#hasteFilter")'>
+                <g
+                filter='url("#hasteFilter")'
+                >
                     <polygon points="10,190    100,10   190,190"/>
                     <polygon points="40,170    100,50   160,170"/>
                     <polygon points="70,150    100,90   130,150"/>
@@ -42,17 +48,19 @@ class Haste extends Component {
         }));
 
         this.animations.push(anime({
-            targets: ['#haste'],
-            transform: 'perspective(500px)',
-            easing: 'easeOutExpo',
-            duration: TIMES.START_SKILL,
+            targets: ['#haste g'],
+            stroke: [COLOURS.GREEN, COLOURS.RED],
+            easing: 'easeInCubic',
+            delay: TIMES.TARGET_DELAY_MS,
+            duration: TIMES.TARGET_DURATION_MS,
         }));
 
         this.animations.push(anime({
-            targets: ['#hasteFilter feTurbulence', ' #hasteFilter feDisplacementMap'],
-            baseFrequency: 0,
-            scale: 1,
-            easing: 'easeOutSine',
+            targets: ['#hasteFilter feTurbulence', '#hasteFilter feDisplacementMap'],
+            baseFrequency: 2,
+            scale: 10,
+            numOctaves: 5,
+            easing: 'easeInCubic',
 
             delay: TIMES.TARGET_DELAY_MS,
             duration: TIMES.TARGET_DURATION_MS,
diff --git a/client/src/components/anims/stun.jsx b/client/src/components/anims/stun.jsx
index adaf2b8d..ce89b69d 100644
--- a/client/src/components/anims/stun.jsx
+++ b/client/src/components/anims/stun.jsx
@@ -24,9 +24,6 @@ class Stun extends Component {
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="-291 -291 582 582">
                 <g>
-                    <circle r="288"
-                        style="opacity: 0.25"
-                    />
                     <path
                         d="M3.6 0c.23-2.93-1.9-4.9-4.8-4.77S-6.37-1.87-6.33 1.3s2.92 7.1 8.03 7 9.4-4.78 9.2-10.5-5-11.95-13.4-12.1S-18.77-6.88-18.85 3.3-10.05 24.97 4.8 24.74 32.78 11.38 32.5-6.5 16.15-42.7-7.8-42.7-55.7-22.02-56.2 9.7s27.3 65 72 64 82.32-42.78 81-92.3S55.41-126.63-23-127.4-168.4-56.97-167.6 30.3s65.85 166.15 161.27 186S246.55 187.18 284.83 0"
                     />
diff --git a/client/src/constants.jsx b/client/src/constants.jsx
index acce8288..170ec71f 100644
--- a/client/src/constants.jsx
+++ b/client/src/constants.jsx
@@ -1,7 +1,7 @@
 module.exports = {
     TIMES: {
-        RESOLUTION_TOTAL_MS: 2000,
-        // RESOLUTION_TOTAL_MS: 20000,
+        // RESOLUTION_TOTAL_MS: 2000,
+        RESOLUTION_TOTAL_MS: 20000,
 
         SOURCE_DURATION_MS: 1000,
         TARGET_DELAY_MS: 500,
@@ -13,6 +13,12 @@ module.exports = {
         DELAY: 150,
     },
 
+    COLOURS: {
+        GREEN: '#1FF01F',
+        RED: '#a52a2a',
+        BLUE: '#3498db',
+    },
+
     INFO: {
         vbox: {
             item: 'VBOX',