自定义动画（BallSorting）

function openDemo(name) {
  if (typeof window.$ !== 'function') return;

  const iconAnimation = !!document.getElementById('optIcon')?.checked;
  const popupAnimation = !!document.getElementById('optPopup')?.checked;
  const closeOnEsc = !!document.getElementById('optEsc')?.checked;

  const titleCap = name ? (name[0].toUpperCase() + name.slice(1)) : '';

  $.layer({
    title: titleCap,
    text: 'Lottie animation icon',
    icon: 'svg:' + name,
    iconAnimation,
    popupAnimation,
    closeOnEsc
  });
}

<div class="demo-visual">
  <div class="controls" style="margin-bottom: 14px;">
  <label><input id="optIcon" type="checkbox" checked> iconAnimation</label>
  <label><input id="optPopup" type="checkbox" checked> popupAnimation</label>
  <label><input id="optEsc" type="checkbox" checked> closeOnEsc</label>
  </div>
  <div class="row">
  <button class="btn" type="button" onclick="openDemo('BallSorting')">Open BallSorting</button>
  </div>
  <div class="hint">
    Tip: <code class="inline">BallSorting.json</code> 位于 <code class="inline">/svg</code> 目录。
  </div>
</div>

/* Keep Layer above the doc UI */
.layer-overlay { z-index: 99999; }

.controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  align-items: center;
  font-size: 13px;
  color: #b7b7b7;
}
.controls label {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  cursor: pointer;
  user-select: none;
}
.controls input { accent-color: var(--highlight-color); }
.row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.btn {
  appearance: none;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: #fff;
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 650;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.btn:hover { border-color: rgba(255,255,255,0.22); background: rgba(255,255,255,0.06); }
.demo-visual { padding: 22px 24px; }
.hint { font-size: 12px; color: #8c8c8c; line-height: 1.5; margin-top: 10px; }