Morphing Capsule
Capsule that flows between states. Pro · Effects › Glass
A Liquid Glass capsule that morphs between states — a compact button, an expanded toolbar, a search field — with springy width changes and cross-faded content. Segments that appear split out of their neighbour, and leaving ones merge back into it, through an SVG goo filter like the iOS 26 toolbar and Dynamic Island. Rendered as a toolbar: arrow keys move focus between its controls (not out of text fields), Home/End jump to the ends and Escape returns to the first state. When a state change removes the focused control, focus moves to the first control of the new state.
Installation
npx valyro-cli@latest login
npx valyro-cli@latest add morphing-capsulenpm install valyro-ui-pro
import 'valyro-ui-pro/styles.css';
import { MorphingCapsule } from 'valyro-ui-pro';Props
| Prop | Type | Default | |
|---|---|---|---|
states * | Record<string, MorphingCapsuleSegment[]> | Segments shown in each state, in order. Neighbouring segments merge like liquid while they split or join. | |
value | string | Controlled value; use with onValueChange. | |
defaultValue | string | Default: the first state. | |
onValueChange | (value: string) => void | Called with the new value when it changes. | |
label | string | Accessible name of the toolbar. | |
size | 'md' | 'lg' | 'md' | Capsule height: 44px or 52px. |
Related components
- Glass Lens — Glass lens with real refraction
- Floating Tab Bar — Floating glass tab bar
- Aurora Background — Slow aurora behind your content
- Gradient Background — Slowly shifting gradient
- Bubble Background — Soft colored bubbles, one follows the cursor
- Stars Background — Starry sky with cursor parallax
- Hexagon Background — Hexagon grid with a glowing trail
- Hole Background — Portal tunnel with rings and particles
- Fireworks Background — Fireworks for wins and achievements, launch on click
- Spotlight — Stage beams and a cursor spotlight
- Meteors — Falling meteors
- Background Pattern — Fading dot, grid and line backgrounds
Previous: Glass Lens · Next: Floating Tab Bar · All Effects