blog/components/cursor-effect.tsx

"use client";

import { useEffect } from "react";

const HIDE_CURSOR_CLASS = "hide-native-cursor";
const JANUARY = 0;
const FEBRUARY = 1;
const DECEMBER = 11;

export default function CursorEffect() {
  useEffect(() => {
    let cursor: any;
    let isMounted = true;

    const currentMonth = new Date().getMonth();
    const isWinter =
      currentMonth === DECEMBER ||
      currentMonth === JANUARY ||
      currentMonth === FEBRUARY;

    import("cursor-effects").then((effects) => {
      if (!isMounted) return;

      if (!isWinter && effects?.trailingCursor) {
        document.body.classList.add(HIDE_CURSOR_CLASS);
        const TrailingCursor = effects.trailingCursor as any;
        cursor = new TrailingCursor();
      } else if (isWinter && effects?.snowflakeCursor) {
        document.body.classList.remove(HIDE_CURSOR_CLASS);
        const SnowflakeCursor = effects.snowflakeCursor as any;
        cursor = new SnowflakeCursor();
      }
    });

    return () => {
      isMounted = false;
      document.body.classList.remove(HIDE_CURSOR_CLASS);
      if (cursor && typeof cursor.destroy === "function") {
        cursor.destroy();
      }
    };
  }, []);

  return null;
}