r3f-smooth-interpolation

name	r3f-smooth-interpolation
description	Animate React Three Fiber values smoothly using exponential decay instead of linear interpolation.

Smooth Interpolation

Animate values smoothly using exponential decay instead of linear interpolation.

Technique

Use exponential smoothing formulas to interpolate between current and target values. This creates a natural easing effect that's frame-rate independent.

Key Concepts

• Exponential smoothing: (target - current) * (1 - Math.exp(-speed * dt))
• Exponential decay: target + (current - target) * Math.exp(-decay * dt)
• Both formulas produce the same result with different parameters
• Speed/decay values from 1-25 work well
• Frame-rate independent due to delta time usage

Usage

const addSmoothExp = (current: number, target: number, speed: number, dt: number) =>
  (target - current) * (1 - Math.exp(-speed * dt))

const expDecay = (current: number, target: number, decay: number, dt: number) =>
  target + (current - target) * Math.exp(-decay * dt)

useFrame((_, delta) => {
  mesh.position.x += addSmoothExp(mesh.position.x, targetX, 3, delta)
  // or
  mesh.position.x = expDecay(mesh.position.x, targetX, 3, delta)
})

References

• Exponential Smoothing
• Lerp Smoothing is Broken

---

This skill is part of verekia's r3f-gamedev.