Time zone change toast
After landing, the clock hands spin to local time and the dial turns from morning to dusk; you can switch back to home time.
Settings
Code
<div class="uvq09-tzn"><button type="button" class="fire">Land again</button><div class="tt" role="status"><span class="clk" aria-hidden="true"><i class="hh"></i><i class="mm"></i><i class="ct"></i></span><span class="tx"><b>Local time updated</b><small class="z1">Tokyo · 17:42 · 8 h ahead of home</small><small class="z2">Madrid · 9:42</small></span><button type="button" class="hm" aria-pressed="false">Home time</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 Toasts
See all ToastsWhere to use it
Landing in another time zone is a moment travel apps can mark with more than a line of text. Here a small analog clock spins its minute hand eight full turns while the hour hand moves forward, and a dusk gradient fades in over the morning dial. Everything runs on CSS rotate transitions with a spring curve, with no script for the animation.
The two colors paint the evening sky behind the hands. The Home time toggle uses aria-pressed and swaps the subtitle; change the angles in the CSS to match real cities, or set them from JavaScript with your traveller's offset.