diff --git a/web/routes/uix/components/popover/+page.svelte b/web/routes/uix/components/popover/+page.svelte
index b5e394a2b..0b7cbcf85 100644
--- a/web/routes/uix/components/popover/+page.svelte
+++ b/web/routes/uix/components/popover/+page.svelte
@@ -3,6 +3,7 @@
 		Popover,
 		type PopoverSize
 	} from '$uix/eidos/components/popover';
+	import type { MotionPresetName } from '$uix/eidos/lib/motion/registry';
 	import { compileMorfo } from '$uix/morfo';
 	import { popoverMorfo } from '@/uix/morfo/components/popover';
 	import { getActiveUix } from '$active-uix';
@@ -19,6 +20,7 @@
 	let open = $state(false);
 	let modal = $state(false);
 	let size = $state<PopoverSize>('md');
+	let motion = $state<MotionPresetName>('spring-pop');
 	let side = $state<Side>('bottom');
 	let sideOffset = $state(8);
 	let align = $state<Align>('center');
@@ -120,6 +122,7 @@
 			showOverlay && '    <Popover.Overlay />',
 			'    <Popover.Content',
 			size !== 'md' && `      size="${size}"`,
+			motion !== 'slide-fade' && `      motion="${motion}"`,
 			side !== 'bottom' && `      side="${side}"`,
 			align !== 'center' && `      align="${align}"`,
 			'    >',
@@ -176,7 +179,7 @@
 				>{triggerLabel}</Popover.Trigger>
 				<Popover.Portal>
 					{#if showOverlay}<Popover.Overlay />{/if}
-					<Popover.Content {size} {side} {sideOffset} {align} {alignOffset} {avoidCollisions}>
+					<Popover.Content {size} {motion} {side} {sideOffset} {align} {alignOffset} {avoidCollisions}>
 						{#if showArrow}<Popover.Arrow />{/if}
 						<p style="margin: 0 0 var(--uix-space-3) 0;">{bodyText}</p>
 						{#if showClose}
@@ -264,6 +267,14 @@
 						{/each}
 					</span>
 				</label>
+				<label data-uix-control>
+					<span data-uix-control-label>motion <span data-uix-control-hint>Content prop · spring-pop = JS spring engine</span></span>
+					<span data-uix-chips role="radiogroup">
+						{#each ['slide-fade', 'scale-fade', 'fade', 'spring-pop'] as m}
+							<button data-uix-chip data-active={motion === m} onclick={() => (motion = m as MotionPresetName)}>{m}</button>
+						{/each}
+					</span>
+				</label>
 				<label data-uix-control>
 					<span data-uix-control-label>sideOffset <span data-uix-control-hint>{sideOffset}px</span></span>
 					<input type="range" min="0" max="32" step="1" bind:value={sideOffset} />