Agent-Skills.md

Agent Skills: Damage Numbers

Display floating damage numbers that animate upward and fade out, with support for critical hits.

UncategorizedID: verekia/r3f-gamedev/damage-numbers

Repository

verekia/r3f-gamedev
verekiaLicense: MIT
29

Install this agent skill to your local

pnpm dlx add-skill https://github.com/verekia/r3f-gamedev/tree/HEAD/skills/damage-numbers

Skill Files

Browse the full folder contents for damage-numbers.

Download Skill

Loading file tree…

skills/damage-numbers/SKILL.md

Skill Metadata

Name
damage-numbers
Description
Display floating damage numbers that animate upward and fade out, with support for critical hits.

Damage Numbers

Display floating damage numbers that animate upward and fade out, with support for critical hits.

Technique

Use Drei's Html component to render DOM elements in 3D space. Manage damage numbers in React state, spawn them with random positions, and use CSS animations for the floating/fading effect.

Key Concepts

  • Html from @react-three/drei for DOM-in-3D rendering
  • Track damages in state with unique IDs for keying
  • Use setTimeout to remove damages after animation completes
  • CSS keyframe animations for movement and opacity
  • Critical hits can have different styling (larger text, "CRIT" label)

Usage

<Html center position={[damage.x, damage.y, 0]}>
  <div style={{ animation: 'damageNumber 1.3s ease-out forwards' }}>{damage.value}</div>
</Html>

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