Railway clock time input
A time field next to a station clock: the hands spring round when the time changes and the red second hand pauses each minute.
Settings
Code
<div class="uvq06-ck"><div class="fc" aria-hidden="true"><b style="--a:0deg" class="hr"></b><b style="--a:6deg"></b><b style="--a:12deg"></b><b style="--a:18deg"></b><b style="--a:24deg"></b><b style="--a:30deg" class="hr"></b><b style="--a:36deg"></b><b style="--a:42deg"></b><b style="--a:48deg"></b><b style="--a:54deg"></b><b style="--a:60deg" class="hr"></b><b style="--a:66deg"></b><b style="--a:72deg"></b><b style="--a:78deg"></b><b style="--a:84deg"></b><b style="--a:90deg" class="hr"></b><b style="--a:96deg"></b><b style="--a:102deg"></b><b style="--a:108deg"></b><b style="--a:114deg"></b><b style="--a:120deg" class="hr"></b><b style="--a:126deg"></b><b style="--a:132deg"></b><b style="--a:138deg"></b><b style="--a:144deg"></b><b style="--a:150deg" class="hr"></b><b style="--a:156deg"></b><b style="--a:162deg"></b><b style="--a:168deg"></b><b style="--a:174deg"></b><b style="--a:180deg" class="hr"></b><b style="--a:186deg"></b><b style="--a:192deg"></b><b style="--a:198deg"></b><b style="--a:204deg"></b><b style="--a:210deg" class="hr"></b><b style="--a:216deg"></b><b style="--a:222deg"></b><b style="--a:228deg"></b><b style="--a:234deg"></b><b style="--a:240deg" class="hr"></b><b style="--a:246deg"></b><b style="--a:252deg"></b><b style="--a:258deg"></b><b style="--a:264deg"></b><b style="--a:270deg" class="hr"></b><b style="--a:276deg"></b><b style="--a:282deg"></b><b style="--a:288deg"></b><b style="--a:294deg"></b><b style="--a:300deg" class="hr"></b><b style="--a:306deg"></b><b style="--a:312deg"></b><b style="--a:318deg"></b><b style="--a:324deg"></b><b style="--a:330deg" class="hr"></b><b style="--a:336deg"></b><b style="--a:342deg"></b><b style="--a:348deg"></b><b style="--a:354deg"></b><i class="h"></i><i class="m"></i><i class="s"></i><i class="ct"></i></div><div class="sd"><label for="uvq06-ck-in">Departure time</label><input id="uvq06-ck-in" type="time" step="300"><div class="ch"><button type="button" data-a="0">Now</button><button type="button" data-a="15">+15 min</button><button type="button" data-a="60">+1 h</button></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 Inputs
See all InputsWhere to use it
A native time input paired with a railway station clock drawn in CSS: sixty ticks, black bar hands and the red paddle second hand that sweeps for fifty-eight seconds and pauses at the top. Typing a time, or tapping Now, plus fifteen minutes or plus one hour, turns the hands with a springy ease and always the short way round.
The main color paints the second hand and the second color the hands and ticks, so a navy or brass version takes seconds. Use it for departure times, pickup slots and reminders, where seeing the hour on a dial is quicker than reading digits.