[Resuelto] Consulta plugin o similar para efecto con raton

Hola.

Lo que se muestra en esa web es algo personalizado, no hay ningún plugin con ese efecto.

De la web pude sacar algún código pero tendrás que adaptarlo, nosotros no podemos revisarlo no ofrecemos soporte para código, es simplemente un primer paso para que puedas adaptarlo.

<div id="matiloun-effect-container" style="position: relative; width: 100%; height: 100vh; background: #111; overflow: hidden; cursor: none; font-family: sans-serif;">

<!-- LUZ RADIAL -->
<div id="cursor-light" style="position: fixed; width: 400px; height: 400px; border-radius: 50%; background: radial-gradient(circle, rgba(245,213,106,0.15) 0%, transparent 70%); pointer-events: none; transform: translate(-50%, -50%); z-index: 1; mix-blend-mode: screen; opacity: 0; transition: opacity 0.3s;"></div>

<!-- OJOS CON SVG -->
<div id="eyes-container" style="position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 220px; height: 160px; z-index: 2; pointer-events: none;">
<svg width="220" height="160" viewBox="0 0 220 160" xmlns="http://www.w3.org/2000/svg">
<!-- Ojo izquierdo -->
<ellipse cx="70" cy="80" rx="35" ry="35" fill="#f5d56a" stroke="#d4b256" stroke-width="2"/>
<circle cx="70" cy="80" r="12" fill="#111"/>
<circle cx="75" cy="75" r="3" fill="white"/>

<!-- Ojo derecho -->
<ellipse cx="150" cy="80" rx="35" ry="35" fill="#f5d56a" stroke="#d4b256" stroke-width="2"/>
<circle cx="150" cy="80" r="12" fill="#111"/>
<circle cx="155" cy="75" r="3" fill="white"/>

<!-- Textura rugosa -->
<g opacity="0.3">
<path d="M60 70 Q65 75 70 70" stroke="#d4b256" stroke-width="1" fill="none"/>
<path d="M80 85 Q75 80 80 85" stroke="#d4b256" stroke-width="1" fill="none"/>
<path d="M140 70 Q145 75 150 70" stroke="#d4b256" stroke-width="1" fill="none"/>
<path d="M160 85 Q155 80 160 85" stroke="#d4b256" stroke-width="1" fill="none"/>
<circle cx="65" cy="85" r="2" fill="#d4b256"/>
<circle cx="155" cy="90" r="1.5" fill="#d4b256"/>
</g>
</svg>
</div>

<!-- IMÁGENES OCULTAS  (reemplaza URLs) -->
<img src="https://tu_imagen" class="hidden-img" style="position: absolute; top: 10%; left: 15%; width: 80px; opacity: 0; transition: opacity 0.6s ease; filter: brightness(0.9); pointer-events: none;" >
<img src="https://tu_imagen" class="hidden-img" style="position: absolute; top: 10%; left: 15%; width: 80px; opacity: 0; transition: opacity 0.6s ease; filter: brightness(0.9); pointer-events: none;" >
<img src="https://tu_imagen" class="hidden-img" style="position: absolute; top: 10%; left: 15%; width: 80px; opacity: 0; transition: opacity 0.6s ease; filter: brightness(0.9); pointer-events: none;" >
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
if (window.innerWidth < 768) return;

const cursor = document.getElementById('cursor-light');
const eyesContainer = document.getElementById('eyes-container');
const images = document.querySelectorAll('.hidden-img');
const container = document.getElementById('matiloun-effect-container');

let mouseX = 0, mouseY = 0;
let eyeX = 0, eyeY = 0;

container.addEventListener('mousemove', function(e) {
const rect = container.getBoundingClientRect();
mouseX = e.clientX;
mouseY = e.clientY;

// Luz
cursor.style.left = mouseX + 'px';
cursor.style.top = mouseY + 'px';
cursor.style.opacity = '1';

// Revelar imágenes
images.forEach(img => {
const imgRect = img.getBoundingClientRect();
const imgX = imgRect.left + imgRect.width / 2;
const imgY = imgRect.top + imgRect.height / 2;
const distance = Math.hypot(imgX - mouseX, imgY - mouseY);
img.style.opacity = distance < 250 ? 1 : 0;
});

// Ojos
if (eyesContainer) {
const eyeCenterX = rect.left + rect.width / 2;
const eyeCenterY = rect.top + rect.height / 2;
const angle = Math.atan2(mouseY - eyeCenterY, mouseX - eyeCenterX);
const maxMove = 18;
eyeX = Math.cos(angle) * maxMove;
eyeY = Math.sin(angle) * maxMove;
}
});

// Animación ojos
function animate() {
if (eyesContainer) {
eyesContainer.style.transform = `translate(-50%, -50%) translate(${eyeX}px, ${eyeY}px)`;
}
requestAnimationFrame(animate);
}
animate();

container.style.cursor = 'none';
});
</script>

Como te digo tendrás que adaptarlo a lo que necesitas, nosotros no podemos hacer mas, pero bueno es un comienzo.

Un saludo

Gracias Pepe, es un buen comienzo si. Intentamos adaptarlo a nuestra web.

Hola.

Nada, Gracias a ti.

Cualquier consulta que tengas no dudes en comunicarlo.

Un Saludo