Snowflake Cursor Effect

1
'use client';
2

3
import React, { useEffect, useRef } from 'react';
4

5
interface SnowflakeCursorOptions {
6
  element?: HTMLElement;
7
}
8

9
const SnowflakeCursor: React.FC<SnowflakeCursorOptions> = ({ element }) => {
10
  const canvasRef = useRef<HTMLCanvasElement | null>(null);
11
  const particles = useRef<any[]>([]);
12
  const canvImages = useRef<HTMLCanvasElement[]>([]);
13
  const animationFrame = useRef<number | null>(null);
14
  const possibleEmoji = ['❄️'];
15
  const prefersReducedMotion = useRef<MediaQueryList | null>(null);
16

17
  useEffect(() => {
18
    // Check if window is defined (to ensure code runs on client-side)
19
    if (typeof window === 'undefined') return;
20

21
    prefersReducedMotion.current = window.matchMedia(
22
      '(prefers-reduced-motion: reduce)'
23
    );
24

25
    const canvas = document.createElement('canvas');
26
    const context = canvas.getContext('2d');
27
    if (!context) return;
28

29
    const targetElement = element || document.body;
30

31
    canvas.style.position = element ? 'absolute' : 'fixed';
32
    canvas.style.top = '0';
33
    canvas.style.left = '0';
34
    canvas.style.pointerEvents = 'none';
35

36
    targetElement.appendChild(canvas);
37
    canvasRef.current = canvas;
38

39
    const setCanvasSize = () => {
40
      canvas.width = element ? targetElement.clientWidth : window.innerWidth;
41
      canvas.height = element ? targetElement.clientHeight : window.innerHeight;
42
    };
43

44
    const createEmojiImages = () => {
45
      context.font = '12px serif';
46
      context.textBaseline = 'middle';
47
      context.textAlign = 'center';
48

49
      possibleEmoji.forEach((emoji) => {
50
        const measurements = context.measureText(emoji);
51
        const bgCanvas = document.createElement('canvas');
52
        const bgContext = bgCanvas.getContext('2d');
53
        if (!bgContext) return;
54

55
        bgCanvas.width = measurements.width;
56
        bgCanvas.height = measurements.actualBoundingBoxAscent * 2;
57

58
        bgContext.textAlign = 'center';
59
        bgContext.font = '12px serif';
60
        bgContext.textBaseline = 'middle';
61
        bgContext.fillText(
62
          emoji,
63
          bgCanvas.width / 2,
64
          measurements.actualBoundingBoxAscent
65
        );
66

67
        canvImages.current.push(bgCanvas);
68
      });
69
    };
70

71
    const addParticle = (x: number, y: number) => {
72
      const randomImage =
73
        canvImages.current[
74
          Math.floor(Math.random() * canvImages.current.length)
75
        ];
76
      particles.current.push(new Particle(x, y, randomImage));
77
    };
78

79
    const onMouseMove = (e: MouseEvent) => {
80
      const x = element
81
        ? e.clientX - targetElement.getBoundingClientRect().left
82
        : e.clientX;
83
      const y = element
84
        ? e.clientY - targetElement.getBoundingClientRect().top
85
        : e.clientY;
86
      addParticle(x, y);
87
    };
88

89
    const updateParticles = () => {
90
      if (!context || !canvas) return;
91

92
      context.clearRect(0, 0, canvas.width, canvas.height);
93

94
      particles.current.forEach((particle, index) => {
95
        particle.update(context);
96
        if (particle.lifeSpan < 0) {
97
          particles.current.splice(index, 1);
98
        }
99
      });
100
    };
101

102
    const animationLoop = () => {
103
      updateParticles();
104
      animationFrame.current = requestAnimationFrame(animationLoop);
105
    };
106

107
    const init = () => {
108
      if (prefersReducedMotion.current?.matches) return;
109

110
      setCanvasSize();
111
      createEmojiImages();
112

113
      targetElement.addEventListener('mousemove', onMouseMove);
114
      window.addEventListener('resize', setCanvasSize);
115

116
      animationLoop();
117
    };
118

119
    const destroy = () => {
120
      if (canvasRef.current) {
121
        canvasRef.current.remove();
122
      }
123
      if (animationFrame.current) {
124
        cancelAnimationFrame(animationFrame.current);
125
      }
126
      targetElement.removeEventListener('mousemove', onMouseMove);
127
      window.removeEventListener('resize', setCanvasSize);
128
    };
129

130
    prefersReducedMotion.current.onchange = () => {
131
      if (prefersReducedMotion.current?.matches) {
132
        destroy();
133
      } else {
134
        init();
135
      }
136
    };
137

138
    init();
139
    return () => destroy();
140
  }, [element]);
141

142
  return null;
143
};
144

145
/**
146
 * Particle Class
147
 */
148
class Particle {
149
  position: { x: number; y: number };
150
  velocity: { x: number; y: number };
151
  lifeSpan: number;
152
  initialLifeSpan: number;
153
  canv: HTMLCanvasElement;
154

155
  constructor(x: number, y: number, canvasItem: HTMLCanvasElement) {
156
    this.position = { x, y };
157
    this.velocity = {
158
      x: (Math.random() < 0.5 ? -1 : 1) * (Math.random() / 2),
159
      y: 1 + Math.random(),
160
    };
161
    this.lifeSpan = Math.floor(Math.random() * 60 + 80);
162
    this.initialLifeSpan = this.lifeSpan;
163
    this.canv = canvasItem;
164
  }
165

166
  update(context: CanvasRenderingContext2D) {
167
    this.position.x += this.velocity.x;
168
    this.position.y += this.velocity.y;
169
    this.lifeSpan--;
170

171
    this.velocity.x += ((Math.random() < 0.5 ? -1 : 1) * 2) / 75;
172
    this.velocity.y -= Math.random() / 300;
173

174
    const scale = Math.max(this.lifeSpan / this.initialLifeSpan, 0);
175

176
    context.save();
177
    context.translate(this.position.x, this.position.y);
178
    context.scale(scale, scale);
179
    context.drawImage(this.canv, -this.canv.width / 2, -this.canv.height / 2);
180
    context.restore();
181
  }
182
}
183

184
export default SnowflakeCursor;
185