CPU (Main Thread)
├── Parse HTML/CSS
├── JavaScript execution
├── Layout calculation
├── Paint individual layers
└── ⬇️ Send to GPU

GPU (Compositor Thread)
├── Composite layers
└── Display on screen

Without layers:
- Every change repaints entire area
- Slow animations
- Main thread blocking

With layers:
- Independent repainting
- GPU-accelerated
- 60fps animations
- Non-blocking

Elements get their own layer when:
1. 3D transforms (translateZ, rotate3d)
2. will-change: transform, opacity
3. `<video>` and `<canvas>` elements
4. CSS filters
5. opacity < 1 with positioned children
6. Fixed positioning
7. Overflow scroll

/* Force layer with translateZ */
.layer {
  transform: translateZ(0);
}

/* Or with will-change */
.layer {
  will-change: transform;
}

/* Or with backface-visibility */
.layer {
  backface-visibility: hidden;
}

/* ✅ GOOD: Compositor-only (60fps) */
@keyframes slideIn {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.animated {
  animation: slideIn 0.3s ease-out;
}

/* ❌ BAD: Triggers layout + paint */
@keyframes slideInBad {
  from {
    left: -100px;
    background: red;
  }
  to {
    left: 0;
    background: blue;
  }
}

/* Element will animate */
.menu {
  will-change: transform;
}

/* Remove after animation */
.menu.animated {
  will-change: auto;
}

/* ❌ BAD: Everything has will-change */
* {
  will-change: transform, opacity;
}

/* ✅ GOOD: Only animated elements */
.modal {
  will-change: transform;
}
.dropdown {
  will-change: transform;
}

function AnimatedComponent() {
  const [animating, setAnimating] = useState(false);

  return (
    <div
      style={{
        willChange: animating ? 'transform' : 'auto',
        transform: animating ? 'scale(1.2)' : 'scale(1)',
      }}
      onMouseEnter={() => setAnimating(true)}
      onMouseLeave={() => setAnimating(false)}
    >
      Hover me
    </div>
  );
}

1. Open DevTools
2. Layers tab
3. Click elements to see:
   - Layer count
   - Memory usage
   - Paint count
   - Compositing reasons

DevTools → Rendering → Layer borders
- Blue lines: Layer boundaries
- Orange: Tile boundaries

/* Elements that animate frequently */
.video-player {
  will-change: transform;
}

.loading-spinner {
  will-change: transform;
}

.modal-overlay {
  will-change: opacity;
}

/* Separate layer for complex shadow */
.card::after {
  content: '';
  position: absolute;
  inset: -10px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  transform: translateZ(0);
  z-index: -1;
}

/* Fixed elements automatically get layers */
.sticky-header {
  position: fixed;
  top: 0;
  /* Already on separate layer */
}

/* Create layer for smooth scrolling */
.scroll-container {
  overflow-y: scroll;
  will-change: scroll-position;
}

// Check layer count
function checkLayers() {
  const promotedElements = document.querySelectorAll('[style*="will-change"]');
  console.log('Manual layers:', promotedElements.length);
  
  // Warning threshold
  if (promotedElements.length > 50) {
    console.warn('Too many layers! Reduce will-change usage.');
  }
}

// Monitor memory
if (performance.memory) {
  console.log('Used JS Heap:', (performance.memory.usedJSHeapSize / 1048576).toFixed(2), 'MB');
  console.log('Total JS Heap:', (performance.memory.totalJSHeapSize / 1048576).toFixed(2), 'MB');
}

Recommended limits:
- Desktop: 50-100 layers max
- Mobile: 20-30 layers max
- Each layer: ~100KB-1MB memory

Balance:
- Too few: Expensive repaints
- Too many: Memory issues, GPU overhead

/* BAD: Everything on GPU */
* {
  transform: translateZ(0);
}

/* BAD: Unnecessary nesting */
.parent {
  will-change: transform;
}
.child {
  will-change: transform; /* Redundant */
}

/* BAD: Always hints GPU */
.element {
  will-change: transform;
}

/* GOOD: Only during animation */
.element.animating {
  will-change: transform;
}

/* Force 3D context */
.accelerated {
  transform: translate3d(0, 0, 0);
  /* or */
  transform: translateZ(0);
}

/* Smooth 3D transforms */
.card {
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

/* 3D flip animation */
@keyframes flip {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(180deg);
  }
}

.flip-card {
  animation: flip 0.6s ease-in-out;
  transform-style: preserve-3d;
}

Promote:
✅ Frequently animated elements
✅ Fixed/sticky positioning
✅ Video/canvas elements
✅ Scrolling containers

Don't Promote:
❌ Static content
❌ Rarely changing elements
❌ Everything "just in case"

function Modal({ isOpen }: Props) {
  return (
    <div
      style={{
        willChange: isOpen ? 'transform, opacity' : 'auto',
        transform: isOpen ? 'scale(1)' : 'scale(0.9)',
        opacity: isOpen ? 1 : 0,
      }}
    >
      Modal content
    </div>
  );
}

// Check if too many layers
function auditLayers() {
  const layers = {
    willChange: document.querySelectorAll('[style*="will-change"]').length,
    translateZ: document.querySelectorAll('[style*="translateZ"]').length,
    fixed: document.querySelectorAll('[style*="position: fixed"]').length,
  };
  
  console.table(layers);
  
  const total = Object.values(layers).reduce((a, b) => a + b, 0);
  if (total > 50) {
    console.warn('Too many layers:', total);
  }
}

Compositor-only (cheapest):
- transform: translate, scale, rotate
- opacity

Paint (medium cost):
- color, background-color
- box-shadow, text-shadow

Layout (most expensive):
- width, height
- padding, margin
- top, left, right, bottom

.button {
  transition: transform 0.2s ease-out;
  will-change: transform;
}

.button:hover {
  transform: scale(1.05);
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.spinner {
  animation: spin 1s linear infinite;
  will-change: transform;
}

.modal {
  transition: transform 0.3s, opacity 0.3s;
  will-change: transform, opacity;
}

.modal.visible {
  transform: scale(1);
  opacity: 1;
}

.modal.hidden {
  transform: scale(0.9);
  opacity: 0;
}

function ParallaxBackground() {
  const [offsetY, setOffsetY] = useState(0);

  useEffect(() => {
    const handleScroll = () => {
      requestAnimationFrame(() => {
        setOffsetY(window.scrollY * 0.5);
      });
    };

    window.addEventListener('scroll', handleScroll, { passive: true });
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  return (
    <div
      style={{
        transform: `translateY(${offsetY}px)`,
        willChange: 'transform',
      }}
    >
      Background image
    </div>
  );
}

DevTools → Layers tab → Select layer
Shows why element was promoted:
- "has a will-change hint for a property"
- "has a 3D transform"
- "is a fixed position element"
- "has a CSS animation"

DevTools → Rendering → Paint flashing
- Green: Repainted area
- Should be minimal for animated elements

DevTools → Rendering → Frame Rendering Stats
Shows:
- Current FPS
- GPU memory usage
- Frame time