Skeleton Base

<style>
.ws-skeleton {
  --ws-skeleton-bg: oklch(0.92 0.005 75);
  --ws-skeleton-highlight: oklch(0.96 0.003 75);
  --ws-skeleton-border: oklch(0.88 0.008 75);
}
@media (prefers-color-scheme: dark) {
  .ws-skeleton {
    --ws-skeleton-bg: oklch(0.25 0.005 75);
    --ws-skeleton-highlight: oklch(0.32 0.005 75);
    --ws-skeleton-border: oklch(0.30 0.008 75);
  }
}
@keyframes ws-skeleton-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ws-skeleton [data-shimmer] {
    animation: none !important;
  }
}
</style>

<div class="ws-skeleton" role="status" aria-hidden="true">
  <span class="sr-only">Loading...</span>
  <div class="mx-auto max-w-sm overflow-hidden rounded-xl border border-[var(--ws-skeleton-border)] bg-[var(--ws-skeleton-bg)] p-0">
    <!-- Image placeholder -->
    <div
      data-shimmer
      class="aspect-[4/3] w-full"
      style="background: linear-gradient(90deg, var(--ws-skeleton-bg) 25%, var(--ws-skeleton-highlight) 50%, var(--ws-skeleton-bg) 75%); background-size: 200% 100%; animation: ws-skeleton-shimmer 1.5s infinite;"
    ></div>
    <div class="space-y-3 p-4">
      <!-- Text line 1 -->
      <div
        data-shimmer
        class="h-4 w-full rounded"
        style="background: linear-gradient(90deg, var(--ws-skeleton-bg) 25%, var(--ws-skeleton-highlight) 50%, var(--ws-skeleton-bg) 75%); background-size: 200% 100%; animation: ws-skeleton-shimmer 1.5s infinite;"
      ></div>
      <!-- Text line 2 -->
      <div
        data-shimmer
        class="h-4 w-3/4 rounded"
        style="background: linear-gradient(90deg, var(--ws-skeleton-bg) 25%, var(--ws-skeleton-highlight) 50%, var(--ws-skeleton-bg) 75%); background-size: 200% 100%; animation: ws-skeleton-shimmer 1.5s infinite;"
      ></div>
      <!-- Circle + short line -->
      <div class="flex items-center gap-3 pt-2">
        <div
          data-shimmer
          class="h-8 w-8 shrink-0 rounded-full"
          style="background: linear-gradient(90deg, var(--ws-skeleton-bg) 25%, var(--ws-skeleton-highlight) 50%, var(--ws-skeleton-bg) 75%); background-size: 200% 100%; animation: ws-skeleton-shimmer 1.5s infinite;"
        ></div>
        <div
          data-shimmer
          class="h-3 w-24 rounded"
          style="background: linear-gradient(90deg, var(--ws-skeleton-bg) 25%, var(--ws-skeleton-highlight) 50%, var(--ws-skeleton-bg) 75%); background-size: 200% 100%; animation: ws-skeleton-shimmer 1.5s infinite;"
        ></div>
      </div>
    </div>
  </div>
</div>