♻️(frontend) make active speaker keyframe relative to height

Keyframe can now be reused in various context, when the children
size are not fixed to 4px.

src/frontend/panda.config.ts

@@ -64,16 +64,16 @@ const config: Config = {
         '100%': { boxShadow: '0 0 0 0 rgba(255, 255, 255, 0)' },
       },
       active_speaker: {
-        '0%': { height: '4px' },
-        '25%': { height: '8px' },
-        '50%': { height: '6px' },
-        '100%': { height: '16px' },
+        '0%': { height: '25%' },
+        '25%': { height: '45%' },
+        '50%': { height: '20%' },
+        '100%': { height: '55%' },
       },
       active_speaker_small: {
-        '0%': { height: '4px' },
-        '25%': { height: '6px' },
-        '50%': { height: '4px' },
-        '100%': { height: '8px' },
+        '0%': { height: '20%' },
+        '25%': { height: '25%' },
+        '50%': { height: '18%' },
+        '100%': { height: '25%' },
       },
       wave_hand: {
         '0%': { transform: 'rotate(0deg)' },