Repository navigation
Conversation
…e visualizers The visualizers take any CSS color for `color`, including theme variables. Aura and Wave resolve it to RGB for their shaders and read it again when the page theme changes. With reduced motion, the visualizers hold still between states: the bar, grid, and radial sequences hold their first frame, Radial stops spinning, and Aura and Wave stop drifting and pulsing. They still follow the agent's voice while it speaks. Also lists `motion` as a registry dependency of Aura and Wave, which import it. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
🦋 Changeset detectedLatest commit: 07cba48 The changes in this PR will be included in the next version bump. This PR includes changesets to release 2 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
|
Contributor
size-limit report 📦
|
…ced motion - A color the browser can't use, such as an undefined theme variable, falls back to the default instead of inheriting the surrounding text color. Transparent colors fall back too. - The canvas conversion no longer returns a stale color when it can't parse one. - Aura's theme mode and color watch the same theme changes, and only theme attributes, not every attribute on <html> and <body>. - Turning on reduced motion mid-animation goes back to the first frame. - The reduced-motion media query is created once instead of on every frame. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…scoped themes - With reduced motion, Aura and Wave pause their shaders, which draw only when a uniform changes. `ReactShaderToy` takes `paused` for this, and time doesn't advance while paused. - ReactShaderToy ran two render loops once the canvas came into view, drawing every frame twice. Setup and visibility changes now schedule through one frame. - Theme colors are read again when a wrapper around the visualizer changes theme, not only <html>. - Aura's theme mode also follows a `dark` theme attribute and `color-scheme: dark`. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Aura and Wave rendered nothing when WebGL was unavailable or their shader failed to compile. ReactShaderToy now reports that through onUnsupported, and they show a still glow or a flat line in the same color instead. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…e-shader-color Aura and Wave now take their color from CSS: a text color class such as `text-primary`, or `color`, which sets the text color. A probe reads it through `color-mix(in srgb, currentColor ...)`, which every engine reports as 0–1 sRGB, and reads it again on `transitionend`, so theme changes follow without watching the DOM. Alpha is ignored. Removes the use-shader-color hook and registry item, and returns Aura's theme mode to following the `dark` class only. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
- Set the color probe's transition as important, so theme switchers that turn transitions off (next-themes' disableTransitionOnChange) don't leave Aura and Wave on the old color - Keep the probe's transitionend from bubbling to handlers around it - Keep a text color passed through `style` when `color` isn't set - Redraw a paused shader after it resizes, which clears the canvas - Redraw a paused shader only when its uniform values change and it's on screen, not on every render Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This branch was successfully deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Ticket
https://linear.app/livekit/issue/DE-210/agents-ui-theme-colors-and-reduced-motion-in-the-audio-visualizers
Context / reason for change
The audio visualizers only take hex colors, so they can't follow an app's theme: a color picked for light mode stays the same in dark mode. They also animate constantly with no regard for the system's reduced-motion setting.
Summary of changes
colortakes any CSS color on all five visualizers, including theme variables likevar(--primary). Bar, Grid, and Radial already passed it to CSS, so only their types changed.currentColor. Set it with a text color class such astext-primary, or withcolor, which sets the text color. A hidden probe reads it throughcolor-mix(in srgb, currentColor …), which every browser reports as 0–1 sRGB, and reads it again ontransitionend, so a theme variable follows light and dark mode without watching the DOM. The default color is unchanged. Alpha is ignored; setopacityon the visualizer instead.usePrefersReducedMotionhook tracks the setting.ReactShaderToytakespausedfor this.ReactShaderToyruns one render loop. It started a second loop once the canvas came into view, so Aura and Wave drew every frame twice.motionas a registry dependency. They already imported it, so installing them from the registry failed without it.ReactShaderToyreports this through a newonUnsupportedcallback.AgentChatTranscript's thinking indicator.display: nonecontainer until they remount.How to verify
View Storybook:
prefers-reduced-motion: reducein DevTools' Rendering panel. Bar inconnectingand Radial, Grid, Aura, and Wave inthinkinghold still. Turn it off and they animate again.open -a "Google Chrome" --args --disable-webgl). Aura shows a soft glow and Wave a flat line, in the theme color.Submitter checklist
🤖 Generated with Claude Code