feat: LiveKit OSS Shadcn Components 2

[thomasyuill-livekit]

Overview

This PR introduces a suite of new audio visualizer components to the @livekit/components-shadcn package, providing rich visual feedback for agent states in voice AI applications.

New Components

🎨 Audio Visualizers

Component	Description
AudioVisualizerRadial	Circular/radial bar visualization with animated state indicators
AudioVisualizerGrid	Grid-based dot matrix visualization with coordinate-based animations

🔧 Supporting Infrastructure

• Animation Hooks - useRadialAnimator and useGridAnimator for state-driven animation

Features

• Agent State Awareness - All visualizers respond to agent states: connecting, initializing, listening, thinking, speaking, disconnected
• Audio Reactivity - Volume-based animations using useMultibandTrackVolume and useTrackVolume hooks
• Size Variants - Consistent sizing across components: icon, sm, md, lg, xl
• Customizable - Configurable bar counts, colors, radii, line widths, and custom transformers
• Motion Integration - Smooth animations via motion/react library

Storybook

All new components include Storybook stories with interactive controls for testing different states, sizes, and configurations.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 02efd61

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[github-actions]

size-limit report 📦

Path	Size
LiveKitRoom only	6 KB (0%)
LiveKitRoom with VideoConference	32.46 KB (0%)
All exports	43.29 KB (0%)

[lukasIO]

thought: wondering if it's worth forking this as it's own package instead of having it live within the registry.

@thomasyuill-livekit I know we've discussed this on another PR already, but would be great to get the necessary fix upstreamed to the react-shaders repo

[thomasyuill-livekit]

I'm not against that, but I'd rather contribute back to https://github.com/rysana-ai/react-shaders but my concern is it hasn't been updated in 6 months, so it might be unmaintained. I'm not sure I want to hold up this PR to shepherd this through seeing as it's a significant update (I migrated it from a class component to a functional component).

If we forked it, would there be react-shader and livekit-react-shader?

If I can get this into https://github.com/rysana-ai/react-shaders, I believe we can remove the react-shader component at a later date and update our component dependencies. Old installs will already have the react-shader component, and old installs will get the new dependency.

[1egoman]

Just out of curiosity, what is actually the cause for needing to vendor react-shader and not depend on the published package? Is it that it's implemented as a class component? Or maybe that you are worried that it seems unmaintained?

I think out of the options proposed, I agree that I think a fork would probably be better than including the modified code as a shadcn component, since it is unlikely a user would need to further modify the code and it would be good for a user to be able to easily update to new versions.

[thomasyuill-livekit]

Just out of curiosity, what is actually the cause for needing to vendor react-shader

The shader fails when rendered dynamically in agent-starter-react. Though it works fine in storybook 🤷.
More interestingly, it seems to work when rendered after SSR, but throws a shader compilation error when rendered only on the client.

I've submitted a PR, let's see what happens
rysana-ai/react-shaders#3

Initially I converted the component to a functional component, but that didn't resolve the issue. Then I added a requestAnimationFrame around the initial draw call and the issue went away.

My initial PR just introduced the requestAnimationFrame (commit rysana-ai/react-shaders@20fa4d9), but further testing revealed that it did not resolve the issue. I brought over the migrated functional component and the issue was resolved.

[thomasyuill-livekit]

I don't see the harm in publishing our shadcn react-shader to unblock ourselves and later removing it for a reliable dependency (rysana/livekit).

Maybe I'm misunderstanding the nature of shadcn components

[1egoman]

nitpick(non-blocking): Maybe it's worth making a constant somewhere with all these values so it's easy to update across everything if we added a new one?

[thomasyuill-livekit]

Yeah, we should explore that in a future update. We should export it from livekit/components-js

[1egoman]

Just out of curiosity, what is actually the cause for needing to vendor react-shader and not depend on the published package? Is it that it's implemented as a class component? Or maybe that you are worried that it seems unmaintained?

I think out of the options proposed, I agree that I think a fork would probably be better than including the modified code as a shadcn component, since it is unlikely a user would need to further modify the code and it would be good for a user to be able to easily update to new versions.