SkillsAdd

smithery/verekia

damage-numbers

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

Installation

$ npx skills add smithery/verekia --skill damage-numbers
View on skills.sh ↗ Website ↗

Similar popular skills

Related neighbors and high-traction skills in the same topics — useful to compare before installing.

phone-numbers Similar name
zavudev/zavu-skills

Search, purchase, and manage phone numbers with regulatory compliance and sender assignment.

209 installs
twilio-numbers-senders Similar name
twilio/ai

Choose the right Twilio number type and sender BEFORE building. Covers phone numbers (local, to…

147 installs
sinch-numbers-api Similar name
sinch/skills

Search, rent, manage, and release phone numbers with the Sinch Numbers API. Use when listing ac…

146 installs
sinch-imported-numbers-hosting-orders Similar name
sinch/skills

Import, host, qualify, and text-enable phone numbers for Sinch SMS using the Imported Numbers a…

133 installs

Also in this package

Other skills from smithery/verekia · top by installs.

npx skills add smithery/verekia
weapon-trail 0 verekia-setup 0 verekia-architecture 0 smooth-interpolation 0 reactive-polling 0 r3f-setup 0 pushback 0 miniplex 0 low-health 0 koota 0

Browse all from smithery/verekia

More details

Agent compatibility

Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.

Claude Code Not declared
Cursor Not declared
Codex Not declared
GitHub Copilot Not declared
Windsurf Not declared
Gemini CLI Not declared
Cline Not declared
OpenCode Not declared

Package contents

Files included with this skill beyond the listing page.

  • skill md SKILL.md 1,066 B
  • docs SUMMARY.md 119 B

History

  1. First recorded snapshot · 0 installs

SKILL.md

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.