Protective film checkbox
A clear protective film with a pull tab covers the box and peels off from the corner when checked.
Settings
Code
<label class="uvq02-flm"><input type="checkbox"><span class="bx"><span class="sf"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5" pathLength="1"/></svg></span><span class="fm" aria-hidden="true"><i>1</i></span></span>Peel off the protective film</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
Peeling the plastic off a new device is one of those small pleasures, and this checkbox recreates it. A glossy film with a numbered pull tab covers a grey square; checking it peels the film away from the corner in 3D and reveals a bright surface with a tick. Hovering lifts the corner a little. It suits unboxing pages, product launches, onboarding and gadget shops.
The main and secondary colors build the gradient under the film, so pick your brand tones for the reveal. Unchecking puts the film back in place, which makes it a fun touch for a first-run setting rather than a long list.