Environment Switcher
environment-switcher
A presentation + control surface for choosing the environment an app targets (dev / staging / production, regions, preview branches). Current-environment trigger opens a searchable, fully keyboard-navigable listbox with per-environment status/health, region/branch/version/last-deploy, disabled reasons, recents + favorites, and optional groups. Production switches are icon + label marked (never color alone) and can be gated behind a confirmation dialog. Controlled value/onValueChange with app-owned switching + error/retry. It never mutates a backend.
More from @motiq
Radix Accordion with Motion height/opacity reveal and a rotating chevron. Single/multiple modes, keyboard, and disabled state preserved. Reduced-motion safe.
Radix Dialog with Motion enter/exit choreography (scale, slide-up, fade). Preserves portal, focus trap, Esc, and overlay. Reduced-motion safe.
Two inline-SVG animated icons — AnimatedArrow (nudge) and AnimatedCopy (copy-to-check swap) — triggered on hover, tap, focus, or mount. Decorative and inherit their label from a parent control. Reduced-motion safe.
Radix Tabs with a Motion layoutId sliding active indicator and cross-faded, direction-aware content. Keyboard and roles preserved. Reduced-motion safe.
A headline where reading emphasis physically travels through the copy: an activation front sweeps in reading order and author-marked <em> phrases ignite into a persistent designed underline treatment. SSR/no-JS/reduced-motion render the final designed state.
Reveals text segment-by-segment with a de-blur and drift. Reduced-motion safe.
Cycles through phrases in place with slide or fade motion. Polite aria-live announces the current word, pauses on hover/focus, and keeps a stable layout. Reduced-motion safe.
A real button with press-scale feedback and accessible loading (aria-busy + polite spinner) and success states. Solid, outline, and ghost variants. Reduced-motion safe.