AthenaHeracles
Roving Focus
A grouped control that takes one tab stop and moves internally by arrow key, with the active tabindex reported live.
Learning value: 5 of 5
Chamber 03
Athena
UI Elements & Components
Atomic craft that survives real interaction, real state, and real accessibility pressure.
Disciplined intelligence at the component level. Buttons, navigation, loaders, cursors, forms, command palettes, and data displays that remain excellent under load.
Instrument · component bench
10 entries · 9 run live
Lead exhibit · learning 5/5
- Roving FocusHeraclesA grouped control that takes one tab stop and moves internally by arrow key, with the active tabindex reported live.
- Weighted EasingAchillesA staggered reveal with its timeline exposed as a scrubbable value, so stagger stops being a feeling and becomes a number.
- Reduced Motion ContractPenelopeOne honest global switch — system preference plus user override — that every animation layer already reads.
- The Aristeia ScaleHectorSix steps with deliberate holes in the middle, set in themselves, plus a measure comparison that shows where reading breaks.
- Weighted PressAchillesA button whose six states were designed together, with an asymmetric press that gives the control apparent mass.
- Command Palette CraftHectorRetrieval without leaving the keyboard — grouped, scored, with recent-first ordering held in sessionStorage.
- Continuity SwapCirceOne persistent marker interpolated between two authored positions, with a cut mode beside it that shows exactly what continuity buys.
- Field Validation StatesHectorOne field in four designed states, with a live instance whose validation waits until the user has actually said something.
- Focus-Visible ContractPenelopeOne ring treatment for the whole app — never removed, never replaced by colour alone, always :focus-visible.
- Measure and RhythmHectorLive axes for weight, optical size, and measure — type reviewed as a specimen, not a screenshot of a specimen.