chronark 74ffd5f3d8
feat: add particle animation to home page
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.
2023-04-26 11:31:14 +02:00

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;
}