Add option to change the amount of extra color stops per transition

Author: phamfoo

README.md

@@ -61,6 +61,23 @@ const { colors, locations } = easeGradient({
 })
 ```
 
+Or the amount of extra color stops added between each transition
+
+```js
+const { colors, locations } = easeGradient({
+  colorStops: {
+    0: {
+      color: 'transparent',
+    },
+    1: {
+      color: '#18181B',
+    },
+  },
+  // The more color stops added, the smoother the transition is
+  // Defaults to 12
+  extraColorStopsPerTransition: 16
+})
+```
 ## Credits
 
 - [Easing Linear Gradients](https://css-tricks.com/easing-linear-gradients/)

src/index.ts

@@ -10,13 +10,13 @@ interface ColorStops {
 
 interface GradientParams {
   colorStops: ColorStops
+  extraColorStopsPerTransition?: number
   easing?: EasingFunction
 }
 
 const easeInOut = Easing.bezier(0.42, 0, 0.58, 1)
-const TOTAL_STOPS_PER_TRANSITION = 16
 
-function easeGradient({ colorStops, easing = easeInOut }: GradientParams) {
+function easeGradient({ colorStops, easing = easeInOut, extraColorStopsPerTransition = 12 }: GradientParams) {
   const colors: string[] = []
   const locations: number[] = []
 
@@ -45,11 +45,11 @@ function easeGradient({ colorStops, easing = easeInOut }: GradientParams) {
     })
 
     const currentTransitionLength = endLocation - startLocation
-    const stepSize = 1 / (TOTAL_STOPS_PER_TRANSITION - 1)
+    const stepSize = 1 / (extraColorStopsPerTransition + 1)
 
     for (
       let stepIndex = 0;
-      stepIndex <= TOTAL_STOPS_PER_TRANSITION - 1;
+      stepIndex <= extraColorStopsPerTransition + 1;
       stepIndex++
     ) {
       const progress = stepIndex * stepSize