1import { cn } from "@/utils/cn";
2import React from "react";
3
4type SquareSize = "xs" | "sm" | "md" | "lg" | "xl";
5
6const sizeMap: Record<SquareSize, number> = {
7  xs: 0.8,
8  sm: 1,
9  md: 1.5,
10  lg: 2,
11  xl: 2.5,
12};
13
14type SquareGridFadedProps = {
15  squareSize?: SquareSize | number;
16  faded?: boolean;
17  className?: string;
18};
19
20export const SquareGridFaded = ({
21  squareSize = "md",
22  faded = false,
23  className,
24}: SquareGridFadedProps) => {
25  const size =
26    typeof squareSize === "number" ? squareSize : sizeMap[squareSize];
27  const gridSize = size + "em " + size + "em";
28
29  return (
30    <div
31      className={cn(
32        "relative h-screen w-screen overflow-hidden bg-black",
33        className
34      )}
35    >
36      {/* Grid */}
37      <div
38        className="absolute inset-0 h-full w-full"
39        style={{
40          backgroundImage:
41            "linear-gradient(to right, rgba(255, 255, 255, 0.1) 1px, transparent 1px), " +
42            "linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 1px, transparent 1px)",
43          backgroundSize: gridSize, 
44        }}
45      />
46
47      {/* Text */}
48      <div className="absolute inset-0 z-[1000] m-auto h-fit w-fit bg-gradient-to-b from-slate-200 to-slate-50/60 bg-clip-text text-center font-geist text-7xl font-extrabold tracking-tight text-transparent">
49        Square Grid
50      </div>
51
52      {/* Fade out mask */}
53      {faded && (
54        <div
55          className="absolute inset-0 h-full w-full"
56          style={{
57            background:
58              "radial-gradient(circle at center, transparent 20%, black 80%)",
59            mixBlendMode: "multiply",
60          }}
61        />
62      )}
63    </div>
64  );
65};

1import { cn } from "@/utils/cn";
2import { motion } from "framer-motion";
3import React from "react";
4type squareSize = "xs" | "sm" | "md" | "lg";
5
6const sizeMap: Record<squareSize, number> = {
7  xs: 0.8,
8  sm: 1,
9  md: 1.25,
10  lg: 1.5,
11};
12
13type NorthernSquareProps = {
14  squareSize?: squareSize;
15  className?: string;
16};
17
18export const NorthernSquare = ({ squareSize="sm",className }: NorthernSquareProps) => {
19  const size = sizeMap[squareSize];
20  const bgSize = size + "em" + " " + size + "em";
21  return (
22    <div className={cn("relative h-screen w-screen overflow-hidden bg-transparent",className)}>
23      {/* Existing motion.div elements remain unchanged */}
24      <motion.div
25        className="absolute z-10 h-[700px] w-[700px] rounded-full bg-blue-500 blur-3xl"
26        initial={{
27          bottom: "-50%",
28          left: "-20%",
29        }}
30        transition={{
31          duration: 10,
32          repeat: Infinity,
33          repeatType: "reverse",
34          ease: "easeInOut",
35        }}
36        animate={{
37          bottom: ["-20%", "20%", "10%", "-30%"],
38          left: ["-20%", "30%", "45%", "38%"],
39        }}
40      ></motion.div>
41      <motion.div
42        className="absolute z-10 h-[750px] w-[750px] rounded-full bg-purple-500 blur-3xl"
43        initial={{
44          bottom: "-50%",
45          left: "-20%",
46        }}
47        transition={{
48          duration: 10,
49          repeat: Infinity,
50          repeatType: "reverse",
51          ease: "easeInOut",
52        }}
53        animate={{
54          bottom: ["-50%", "-20%", "40%", "10%"],
55          left: ["30%", "-10%", "10%", "60%"],
56        }}
57      ></motion.div>
58      <motion.div
59        className="absolute -right-[10%] bottom-[10%] z-10 h-[400px] w-[400px] rounded-full bg-purple-500 blur-3xl"
60        initial={{
61          bottom: "-10%",
62          right: "-10%",
63        }}
64        transition={{
65          duration: 10,
66          repeat: Infinity,
67          repeatType: "reverse",
68          ease: "easeInOut",
69        }}
70        animate={{
71          bottom: ["-10%", "15%", "-20%", "-18%"],
72          right: ["-10%", "-5%", "20%", "50%"],
73        }}
74      ></motion.div> 
75       <motion.div
76        className="absolute -bottom-[20%] right-[10%] z-10 h-[400px] w-[400px] rounded-full bg-blue-500 blur-3xl"
77        initial={{
78          bottom: "-20%",
79          right: "5%",
80        }}
81        transition={{
82          duration: 10,
83          repeat: Infinity,
84          repeatType: "reverse",
85          ease: "easeInOut",
86        }}
87        animate={{
88          bottom: ["-20%", "-18%", "-20%", "20%"],
89          right: ["5%", "8%", "35%", "50%"],
90        }}
91      ></motion.div>
92
93      {/* Repeating square pattern overlay */}
94      <div
95        className="absolute inset-0 z-50 h-full w-full"
96        style={{
97          backgroundImage: "url('data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 17 17'%3E%3Crect width='16' opacity='1' height='16' x='0' y='0' fill='%23000000' /%3E%3C/svg%3E')",
98          backgroundRepeat: "repeat",
99          backgroundSize: bgSize,
100          backgroundPosition: "center center",
101        }}
102      ></div>
103
104      <motion.div className="absolute inset-0 z-[1000] m-auto h-fit p-2 w-fit bg-gradient-to-b from-slate-200 to-slate-50/60 bg-clip-text text-center font-geist text-7xl font-extrabold tracking-tight text-transparent">
105        Northern Lights
106      </motion.div>
107    </div>
108  );
109};
110
111

1"use client"
2import { cn } from "@/utils/cn";
3import { motion } from "framer-motion";
4import React from "react";
5
6type dotSize = "xs" | "sm" | "md" | "lg";
7
8const sizeMap: Record<dotSize, number> = {
9  xs: 0.8,
10  sm: 1,
11  md: 1.25,
12  lg: 1.5,
13};
14
15type NorthernDottedProps = {
16  dotSize?: dotSize;
17  className?: string;
18};
19
20export const NorthernDotted = ({ dotSize="xs",className }: NorthernDottedProps) => {
21  const size = sizeMap[dotSize];
22  const bgSize = size + "rem " + size + "rem";
23  return (
24    <div className={cn("relative h-screen w-screen overflow-hidden bg-transparent",className)}>
25      <motion.div
26        className="absolute z-10 h-[700px] w-[700px] rounded-full bg-blue-500 blur-3xl"
27        transition={{
28          duration: 10,
29          repeat: Infinity,
30          repeatType: "reverse",
31          ease: "easeInOut",
32        }}
33        animate={{
34          bottom: ["-20%", "20%", "10%", "-30%"],
35          left: ["-20%", "30%", "45%", "38%"],
36        }}
37      ></motion.div>
38
39      <motion.div
40        className="absolute z-10 h-[750px] w-[750px] rounded-full bg-purple-500 blur-3xl"
41        transition={{
42          duration: 10,
43          repeat: Infinity,
44          repeatType: "reverse",
45          ease: "easeInOut",
46        }}
47        animate={{
48          bottom: ["-50%", "-20%", "40%", "10%"],
49          left: ["30%", "-10%", "10%", "60%"],
50        }}
51      ></motion.div>
52      <motion.div
53        className="absolute z-10 h-[400px] w-[400px] rounded-full bg-purple-500 blur-3xl"
54        transition={{
55          duration: 10,
56          repeat: Infinity,
57          repeatType: "reverse",
58          ease: "easeInOut",
59        }}
60        animate={{
61          bottom: ["-10%", "15%", "-20%", "-18%"],
62          right: ["-10%", "-5%", "20%", "50%"],
63        }}
64      ></motion.div>
65      <motion.div
66        className="absolute z-10 h-[400px] w-[400px] rounded-full bg-blue-500 blur-3xl"
67        transition={{
68          duration: 10,
69          repeat: Infinity,
70          repeatType: "reverse",
71          ease: "easeInOut",
72        }}
73        animate={{
74          bottom: ["-20%", "-18%", "-20%", "20%"],
75          right: ["5%", "8%", "35%", "50%"],
76        }}
77      ></motion.div>
78      <motion.div className="absolute inset-0 z-[1000] m-auto h-fit w-fit bg-gradient-to-b from-slate-200 to-slate-50/60 bg-clip-text text-center font-geist text-7xl font-extrabold tracking-tight text-transparent">
79        Northern Lights,
80        <br />
81       Dotted
82      </motion.div>
83
84      <div
85        className="relative z-50 h-full w-full overflow-hidden"
86        style={{
87          backgroundImage:
88            "radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0.02) 21%, #000 30%)",
89          backgroundSize: bgSize,
90          backgroundPosition: "center center",
91          opacity: 1,
92            // mixBlendMode: 'overlay',
93        }}
94      ></div>
95    </div>
96  );
97};
98

1"use client";
2import { cn } from "@/utils/cn";
3import React, { useEffect, useRef } from "react";
4
5const generateRandomColor = (): string => {
6  const red = Math.floor(Math.random() * 256);
7  const green = Math.floor(Math.random() * 256);
8  const blue = Math.floor(Math.random() * 256);
9  return [red, green, blue].join(", ");
10};
11
12const generateRandomSize = (): string => {
13  const size = Math.floor(Math.random() * 101);
14  return size + "%";
15};
16
17const generateRandomPosition = (): { top: string; left: string } => {
18  const top = Math.floor(Math.random() * 100) + "%";
19  const left = Math.floor(Math.random() * 100) + "%";
20  return { top, left };
21};
22
23const generateRandomAnimation = (): string => {
24  const animations = ["moveVertical", "moveHorizontal", "moveInCircle"];
25  const randomIndex = Math.floor(Math.random() * animations.length);
26  return animations[randomIndex];
27};
28
29const generateRandomDuration = (): string => {
30  const duration = Math.floor(Math.random() * 20);
31  return duration + "s";
32};
33
34const generateRandomObject = (): {
35  color: string;
36  size: string;
37  top?: string;
38  left?: string;
39  animation: string;
40  duration: string;
41} => {
42  return {
43    color: generateRandomColor(),
44    size: generateRandomSize(),
45    ...generateRandomPosition(),
46    animation: generateRandomAnimation(),
47    duration: generateRandomDuration(),
48  };
49};
50
51interface GradientProps {
52  color: string;
53  size?: string;
54  top?: string;
55  left?: string;
56  animation?: string;
57  duration?: string;
58  timing?: string;
59  opacity?: number;
60}
61
62type MixBlendMode =
63  | "normal"
64  | "multiply"
65  | "screen"
66  | "overlay"
67  | "darken"
68  | "lighten"
69  | "color-dodge"
70  | "color-burn"
71  | "hard-light"
72  | "soft-light"
73  | "difference"
74  | "exclusion"
75  | "hue"
76  | "saturation"
77  | "color"
78  | "luminosity";
79
80interface FluxBg {
81  gradients?: GradientProps[];
82  backgroundColor1?: string;
83  backgroundColor2?: string;
84  backgroundColor3?: string;
85  interactiveColor?: string;
86  blendingMode?: MixBlendMode | undefined;
87  className?: string;
88}
89
90const defaultGradients: GradientProps[] = [
91  {
92    color: "203, 213, 225",
93    size: "80%",
94    animation: "moveVertical",
95    duration: "30s",
96  }, // Slate
97  {
98    color: "156, 163, 175",
99    size: "70%",
100    top: "40%",
101    left: "60%",
102    animation: "moveInCircle",
103    duration: "20s",
104  }, // Gray
105  {
106    color: "212, 212, 216",
107    size: "90%",
108    top: "60%",
109    left: "30%",
110    animation: "moveHorizontal",
111    duration: "40s",
112  }, // Zinc
113  {
114    color: "59, 130, 246",
115    size: "75%",
116    top: "45%",
117    left: "55%",
118    animation: "moveInCircle",
119    duration: "25s",
120  }, // Blue
121  {
122    color: "34, 197, 94",
123    size: "85%",
124    top: "55%",
125    left: "45%",
126    animation: "moveVertical",
127    duration: "35s",
128  }, // Green
129];
130
131const FluxBg: React.FC<FluxBg> = ({
132  gradients = defaultGradients,
133  backgroundColor1 = "rgb(15, 23, 42)", // Tailwind slate-900
134  backgroundColor2 = "rgb(30, 58, 138)", // Tailwind blue-900
135  backgroundColor3 = "rgb(30, 40, 255)", // Tailwind blue-900
136  interactiveColor = "99, 102, 241", // Tailwind indigo-500
137  blendingMode = "hard-light",
138  className,
139}) => {
140  const interBubbleRef = useRef<HTMLDivElement>(null);
141  const containerRef = useRef<HTMLDivElement>(null);
142
143  useEffect(() => {
144    let curX = 0;
145    let curY = 0;
146    let tgX = 0;
147    let tgY = 0;
148
149    function move() {
150      curX += (tgX - curX) / 30;
151      curY += (tgY - curY) / 30;
152      if (interBubbleRef.current) {
153        interBubbleRef.current.style.transform =
154          "translate(" + Math.round(curX) + "px, " + Math.round(curY) + "px)";
155      }
156      requestAnimationFrame(move);
157    }
158
159    const handleMouseMove = (event: MouseEvent) => {
160      if (containerRef.current) {
161        const containerRect = containerRef.current.getBoundingClientRect();
162        tgX = event.clientX - containerRect.left;
163        tgY = event.clientY - containerRect.top;
164      }
165    };
166
167    window.addEventListener("mousemove", handleMouseMove);
168    move();
169
170    return () => {
171      window.removeEventListener("mousemove", handleMouseMove);
172    };
173  }, []);
174
175  const generateGradients = () => {
176    return gradients.map((gradient, index) => {
177      const style: React.CSSProperties = {
178        position: "absolute",
179        background:
180          "radial-gradient(circle at center, rgba(" +
181          gradient.color +
182          ", 0.8) 0, rgba(" +
183          gradient.color +
184          ", 0) 50%) no-repeat",
185        mixBlendMode: blendingMode,
186        width: gradient.size || "80%",
187        height: gradient.size || "80%",
188        top: gradient.top || "50%",
189        left: gradient.left || "50%",
190        transform: "translate(-50%, -50%)",
191        animation:
192          gradient.animation +
193          " " +
194          (gradient.duration || "30s") +
195          " " +
196          (gradient.timing || "ease") +
197          " infinite",
198        opacity: gradient.opacity || 1,
199      };
200
201      return <div key={index} className="" style={style}></div>;
202    });
203  };
204
205  return (
206    <div
207      className={cn("h-full w-full relative overflow-hidden", className)}
208      ref={containerRef}
209      style={{
210        background:
211          "linear-gradient(109.6deg, " +
212          backgroundColor1 +
213          " 11.2%, " +
214          backgroundColor2 +
215          " 51.2%, " +
216          backgroundColor3 +
217          " 98.6%)",
218      }}
219    >
220      <div className="absolute inset-0 p-2 z-[1000] m-auto h-fit w-fit bg-gradient-to-b from-slate-200 to-slate-50/60 bg-clip-text text-center font-geist text-7xl font-extrabold tracking-tight text-transparent">
221        Flux Background
222      </div>
223      <svg>
224        <defs>
225          <filter id="goo">
226            <feGaussianBlur
227              in="SourceGraphic"
228              stdDeviation="10"
229              result="blur"
230            />
231            <feColorMatrix
232              in="blur"
233              mode="matrix"
234              values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -8"
235              result="goo"
236            />
237            <feBlend in="SourceGraphic" in2="goo" />
238          </filter>
239        </defs>
240      </svg>
241      <div className="w-full h-full" style={{ filter: "url(#goo) blur(40px)" }}>
242        {generateGradients()}
243        <div
244          className="interactive"
245          ref={interBubbleRef}
246          style={{
247            background:
248              "radial-gradient(circle at center, rgba(" +
249              interactiveColor +
250              ", 0.8) 0, rgba(" +
251              interactiveColor +
252              ", 0) 50%) no-repeat",
253            mixBlendMode: blendingMode,
254          }}
255        ></div>
256      </div>
257    </div>
258  );
259};
260
261export default FluxBg;
262
263

1import { cn } from "@/utils/cn";
2import React from "react";
3
4type dotSize = "xs" | "sm" | "md" | "lg";
5
6const sizeMap: Record<dotSize, number> = {
7  xs: 0.8,
8  sm: 1,
9  md: 1.25,
10  lg: 1.5,
11};
12
13type DottedGridFadedProps = {
14  faded?: boolean;
15  className?: string;
16  dotSize?: dotSize;
17};
18
19export const DottedGridFaded = ({
20  faded = false,
21  className,
22  dotSize = "xs",
23}: DottedGridFadedProps) => {
24  const size = sizeMap[dotSize];
25  const bgSize = size + "rem " + size + "rem";
26
27  return (
28    <div
29      className={cn(
30        "relative h-screen w-screen overflow-hidden bg-black",
31        className
32      )}
33    >
34      {/* Dots */}
35      <div
36        className="absolute inset-0 h-full w-full bg-black"
37        style={{
38          backgroundImage:
39            "radial-gradient(rgba(255, 255, 255, 0.5) 1px, transparent 1px)",
40          backgroundSize: bgSize,
41        }}
42      />
43      {/* Text */}
44      <div className="absolute inset-0 z-[1000] m-auto h-fit w-fit bg-gradient-to-b from-slate-200 to-slate-50/60 bg-clip-text text-center font-geist text-7xl font-extrabold tracking-tight text-transparent">
45        Dotted Grid
46      </div>
47      {/* Fade out mask */}
48      {faded && (
49        <div
50          className="absolute inset-0 h-full w-full"
51          style={{
52            background:
53              "radial-gradient(circle at center, transparent 10%, black 90%)",
54            mixBlendMode: "multiply",
55          }}
56        />
57      )}
58    </div>
59  );
60};
61
62