v152 · capabilities · performance · CSS

Adaptive Animation

Read navigator.cpuPerformance on load and pick an animation preset that fits the device's capabilities. Low-tier devices get no motion; mid-tier gets simple transitions; high-tier gets the full particle show.

Checking CPU Performance API…

live demo

Detected tier: — (click a button to override)

Simulate tier:
Tier— Motion— Animation type— CSS used— Rationale—

code

// Read the tier on page load (Chrome 152+)
const measuredTier = typeof navigator.cpuPerformance === 'number'
  ? navigator.cpuPerformance
  : 1; // fallback to tier 1 if unsupported
const tier = window.matchMedia('(prefers-reduced-motion: reduce)').matches
  ? 0
  : measuredTier;

function pickAnimationPreset(tier) {
  if (tier === 0) return { motion: 'none',     css: 'animation: none' };
  if (tier === 1) return { motion: 'minimal',  css: 'animation: fade-pulse 2s ease-in-out infinite' };
  if (tier === 2) return { motion: 'standard', css: 'animation: slide-loop 3s ease-in-out infinite' };
  if (tier === 3) return { motion: 'rich',     css: 'animation: orbit 4s linear infinite' };
  return              { motion: 'full',     css: 'particles: 20 + blur + scale' };
}

const preset = pickAnimationPreset(tier);

// Apply to your component
const hero = document.querySelector('.hero');
hero.dataset.animationPreset = preset.motion;

// The CSS then responds to the data-attribute:
// [data-animation-preset="minimal"] .hero-icon { animation: fade-pulse 2s ... }
// [data-animation-preset="none"]    .hero-icon { animation: none }

// Prefer-reduced-motion is still respected regardless of tier:
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
  hero.dataset.animationPreset = 'none';
}

see also