silphius/app/react/components/dom/damage.module.css

@property --hue {
  initial-value: 0;
  inherits: false;
  syntax: '<number>';
}
@property --opacity {
  initial-value: 0;
  inherits: false;
  syntax: '<number>';
}
@property --scale {
  initial-value: 0;
  inherits: false;
  syntax: '<number>';
}
@property --shimmer {
  initial-value: '';
  inherits: false;
  syntax: '<custom-ident>';
}
@property --offsetX {
  initial-value: 0;
  inherits: false;
  syntax: '<number>';
}
@property --offsetY {
  initial-value: 0;
  inherits: false;
  syntax: '<number>';
}
@property --randomnessX {
  initial-value: 0;
  inherits: false;
  syntax: '<number>';
}
@property --randomnessY {
  initial-value: 0;
  inherits: false;
  syntax: '<number>';
}

.damage {
  --hue: 0;
  --opacity: 0.75;
  --randomnessX: 0;
  --randomnessY: 0;
  --scale: 0.35;
  --background: hsl(var(--hue) 100% 12.5%);
  --foreground: hsl(var(--hue) 100% 50%);
  animation:
    fade 1.5s linear forwards,
    grow 1.5s ease-in forwards,
    move 1.5s cubic-bezier(0.5, 1, 0.89, 1),
    var(--shimmer) 300ms infinite cubic-bezier(0.87, 0, 0.13, 1)
  ;
  color: var(--foreground);
  font-size: calc(10px + (var(--magnitude) * 12px));
  opacity: var(--opacity);
  overflow-wrap: break-word;
  position: absolute;
  margin: 0;
  text-shadow:
    0px -1px 0px var(--background),
    1px 0px 0px var(--background),
    0px 1px 0px var(--background),
    -1px 0px 0px var(--background),
    0px -2px 0px var(--background),
    2px 0px 0px var(--background),
    0px 2px 0px var(--background),
    -2px 0px 0px var(--background)
  ;
  scale: var(--scale);
  translate:
    calc(-50% + (1px * var(--offsetX)) + var(--positionX))
    calc(-50% + (1px * var(--offsetY)) + var(--positionY))
  ;
  user-select: none;
  p {
    margin: 0;
  }
}

@keyframes move {
  0% {
    --offsetX: 0;
    --offsetY: 0;
  }
  33%, 91.6% {
    --offsetX: calc(80 * var(--randomnessX));
    --offsetY: calc(-1 * (10 + var(--randomnessY) * 90));
  }
}

@keyframes fade {
  0% { --opacity: 0.75; }
  25% { --opacity: 1; }
  91.6% { --opacity: 1; }
  100% { --opacity: 0; }
}

@keyframes grow {
  0% { --scale: 0.35; }
  33% { --scale: 1; }
  45% { --scale: 1; }
  40% { --scale: 1.5; }
  45% { --scale: 1; }
  91.6% { --scale: 1; }
  95% { --scale: 0; }
}

@keyframes pain {
  0% { --hue: 0 }
  50% { --hue: 30 }
  100% { --hue: 0 }
}

@keyframes healing {
  0% { --hue: 120 }
  50% { --hue: 90 }
  100% { --hue: 120 }
}

@keyframes mana {
  0% { --hue: 220 }
  50% { --hue: 215 }
  100% { --hue: 220 }
}