creepy-button

1"use client";
2 
3import React, { useRef, useState } from "react";
4import { motion } from "framer-motion";
5import { cn } from "@/lib/utils";
6 
7interface CreepyButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
8    children: React.ReactNode;
9    /**
10     * Optional custom class for the button container
11     */
12    className?: string;
13    /**
14     * Optional custom class for the button cover (the visible part)
15     */
16    coverClassName?: string;
17}
18 
19type Coords = {
20    x: number;
21    y: number;
22};
23 
24export const CreepyButton = ({
25    children,
26    className,
27    coverClassName,
28    onClick,
29    ...props
30}: CreepyButtonProps) => {
31    const eyesRef = useRef<HTMLSpanElement>(null);
32    const [eyeCoords, setEyeCoords] = useState<Coords>({ x: 0, y: 0 });
33    const [isHovered, setIsHovered] = useState(false);
34 
35    const updateEyes = (e: React.MouseEvent | React.TouchEvent) => {
36        const userEvent =
37            "touches" in e ? (e as React.TouchEvent).touches[0] : (e as React.MouseEvent);
38 
39        if (!eyesRef.current) return;
40 
41        // get the center of the eyes container
42        const eyesRect = eyesRef.current.getBoundingClientRect();
43        const eyesCenter = {
44            x: eyesRect.left + eyesRect.width / 2,
45            y: eyesRect.top + eyesRect.height / 2,
46        };
47 
48        // cursor position
49        const cursor = {
50            x: userEvent.clientX,
51            y: userEvent.clientY,
52        };
53 
54        // calculate the eye angle
55        const dx = cursor.x - eyesCenter.x;
56        const dy = cursor.y - eyesCenter.y;
57        const angle = Math.atan2(-dy, dx) + Math.PI / 2;
58 
59        // pupil distance from the eye center
60        const visionRangeX = 180; // Max distance to look horizontally
61        const visionRangeY = 75; // Max distance to look vertically
62        const distance = Math.hypot(dx, dy);
63 
64        // Limit the movement so pupils don't go too far
65        // We normalize the distance influence
66        const x = (Math.sin(angle) * Math.min(distance, visionRangeX)) / visionRangeX;
67        const y = (Math.cos(angle) * Math.min(distance, visionRangeY)) / visionRangeY;
68 
69        setEyeCoords({ x, y });
70    };
71 
72    // Reset eyes when mouse leaves
73    const resetEyes = () => {
74        setEyeCoords({ x: 0, y: 0 });
75        setIsHovered(false);
76    };
77 
78    const pupilStyle = {
79        transform: `translate(calc(-50% + ${eyeCoords.x * 50}%), calc(-50% + ${eyeCoords.y * 50}%))`,
80    };
81 
82    return (
83        <button
84// … truncated