Minute-by-minute rain toast
Warns that rain is coming with a minute-by-minute bar chart that grows in as it appears and an alert you can switch on.
Settings
Code
<div class="uvq09-rdr"><button type="button" class="fire">Show again</button><div class="tt" role="status"><div class="hd"><span class="ic" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 15.5a4.5 4.5 0 0 1-.4-9A6 6 0 0 1 18 8a3.8 3.8 0 0 1-.5 7.5z"/></svg><i></i><i></i><i></i></span><span class="tx"><b>Rain in 15 minutes</b><small>Moderate from 18:15 to 18:40</small></span><button type="button" class="bl" aria-pressed="false" aria-label="Notify me when it starts"><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="M6 16.5V11a6 6 0 0 1 12 0v5.5l1.5 2h-15z"/><path d="M10 20.5a2 2 0 0 0 4 0"/></svg></button></div><div class="ch" aria-hidden="true"><i class="z" style="--h:4%;--i:0"></i><i class="z" style="--h:4%;--i:1"></i><i class="z" style="--h:4%;--i:2"></i><i class="z" style="--h:4%;--i:3"></i><i class="z" style="--h:4%;--i:4"></i><i class="z" style="--h:4%;--i:5"></i><i style="--h:12%;--i:6"></i><i style="--h:24%;--i:7"></i><i style="--h:40%;--i:8"></i><i style="--h:58%;--i:9"></i><i style="--h:74%;--i:10"></i><i style="--h:88%;--i:11"></i><i style="--h:95%;--i:12"></i><i style="--h:84%;--i:13"></i><i style="--h:66%;--i:14"></i><i style="--h:52%;--i:15"></i><i style="--h:44%;--i:16"></i><i style="--h:36%;--i:17"></i><i style="--h:26%;--i:18"></i><i style="--h:18%;--i:19"></i><i style="--h:11%;--i:20"></i><i style="--h:6%;--i:21"></i><i class="z" style="--h:4%;--i:22"></i><i class="z" style="--h:4%;--i:23"></i></div><div class="ax" aria-hidden="true"><span>Now</span><span>30 min</span><span>60 min</span></div></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
Weather apps made the next hour rain chart familiar, and it explains a forecast faster than words. This toast pairs a cloud with falling drops, a short summary and 24 bars that rise one after another with staggered CSS transitions. A bell toggle with aria-pressed lets people ask for a reminder. Good for weather services, outdoor event tools and delivery planning.
The main color fills the bars and icon; the second marks the minutes without rain. Swap the data array for real values from your API, and change the axis labels if you show a different time window.