import { ReactNode, useEffect, useState } from 'react' import { motion } from "framer-motion" import { Snowflake } from 'lucide-react' import { PURPLE_BLUE_COLORS } from '../../Colors' type MousePosition = { x: number, y: number } function calculateDistance( point1: MousePosition, point2: MousePosition, ): number { const deltaX = point2.x - point1.x; const deltaY = point2.y - point1.y; const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY); return distance; } export const FallingIconCursorExample = () => { const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 }) function handleMouseMove(e: React.MouseEvent) { const containerRect = e.currentTarget.getBoundingClientRect(); setMousePosition({ x: e.clientX - containerRect.left, y: e.clientY - containerRect.top }); } return (

handleMouseMove(e)} className='h-screen relative cursor-none flex justify-center items-center overflow-hidden '>

Move your mouse

) } const FallingIconCursor = ({ mousePosition }: { mousePosition: MousePosition }) => { const [icons, setIcons] = useState([]) const [prevMousePosition, setPrevMousePosition] = useState(mousePosition) const randomRotation = Math.random() * 360 useEffect(() => { if (calculateDistance(prevMousePosition, mousePosition) > 10) { const dir = -1 * 10 * (prevMousePosition.x - mousePosition.x) setPrevMousePosition(mousePosition) setIcons([...icons, ] ) } }, [mousePosition]) useEffect(() => { if (icons.length > 0) { const timeout = setTimeout(() => { setIcons([]); }, 1000); return () => clearTimeout(timeout); } }, [icons]); return ( <>

{icons} ) } export default FallingIconCursor

Cursor

Falling Icon Cursor

Gradient Cursor

Fluid Motion Cursor