diff --git a/client/src/components/animations.jsx b/client/src/components/animations.jsx
index 22eef095..13b14e76 100644
--- a/client/src/components/animations.jsx
+++ b/client/src/components/animations.jsx
@@ -2,6 +2,7 @@ const preact = require('preact');
 
 const AttackCharge = require('./anims/attack.charge');
 
+const Amplify = require('./anims/amplify');
 const Blast = require('./anims/blast');
 const Heal = require('./anims/heal');
 const Hex = require('./anims/hex');
@@ -50,12 +51,13 @@ function animations(props) {
             const skill = removeTier(text);
             switch (skill) {
                 case 'Attack': return <Strike id={construct.id} stage={stage} team={player} colour={colours.white}/>;
+                case 'Amplify': return <Amplify/>;
                 case 'Blast': return <Blast id={construct.id} stage={stage} team={player}/>;
                 case 'Strike': return <Strike id={construct.id} stage={stage} team={player} colour={colours.red}/>;
                 case 'Chaos': return <Chaos id={construct.id} team={player} colour={colours.purple}/>;
                 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 id={Date.now()} stage={stage} team={player} colour={colours.red}/>;
+                case 'Hex': return <Hex/>;
                 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}/>;
                 default: return false;
diff --git a/client/src/components/anims/hex.jsx b/client/src/components/anims/hex.jsx
index d2b44913..595d1b15 100644
--- a/client/src/components/anims/hex.jsx
+++ b/client/src/components/anims/hex.jsx
@@ -9,28 +9,20 @@ const { TIMES } = require('../../constants');
 // https://animejs.com/documentation/#svgAttr
 
 class Hex extends Component {
-    render(props) {
-        const {
-            id,
-            // stage,
-            // team,
-            // colour,
-        } = props;
-
+    render() {
         return (
             <svg
                 class='hex-anim skill-animation blue'
                 version="1.1"
-                id={id}
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 128 128">
-                <filter id={`filter${id}`}>
+                <filter id='hexFilter'>
                     <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>
                 <polygon
                     points="64 68.64 8.574 100 63.446 67.68 64 4 64.554 67.68 119.426 100"
-                    style={{ filter: `url("#filter${id}")` }}>
+                    style={{ filter: 'url("#hexFilter")' }}>
                 </polygon>
             </svg>
         );
diff --git a/client/src/components/svgs/amplify.jsx b/client/src/components/svgs/amplify.jsx
deleted file mode 100644
index 16f5f66b..00000000
--- a/client/src/components/svgs/amplify.jsx
+++ /dev/null
@@ -1,58 +0,0 @@
-const preact = require('preact');
-const { Component } = require('preact');
-
-const anime = require('animejs').default;
-
-class Amplify extends Component {
-    constructor() {
-        super();
-        this.id = Math.random();
-    }
-
-    render() {
-        const path = 'M0,100 C100,-200 100,400 200,100';
-
-        return (
-            <svg
-                class='skill-animation blue'
-                version="1.1"
-                id="amplify"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 200 200">
-                <filter id="ampFilter">
-                    <feTurbulence type="turbulence" baseFrequency="0.4" numOctaves="2" result="turbulence" style="transform: scale(1);"></feTurbulence>
-                    <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="2" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap>
-                </filter>
-                <path filter='url("#ampFilter")' d={path} />
-            </svg>
-        );
-    }
-
-    componentDidMount() {
-        const altPath = 'M0,100 C100,400 100,-200 200,100';
-        anime({
-            targets: '#amplify path',
-            d: [{ value: altPath }],
-            stroke: ['#a52a2a', '#3498db'],
-            duration: 1000,
-            loop: true,
-            direction: 'alternate',
-            easing: 'easeInOutSine',
-        });
-
-        anime({
-            targets: ['#ampFilter feTurbulence', '#ampFilter feDisplacementMap'],
-            baseFrequency: 0.15,
-            scale: 4,
-            loop: true,
-            direction: 'alternate',
-            easing: 'easeInOutExpo',
-        });
-
-    }
-
-    componentWillUnmount() {
-    }
-}
-
-module.exports = Amplify;