Magnifier that morphs into close
The magnifier stretches into a search field and its handle draws an X to close it; Escape works too.
Settings
Code
<div class="uv-msm"><form class="f" role="search"><input type="search" placeholder="Search the shop" aria-label="Search the shop" tabindex="-1"><button type="button" class="b" aria-expanded="false" aria-label="Open search"><svg viewBox="0 0 24 24" aria-hidden="true"><circle class="c" cx="10" cy="10" r="6"/><path class="h" d="M5 5l14 14"/><path class="x" d="M19 5L5 19"/></svg></button></form></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Microinteractions
See all MicrointeractionsWhere to use it
A compact search trigger for headers with little space. Pressing the round button widens it into a full field with a colored ring, while the magnifier lens unwinds and its handle stretches into a diagonal that, together with a second stroke, draws a close icon. Pressing it again reverses every step.
The morph uses stroke dash offsets on plain SVG lines, so it stays crisp at any size. The button exposes aria-expanded and a changing label, the field receives focus when it opens, and Escape closes it and returns focus to the button.