r3f-pushback

name	r3f-pushback
description	Make React Three Fiber enemies flash white and rock back and forth when receiving damage.

Pushback

Make enemies flash white and rock back and forth when receiving damage.

Technique

Track pushback state with a direction vector and progress value. In useFrame, interpolate the position along the pushback direction using a back-and-forth curve, and change the material color to white during the effect.

Key Concepts

• Store pushback direction (dx, dy) and progress (0 to 1)
• Use a triangle wave for back-and-forth motion: t < 0.5 ? t * 2 : (1 - t) * 2
• Flash material color to white during pushback
• Reset to original position and color when complete
• Direction should be opposite to the damage source (player position)

Usage

const pushbackRef = useRef<{ dx: number; dy: number } | null>(null)
const pushbackProgress = useRef(0)

useFrame((_, delta) => {
  if (pushbackRef.current) {
    pushbackProgress.current += delta * 8
    material.color.set('white')

    const t = pushbackProgress.current
    const offset = t < 0.5 ? t * 2 : (1 - t) * 2
    mesh.position.x = baseX + pushbackRef.current.dx * offset
  }
})

---

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