Exécutez n'importe quel Skill dans Manus
en un clic

Exécutez n'importe quel Skill dans Manus en un clic

Commencer

r3f-damage-numbers

Étoiles1

Forks1

Mis à jour3 juin 2026 à 19:13

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

Installation

Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.

Exécuter dans Manus

Source

cyberpunga

cyberpunga/pungafighters

Ouvrir le dépôt GitHub Voir les dépôts du créateur

Téléchargement

Exécuter dans Manus

Métiers associésSOC

Basé sur la classification professionnelle SOC

Développeurs de logicielsProfessions informatiques et mathématiques·SOC 15-1252

SKILL.md

readonly

name	r3f-damage-numbers
description	Display React Three Fiber 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.

Plus depuis ce dépôt

même dépôt

r3f-camera-shake

cyberpunga/pungafighters

Use React Three Fiber camera shake when a player takes damage or on impacts for visual feedback.

2026-06-031

r3f-health-bars

cyberpunga/pungafighters

Display React Three Fiber health bars above characters using Drei Html and CSS styling.

2026-06-031

r3f-low-health

cyberpunga/pungafighters

Display a React Three Fiber pulsing red vignette overlay when the player's health is low.

2026-06-031

r3f-pushback

cyberpunga/pungafighters

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

2026-06-031

r3f-reactive-polling

cyberpunga/pungafighters

Poll for React Three Fiber value changes and trigger React re-renders when needed.

2026-06-031

r3f-smooth-interpolation

cyberpunga/pungafighters

Animate React Three Fiber values smoothly using exponential decay instead of linear interpolation.

2026-06-031

name	r3f-damage-numbers
description	Display React Three Fiber 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.