Tone Pad
AI Pass+input#slider
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.
Input component
About 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.
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) withsetPointerCapture— 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.readyso 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 livearia-valuetextnarration and anaria-livestatus region that announces the settled tonegetTone()/setTone(x, y)public API onwindow, pluslocalStoragepersistence 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"witharia-valuemin,aria-valuemax, andaria-valuenow - Value narration
aria-valuetextannounces 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-visibleoutline in the primary color- Accessible name
- Explicit
aria-labelexplains 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 arepointer-events: none - Reduced motion
prefers-reduced-motion: reducecollapses all transitions
Customise it with AI
Open Tone Pad in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the input 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
Confidence Meter
VanillaReact
A five-block confidence threshold meter backed by native radio inputs — click a block or drag across the meter to snap the threshold, watch the brand gradient update while a quiet crossfading readout follows — themed by the AI Steppers design system in both light and dark.
#input#slider
Temperature Range
VanillaReact
A bare token-driven five-stop temperature slider from 0.0 Precise to 1.0 Creative with a gradient fill, snapping draggable thumb, clickable stops, and a rolling gradient digit readout — themed by the AI Steppers design system in both light and dark.
#input#slider#range
Select
VanillaReact
Three token-driven listbox fields — single-select, multi-select with a Select all row, and a searchable multi-select — each a button trigger paired with a popup listbox, with full keyboard navigation, type-ahead, dark mode, and a responsive grid.
#input#combobox#multi-select
Quality Score
VanillaReact
A bare token-driven quality rating input — five ascending bars fill with the brand gradient up to the chosen score, native radio semantics, hover preview, Poor→Excellent hints, and a visible gradient readout backed by a polite live region — themed by the AI Steppers design system.
#input
Model Select
ReactVanilla
A bare token-driven custom select for picking an AI model — a checkbox-toggled dropdown with a gradient-ringed trigger, colored brand dots per model, staggered option reveal, backdrop click-away, and full keyboard support — themed by the AI Steppers design system in both light and dark.
#input#select#dropdown
Context Picker
ReactVanilla
A bare token-driven context window size picker — a radiogroup of six options (4K, 16K, 32K, 128K, 256K, 1M tokens) where each option stacks miniature page bars that light up with the brand gradient when selected — themed by the AI Steppers design system in both light and dark.
#input#radio
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
