import { useEffect, useRef } from 'react';

interface Snowflake {

x: number;

y: number;

size: number;

speed: number;

opacity: number;

sway: number;

swaySpeed: number;

rotation: number;

rotationSpeed: number;

sparkleTimer: number;

stuck?: boolean;

stuckElement?: HTMLElement;

stuckX?: number; // Relative to element

stuckY?: number; // Relative to element top

}

interface Accumulation {

element: HTMLElement;

stuckFlakes: Snowflake[];

maxAmount: number;

}

export default function SnowEffect() {

const canvasRef = useRef<HTMLCanvasElement>(null);

const animationFrameRef = useRef<number>();

const snowflakesRef = useRef<Snowflake[]>([]);

const windRef = useRef(0);

const accumulationsRef = useRef<Map<HTMLElement, Accumulation>>(new Map());

const isVisibleRef = useRef(true);

useEffect(() => {

const canvas = canvasRef.current;

if (!canvas) return;

const ctx = canvas.getContext('2d');

if (!ctx) return;

// Create snowflakes function

const createSnowflake = (canvas: HTMLCanvasElement): Snowflake => ({

x: Math.random() * canvas.width,

y: Math.random() * canvas.height - canvas.height, // Start above viewport

size: Math.random() * 4 + 1.5,

speed: Math.random() * 2.5 + 0.8,

opacity: Math.random() * 0.6 + 0.4,

sway: Math.random() * Math.PI * 2,

swaySpeed: Math.random() * 0.03 + 0.015,

rotation: Math.random() * Math.PI * 2,

rotationSpeed: (Math.random() - 0.5) * 0.05,

sparkleTimer: Math.random() * 100,

});

// Set canvas size

const resizeCanvas = () => {

canvas.width = window.innerWidth;

canvas.height = window.innerHeight;

// Only recreate non-stuck snowflakes on resize

const activeCount = snowflakesRef.current.filter(f => !f.stuck).length;

const targetCount = Math.floor((canvas.width * canvas.height) / 12000);

if (activeCount < targetCount) {

const needed = targetCount - activeCount;

for (let i = 0; i < needed; i++) {

snowflakesRef.current.push(createSnowflake(canvas));

}

}

};

resizeCanvas();

window.addEventListener('resize', resizeCanvas);

// Initialize snowflakes

const snowflakeCount = Math.floor((canvas.width * canvas.height) / 12000);

snowflakesRef.current = Array.from({ length: snowflakeCount }, () => createSnowflake(canvas));

// Find elements that can accumulate snow

const findAccumulationTargets = (): HTMLElement[] => {

const targets: HTMLElement[] = [];

// Find buttons (a tags with button-like styling, button elements)

document.querySelectorAll('a[class*="px-"], button, a[class*="py-"]').forEach((el) => {

if (el instanceof HTMLElement) {

const rect = el.getBoundingClientRect();

// Only include visible elements with reasonable size

if (rect.width > 50 && rect.height > 20 && rect.top < window.innerHeight && rect.bottom > 0) {

targets.push(el);

}

}

});

// Find terminals and code blocks (pre elements, AnimatedTerminal containers)

// AnimatedTerminal has: bg-gray-50 dark:bg-gray-900 rounded-lg font-mono

// Also look for divs containing the macOS window controls (red/yellow/green circles)

document.querySelectorAll('pre, code, div[class*="bg-gray-50"][class*="rounded-lg"], div[class*="bg-gray-900"][class*="rounded-lg"]').forEach((el) => {

if (el instanceof HTMLElement) {

const rect = el.getBoundingClientRect();

// Check if it looks like a terminal/code block (has reasonable size and font-mono or contains window controls)

const hasWindowControls = el.querySelector('div[class*="bg-red-500"], div[class*="bg-yellow-500"], div[class*="bg-green-500"]');

const hasFontMono = el.classList.contains('font-mono') || window.getComputedStyle(el).fontFamily.includes('mono');

if (rect.width > 100 && rect.height > 50 && rect.top < window.innerHeight && rect.bottom > 0 && (hasWindowControls || hasFontMono)) {

targets.push(el);

}

}

});

// Find card-like containers (divs with rounded corners and padding)

document.querySelectorAll('div[class*="rounded-lg"], div[class*="rounded-xl"], div[class*="rounded-md"]').forEach((el) => {

if (el instanceof HTMLElement) {

const rect = el.getBoundingClientRect();

// Only include substantial containers, not tiny icons

if (rect.width > 150 && rect.height > 80 && rect.top < window.innerHeight && rect.bottom > 0) {

// Check if it's not already added

if (!targets.includes(el)) {

targets.push(el);

}

}

}

});

return targets;

};

// Initialize accumulations

const updateAccumulationTargets = () => {

const targets = findAccumulationTargets();

const currentMap = accumulationsRef.current;

// Remove elements that are no longer in the DOM

currentMap.forEach((acc, element) => {

if (!document.contains(element)) {

// Unstick all flakes from this element

acc.stuckFlakes.forEach((flake) => {

flake.stuck = false;

flake.stuckElement = undefined;

// Add back to active flakes if they're still valid

if (flake.y < canvas.height + 100) {

snowflakesRef.current.push(flake);

}

});

currentMap.delete(element);

// Remove accumulation style

element.style.position = '';

element.style.overflow = '';

const container = element.querySelector('.snow-accumulation-container');

if (container) container.remove();

}

});

// Add new elements

targets.forEach((element) => {

if (!currentMap.has(element)) {

currentMap.set(element, {

element,

stuckFlakes: [],

maxAmount: Math.min(element.offsetHeight * 0.3, 30), // Max 30% of height or 30px

});

// Set up element for accumulation overlay

const computedStyle = window.getComputedStyle(element);

if (computedStyle.position === 'static') {

element.style.position = 'relative';

}

element.style.overflow = 'visible'; // Changed to visible so flakes can be seen

}

});

};

// Check if snowflake is over an element

const isOverElement = (x: number, y: number, element: HTMLElement): boolean => {

const rect = element.getBoundingClientRect();

return x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom;

};

// Render stuck snowflakes on elements

const renderStuckFlakes = (acc: Accumulation) => {

const container = acc.element.querySelector('.snow-accumulation-container') as HTMLElement;

if (acc.stuckFlakes.length === 0) {

if (container) container.remove();

return;

}

let flakesContainer = container;

if (!flakesContainer) {

flakesContainer = document.createElement('div');

flakesContainer.className = 'snow-accumulation-container';

flakesContainer.style.cssText = `

position: absolute;

top: 0;

left: 0;

right: 0;

pointer-events: none;

z-index: 1000;

`;

acc.element.appendChild(flakesContainer);

}

// Clear and re-render all stuck flakes

flakesContainer.innerHTML = '';

acc.stuckFlakes.forEach((flake) => {

if (flake.stuckX === undefined || flake.stuckY === undefined) return;

const flakeDiv = document.createElement('div');

flakeDiv.style.cssText = `

position: absolute;

left: ${flake.stuckX}px;

top: ${flake.stuckY}px;

width: ${flake.size * 2}px;

height: ${flake.size * 2}px;

opacity: ${flake.opacity};

pointer-events: none;

transform: translate(-50%, 0);

`;

// Create SVG snowflake

const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');

svg.setAttribute('width', `${flake.size * 2}`);

svg.setAttribute('height', `${flake.size * 2}`);

svg.setAttribute('viewBox', `0 0 ${flake.size * 2} ${flake.size * 2}`);

const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');

circle.setAttribute('cx', `${flake.size}`);

circle.setAttribute('cy', `${flake.size}`);

circle.setAttribute('r', `${flake.size}`);

circle.setAttribute('fill', 'white');

svg.appendChild(circle);

// Add star shape for larger flakes

if (flake.size > 2) {

for (let i = 0; i < 6; i++) {

const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');

line.setAttribute('x1', `${flake.size}`);

line.setAttribute('y1', `${flake.size}`);

line.setAttribute('x2', `${flake.size}`);

line.setAttribute('y2', '0');

line.setAttribute('stroke', 'white');

line.setAttribute('stroke-width', '1');

line.setAttribute('transform', `rotate(${i * 60} ${flake.size} ${flake.size})`);

svg.appendChild(line);

}

}

flakeDiv.appendChild(svg);

flakesContainer.appendChild(flakeDiv);

});

};

updateAccumulationTargets();

// Update targets periodically (in case new elements are added)

const targetsInterval = setInterval(updateAccumulationTargets, 2000);

// Draw a more detailed snowflake

const drawSnowflake = (ctx: CanvasRenderingContext2D, x: number, y: number, size: number, rotation: number, opacity: number) => {

ctx.save();

ctx.translate(x, y);

ctx.rotate(rotation);

ctx.globalAlpha = opacity;

// Main circle

ctx.beginPath();

ctx.arc(0, 0, size, 0, Math.PI * 2);

ctx.fillStyle = 'rgba(255, 255, 255, 0.9)';

ctx.fill();

// Add sparkle effect

if (Math.random() > 0.95) {

ctx.shadowBlur = 15;

ctx.shadowColor = 'rgba(173, 216, 230, 0.8)';

ctx.fill();

ctx.shadowBlur = 0;

}

// Draw 6-pointed star shape for larger flakes

if (size > 2) {

ctx.strokeStyle = 'rgba(255, 255, 255, 0.8)';

ctx.lineWidth = 1;

for (let i = 0; i < 6; i++) {

ctx.beginPath();

ctx.moveTo(0, 0);

ctx.lineTo(0, size * 1.5);

ctx.stroke();

ctx.rotate(Math.PI / 3);

}

}

ctx.restore();

};

const handleVisibilityChange = () => {

isVisibleRef.current = !document.hidden;

};

const handleWindowBlur = () => {

isVisibleRef.current = false;

};

const handleWindowFocus = () => {

isVisibleRef.current = true;

};

document.addEventListener('visibilitychange', handleVisibilityChange);

window.addEventListener('blur', handleWindowBlur);

window.addEventListener('focus', handleWindowFocus);

isVisibleRef.current = !document.hidden && document.hasFocus();

// Animation loop

const animate = () => {

// Pause animation when page is not visible

if (!isVisibleRef.current) {

animationFrameRef.current = requestAnimationFrame(animate);

return;

}

ctx.clearRect(0, 0, canvas.width, canvas.height);

// Gentle wind effect

windRef.current += (Math.random() - 0.5) * 0.1;

windRef.current = Math.max(-1, Math.min(1, windRef.current));

// Update falling snowflakes and check for collisions

const activeFlakes: Snowflake[] = [];

snowflakesRef.current.forEach((flake) => {

// Skip if already stuck

if (flake.stuck) {

return;

}

// Update position

const prevY = flake.y;

flake.y += flake.speed;

flake.sway += flake.swaySpeed;

flake.rotation += flake.rotationSpeed;

flake.sparkleTimer += 0.1;

// Wind effect

flake.x += Math.sin(flake.sway) * 0.8 + windRef.current * 0.3;

// Check collision with accumulation targets

let stuck = false;

accumulationsRef.current.forEach((acc) => {

if (stuck) return;

const rect = acc.element.getBoundingClientRect();

// Only check if element is visible and in viewport

if (rect.width === 0 || rect.height === 0) return;

if (rect.bottom < 0 || rect.top > window.innerHeight) return; // Element not in viewport

// Check if snowflake is hitting the top of the element

// Canvas coordinates are viewport-relative (fixed position)

// getBoundingClientRect() also returns viewport-relative coordinates

const elementTop = rect.top;

const elementLeft = rect.left;

// Check collision: flake must be horizontally over the element

// and vertically crossing from above to at/below the top

const horizontalOverlap = flake.x >= elementLeft - flake.size && flake.x <= elementLeft + rect.width + flake.size;

// Check if flake is crossing the top edge of the element

const verticalCrossing = prevY < elementTop && flake.y >= elementTop - 3; // Allow small overlap

const withinMaxHeight = flake.y <= elementTop + acc.maxAmount;

if (horizontalOverlap && verticalCrossing && withinMaxHeight) {

// Stick the flake

flake.stuck = true;

flake.stuckElement = acc.element;

// Position relative to element's left edge and top

flake.stuckX = flake.x - elementLeft;

// Stack flakes - place new flake on top of existing ones, starting at the very top

const existingHeight = acc.stuckFlakes.reduce((max, f) => {

const fY = (f.stuckY ?? 0) + (f.size * 2);

return Math.max(max, fY);

}, 0);

// Start stacking from the very top (0), but allow stacking up to maxAmount

// First flake goes at top (0), subsequent ones stack on top

flake.stuckY = Math.min(existingHeight, acc.maxAmount - flake.size * 2);

// Add to accumulation

acc.stuckFlakes.push(flake);

// Limit accumulation height - remove oldest flakes

if (acc.stuckFlakes.length > 50) {

const removed = acc.stuckFlakes.shift();

if (removed) {

removed.stuck = false;

removed.stuckElement = undefined;

removed.stuckX = undefined;

removed.stuckY = undefined;

}

}

stuck = true;

}

});

if (!stuck) {

// Reset if off screen

if (flake.y > canvas.height + 10) {

flake.y = -10;

flake.x = Math.random() * canvas.width;

flake.sway = Math.random() * Math.PI * 2;

}

// Wrap around horizontally

if (flake.x < -10) flake.x = canvas.width + 10;

if (flake.x > canvas.width + 10) flake.x = -10;

activeFlakes.push(flake);

// Pulsing opacity for sparkle effect

const sparkleOpacity = flake.opacity + Math.sin(flake.sparkleTimer) * 0.2;

// Draw snowflake

drawSnowflake(ctx, flake.x, flake.y, flake.size, flake.rotation, Math.max(0.3, Math.min(1, sparkleOpacity)));

}

});

// Update active flakes list (remove stuck ones)

snowflakesRef.current = activeFlakes;

// Spawn new flakes to maintain target count

const targetCount = Math.floor((canvas.width * canvas.height) / 12000);

const currentActiveCount = activeFlakes.length;

if (currentActiveCount < targetCount) {

const needed = targetCount - currentActiveCount;

for (let i = 0; i < needed; i++) {

activeFlakes.push(createSnowflake(canvas));

}

snowflakesRef.current = activeFlakes;

}

// Render stuck flakes on elements

accumulationsRef.current.forEach((acc) => {

// Gradually remove some stuck flakes (melting effect)

if (Math.random() > 0.995 && acc.stuckFlakes.length > 0) {

const removed = acc.stuckFlakes.shift();

if (removed) {

removed.stuck = false;

removed.stuckElement = undefined;

}

}

renderStuckFlakes(acc);

});

animationFrameRef.current = requestAnimationFrame(animate);

};

animate();

return () => {

window.removeEventListener('resize', resizeCanvas);

document.removeEventListener('visibilitychange', handleVisibilityChange);

window.removeEventListener('blur', handleWindowBlur);

window.removeEventListener('focus', handleWindowFocus);

clearInterval(targetsInterval);

if (animationFrameRef.current) {

cancelAnimationFrame(animationFrameRef.current);

}

// Clean up accumulation overlays

accumulationsRef.current.forEach((acc) => {

const container = acc.element.querySelector('.snow-accumulation-container');

if (container) container.remove();

acc.element.style.position = '';

acc.element.style.overflow = '';

});

};

}, []);

return (

<canvas

ref={canvasRef}

className="fixed top-0 left-0 w-full h-full pointer-events-none z-50"

style={{ mixBlendMode: 'screen' }}

/>

);

}