Provides a flyaway animation effect for votes/powerups, showing "+1 CWATT" floating upward with random angle on click.

useFlyawayAnimation(): {
  containerRef: React.RefObject<any>;      // Ref for positioning container
  animatedFlyAway: {                       // Current animation state
    id: number;
    value: string | number | ReactNode;
    x: number;
    y: number;
    angle: number;
  } | undefined;
  handleClick: (e: MouseEvent | TouchEvent) => void;  // Trigger animation
  setFlyAwayComponent: (component: ReactNode) => void; // Customize display
}

Animation State Properties

Usage Example

import { useFlyawayAnimation } from "@/hooks/useFlyawayAnimation";

function VoteButton({ onVote }) {
  const { 
    containerRef, 
    animatedFlyAway, 
    handleClick,
    setFlyAwayComponent 
  } = useFlyawayAnimation();

  // Optional: customize display
  useEffect(() => {
    setFlyAwayComponent(
      <span style={{ color: "#E3FF93", fontSize: "48px" }}>+⚡</span>
    );
  }, []);

  const onClick = (e) => {
    handleClick(e);  // Trigger animation
    onVote();        // Perform vote action
  };

  return (
    <div ref={containerRef} style={{ position: "relative" }}>
      <button onClick={onClick}>Vote</button>
      
      {animatedFlyAway && (
        <div
          key={animatedFlyAway.id}
          className="flyaway-animation"
          style={{
            position: "absolute",
            left: animatedFlyAway.x,
            top: animatedFlyAway.y,
            transform: `rotate(${animatedFlyAway.angle}deg)`,
          }}
        >
          {animatedFlyAway.value}
        </div>
      )}
    </div>
  );
}

Related