diff --git a/client/src/components/animations.jsx b/client/src/components/animations.jsx
index c8e7bb43..571c57dd 100644
--- a/client/src/components/animations.jsx
+++ b/client/src/components/animations.jsx
@@ -11,6 +11,7 @@ const Block = require('./anims/block');
 const Buff = require('./anims/buff');
 const Debuff = require('./anims/debuff');
 const Curse = require('./anims/curse');
+const Haste = require('./anims/haste');
 const Stun = require('./anims/stun');
 const Heal = require('./anims/heal');
 const Hex = require('./anims/hex');
@@ -111,6 +112,7 @@ function animations(props) {
             case 'Slay': return <Slay id={construct.id} team={player} colour={colours.yellow}/>;
             case 'Heal': return <Heal id={construct.id} stage={stage} team={player} colour={colours.red}/>;
             case 'Hex': return <Hex />;
+            case 'Haste': return <Haste />;
             case 'Siphon': return <Siphon id={construct.id} stage={stage} team={player} colour={colours.red}/>;
             case 'SiphonTick': return <SiphonTick id={construct.id} stage={stage} team={player} colour={colours.red}/>;
             case 'Stun': return <Stun />;
diff --git a/client/src/components/anims/bash.jsx b/client/src/components/anims/bash.jsx
index 57fae4aa..b02ef747 100644
--- a/client/src/components/anims/bash.jsx
+++ b/client/src/components/anims/bash.jsx
@@ -14,7 +14,7 @@ class Bash extends Component {
     render() {
         return (
             <svg
-                class='skill-animation red red-fill'
+                class='skill-animation red'
                 version="1.1"
                 id="bash"
                 xmlns="http://www.w3.org/2000/svg"
diff --git a/client/src/components/anims/haste.jsx b/client/src/components/anims/haste.jsx
new file mode 100644
index 00000000..eab63272
--- /dev/null
+++ b/client/src/components/anims/haste.jsx
@@ -0,0 +1,73 @@
+const preact = require('preact');
+const { Component } = require('preact');
+const anime = require('animejs').default;
+
+const { TIMES } = require('../../constants');
+
+class Haste extends Component {
+    constructor() {
+        super();
+        this.animations = [];
+    }
+
+    render() {
+        return (
+            <svg
+                id='haste'
+                class="skill-animation"
+                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>
+                </filter>
+                <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"/>
+                </g>
+            </svg>
+        );
+    }
+
+    componentDidMount() {
+        this.animations.push(anime({
+            targets: ['#haste'],
+            opacity: 1,
+
+            easing: 'easeOutExpo',
+            delay: TIMES.TARGET_DELAY_MS,
+            duration: TIMES.TARGET_DELAY_MS,
+        }));
+
+        this.animations.push(anime({
+            targets: ['#haste'],
+            transform: 'perspective(500px)',
+            easing: 'easeOutExpo',
+            duration: TIMES.START_SKILL,
+        }));
+
+        this.animations.push(anime({
+            targets: ['#hasteFilter feTurbulence', ' #hasteFilter feDisplacementMap'],
+            baseFrequency: 0,
+            scale: 1,
+            easing: 'easeOutSine',
+
+            delay: TIMES.TARGET_DELAY_MS,
+            duration: TIMES.TARGET_DURATION_MS,
+        }));
+    }
+
+    // this is necessary because
+    // skipping / timing / unmounting race conditions
+    // can cause the animations to cut short, this will ensure the values are reset
+    // because preact will recycle all these components
+    componentWillUnmount() {
+        for (let i = this.animations.length - 1; i >= 0; i--) {
+            this.animations[i].reset();
+        }
+    }
+}
+
+module.exports = Haste;
diff --git a/client/src/components/anims/stun.jsx b/client/src/components/anims/stun.jsx
index 41e72c3d..adaf2b8d 100644
--- a/client/src/components/anims/stun.jsx
+++ b/client/src/components/anims/stun.jsx
@@ -23,24 +23,23 @@ class Stun extends Component {
                 id="stun"
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="-291 -291 582 582">
-                <filter id="stunFilter">
-                    <feTurbulence type="turbulence" baseFrequency="0.02" numOctaves="8" result="turbulence" style="transform: scale(1);"></feTurbulence>
-                    <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="2" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap>
-                </filter>
                 <g>
-                <path filter='url("#stunFilter")'
-                    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"
-                />
-                <path filter='url("#stunFilter")'
-                    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"
-                    transform="scale(0.75)"
-                    style="opacity: 0.75"
-                />
-                <path filter='url("#stunFilter")'
-                    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"
-                    transform="scale(0.5)"
-                    style="opacity: 0.5"
-                />
+                    <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"
+                    />
+                    <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"
+                        transform="rotate(120)"
+                        style="opacity: 0.75"
+                    />
+                    <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"
+                        transform="rotate(240)"
+                        style="opacity: 0.5"
+                    />
                 </g>
             </svg>
         );
@@ -66,13 +65,12 @@ class Stun extends Component {
         }));
 
         this.animations.push(anime({
-            targets: ['#stunFilter feTurbulence', '#stunFilter feDisplacementMap'],
-            baseFrequency: 0,
-            scale: 1,
-            easing: 'easeOutSine',
-
-            delay: TIMES.TARGET_DELAY_MS,
-            duration: TIMES.TARGET_DURATION_MS,
+            targets: ['#stun'],
+            scale: [1, 0.8],
+            strokeWidth: 0,
+            easing: 'easeInOutSine',
+            direction: 'alternate',
+            duration: TIMES.START_SKILL,
         }));
     }