// Custom Cursor Color Changer for Readymag
// Add this code to your Readymag project's custom code section
(function() {
// Auto-detect custom cursor element
let cursor = null;
// Wait for page to fully load
function findCursor() {
// Try multiple methods to find the custom cursor
const selectors = [
'[class*="cursor"]',
'[class*="Cursor"]',
'[id*="cursor"]',
'img[src*="cursor"]',
'.rm-cursor',
'.custom-cursor'
];
for (let selector of selectors) {
const el = document.querySelector(selector);
if (el && el.offsetParent !== null) { // Check if element is visible
cursor = el;
console.log('Custom cursor found:', cursor);
return true;
}
}
// Fallback: find any absolute positioned element that follows the mouse
const allElements = document.querySelectorAll('*');
for (let el of allElements) {
const style = window.getComputedStyle(el);
if (style.position === 'fixed' || style.position === 'absolute') {
const rect = el.getBoundingClientRect();
if (rect.width < 100 && rect.height < 100) { // Cursors are usually small
cursor = el;
console.log('Potential cursor found:', cursor);
return true;
}
}
}
return false;
}
// Try to find cursor immediately and after short delay
if (!findCursor()) {
setTimeout(() => {
if (!findCursor()) {
console.error('Custom cursor not found. Make sure your cursor element is loaded.');
return;
} else {
initCursorAnimation();
}
}, 1000);
return;
}
initCursorAnimation();
function initCursorAnimation() {
if (!cursor) return;
let hue = 30; // Starting color (orange/yellow to match your cursor)
let mouseX = 0, mouseY = 0;
let lastX = 0, lastY = 0;
let velocity = 0;
const minLightness = 45; // Minimum lightness to avoid dark colors
const maxLightness = 75; // Maximum lightness for vibrant colors
// Track mouse movement
document.addEventListener('mousemove', (e) => {
mouseX = e.clientX;
mouseY = e.clientY;
// Calculate velocity (speed of movement)
const dx = mouseX - lastX;
const dy = mouseY - lastY;
velocity = Math.sqrt(dx * dx + dy * dy);
lastX = mouseX;
lastY = mouseY;
// Gradually shift hue based on movement (subtle change)
// Only cycle through bright, colorful hues (avoiding very dark shades)
hue += velocity * 0.3;
if (hue > 360) hue = 0;
});
// Handle clicks - sudden color change
document.addEventListener('mousedown', () => {
// Jump to a random complementary color
hue = (hue + 120 + Math.random() * 120) % 360;
cursor.style.transition = 'filter 0.1s ease-out';
});
document.addEventListener('mouseup', () => {
cursor.style.transition = 'filter 0.3s ease-out';
});
// Animation loop to update cursor color
function updateCursor() {
// Apply color using CSS filter with bright, vibrant colors only
const saturation = 85 + Math.min(velocity * 2, 15); // High saturation (85-100%)
const lightness = minLightness + (velocity * 0.5); // Brightness range (45-75%)
const clampedLightness = Math.min(Math.max(lightness, minLightness), maxLightness);
cursor.style.filter = `hue-rotate(${hue}deg) saturate(${saturation}%) brightness(${100 + (clampedLightness - 50)}%)`;
// Gradually slow down color changes when not moving
velocity *= 0.95;
requestAnimationFrame(updateCursor);
}
updateCursor();
} // End of initCursorAnimation
})();