Gas burner checkbox
A hob seen from above: checking turns the knob, fires a spark and lights a crown of blue flames around the burner.
Settings
Code
<label class="uvq02-gas"><input type="checkbox"><span class="bn" aria-hidden="true"><span class="gr"></span><span class="fl"><i style="--a:0deg;--i:0"></i><i style="--a:26deg;--i:1"></i><i style="--a:51deg;--i:2"></i><i style="--a:77deg;--i:3"></i><i style="--a:103deg;--i:4"></i><i style="--a:129deg;--i:5"></i><i style="--a:154deg;--i:6"></i><i style="--a:180deg;--i:7"></i><i style="--a:206deg;--i:8"></i><i style="--a:231deg;--i:9"></i><i style="--a:257deg;--i:10"></i><i style="--a:283deg;--i:11"></i><i style="--a:309deg;--i:12"></i><i style="--a:334deg;--i:13"></i></span><span class="cp"></span></span><span class="kn" aria-hidden="true"></span>Light the burner</label>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 Checkboxes
See all CheckboxesWhere to use it
This checkbox is a gas hob seen from above, with a black enamel plate, a cast iron grate, a burner cap and a chrome knob beside it. Checking it turns the knob a quarter to the left, flashes a spark and lights fourteen blue flames one after another, which then flicker gently with a soft glow. It fits cooking apps, smart kitchen controls and recipe timers.
The main color is the base of the flame and the glow, the secondary color the tips, so blue gas, orange wood fire or a green fantasy flame all work. Reduced motion keeps the flames lit but still.