Time of day filter with live sky
Pick morning, midday, afternoon or night and the sky changes color while the sun or moon moves.
Settings
Code
<fieldset class="uv-fdy"><legend>What time?</legend><div class="sky" aria-hidden="true"><i class="orb"></i><i class="hz"></i></div><div class="op"><label><input type="radio" name="uv-fdy"><span><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="M4 17h16M7.5 17a4.5 4.5 0 0 1 9 0M12 6.5V9M5.6 10.3l1.6 1.4M18.4 10.3l-1.6 1.4"/></svg>Morning</span></label><label><input type="radio" name="uv-fdy"><span><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="12" cy="12" r="4"/><path d="M12 2.5V5M12 19v2.5M2.5 12H5M19 12h2.5M5.3 5.3l1.8 1.8M16.9 16.9l1.8 1.8M5.3 18.7l1.8-1.8M16.9 7.1l1.8-1.8"/></svg>Midday</span></label><label><input type="radio" name="uv-fdy" checked><span><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="M4 15h16M8 15a4 4 0 0 1 8 0M7 19h10M12 5v3"/></svg>Afternoon</span></label><label><input type="radio" name="uv-fdy"><span><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="M19.5 14.5A7.5 7.5 0 0 1 9.5 4.5a7.5 7.5 0 1 0 10 10z"/></svg>Night</span></label></div></fieldset>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 Filters
See all FiltersWhere to use it
Booking flows for restaurants, tours, classes and deliveries often ask when, not just what day. This filter turns the choice into a small scene: the sky above the four options fades between dawn pink, bright blue, sunset orange and deep night, while the sun travels along its arc and becomes a moon with stars at night.
The colors animate through registered CSS properties, and the scene reacts to the radio buttons through :has, so there is no script. The main color highlights the active option and works on light and dark pages.