CursorPhysics

Googly Eyes

A playful pair of springy pupils that track the cursor inside soft eye sockets.

"use client";

import { useEffect, useRef } from "react";

export default function GooglyEyes() {
  const containerRef = useRef(null);
  const socketsRef = useRef([]);
  const pupilsRef = useRef([]);
  const statesRef = useRef([
    { x: 0, y: 0, targetX: 0, targetY: 0, vx: 0, vy: 0 },
    { x: 0, y: 0, targetX: 0, targetY: 0, vx: 0, vy: 0 }
  ]);
  const config = {
    socketColor: "#e0f2fe",
    pupilColor: "#0f172a",
    highlightColor: "#ffffff",
    bgColor: "#0a0d14",
    size: 72,
    gap: 22,
    range: 18,
    stiffness: 0.18,
    damping: 0.72
  };

  useEffect(() => {
    const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    if (reduceMotion) return;
    const container = containerRef.current;
    if (!container) return;

    let frame = 0;

    function move(event) {
      socketsRef.current.forEach((socket, index) => {
        if (!socket) return;

        const rect = socket.getBoundingClientRect();
        const cx = rect.left + rect.width / 2;
        const cy = rect.top + rect.height / 2;
        const dx = event.clientX - cx;
        const dy = event.clientY - cy;
        const distance = Math.hypot(dx, dy);
        const clamped = Math.min(distance, config.range);
        const angle = Math.atan2(dy, dx);

        statesRef.current[index].targetX = Math.cos(angle) * clamped;
        statesRef.current[index].targetY = Math.sin(angle) * clamped;
      });
    }

    function reset() {
      statesRef.current.forEach((state) => {
        state.targetX = 0;
        state.targetY = 0;
      });
    }

    function animate() {
      statesRef.current.forEach((state, index) => {
        state.vx += (state.targetX - state.x) * config.stiffness;
        state.vy += (state.targetY - state.y) * config.stiffness;
        state.vx *= config.damping;
        state.vy *= config.damping;
        state.x += state.vx;
        state.y += state.vy;
        pupilsRef.current[index].style.transform = `translate3d(${state.x}px, ${state.y}px, 0)`;
      });

      frame = requestAnimationFrame(animate);
    }

    container.addEventListener("pointermove", move);
    container.addEventListener("pointerleave", reset);
    frame = requestAnimationFrame(animate);

    return () => {
      cancelAnimationFrame(frame);
      container.removeEventListener("pointermove", move);
      container.removeEventListener("pointerleave", reset);
    };
  }, []);

  const pupilSize = Math.max(12, config.size * 0.38);
  const shineSize = Math.max(4, pupilSize * 0.28);

  return (
    <div
      ref={containerRef}
      style={{
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        gap: config.gap,
        minHeight: 280,
        borderRadius: 24,
        background: config.bgColor
      }}
    >
      {[0, 1].map((index) => (
        <div
          key={index}
          ref={(node) => { socketsRef.current[index] = node; }}
          style={{
            width: config.size,
            height: config.size,
            borderRadius: "999px",
            background: config.socketColor,
            border: "1px solid rgba(148, 163, 184, 0.34)",
            boxShadow: "inset 0 4px 12px rgba(15, 23, 42, 0.18), 0 18px 44px rgba(0, 0, 0, 0.18)",
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            position: "relative"
          }}
        >
          <div
            ref={(node) => { pupilsRef.current[index] = node; }}
            style={{
              width: pupilSize,
              height: pupilSize,
              borderRadius: "999px",
              background: config.pupilColor,
              position: "relative",
              willChange: "transform"
            }}
          >
            <span
              style={{
                position: "absolute",
                left: pupilSize * 0.2,
                top: pupilSize * 0.18,
                width: shineSize,
                height: shineSize,
                borderRadius: "999px",
                background: config.highlightColor,
                opacity: 0.8
              }}
            />
          </div>
        </div>
      ))}
    </div>
  );
}

Effect guide

Copy the googly eyes cursor effect

What it is: A playful pair of springy pupils that track the cursor inside soft eye sockets.

Where to use it: Use this motion pattern for launch pages, portfolios, playgrounds, and moments where pointer feedback should feel intentional.

Supported formats: React, Vue, Vanilla JS.

Get motion drops

New UI effects, code snippets, and GrabMotion updates by email.