INTERACTIVE UI PLAYGROUND • LIQUID GLASS KIT & NEUMORPHISM
Component Sandbox
Explore, interact with, and copy the exact CSS & HTML tokens powering MasterLeaf's design system. Test tactile buttons, glassmorphic modals, and animated glow borders live.
Liquid Conic Beam Button
Launch Engine
HTML / CSS Token
<div class="demo-conic-btn-wrapper">
<div class="demo-conic-beam"></div>
<div class="demo-conic-inner">
<i class="fa-solid fa-bolt text-orange-400"></i>
<span>Launch Engine</span>
</div>
</div>Tactile Neumorphic ADD Button
HTML / CSS Token
<button class="btn-neu-add">
<i class="fa-solid fa-cart-plus text-sm"></i>
<span>ADD TO REPO</span>
</button>Neumorphic Inset Toggle Switch
DRM Protection: OFF
HTML / CSS Token
<div class="demo-neu-switch active" onclick="this.classList.toggle('active')">
<div class="demo-neu-switch-thumb"></div>
</div>Frosted Liquid Badges
E-COMMERCE
HOT
Available
HTML / CSS Token
<span class="px-3 py-1.5 rounded-full bg-black/70 backdrop-blur-md border border-white/20 text-white">
<span class="w-2.5 h-2.5 rounded-full bg-emerald-400 shadow-[0_0_8px_#10B981]"></span>
<span>Available</span>
</span>