✨(frontend) add a pulsing effect when a participant is speaking

Inspired by Gmeet animation (mine is far from perfect).

Some details should be improved, especially to have a smooth
animation stop when the user stops speaking.

src/frontend/panda.config.ts

@@ -58,6 +58,11 @@ const config: Config = {
         },
       },
       fade: { from: { opacity: 0 }, to: { opacity: 1 } },
+      pulse: {
+        '0%': { boxShadow: '0 0 0 0 rgba(255, 255, 255, 0.7)' },
+        '75%': { boxShadow: '0 0 0 30px rgba(255, 255, 255, 0)' },
+        '100%': { boxShadow: '0 0 0 0 rgba(255, 255, 255, 0)' },
+      },
     },
     tokens: defineTokens({
       /* we take a few things from the panda preset but for now we clear out some stuff.

src/frontend/src/features/rooms/livekit/components/ParticipantPlaceholder.tsx

@@ -1,6 +1,7 @@
 import { Participant } from 'livekit-client'
 import { styled } from '@/styled-system/jsx'
 import { Avatar } from '@/components/Avatar'
+import { useIsSpeaking } from '@livekit/components-react'
 
 const StyledParticipantPlaceHolder = styled('div', {
   base: {
@@ -20,9 +21,18 @@ type ParticipantPlaceholderProps = {
 export const ParticipantPlaceholder = ({
   participant,
 }: ParticipantPlaceholderProps) => {
+  const isSpeaking = useIsSpeaking(participant)
+
   return (
     <StyledParticipantPlaceHolder>
-      <Avatar name={participant.name} />
+      <div
+        style={{
+          borderRadius: '50%',
+          animation: isSpeaking ? 'pulse 1s infinite' : undefined,
+        }}
+      >
+        <Avatar name={participant.name} />
+      </div>
     </StyledParticipantPlaceHolder>
   )
 }