Audio Wave
AI Pass+animation#wave
design.md
Preview
1280 px
AI Assistant
Grab the code for this component with a free account
Every free component’s full source, ready to copy or download, plus 30 monthly AI credits for Atheros AI routing to make it yours.
Code
Grab the code for this component with free account
Every free component's full source, ready to copy or download, plus 30 monthly AI credits for Atheros AI routing to make it yours.
Animation component
About Audio Wave
A DJ-deck audio wave visualizer — an inset LED window holds a multi-band spectrum, with a backlit play key, three speed keys, and an adjustable bar count.
Features
- Inset LED window with a 6–24 bar neon spectrum, thin bars, and a scanline texture drawn from tokens
- Three keyframe motion variants assigned cyclically with per-bar duration and delay jitter so the wave reads like music
- Solid backlit play key that flips between pause and play glyphs with the transport state
- Live deck readout: a pulsing LED dot and an uppercase Live / Standby status
- Three speed presets (0.5x, 1x, 2x) that retune the animation duration
- Fully respects
prefers-reduced-motion
Accessibility
- Status region
aria-live="polite"paragraph announces Live / Standby changes- Play toggle
<button>witharia-pressedand dynamicaria-label(Play/Pause)- Preset and speed tabs
- Mutually exclusive
aria-selectedtabs inside labeledrole="tablist"groups, with rovingtabindexand arrow-key navigation - Bar count
aria-livecount with a descriptivearia-labelannouncing the number of waves- Keyboard activation
- All actions use native buttons that respond to Enter and Space
- Focus indicators
:focus-visiblewith--ringoutline on all interactive elements- Reduced motion
prefers-reduced-motion: reducedisables all animations and transitions
Customise it with AI
Open Audio Wave in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the animation is regenerated against your tokens. Take the HTML, CSS, JS and React source with you, or pull it into your repo from Claude Code, Cursor or Codex over MCP.
Explore Other Components
View all
Dropdown Floating Button
VanillaReact
A floating action button that morphs into a dropdown quick-actions menu via GPU-composited `clip-path` animation — fully design-system agnostic.
#animation#button#clip-path
Pricing Cards
VanillaReact
A three-tier Atheros AI Builder pricing showcase with a highlighted "Most Popular" plan, monthly AI-credit badges, gradient gem icons, and a dark/light theme toggle — fully token-driven and design-system agnostic.
#pricing#cards
Radio Group
VanillaReact
A token-driven card-style radio group where selecting a card highlights it with a check indicator, built on native radios for inherent arrow-key navigation.
#checkbox#radio#cards
Spinner
VanillaReact
A token-driven loading panel with a dual-ring spinner, an indeterminate progress track, and a smooth transition to a success state — fully design-system agnostic.
#loader#spinner#loading
Classic Checkbox Group
VanillaReact
A minimal animated checkbox group rendered from a data array, with a drawn tick animation and a clean single-column list — fully token-driven and design-system agnostic.
#checkbox#form
Typewriter Button
VanillaReact
A button that erases its idle label character by character and types in a confirmation label, with a blinking cursor that tracks the end of the visible text and a gradient border that draws around the button on hover.
#button#clip-path#animation
Ready to build?
300+ production-ready components and Atheros AI models. Every paid plan includes access to the whole Atheros — AI Builder and Learning.
Starting at $9.9 per month, billed annually
