Model Picker Pill Switch
A model picker pill cycles Opus, Sonnet and Haiku: each name slides up into place while the four-point glyph spins a quarter turn and a soft accent ring pulses out from the pill.
Also known as: model selector animation, ai model picker css, model switcher pill, llm model dropdown.
HTML
<div class="aia-model-picker-pill" role="status" aria-label="Model picker">
<button class="aia-model-picker-pill-btn" type="button" aria-label="Choose model">
<svg class="aia-model-picker-pill-glyph" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2C12.6 7.6 16.4 11.4 22 12C16.4 12.6 12.6 16.4 12 22C11.4 16.4 7.6 12.6 2 12C7.6 11.4 11.4 7.6 12 2Z"/></svg>
<span class="aia-model-picker-pill-names" aria-hidden="true">
<span>Claude Opus</span>
<span>Claude Sonnet</span>
<span>Claude Haiku</span>
</span>
<svg class="aia-model-picker-pill-chev" viewBox="0 0 24 24" aria-hidden="true"><path d="M7 10l5 5 5-5"/></svg>
</button>
</div>CSS
.aia-model-picker-pill {
--c: var(--aia-color, #7c5cff);
font-size: var(--aia-size, 16px);
font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
line-height: 1.4;
--t: 6s;
display: grid;
place-items: center;
}
.aia-model-picker-pill-btn {
display: inline-flex;
align-items: center;
gap: 0.5em;
padding: 0.6em 0.8em 0.6em 0.75em;
border: 0;
border-radius: 99em;
font: inherit;
font-weight: 600;
color: inherit;
background: color-mix(in srgb, currentColor 5%, transparent);
box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 14%, transparent), 0 0 0 0 color-mix(in srgb, var(--c) 45%, transparent);
cursor: pointer;
animation: aia-model-picker-pill-ring calc(var(--t) / 3) cubic-bezier(0.2, 0.6, 0.35, 1) infinite;
}
.aia-model-picker-pill-btn:focus-visible { outline: 2px solid var(--c); outline-offset: 0.2em; }
.aia-model-picker-pill-glyph {
width: 1.15em;
fill: var(--c);
animation: aia-model-picker-pill-spin calc(var(--t) / 3) cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}
.aia-model-picker-pill-names {
display: grid;
overflow: hidden;
}
.aia-model-picker-pill-names span {
grid-area: 1 / 1;
opacity: 0;
animation: aia-model-picker-pill-name var(--t) cubic-bezier(0.3, 0.7, 0.3, 1) infinite;
}
.aia-model-picker-pill-names span:nth-child(2) { animation-delay: calc(var(--t) * -2 / 3); }
.aia-model-picker-pill-names span:nth-child(3) { animation-delay: calc(var(--t) * -1 / 3); }
.aia-model-picker-pill-chev {
width: 1em;
fill: none;
stroke: currentColor;
stroke-width: 2.2;
stroke-linecap: round;
stroke-linejoin: round;
opacity: 0.5;
}
@keyframes aia-model-picker-pill-ring {
0% { box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 14%, transparent), 0 0 0 0 color-mix(in srgb, var(--c) 45%, transparent); }
45%, 100% { box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 14%, transparent), 0 0 0 0.7em transparent; }
}
/* A quarter turn is invisible on a four-point star, so each loop restarts cleanly. */
@keyframes aia-model-picker-pill-spin {
0% { rotate: 0deg; }
22% { rotate: 105deg; }
34%, 100% { rotate: 90deg; }
}
@keyframes aia-model-picker-pill-name {
0% { opacity: 1; translate: 0 0; }
30% { opacity: 1; translate: 0 0; }
33.3% { opacity: 0; translate: 0 -0.8em; }
96.7% { opacity: 0; translate: 0 0.8em; }
100% { opacity: 1; translate: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
.aia-model-picker-pill-btn,
.aia-model-picker-pill-glyph,
.aia-model-picker-pill-names span { animation: none; }
.aia-model-picker-pill-names span:first-child { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.aia-model-picker-pill, .aia-model-picker-pill *, .aia-model-picker-pill::before, .aia-model-picker-pill::after, .aia-model-picker-pill *::before, .aia-model-picker-pill *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Customizing this snippet
- Color: set
--aia-coloron the element or a parent. Currently previewing#3b82f6. - Base size: set
--aia-size. Every other dimension is inem, so the whole thing scales together. Currently previewing16px. - Speed: change the duration on the
transitionoranimationshorthand. Staggered delays are relative, so they keep their rhythm. - Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.