magnet-lines

1"use client";
2 
3import React, { useRef, useState, useEffect } from "react";
4import { motion } from "framer-motion";
5 
6interface MagnetLinesProps {
7    rows?: number;
8    columns?: number;
9    containerSize?: string;
10    lineColor?: string;
11    lineWidth?: string;
12    lineHeight?: string;
13    baseAngle?: number;
14    className?: string;
15    style?: React.CSSProperties;
16}
17 
18export function MagnetLines({
19    rows = 9,
20    columns = 9,
21    containerSize = "80vmin",
22    lineColor = "#efefef",
23    lineWidth = "1vmin",
24    lineHeight = "6vmin",
25    baseAngle = 0,
26    className = "",
27    style = {},
28}: MagnetLinesProps) {
29    const containerRef = useRef<HTMLDivElement>(null);
30 
31    // Spans the grid
32    const total = rows * columns;
33    const spans = Array.from({ length: total }, (_, i) => i);
34 
35    return (
36        <div
37            ref={containerRef}
38            className={`relative grid place-items-center ${className}`}
39            style={{
40                gridTemplateColumns: `repeat(${columns}, 1fr)`,
41                gridTemplateRows: `repeat(${rows}, 1fr)`,
42                width: containerSize,
43                height: containerSize,
44                ...style,
45            }}
46        >
47            {spans.map((i) => (
48                <Line
49                    key={i}
50                    containerRef={containerRef}
51                    lineColor={lineColor}
52                    lineWidth={lineWidth}
53                    lineHeight={lineHeight}
54                    baseAngle={baseAngle}
55                />
56            ))}
57        </div>
58    );
59}
60 
61function Line({
62    containerRef,
63    lineColor,
64    lineWidth,
65    lineHeight,
66    baseAngle,
67}: {
68    containerRef: React.RefObject<HTMLDivElement | null>;
69    lineColor: string;
70    lineWidth: string;
71    lineHeight: string;
72    baseAngle: number;
73}) {
74    const lineRef = useRef<HTMLDivElement>(null);
75    const [rotate, setRotate] = useState(baseAngle);
76 
77    useEffect(() => {
78        const updateRotation = (e: MouseEvent) => {
79            if (!lineRef.current || !containerRef.current) return;
80 
81            const rect = lineRef.current.getBoundingClientRect();
82            const centerX = rect.left + rect.width / 2;
83            const centerY = rect.top + rect.height / 2;
84 
85            const mouseX = e.clientX;
86            const mouseY = e.clientY;
87 
88            const distanceX = mouseX - centerX;
89            const distanceY = mouseY - centerY;
90 
91            const angle = (Math.atan2(distanceY, distanceX) * 180) / Math.PI;
92 
93// … truncated