Context Sheet

The sheet’s backdrop-filter: blur() preserves the blurred page behind it — the user stays anchored to where they were. This is the Glassmorphism-as-navigation principle: transparency maintains spatial context, opacity would break it.

Toggle .is-open on both the sheet and the backdrop. The cubic-bezier(0.16, 1, 0.3, 1) easing gives a spring-like deceleration (fast in, slow stop).

Filter panel

<button id="open-sheet" class="rounded-xl bg-indigo-600 px-6 py-3 font-semibold text-white">
  Open filters
</button>

<div class="context-sheet__backdrop" id="backdrop"
  onclick="document.getElementById('sheet').classList.remove('is-open'); this.classList.remove('is-open');"
  aria-hidden="true">
</div>

<div class="context-sheet p-6" id="sheet"
  role="dialog" aria-modal="true" aria-labelledby="sheet-title">
  <div class="context-sheet__handle"></div>
  <h2 id="sheet-title" class="mb-4 text-lg font-bold text-slate-800 dark:text-slate-100">Filters</h2>
  <p class="text-sm text-slate-500">Sheet content here.</p>
  <button
    class="mt-6 w-full rounded-xl bg-indigo-600 py-3 font-semibold text-white"
    onclick="document.getElementById('sheet').classList.remove('is-open'); document.getElementById('backdrop').classList.remove('is-open');">
    Apply
  </button>
</div>

<script>
  document.getElementById('open-sheet').addEventListener('click', function() {
    document.getElementById('sheet').classList.add('is-open');
    document.getElementById('backdrop').classList.add('is-open');
  });
</script>