Model Switch Morph
Choosing another model glides the selection across and eases the badge into that model's name and accent.
The animated component in this preview is rendered from the canonical file shown here. The surrounding demo shell only provides context and is not part of the copied code.
import { useId, useState } from "react";
import { motion, useReducedMotion } from "motion/react";
/**
* Vibary · Model Switch Morph
*
* Picking a different model slides one selection pill between segments
* while the badge underneath cross-fades its name and eases to the newAbout this pattern
Choosing which model answers is a small setting with a large consequence, so the control should feel considered rather than clicked. A single selection pill travels between segments — the same element moving, not two fading — while the badge below cross-fades its name and its accent tweens to the colour the new option owns. Nothing scales: a label that pops on every switch turns a settings control into a toy, and this one is touched dozens of times a day.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- AI assistant
A model chooser beside the composer where the current choice is named and coloured.
Related patterns
- Source Fan OutA tilted deck of reference cards fans apart to show what an answer was grounded in.
- Summary CondenseThe dropped lines fade out from the bottom up, and only then does the card close the height they held.
- Translate CrossfadeCopy hands over to its translation while the block eases to the new text's height.