Micro-interactions

Segmented

A segmented control whose indicator travels on a shared layout id and smears in the direction it is moving.

Cook BookDirection-aware transition Layout animation Squash & stretch Velocity Spring

Controls

indicator

sizing

density

radius8 px

stiffness520

damping34

smear0.50

glow

accentColor

#a855f7

Install

bun add motion clsx tailwind-merge

Then copy 2 files into your project:

components/registry/segmented/segmented.tsx
lib/utils.ts

Props

Prop	Type	Default	Description
indicator	"solid" \| "outline" \| "underline"	"solid"	How the active segment is marked. All three are the same travelling element at different settings — the shared layout id does not change, so switching between them costs no extra animation code.
sizing	"auto" \| "equal"	"auto"	Auto sizes each segment to its label, so the indicator resizes as well as travels — the half of the FLIP that equal-width tabs never show. Equal splits the row evenly and fills the container.
density	"comfortable" \| "compact"	"comfortable"	Padding and type size. Compact is the toolbar setting; it shortens the travel too, which is why the smear reads more subtly there.
radius	number	8	Corner radius of the indicator and the segments. motion corrects the radius through the layout animation, so a rounded indicator does not go oval while it is resizing.
stiffness	number	520	Spring tension on the travel. It also drives the proxy spring the deformation is read from, so the smear stays in phase with the movement at every setting rather than at the one it was tuned on.
damping	number	34	Spring friction. Low lets the indicator ring past the segment and come back, which the smear follows in both directions; high arrives dead and barely deforms at all.
smear	number	0.5	How hard the travel deforms the indicator. The stretch is along the direction of movement and anchored at the leading edge, so it trails behind rather than running ahead. Zero is a rigid box that slides.
glow	boolean	true	Accent bloom under the indicator. It travels with the box and takes the same deformation, so it reads as light coming off the thing rather than a separate shape following it.
accentColor	string (hex)	"#a855f7"	The indicator, its bloom, and the label of the active segment when the indicator is not filling it.

What It Demonstrates

Direction-aware transition: Content slides one way going forward and the opposite way going back, so navigation has a sense of direction.
Layout animation: When an element's size or position changes, it animates to the new spot instead of snapping.
Squash & stretch: Deforming an element as it moves to convey weight, speed, and flexibility.
Velocity: How fast and in which direction an element is moving. A spring carries it into the next animation when interrupted, so a flicked element keeps its speed.
Spring: Motion driven by physics (tension, mass, damping) rather than a set duration.

Related Components

Appears In

"use client"; import { useEffect, useId, useRef, useState } from "react"; import { motion, useMotionValue, useSpring, useTransform, useVelocity, } from "motion/react"; import { cn } from "@/lib/utils"; export type SegmentedIndicator = "solid" | "outline" | "underline"; export type SegmentedSizing = "auto" | "equal"; export type SegmentedDensity = "comfortable" | "compact"; export interface SegmentedItem { id: string; label: string; } export interface SegmentedProps { items?: SegmentedItem[]; value?: string; defaultValue?: string; onValueChange?: (id: string) => void; indicator?: SegmentedIndicator; sizing?: SegmentedSizing; density?: SegmentedDensity; radius?: number; stiffness?: number; damping?: number; smear?: number; glow?: boolean; accentColor?: string; reducedMotion?: boolean; "aria-label"?: string; className?: string; } const SPEED_REF = 5.5; export default function Segmented({ items = [], value, defaultValue, onValueChange, indicator = "solid", sizing = "auto", density = "comfortable", radius = 8, stiffness = 520, damping = 34, smear = 0.5, glow = true, accentColor = "#a855f7", reducedMotion = false, "aria-label": ariaLabel = "View", className, }: SegmentedProps) { const uid = useId(); const [self, setSelf] = useState(defaultValue ?? items[0]?.id ?? ""); const controlled = value !== undefined; const active = controlled ? value : self; const activeIndex = Math.max( 0, items.findIndex((item) => item.id === active), ); const compact = density === "compact"; const bar = indicator === "underline"; const position = useMotionValue(activeIndex); const settled = useSpring(position, { stiffness, damping }); const velocity = useVelocity(settled); useEffect(() => { position.set(activeIndex); }, [activeIndex, position]); const stretch = useTransform(velocity, (v: number) => reducedMotion ? 0 : Math.min(1, Math.abs(v) / SPEED_REF), ); const scaleX = useTransform(stretch, (s: number) => 1 + smear * s * 0.35); const scaleY = useTransform(stretch, (s: number) => 1 - smear * s * 0.22); const originX = useTransform(velocity, (v: number) => (v > 0 ? 1 : 0)); const listRef = useRef<HTMLDivElement>(null); const select = (id: string) => { if (!controlled) setSelf(id); onValueChange?.(id); }; const onKeyDown = (event: React.KeyboardEvent) => { if (event.key !== "Home" && event.key !== "End") return; const next = event.key === "Home" ? items[0] : items[items.length - 1]; if (!next) return; event.preventDefault(); select(next.id); listRef.current ?.querySelectorAll<HTMLInputElement>('input[type="radio"]') ?.[event.key === "Home" ? 0 : items.length - 1]?.focus(); }; const layoutTransition = reducedMotion ? { duration: 0 } : { type: "spring" as const, stiffness, damping }; return ( <div ref={listRef} role="radiogroup" aria-label={ariaLabel} onKeyDown={onKeyDown} className={cn( "inline-flex select-none items-stretch border border-hairline bg-panel", compact ? "gap-0.5 p-0.5" : "gap-1 p-1", sizing === "equal" && "w-full", className, )} style={{ borderRadius: radius + (compact ? 2 : 4) }} > {items.map((item) => { const on = item.id === active; return ( <label key={item.id} className={cn( "relative flex cursor-pointer items-center justify-center transition-colors", compact ? "px-2.5 py-1" : "px-3.5 py-1.5", sizing === "equal" ? "flex-1 basis-0" : "flex-none", !on && "hover:bg-raised/70", )} style={{ borderRadius: radius }} > <input type="radio" name={uid} value={item.id} checked={on} onChange={() => select(item.id)} className="peer absolute inset-0 size-full cursor-pointer opacity-0" /> <span aria-hidden className="pointer-events-none absolute inset-0 peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-accent" style={{ borderRadius: radius }} /> {on ? ( <motion.span aria-hidden layoutId={`${uid}-indicator`} transition={layoutTransition} className={cn( "pointer-events-none absolute", bar ? "inset-x-1.5 bottom-0 h-[2px]" : "inset-0", )} style={{ borderRadius: bar ? 2 : radius }} > {glow ? ( <span className="absolute -inset-1 rounded-[inherit] blur-md" style={{ backgroundColor: accentColor, opacity: 0.28 }} /> ) : null} <motion.span className="absolute inset-0 block rounded-[inherit]" style={{ scaleX, scaleY, originX, backgroundColor: indicator === "outline" ? `${accentColor}1f` : accentColor, border: indicator === "outline" ? `1.5px solid ${accentColor}` : undefined, }} /> </motion.span> ) : null} <span className={cn( "relative z-10 font-display tracking-[0.12em] uppercase", compact ? "text-[10px]" : "text-[11px]", "transition-colors duration-200 [transition-delay:90ms]", on && indicator === "solid" ? "text-on-accent" : on ? "text-accent" : "text-ink-dim", )} > {item.label} </span> </label> ); })} </div> ); }

Segmented

Controls

Install

Props

What It Demonstrates

Related Components

Hover List

Reorder

Dial

Morph Dialog

Stagger Menu

Magnetic Button

Appears In

Controls