Interaction

Search morph

A search lens that becomes a field as one object: the circle stretches into a pill around a lens that never moves, and the list filters as you type.

53 / 74

Where it earns its place

Search on content-heavy marketing sites and docs where the field should stay out of the way until someone reaches for it.

Set on a Lab index with real studies and tags, so the field filters something instead of sitting alone on a card.
Kept the geometry that makes it one object: width is the only state, the corner is always fully round, and the lens inset equals its centred position when shut.
Kept the 90ms compress before expanding and the magnet lean that switches off once the field is open.
Moved the magnet from a document listener to the example's own pointer events, and drove the width with a framer-motion spring instead of a hand-rolled loop.
Dropped the sound hooks and the per-screen width props; reduced motion opens instantly with no lean.