useBarAnimator() — ui Function Reference

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

Function tsx ComponentRegistry UIPrimitives calls 2 called by 1

Entity Profile

ComponentRegistry→ UIPrimitives→ useBarAnimator() — ui Function Reference

Dependency Diagram

graph TD
  59e15c16_c47d_dcd9_417a_4962ff2a5a1a["useBarAnimator()"]
  a1a6ebaf_3f49_5bb2_b404_b9f06dce2cab["elevenlabs.tsx"]
  59e15c16_c47d_dcd9_417a_4962ff2a5a1a -->|defined in| a1a6ebaf_3f49_5bb2_b404_b9f06dce2cab
  f7c88c80_61a2_5745_3423_ce9c217de6c5["BarVisualizerComponent()"]
  f7c88c80_61a2_5745_3423_ce9c217de6c5 -->|calls| 59e15c16_c47d_dcd9_417a_4962ff2a5a1a
  37f4e196_5941_fb94_90cf_ecd3f4694296["generateListeningSequenceBar()"]
  59e15c16_c47d_dcd9_417a_4962ff2a5a1a -->|calls| 37f4e196_5941_fb94_90cf_ecd3f4694296
  5bc63519_6856_0014_dbe5_d639d3ac1fe2["generateConnectingSequenceBar()"]
  59e15c16_c47d_dcd9_417a_4962ff2a5a1a -->|calls| 5bc63519_6856_0014_dbe5_d639d3ac1fe2
  style 59e15c16_c47d_dcd9_417a_4962ff2a5a1a fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/bases/base/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
}