Skeleton Placeholder Patterns

Motion-Safe Skeleton

A static motion-safe placeholder shows animation none, visible contrast, and Motion-safe skeleton status.

Program

A motion-safe skeleton can stay useful without shimmer, timers, or animation.

motion_safe_placeholder.html
Visuals: captured from real browser rendering
<section class="motion-safe" aria-labelledby="motion-safe-title"><h2 id="motion-safe-title">Motion-safe placeholder</h2><div class="safe-card" aria-label="Static motion-safe skeleton preview"><span>animation none</span><span>contrast visible</span></div><dl>
  <div><dt>Animation</dt><dd>none</dd></div>
  <div><dt>Contrast</dt><dd>visible</dd></div>
  <div><dt>Status</dt><dd><span class="badge">Motion-safe skeleton</span></dd></div></dl>
  <p class="check">Learner check: the placeholder is readable without shimmer or animation.</p>
  <p class="note">Static motion-safe placeholder only; no fetch, network, API, timer, polling, promise, data loading, content swap, layout measurement, ResizeObserver, animation, shimmer loop, requestAnimationFrame, CSS keyframes, script, event listener, storage, cookie, routing, navigation, object URL, download, service worker, account/session behavior, live loading state, live skeleton swap, or live submission runs.</p></section>
<style>
  .motion-safe { display: grid; gap: 10px; max-width: 38rem; border: 1px solid #1d4ed8; padding: 12px; background: #eff6ff; }
  .safe-card { display: grid; gap: 8px; max-width: 260px; border: 1px solid #1d4ed8; background: #ffffff; padding: 10px; }
  .safe-card span { border-radius: 6px; background: #dbeafe; color: #1e3a8a; padding: 8px; font-weight: 700; }
  .motion-safe dl { display: grid; gap: 8px; margin: 0; }
  .motion-safe dl div { display: grid; grid-template-columns: 8rem 1fr; gap: 8px; }
  .motion-safe dt { color: #475569; }
  .motion-safe dd, .check, .note { margin: 0; }
  .badge { border-radius: 999px; background: #dbeafe; padding: 2px 8px; }
  .note { color: #475569; }
</style>

  1. Label the motion-safe placeholder.

    The section is labelled by its visible heading.
    The section is labelled by its visible heading.

  2. Show motion-safe structure.

    The static card shows readable placeholder blocks.
    The static card shows readable placeholder blocks.

  3. Show exact motion-safe rows.

    The animation and contrast values are exact pinned data.
    The animation and contrast values are exact pinned data.

  4. Render motion-safe-skeleton status.

    The status badge says this is a motion-safe skeleton.
    The status badge says this is a motion-safe skeleton.

  5. Check motion-safe readback.

    The check says the placeholder is readable without shimmer or animation.
    The check says the placeholder is readable without shimmer or animation.

  6. Check motion-safe honesty.

    Motion-safe structure, exact rows, status, and no animation.
    Motion-safe structure, exact rows, status, and no animation.
step flow step(1) labels the source, step(2) shows the browser structure, step(3) shows exact motion-safe rows, step(4) shows motion-safe-skeleton status, step(5) checks motion-safe readback, and step(6) checks the honesty note.
motion-safe readback The section heading names the motion-safe placeholder surface.
motion rows Animation, Contrast, and Status values are exact pinned data.
no animation The lesson should not imply fetches, networks, APIs, timers, polling, promises, data loading, content swaps, layout measurement, ResizeObserver, animation, shimmer loops, requestAnimationFrame, CSS keyframes, scripts, event listeners, storage, cookies, routing, navigation, object URLs, downloads, service workers, account/session behavior, live loading states, live skeleton swaps, or live submissions.