Arrival geofence toast
A tiny map drops the pin with a bounce and a radar pulse when it detects that you have reached your destination.
Settings
Code
<div class="uvq09-geo"><button type="button" class="fire">Show again</button><div class="tt" role="status"><span class="mp" aria-hidden="true"><i class="pk"></i><i class="rv"></i><i class="rd"></i><i class="rd"></i><i class="pn"><svg viewBox="0 0 24 30"><path class="pb" d="M12 29s-9-9.3-9-16a9 9 0 0 1 18 0c0 6.7-9 16-9 16z"/><circle class="pc" cx="12" cy="13" r="3.6"/></svg></i></span><span class="tx"><b>You have arrived at the office</b><small>Calle de Alcalá 120 · 8:57</small><button type="button" class="ci"><span class="a">Check in</span><span class="b" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>Checked in</span></button></span></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 Toasts
See all ToastsWhere to use it
Location aware apps often confirm arrival with a plain line of text. This one draws a tiny map with streets, a park and a river from layered CSS gradients, drops a pin that squashes as it lands and sends out radar rings. The map follows the light or dark theme. Useful for time tracking, check-in, delivery drivers and smart home routines.
The main color is the pin and radar, the second the park and the confirmed button. Change the address and time line, and wire Check in to your own clock-in call; the label swaps with a short slide once it succeeds.