Menu
Make React Three Fiber enemies flash white and rock back and forth when receiving damage.
Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.
Baseado na classificação ocupacional SOC
Use React Three Fiber camera shake when a player takes damage or on impacts for visual feedback.
Display React Three Fiber floating damage numbers that animate upward and fade out, with support for critical hits.
Display React Three Fiber health bars above characters using Drei Html and CSS styling.
Display a React Three Fiber pulsing red vignette overlay when the player's health is low.
Poll for React Three Fiber value changes and trigger React re-renders when needed.
Animate React Three Fiber values smoothly using exponential decay instead of linear interpolation.
| name | r3f-pushback |
| description | Make React Three Fiber enemies flash white and rock back and forth when receiving damage. |
Make enemies flash white and rock back and forth when receiving damage.
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.
dx, dy) and progress (0 to 1)t < 0.5 ? t * 2 : (1 - t) * 2const 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.