Mercado de San Miguel
14 min32 min11 min 3,2 km
Map route with glass panel
A glass panel over the map with the arrival time, which changes when you pick car, walking or bike.
Settings
Code
<div class="uv-gmr"><svg class="mp" viewBox="0 0 320 224" preserveAspectRatio="xMidYMid slice" aria-hidden="true"><rect width="320" height="224" fill="#e8ecef"/><path d="M0 60h320M0 150h320M70 0v224M180 0v224M260 0v224" stroke="#fff" stroke-width="14"/><path d="M0 105h320M120 0v224" stroke="#fff" stroke-width="6"/><rect x="190" y="70" width="60" height="70" rx="10" fill="#cfe8c9"/><path d="M20 224c40-60 90-40 120-90s60-40 110-110" fill="none" stroke="#bfe0f5" stroke-width="16" opacity=".8"/><path class="rt" d="M70 190V150H180V60H262" fill="none" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/><circle cx="70" cy="190" r="7" fill="#fff" stroke="var(--c2)" stroke-width="4"/><circle cx="262" cy="60" r="8" fill="#ff3b30" stroke="#fff" stroke-width="3"/></svg><div class="pn"><p class="ds">San Miguel Market</p><p class="et"><b class="t1">14 min</b><b class="t2">32 min</b><b class="t3">11 min</b> <span>3,2 km</span></p><div class="md" role="radiogroup" aria-label="Travel mode"><label><input type="radio" name="uv-gmr" checked><span aria-label="Car"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 16V11.5L7 6.5h10l2 5V16M5 16h14M5 16v2M19 16v2"/><circle cx="8" cy="13.5" r=".8" fill="currentColor"/><circle cx="16" cy="13.5" r=".8" fill="currentColor"/></svg></span></label><label><input type="radio" name="uv-gmr"><span aria-label="Walking"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="13" cy="4.5" r="1.8"/><path d="M10 21l2-6-3-3 1.5-4.5L14 9l2.5 3M12 15l3 6"/></svg></span></label><label><input type="radio" name="uv-gmr"><span aria-label="Bike"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="6" cy="16" r="3.5"/><circle cx="18" cy="16" r="3.5"/><path d="M6 16l4-7h5l3 7M10 9l2 7h-6M14 6h2"/></svg></span></label></div><button type="button" class="go">Go</button></div></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 Liquid Glass
See all Liquid GlassWhere to use it
Navigation apps put the essentials in a glass sheet so the map stays visible underneath. Here the route draws itself across a stylized city map from your position to the red destination pin, and the panel shows the place, the travel time and distance, a segmented control for car, walking or bike and a big green Go button.
Switching the travel mode swaps the estimated time with a short slide, all through radio buttons and :has, without JavaScript. Replace the drawn map and route with your own, and use the main color for the time and the button.