Fragrance pyramid filter
A perfume's notes in its top, heart and base pyramid: each glass tier lights up and evaporates as you pick notes.
Settings
Code
<fieldset class="uvq05-sp"><legend>Perfume notes</legend><div class="rw r1"><span class="sl" aria-hidden="true"></span><div class="nb"><p class="tr"><b>Top notes</b> <span>15 min</span></p><div class="cs"><label><input type="checkbox" checked><span>Bergamot</span></label><label><input type="checkbox"><span>Lemon</span></label><label><input type="checkbox"><span>Pink pepper</span></label></div></div></div><div class="rw r2"><span class="sl" aria-hidden="true"></span><div class="nb"><p class="tr"><b>Heart notes</b> <span>4 h</span></p><div class="cs"><label><input type="checkbox" checked><span>Rose</span></label><label><input type="checkbox"><span>Iris</span></label><label><input type="checkbox"><span>Lavender</span></label></div></div></div><div class="rw r3"><span class="sl" aria-hidden="true"></span><div class="nb"><p class="tr"><b>Base notes</b> <span>8 h</span></p><div class="cs"><label><input type="checkbox"><span>Vanilla</span></label><label><input type="checkbox"><span>Amber</span></label><label><input type="checkbox" checked><span>Sandalwood</span></label></div></div></div><p class="ct"><span>Notes chosen:</span> <span class="n"></span></p></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
Perfumers describe a fragrance as a pyramid of top, heart and base notes that fade at different speeds, and this filter uses that structure directly. Each tier is a clipped glass slice beside its chips; ticking a note lights its slice and releases particles that rise fast at the top and slowly at the base. Checkboxes and CSS do all the work.
The first colour tints the top and heart tiers and the second the base, from amber to plum. Replace the notes and the times with your own catalogue, and use it in perfume shops, candle brands or tea blends.