#988
Hear it
A sound toggle with volume, a profile picker (system, glass, brutalism, terminal) and a board of buttons that each play one cue.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Hear it" pattern (@codeatlasdev/ui demo #988, feedback/sound) in my app.
Call get_demo({ ids: ["#988"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Let people audition a sound profile before turning interface sound on in an app.
Keep these library parts, with the props and tokens the demo uses:
- Button, SegmentedControl from "@codeatlasdev/ui"
- SoundToggle, brutal, glass, sound, system, terminal from "@codeatlasdev/ui/sound"
Behaviour to keep:
- `<SoundToggle volume />` next to a `SegmentedControl` bound to the profile
- `$effect(() => sound.use(PROFILES[profile]))` pins the picked profile and `onDestroy` releases it
- A `role="group"` board of outlined small `Button` items, each with `sound={cue}` for one cue name
- The cues are `press`, `toggle-on`, `toggle-off`, `success`, `error`, `warning`, `open`, `close` and `tab`
Reduced motion: the demo handles it; keep that branch.
Keyboard: operable; keep the focus order and key handling.
Change only the copy and the data. Use the theme tokens (--ca-*), never raw colours. Library parts
- Button
@codeatlasdev/ui - SegmentedControl
@codeatlasdev/ui - SoundToggle
@codeatlasdev/ui/sound
How it is built
- `<SoundToggle volume />` next to a `SegmentedControl` bound to the profile
- `$effect(() => sound.use(PROFILES[profile]))` pins the picked profile and `onDestroy` releases it
- A `role="group"` board of outlined small `Button` items, each with `sound={cue}` for one cue name
- The cues are `press`, `toggle-on`, `toggle-off`, `success`, `error`, `warning`, `open`, `close` and `tab`
Related
Loading source.