r3f-pushback - SKILL.md Agent Skill

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.