Jimmy's Study — Background Animations

— 09
Tilt Sphere

A 3D sphere tilts in real-time toward your cursor — move and watch it lean.
Source — EDIT & Copy Tilt Sphere CSS · JS
/* ============================================================ *
 * Tilt Sphere — 3D CSS sphere that leans toward your cursor
 * ============================================================ *
 * How it works:
 *   Build a sphere using CSS radial-gradients + inset box-shadows
 *   to simulate 3D shading. Place it inside a container with
 *   perspective. On mousemove, calculate the cursor's position
 *   relative to the stage center and convert it to rotateX /
 *   rotateY angles. The sphere tilts toward wherever the mouse
 *   is, creating a convincing 3D interaction.
 *
 * Key concepts:
 *   perspective         — sets the 3D viewing distance for children
 *   transform-style: preserve-3d — lets child elements exist in 3D space
 *   rotateX / rotateY  — tilt around the X (horizontal) and Y (vertical) axes
 *   radial-gradient     — simulates 3D lighting on a 2D circle
 *   inset box-shadow    — adds depth (dark on the far side, light near)
 *   rAF throttling      — coalesces mousemove events to one per frame
 * ============================================================ */

/* --- 3D perspective container --- */
.tilt-3d {
  perspective: 800px;        /* viewing distance: smaller = more dramatic */
  perspective-origin: 50% 45%;  /* eye position relative to the element */
}

/* --- Inner wrapper: JS controls rotation here --- */
.tilt-inner {
  transform-style: preserve-3d;  /* children live in 3D space */
  transform: rotateX(0deg) rotateY(0deg);
  transition: transform 0.08s ease-out;  /* slight smoothing */
  will-change: transform;
}

/* --- The sphere: radial gradient simulates 3D lighting --- */
.sphere {
  width: 28vmin; height: 28vmin;
  border-radius: 50%;
  background: radial-gradient(
    circle at 35% 32%,              /* light source offset from center */
    lighter-color 0%,                /* highlight */
    mid-color 35%,
    dark-color 100%                   /* shadow on the far edge */
  );
  box-shadow:
    inset -8px -12px 30px rgba(0,0,0,0.35),   /* inner shadow: depth */
    inset 6px 6px 20px rgba(255,255,255,0.12); /* inner glow: curvature */
}

/* --- Specular highlight: the bright spot that sells the 3D look --- */
.sphere-highlight {
  position: absolute;
  top: 8%; left: 18%;
  width: 35%; height: 30%;
  border-radius: 50%;
  background: radial-gradient(
    circle at 40% 40%,
    rgba(255,255,255,0.5) 0%, transparent 70%);
  filter: blur(4px);
}

/* --- Orbiting rings at different Z depths --- */
.sphere-ring--1 {
  transform: rotateX(75deg) translateZ(10px);   /* tilted + forward */
  animation: ring-spin1 12s linear infinite;
}
@keyframes ring-spin1 {
  to { transform: rotateX(75deg) rotateZ(360deg) translateZ(10px); }
}

// ---- Mouse tracking (JavaScript) ----
const MAX_TILT = 45;  // maximum degrees of tilt

function onMove(e) {
  const rect = stage.getBoundingClientRect();
  const cx = rect.width / 2;
  const cy = rect.height / 2;

  // Normalize mouse position to -1..1 relative to center
  const nx = (e.clientX - rect.left - cx) / cx;
  const ny = (e.clientY - rect.top - cy) / cy;

  // Clamp to [-1, 1] and apply max tilt
  const rotY = Math.max(-1, Math.min(1, nx)) * MAX_TILT;  // left/right
  const rotX = Math.max(-1, Math.min(1, -ny)) * MAX_TILT;  // up/down

  tiltInner.style.transform =
    'rotateX(' + rotX + 'deg) rotateY(' + rotY + 'deg)';
}

// rAF throttling: coalesce multiple mousemove events into
// one per animation frame for smooth, jank-free performance
let rafId = null;
stage.addEventListener('mousemove', (e) => {
  if (rafId) return;
  rafId = requestAnimationFrame(() => {
    rafId = null;
    onMove(e);
  });
});

// Return to center when the mouse leaves
stage.addEventListener('mouseleave', () => {
  tiltInner.style.transform = 'rotateX(0deg) rotateY(0deg)';
});