# Tone Pad

> A token-driven 2D tone XY pad — a heatmap-tinted Formal–Casual by Concise–Verbose plane with a springy gradient dot driven by pointer-captured drag and arrow keys, a live tabular readout, crosshair guides, localStorage persistence, and a `getTone`/`setTone` API — themed by AI Steppers.

- Category: Input
- Frameworks: Vanilla, React + CSS, React + Tailwind
- Design system: Sunset Coast
- Dark mode: yes
- Access: premium (Atheros AI Pass)
- Tags: slider
- Page: https://builder.atheros.ai/components/tone-pad
- Preview: https://d17nmjscumqk5d.cloudfront.net/builder/templates/tpl_builder_tone_pad/preview-9315352263ab.webp

## Features

- Bare centered XY pad with a small on-brand title group — no panel card or button chrome
- 2D tone plane: horizontal Formal–Casual axis and vertical Concise–Verbose axis
- Corner heatmap tints painted from the brand gradient ends, accent, and primary via `color-mix`
- Unified Pointer Events (`pointerdown`/`move`/`up`) with `setPointerCapture` — mouse, pen, and touch share one code path with no lost drags
- Springy gradient dot that scales up on press via a `cubic-bezier(0.34, 1.36, 0.64, 1)` transform, with a glow ring that swells while dragging
- Click or tap anywhere on the pad to jump the dot straight to that point
- Cached bounding rect re-measured on resize, scroll, and `document.fonts.ready` so fast drags never drift
- Live value readout below the pad — two axis keywords with tabular-numeral percentages
- Crosshair guides that fade in while dragging, transform-centered on the dot
- Quadrant edge labels that emphasize the nearest keyword as the dot crosses each midline
- Keyboard control: Arrow keys nudge in 2% steps, Shift+Arrow for 10% jumps, Home recenters, End snaps to the nearest corner
- `role="slider"` with live `aria-valuetext` narration and an `aria-live` status region that announces the settled tone
- `getTone()` / `setTone(x, y)` public API on `window`, plus `localStorage` persistence across reloads
- Active drag state paints the pad border with the brand two-color gradient
- Dark mode that flips the gradient (pink→blue light, violet→teal dark)
- Responsive layout that adapts down to 320px
- Fully respects `prefers-reduced-motion`

## Accessibility

- **Slider semantics** — Pad carries `role="slider"` with `aria-valuemin`, `aria-valuemax`, and `aria-valuenow`
- **Value narration** — `aria-valuetext` announces both axes ("Casual 72%, Verbose 60%") on every change
- **Settled-value announcements** — A visually hidden `role="status"` `aria-live="polite"` region announces "Tone: …" when a drag ends or a keyboard nudge settles (debounced 240ms)
- **Keyboard control** — Arrow keys move the dot in 2% steps; Shift+Arrow jumps 10%; Home recenters; End snaps to the nearest corner
- **Focusable pad** — `tabindex="0"` with a visible `:focus-visible` outline in the primary color
- **Accessible name** — Explicit `aria-label` explains drag, tap, and arrow-key operation
- **Decorative layers** — Background glow layer, guides, and readout marked `aria-hidden="true"` (readout values are mirrored by aria-valuetext); dot and labels are `pointer-events: none`
- **Reduced motion** — `prefers-reduced-motion: reduce` collapses all transitions

## Keyboard shortcuts

- `ArrowLeft` — Move tone 2% toward Formal (10% with Shift)
- `ArrowRight` — Move tone 2% toward Casual (10% with Shift)
- `ArrowUp` — Move tone 2% toward Concise (10% with Shift)
- `ArrowDown` — Move tone 2% toward Verbose (10% with Shift)
- `Home` — Recenter the dot to 50/50
- `End` — Snap the dot to the nearest corner
- `Tab` — Move focus to the pad

## Common questions

**Which frameworks is Tone Pad available in?**

Tone Pad ships as Vanilla, React + CSS and React + Tailwind — HTML, CSS, JS and React source you can copy, download or clone into Atheros AI Builder.

**Is the Tone Pad input component free?**

Tone Pad is a premium component. Anyone can preview it; the source, downloads and AI customisation are included with Atheros AI Pass.

**Does Tone Pad support dark mode?**

Yes. Tone Pad ships light and dark themes, both drawn from the Sunset Coast design system's tokens. Switch the preview to dark mode to compare them.

## Get the code

Preview Tone Pad live, then sign in to copy or download the source, apply another design system, or ask the AI assistant to change it: https://builder.atheros.ai/components/tone-pad

Every component on https://builder.atheros.ai is also reachable from Claude Code, Cursor and Codex through the Atheros MCP server (paid plans). Component index: https://builder.atheros.ai/llms-components.txt