Ir al contenido
Tiempo limitadoStarter ahora cuesta 9 US$ al mes en lugar de 20 US$.Ver planes
charmotion
Empieza ahora

Cómo hacer un logo que siga al cursor

Por el equipo de Charmotion · Actualizado el

Ilustración de portada de la guía: Cómo hacer un logo que siga al cursor, con personajes de demo de Charmotion

Para hacer que un logo siga al cursor, escucha pointermove, convierte la posición del puntero respecto al logo en un pequeño ángulo o desplazamiento, y acerca el logo a ese valor con easing. Usa transforms de CSS para una inclinación, Math.atan2 para ojos que miran al puntero, o listeners de Rive y Data Binding para un rig diseñado. Desactívalo para movimiento reducido.

Puntos clave

  • CSS por sí solo puede reaccionar al hover pero no puede leer la posición del puntero; unas pocas líneas de JavaScript definen variables CSS para la inclinación.
  • Math.atan2(y, x) da el ángulo del ojo al puntero; mueve cada pupila una distancia fija en esa dirección.
  • Los listeners de Rive reaccionan al puntero sobre el canvas; para seguirlo por toda la página, pasa valores mediante Data Binding.
  • Las pantallas táctiles no tienen hover, así que planea en su lugar un movimiento en reposo o una reacción al tocar.
  • El movimiento activado por el puntero debe desactivarse con prefers-reduced-motion (WCAG 2.3.3), y los loops largos en reposo necesitan una forma de detenerse (WCAG 2.2.2).

¿Ya tienes un personaje o logo? Mira ejemplos en pantallas reales de apps: pantallas de splash, onboarding, carga y estado vacío, con la animación que se reproduce en cada una.

¿De qué formas puede reaccionar un logo al mouse?

EfectoQué se mueveHerramienta más sencilla
Reacción al hoverEl logo hace un movimiento corto cuando el puntero está encimaCSS :hover
Inclinación hacia el cursorTodo el logo gira unos grados hacia el punteroJavaScript más transforms de CSS
Ojos que siguenLas pupilas, o una parte del logo, apuntan al cursorJavaScript con Math.atan2 en un SVG inline
Rig diseñadoVarias partes responden con easing, squash y estadosRive (listeners y Data Binding)
Giro 3DUn modelo 3D rota en el espaciothree.js

Para un modelo 3D, consulta un logo 3D interactivo en tu sitio web. El resto de esta guía cubre las opciones 2D.

¿Puedes hacer que un logo reaccione al mouse solo con CSS?

En parte. CSS puede reaccionar a si el puntero está sobre el logo, pero no a dónde está. Una reacción al hover es CSS puro:

.logo { transition: transform 0.25s ease-out; }

@media (hover: hover) {
  .logo:hover { transform: rotate(-6deg) scale(1.05); }
}

La media feature hover comprueba si "el mecanismo de input principal del usuario puede hacer hover sobre los elementos." En muchos teléfonos devuelve none, porque "emulan el hover cuando el usuario hace una pulsación larga incómoda." Envolver los efectos hover en @media (hover: hover) los limita a dispositivos cuyo input principal realmente puede hacer hover.

Para inclinar hacia el puntero necesitas sus coordenadas, lo que implica un pequeño script.

¿Cómo inclinas un logo hacia el cursor con JavaScript?

Mide dónde está el puntero respecto al centro del logo, conviértelo en un ángulo y pásaselo a CSS mediante custom properties. La transición de CSS suaviza el movimiento, así que no hay ningún loop de animación que gestionar.

<a class="logo-link" href="/"><img class="logo" src="/logo.svg" alt="Hushwave"></a>

.logo {
  transform: perspective(600px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.2s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .logo { transform: none; transition: none; }
}

const logo = document.querySelector(".logo");
const moves = matchMedia("(prefers-reduced-motion: no-preference) and (hover: hover)");

if (moves.matches) {
  window.addEventListener("pointermove", (e) => {
    const r = logo.getBoundingClientRect();
    const x = (e.clientX - (r.left + r.width / 2)) / innerWidth;   // about -1 to 1
    const y = (e.clientY - (r.top + r.height / 2)) / innerHeight;
    logo.style.setProperty("--ry", (x * 20) + "deg");  // flip the signs to tilt away instead
    logo.style.setProperty("--rx", (-y * 20) + "deg");
  });
}

Mantén los ángulos pequeños. Un logo que se balancea 45 grados parece roto, mientras que unos pocos grados lo hacen parecer vivo. Si el logo está en un header fijo, mídelo una vez al redimensionar en lugar de en cada evento.

Escuchar en window hace que el logo reaccione en cualquier parte de la página. Escucha en el elemento header si solo debe reaccionar cerca.

¿Cómo haces que los ojos de un logo sigan al cursor?

El logo tiene que ser un SVG inline con las pupilas como elementos separados, para poder moverlas. Luego, para cada ojo, encuentra el ángulo desde el centro del ojo hasta el puntero con Math.atan2, que devuelve "el ángulo en radianes (entre -π y π, inclusive)" y recibe "primero la coordenada y y después la coordenada x," según MDN.

const eye = document.querySelector("#eye-left");
const pupil = document.querySelector("#pupil-left");
const reach = 3; // how far the pupil may travel, in SVG units

window.addEventListener("pointermove", (e) => {
  const r = eye.getBoundingClientRect();
  const a = Math.atan2(e.clientY - (r.top + r.height / 2), e.clientX - (r.left + r.width / 2));
  pupil.setAttribute("transform", "translate(" + Math.cos(a) * reach + " " + Math.sin(a) * reach + ")");
});

Un alcance fijo mantiene la pupila dentro del ojo sin importar la distancia. Para un aspecto más suave, reduce el alcance cuando el puntero está muy cerca del ojo, para que la pupila no salte al borde.

Al exportar desde Figma, la opción SVG Include "id" attribute agrega ids basados en los nombres de las capas, así que nombrar las capas eye-left y pupil-left le da al script algo que encontrar.

¿Cómo haces que un logo de Rive siga al puntero?

Rive te da dos caminos, y el correcto depende de hasta dónde hay que seguir al puntero.

Listeners, dentro del canvas. Un listener de la máquina de estados puede dispararse con Pointer Enter, Exit, Move, Down y Up. Su acción Align Target "posiciona un objeto para que siga al puntero," por ejemplo un objetivo invisible al que están restringidos los ojos o la cabeza. La documentación de Rive advierte que Pointer Exit "solo se dispara mientras Rive puede leer la posición del puntero," así que los listeners solo ven el puntero sobre el canvas. La acción más antigua Input Change está marcada como obsoleta.

Data Binding, en toda la página. Data Binding "conecta los datos almacenados en View Models con propiedades de tu escena de Rive," y los valores se pueden actualizar desde el código en tiempo de ejecución. Escucha el puntero en la página y escribe números en el archivo:

const r = new rive.Rive({
  src: "/logo.riv",
  canvas: document.querySelector("#logo"),
  stateMachine: "Main",
  autoplay: true,
  autoBind: true,
  isTouchScrollEnabled: true,
  onLoad: () => {
    const lookX = r.viewModelInstance.number("lookX"); // a number property defined in your file
    window.addEventListener("pointermove", (e) => {
      lookX.value = (e.clientX / innerWidth) * 100;
    });
  },
});

isTouchScrollEnabled mantiene la página desplazable cuando un dedo arrastra sobre el canvas; sin él, Rive dice que "el comportamiento de scroll puede bloquearse." La parte de animación (blend states controlados por el número) se configura en el editor; la guía de la máquina de estados de Rive explica cómo, y SVG a Rive explica cómo llevar el logo a Rive.

¿Qué pasa en teléfonos y tablets sin mouse?

Las pantallas táctiles no tienen un puntero en reposo. La documentación de pointer events de MDN describe que, en dispositivos que "no admiten hover", los eventos enter y leave llegan junto con la pulsación y la liberación, así que un logo que sigue al cursor solo se mueve mientras hay un dedo en la pantalla, y luego se congela donde estaba.

  • Condiciona el efecto: activa el seguimiento del cursor solo bajo (hover: hover), como en el ejemplo de inclinación.
  • Dale al táctil su propio movimiento: un loop lento en reposo, o una reacción corta al tocar, funciona mejor que un seguimiento a medias.
  • No bloquees el scroll: MDN describe que touch-action: none desactiva el comportamiento táctil predeterminado del navegador, como desplazar y hacer zoom, en esa zona. En un logo dentro del flujo de la página, un arrastre que empiece sobre él ya no desplazaría la página.
  • Restablece al soltar: vuelve con easing a la pose de reposo en pointerup y pointercancel, para que el logo no se quede torcido.

¿Es accesible un logo que sigue al cursor?

Puede serlo, si la gente puede desactivar el movimiento. Se aplican dos criterios de WCAG:

CriterioNivelQué pide
2.3.3 Animation from InteractionsAAA"La animación de movimiento activada por la interacción se puede desactivar," salvo que sea esencial
2.2.2 Pause, Stop, HideAEl contenido en movimiento que "empieza automáticamente, dura más de cinco segundos y se presenta en paralelo con otro contenido" necesita una forma de pausarlo, detenerlo u ocultarlo

Un logo que sigue al cursor es movimiento activado por la interacción, y nunca es esencial. El W3C incluye la media query prefers-reduced-motion como técnica suficiente (C39) para 2.3.3, por eso todos los ejemplos de arriba la comprueban. Si el logo también tiene un loop en reposo que sigue reproduciéndose, detenlo después de unos ciclos o dale un control de pausa para cumplir 2.2.2.

Además, mantén el logo como un enlace normal con texto alternativo. El movimiento es decoración; el nombre de la marca y el enlace a la página de inicio son el contenido. Más en animación accesible y movimiento reducido.

¿Puedes conseguir un logo que siga al puntero ya hecho?

Motion Studio de Charmotion crea a partir de tu propio logo un hero web que sigue al puntero, reacciona al hover y se repite en loop en reposo. Trabaja con las partes de tu propio archivo, así que el logo no se redibuja. Recibes un embed alojado que se pausa fuera de pantalla y respeta el movimiento reducido, archivos para alojar tú mismo y un componente React. Los conceptos son gratis; generar uno empieza en Starter ($9/mes a noviembre de 2026). Para un logo con cara que deba parpadear y hablar, un set de personaje encaja mejor.

Preguntas frecuentes

¿Un logo que sigue al cursor hace más lenta la página?

No si se mantiene simple. Un handler de pointermove que define dos variables CSS es barato. Evita medir el layout en cada evento cuando el logo no se mueve, pausa cualquier loop de animación mientras el logo está fuera de pantalla, y omite el efecto por completo en dispositivos táctiles y con movimiento reducido.

¿Un logo de Rive puede seguir al cursor fuera de su canvas?

No solo con listeners, que únicamente ven el puntero sobre el canvas. Escucha pointermove en la página con JavaScript y escribe los valores en una propiedad numérica de un view model mediante Data Binding; la máquina de estados convierte esos números en movimiento.

¿Cuánto debería inclinarse un logo hacia el cursor?

Unos pocos grados bastan para que se sienta receptivo sin parecer roto. Los ángulos grandes deforman el logo y hacen que el texto sea difícil de leer. Suaviza el movimiento a lo largo de una fracción de segundo en lugar de saltar, y vuelve a la pose de reposo cuando el puntero se va.

Fuentes

Guías relacionadas