60 FPS Spring Physics on the GPU Compositor

The mathematics and DOM lifecycle engineering behind Exhuma 3D Tilt Card: achieving silky-smooth kinetic responses with zero React layout thrashing.

8 min read
October 2026
Authored by Fleect
Performance
Spring Physics
Math

// 01SECTION 01

The Layout Thrashing Trap

Most naïve 3D tilt implementations trigger requestAnimationFrame loops that continuously query getBoundingClientRect() during mouse movements. Reading element geometries immediately before writing inline styles causes forced synchronous layout calculations—commonly called layout thrashing—which instantly drops frame rates from 60 FPS down to 24 FPS.

// 02SECTION 02

The 3D Perspective Mathematical Model

Exhuma calculates normalized pointer vectors relative to the center origin of the target container. Given pointer coordinates (x, y) and element boundaries (W, H), the rotation matrices are defined with zero trigonometric overhead:

physics.ts

typescript

// Normalized rotational physics calculation
const centerX = rect.width / 2;
const centerY = rect.height / 2;
const rotateX = ((y - centerY) / centerY) * -maxTilt;
const rotateY = ((x - centerX) / centerX) * maxTilt;

// Apply single GPU-composited 3D matrix transform
element.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale3d(1.04, 1.04, 1.04)`;

// 03SECTION 03

Direct GPU Compositor Scheduling

By isolating transforms strictly to transform and opacity with will-change: transform and transform-style: preserve-3d, modern browser rendering engines bypass the paint and reflow stages entirely, computing rotations directly on the GPU rasterization pipeline.

// 04SECTION 04

Honoring Accessibility & Reduced Motion

Performance without accessibility is a failure of craft. Exhuma components automatically detect window.matchMedia("(prefers-reduced-motion: reduce)"). When enabled by the user in their operating system, all rotational transforms collapse into a gentle, non-disorienting tactile opacity cue.

// Normalized rotational physics calculation const centerX = rect.width / 2; const centerY = rect.height / 2; const rotateX = ((y - centerY) / centerY) * -maxTilt; const rotateY = ((x - centerX) / centerX) * maxTilt; // Apply single GPU-composited 3D matrix transform element.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale3d(1.04, 1.04, 1.04)`;