useBarAnimator() — ui Function Reference

Architecture documentation for the useBarAnimator() function in elevenlabs.tsx from the ui codebase.

Function tsx ComponentRegistry ChartRegistry calls 2 called by 1

Entity Profile

ComponentRegistry→ ChartRegistry→ useBarAnimator() — ui Function Reference

Dependency Diagram

graph TD
  99e32cfe_6579_f8b1_789e_99248441897b["useBarAnimator()"]
  140880de_8350_c565_0d8f_48f12ee18f06["elevenlabs.tsx"]
  99e32cfe_6579_f8b1_789e_99248441897b -->|defined in| 140880de_8350_c565_0d8f_48f12ee18f06
  4f0ce0c3_b28f_faad_b08d_1c0dda7f7918["BarVisualizerComponent()"]
  4f0ce0c3_b28f_faad_b08d_1c0dda7f7918 -->|calls| 99e32cfe_6579_f8b1_789e_99248441897b
  ec6d4b45_391f_4ccc_848b_49464ab57f65["generateListeningSequenceBar()"]
  99e32cfe_6579_f8b1_789e_99248441897b -->|calls| ec6d4b45_391f_4ccc_848b_49464ab57f65
  11aebf9d_5575_b3e8_a220_4f425c7e896f["generateConnectingSequenceBar()"]
  99e32cfe_6579_f8b1_789e_99248441897b -->|calls| 11aebf9d_5575_b3e8_a220_4f425c7e896f
  style 99e32cfe_6579_f8b1_789e_99248441897b fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/bases/radix/blocks/elevenlabs.tsx lines 381–435

export const useBarAnimator = (
  state: AnimationState,
  columns: number,
  interval: number
): number[] => {
  const indexRef = useRef(0)
  const [currentFrame, setCurrentFrame] = useState<number[]>([])
  const animationFrameId = useRef<number | null>(null)

  // Memoize sequence generation
  const sequence = useMemo(() => {
    if (state === "thinking" || state === "listening") {
      return generateListeningSequenceBar(columns)
    } else if (state === "connecting" || state === "initializing") {
      return generateConnectingSequenceBar(columns)
    } else if (state === undefined || state === "speaking") {
      return [new Array(columns).fill(0).map((_, idx) => idx)]
    } else {
      return [[]]
    }
  }, [state, columns])

  useEffect(() => {
    indexRef.current = 0
    setTimeout(() => {
      setCurrentFrame(sequence[0] || [])
    }, 0)
  }, [sequence])

  useEffect(() => {
    let startTime = performance.now()

    const animate = (time: DOMHighResTimeStamp) => {
      const timeElapsed = time - startTime

      if (timeElapsed >= interval) {
        indexRef.current = (indexRef.current + 1) % sequence.length
        setCurrentFrame(sequence[indexRef.current] || [])
        startTime = time
      }

      animationFrameId.current = requestAnimationFrame(animate)
    }

    animationFrameId.current = requestAnimationFrame(animate)

    return () => {
      if (animationFrameId.current !== null) {
        cancelAnimationFrame(animationFrameId.current)
      }
    }
  }, [interval, sequence])

  return currentFrame
}