Animated Gradient

1"use client";
2 
3import { useTheme } from "next-themes";
4import { useRef, useEffect, useMemo, useState, type CSSProperties } from "react";
5 
6type PatternShape = "Checks" | "Stripes" | "Edge";
7 
8const PatternShapes: Record<PatternShape, number> = {
9  Checks: 0,
10  Stripes: 1,
11  Edge: 2,
12};
13 
14interface PresetColors {
15  color1: string;
16  color2: string;
17  color3: string;
18}
19 
20interface PresetParams extends PresetColors {
21  rotation: number;
22  proportion: number;
23  scale: number;
24  speed: number;
25  distortion: number;
26  swirl: number;
27  swirlIterations: number;
28  softness: number;
29  offset: number;
30  shape: PatternShape;
31  shapeSize: number;
32  lightColors?: PresetColors;
33}
34 
35const presets: Record<PresetName, PresetParams> = {
36  Prism: {
37    color1: "#050505",
38    color2: "#66B3FF",
39    color3: "#FFFFFF",
40    lightColors: {
41      color1: "#FAFAFA",
42      color2: "#66B3FF",
43      color3: "#050505",
44    },
45    rotation: -50,
46    proportion: 1,
47    scale: 0.01,
48    speed: 30,
49    distortion: 0,
50    swirl: 50,
51    swirlIterations: 16,
52    softness: 47,
53    offset: -299,
54    shape: "Checks",
55    shapeSize: 45,
56  },
57  Lava: {
58    color1: "#FF9F21",
59    color2: "#FF0303",
60    color3: "#000000",
61    lightColors: {
62      color1: "#FF9F21",
63      color2: "#FF0303",
64      color3: "#FAFAFA",
65    },
66    rotation: 114,
67    proportion: 100,
68    scale: 0.52,
69    speed: 30,
70    distortion: 7,
71    swirl: 18,
72    swirlIterations: 20,
73    softness: 100,
74    offset: 717,
75    shape: "Edge",
76    shapeSize: 12,
77  },
78  Plasma: {
79    color1: "#B566FF",
80    color2: "#000000",
81    color3: "#000000",
82    lightColors: {
83      color1: "#B566FF",
84      color2: "#FAFAFA",
85      color3: "#FAFAFA",
86    },
87    rotation: 0,
88    proportion: 63,
89    scale: 0.75,
90    speed: 30,
91    distortion: 5,
92    swirl: 61,
93    swirlIterations: 5,
94    softness: 100,
95    offset: -168,
96    shape: "Checks",
97    shapeSize: 28,
98  },
99  Pulse: {
100    color1: "#66FF85",
101    color2: "#000000",
102    color3: "#000000",
103    lightColors: {
104      color1: "#66FF85",
105      color2: "#FAFAFA",
106      color3: "#FAFAFA",
107    },
108    rotation: -167,
109    proportion: 92,
110    scale: 0,
111    speed: 20,
112    distortion: 54,
113    swirl: 75,
114    swirlIterations: 3,
115    softness: 28,
116    offset: -813,
117    shape: "Checks",
118    shapeSize: 79,
119  },
120  Vortex: {
121    color1: "#000000",
122    color2: "#FFFFFF",
123    color3: "#000000",
124    lightColors: {
125      color1: "#FAFAFA",
126      color2: "#000000",
127      color3: "#FAFAFA",
128    },
129    rotation: 50,
130// … truncated