Fried egg checkbox
Checking cracks an egg into the frying pan, the white spreads out with a spring and the oil starts to sizzle.
Settings
Code
<label class="uvq02-egg"><input type="checkbox"><span class="pn" aria-hidden="true"><b style="--a:15deg;--i:0"></b><b style="--a:75deg;--i:1"></b><b style="--a:135deg;--i:2"></b><b style="--a:195deg;--i:3"></b><b style="--a:255deg;--i:4"></b><b style="--a:315deg;--i:5"></b><i class="wh"></i><i class="yk"></i><i class="sh a"></i><i class="sh b"></i></span>Fry an egg</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 small black frying pan with a wooden handle, seen from above, with a whole egg waiting in the middle. Checking it shakes the shell, splits it into two halves that fly off, spreads the white with a springy wobble, drops the yolk in and lets tiny oil bubbles sizzle around it. It is HTML and CSS only and suits recipe steps, breakfast menus and cooking apps.
The main color is the yolk and the secondary color the shell, so you can go from farm brown to white eggs or a duck egg blue. Reduced motion stops the sizzle loop and keeps the fried egg still.