mirror of
https://github.com/AderKonstantin/aderktech-chronark.com-.git
synced 2025-06-08 13:48:42 +03:00
The commit adds a new component, `Particles`, which is used in the `Home` page. The `Particles` component creates a particle animation on the page. The `useMousePosition` hook is also added to track the mouse position and update the particle animation accordingly. The `tailwind.config.js` file is modified to remove the `@tailwindcss/line-clamp` plugin.
28 lines
555 B
TypeScript
28 lines
555 B
TypeScript
import { useEffect, useState } from "react";
|
|
|
|
interface MousePosition {
|
|
x: number;
|
|
y: number;
|
|
}
|
|
|
|
export function useMousePosition(): MousePosition {
|
|
const [mousePosition, setMousePosition] = useState<MousePosition>({
|
|
x: 0,
|
|
y: 0,
|
|
});
|
|
|
|
useEffect(() => {
|
|
const handleMouseMove = (event: MouseEvent) => {
|
|
setMousePosition({ x: event.clientX, y: event.clientY });
|
|
};
|
|
|
|
window.addEventListener("mousemove", handleMouseMove);
|
|
|
|
return () => {
|
|
window.removeEventListener("mousemove", handleMouseMove);
|
|
};
|
|
}, []);
|
|
|
|
return mousePosition;
|
|
}
|