From 64bbe3017dd3b14f90b7e848da141493fc7586a4 Mon Sep 17 00:00:00 2001
From: Harry Hogg <harry@hogg.io>
Date: Fri, 12 Jun 2020 22:41:28 +0100
Subject: [PATCH] fix(Spirals): Maximum animation timing

---
 package.json                                      | 2 +-
 src/components/Projects/Spirals/Spirals.tsx       | 7 +------
 src/components/Projects/Spirals/SpiralsVisual.tsx | 8 +++++---
 yarn.lock                                         | 2 +-
 4 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/package.json b/package.json
index 0c537a98..cfbc44f6 100644
--- a/package.json
+++ b/package.json
@@ -49,7 +49,7 @@
     "vishull2d": "^0.1.0"
   },
   "devDependencies": {
-    "@types/bezier-easing": "^2.1.2",
+    "@types/bezier-easing": "*",
     "@types/classnames": "*",
     "@types/gl-matrix": "*",
     "@types/lodash.flatten": "*",
diff --git a/src/components/Projects/Spirals/Spirals.tsx b/src/components/Projects/Spirals/Spirals.tsx
index 606cff65..53981331 100644
--- a/src/components/Projects/Spirals/Spirals.tsx
+++ b/src/components/Projects/Spirals/Spirals.tsx
@@ -109,14 +109,9 @@ const Spirals = () => {
     setPositions(positions);
     setVectors(vectors);
   }, [
+    config,
     radii,
     size,
-    config.algorithm,
-    config.aspectRatio,
-    config.cover,
-    config.padding,
-    config.proportional,
-    config.spread,
   ]);
 
   return (
diff --git a/src/components/Projects/Spirals/SpiralsVisual.tsx b/src/components/Projects/Spirals/SpiralsVisual.tsx
index cf80561e..b10cc908 100644
--- a/src/components/Projects/Spirals/SpiralsVisual.tsx
+++ b/src/components/Projects/Spirals/SpiralsVisual.tsx
@@ -76,7 +76,7 @@ const SpiralsVisual = (props: Props) => {
 
         const e = time - refStartTime.current;
 
-        refTime.current = ease(e / (transitionTimeBase / 1000));
+        refTime.current = Math.min(ease(e / (transitionTimeBase / 1000)), 1);
 
         if (refRegl.current && refState.current) {
           refRegl.current.clear({ depth: 1 });
@@ -87,10 +87,12 @@ const SpiralsVisual = (props: Props) => {
             primitive: 'points',
             attributes: buffers,
             uniforms: {
+              /* eslint-disable @typescript-eslint/camelcase */
               u_projection: projection,
               u_t: refTime.current,
               u_translate_0: translate0,
               u_translate_1: translate1,
+              /* eslint-enable @typescript-eslint/camelcase */
             },
           })();
         }
@@ -107,11 +109,11 @@ const SpiralsVisual = (props: Props) => {
     }
   };
 
-  React.useEffect(() => {
+  React.useLayoutEffect(() => {
     if (refCanvas.current && !refRegl.current) {
       refRegl.current = regl({ canvas: refCanvas.current });
     }
-  }, [refCanvas.current]);
+  }, []);
 
   React.useEffect(() => {
     refCanvas.current?.setAttribute('height', `${height * 2}`);
diff --git a/yarn.lock b/yarn.lock
index 5b4b3813..014fffa0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1345,7 +1345,7 @@
   resolved "https://registry.yarnpkg.com/@protobufjs/utf8/-/utf8-1.1.0.tgz#a777360b5b39a1a2e5106f8e858f2fd2d060c570"
   integrity sha1-p3c2C1s5oaLlEG+OhY8v0tBgxXA=
 
-"@types/bezier-easing@^2.1.2":
+"@types/bezier-easing@*":
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/@types/bezier-easing/-/bezier-easing-2.1.2.tgz#04ce5a6e148543f5dca4e6066db363b19a6f294a"
   integrity sha512-1f9PSSooB7VBfwNQm5nKE8i7XXWWtjKPmm1apg52pxq/mmuyJNZpvEzR2n+c0+XPs0ldLoVWWp54tqkXsKxFsA==