Blur fade reveal

23:T72f2,

---
interface Props {
  blurAmount?: number;
  startOpacity?: number;
  duration?: number;
  delay?: number;
  threshold?: number;
  hold?: number;
}
const { blurAmount = 10, startOpacity = 0, duration = 0.9, delay = 0, threshold = 0.15, hold = 0 } = Astro.props;

const varsStyle = `--bfr-blur: ${blurAmount}px; --bfr-start-opacity: ${startOpacity}; --bfr-duration: ${duration}s; --bfr-delay: ${delay}s`;
const band = Math.round((1 - Math.max(0, Math.min(1, threshold))) * 100);
---

<div class="blur-fade-reveal" style={varsStyle} data-blur-fade-reveal data-band={String(band)} data-settle={String((delay + duration) * 1000)} data-hold={String(hold * 1000)}>
  <slot />
</div>

<style>
  .blur-fade-reveal {
    opacity: var(--bfr-start-opacity);
    filter: blur(var(--bfr-blur));
    transition:
      opacity var(--bfr-duration) cubic-bezier(0.16, 1, 0.3, 1) var(--bfr-delay),
      filter var(--bfr-duration) cubic-bezier(0.16, 1, 0.3, 1) var(--bfr-delay);
    will-change: opacity, filter;
  }
  .blur-fade-reveal.is-visible {
    opacity: 1;
    filter: blur(0px);
  }
  @media (prefers-reduced-motion: reduce) {
    .blur-fade-reveal {
      transition-duration: 1ms !important;
      transition-delay: 0ms !important;
    }
  }
</style>

<script>
  function attach(el: HTMLElement) {
    let holdTimer: number | undefined;
    const resolve = () => {
      if (el.classList.contains("is-visible")) return;
      el.classList.add("is-visible");
      const hold = Number(el.dataset.hold || 0);
      if (hold > 0) {
        const settle = Number(el.dataset.settle || 0);
        holdTimer = window.setTimeout(() => el.classList.remove("is-visible"), settle + hold);
      }
    };
    el.addEventListener("focusin", resolve);
    const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    if (reduced || typeof IntersectionObserver === "undefined") {
      resolve();
      return;
    }
    const band = Number(el.dataset.band || 85);
    const observer = new IntersectionObserver(
      (entries) => {
        for (const entry of entries) {
          if (entry.isIntersecting) {
            resolve();
            observer.disconnect();
          }
        }
      },
      { rootMargin: `0px 0px -${band}% 0px`, threshold: 0 },
    );
    observer.observe(el);
  }
  document.querySelectorAll<HTMLElement>("[data-blur-fade-reveal]").forEach(attach);
</script>

24:T2071, Blur fade reveal

Scroll to reveal

Field notes from the plate room

Every component earns its keep before it ships. We photograph it under three lighting rigs, run it past four screen readers, and only then does it get a plate number.

The scanner catches most of the obvious slop. The rest gets caught by someone actually scrolling the page at normal speed, which is the whole reason this exists.

Nothing should move until the reader is ready to read it.

Fig. 3, plate room, north wall. Blurs again a few seconds after it resolves.

A single instance

One accession at a time

A wider start blur and a shorter, undelayed settle reads as a snap into focus rather than a cascade, which suits a single block of copy on its own.

25:T15127,

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Blur fade reveal</title>
    <style>
      * {
        box-sizing: border-box;
      }
      body {
        margin: 0;
        min-height: 100vh;
        background: #0b0d10;
        color: #eaecef;
        font-family: system-ui, sans-serif;
      }
      .page {
        max-width: 640px;
        margin: 0 auto;
        padding: 4rem 1.5rem 6rem;
        display: flex;
        flex-direction: column;
        gap: 4rem;
      }
      .card {
        border: 1px solid rgb(255 255 255 / 0.1);
        background: rgb(255 255 255 / 0.03);
        border-radius: 16px;
        padding: 1.25rem;
      }
      .card__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        padding: 0 0.25rem 0.75rem;
      }
      .card__label {
        font-size: 11px;
        font-weight: 500;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: rgb(234 236 239 / 0.4);
      }
      .replay {
        display: inline-flex;
        align-items: center;
        gap: 0.375rem;
        border: 1px solid rgb(56 189 248 / 0.45);
        border-radius: 0.375rem;
        background: rgb(56 189 248 / 0.12);
        color: #38bdf8;
        font: 500 12px/1 system-ui, sans-serif;
        padding: 0.4rem 0.65rem;
        cursor: pointer;
      }
      .replay:focus-visible {
        outline: 2px solid rgb(255 255 255 / 0.6);
        outline-offset: 2px;
      }
      .scroller {
        height: 300px;
        overflow-y: auto;
        border-radius: 12px;
        border: 1px solid rgb(255 255 255 / 0.1);
        background: rgb(255 255 255 / 0.02);
        padding: 1.5rem 1.25rem;
      }
      .heading {
        margin: 0 0 0.75rem;
        font-size: 17px;
        font-weight: 600;
        letter-spacing: -0.01em;
        color: rgb(234 236 239 / 0.95);
      }
      .body {
        margin: 0 0 0.75rem;
        font-size: 13px;
        line-height: 1.6;
        color: rgb(234 236 239 / 0.6);
      }
      .quote {
        margin: 1rem 0 0;
        padding-left: 0.75rem;
        border-left: 2px solid #38bdf8;
        font-size: 13px;
        font-style: italic;
        color: rgb(234 236 239 / 0.75);
      }
      .caption {
        margin: 1rem 0 0;
        font-size: 11px;
        color: rgb(234 236 239 / 0.35);
      }

      /* Reveal wrapper: shared by every [data-blur-fade-reveal] element. Layout never changes,
         only opacity and blur, so nothing here reflows as it settles. */
      .blur-fade-reveal {
        opacity: var(--bfr-start-opacity, 0);
        filter: blur(var(--bfr-blur, 10px));
        transition:
          opacity var(--bfr-duration, 0.9s) cubic-bezier(0.16, 1, 0.3, 1) var(--bfr-delay, 0s),
          filter var(--bfr-duration, 0.9s) cubic-bezier(0.16, 1, 0.3, 1) var(--bfr-delay, 0s);
        will-change: opacity, filter;
      }
      .blur-fade-reveal.is-visible {
        opacity: 1;
        filter: blur(0px);
      }
      @media (prefers-reduced-motion: reduce) {
        .blur-fade-reveal {
          transition-duration: 1ms !important;
          transition-delay: 0ms !important;
        }
      }
    </style>
  </head>
  <body>
    <div class="page">
      <section class="card">
        <div class="card__head">
          <span class="card__label">Scroll to reveal</span>
          <button type="button" class="replay" data-replay>Replay</button>
        </div>
        <div class="scroller" data-scroller>
          <h3 class="heading blur-fade-reveal" data-blur-fade-reveal data-band="85" data-settle="900" style="--bfr-delay: 0s">Field notes from the plate room</h3>
          <p class="body blur-fade-reveal" data-blur-fade-reveal data-band="85" data-settle="1000" style="--bfr-delay: 0.1s">
            Every component earns its keep before it ships. We photograph it under three lighting rigs, run it past four screen readers, and only then does it get a
            plate number.
          </p>
          <p class="body blur-fade-reveal" data-blur-fade-reveal data-band="85" data-settle="1100" style="--bfr-delay: 0.2s">
            The scanner catches most of the obvious slop. The rest gets caught by someone actually scrolling the page at normal speed, which is the whole reason this
            exists.
          </p>
          <blockquote class="quote blur-fade-reveal" data-blur-fade-reveal data-band="85" data-settle="1200" style="--bfr-delay: 0.3s">
            Nothing should move until the reader is ready to read it.
          </blockquote>
          <p class="caption blur-fade-reveal" data-blur-fade-reveal data-band="85" data-settle="1300" data-hold="4000" style="--bfr-delay: 0.4s">
            Fig. 3, plate room, north wall. Blurs again a few seconds after it resolves.
          </p>
        </div>
      </section>

      <section class="card">
        <div class="card__head">
          <span class="card__label">A single instance</span>
          <button type="button" class="replay" data-replay>Replay</button>
        </div>
        <div class="scroller" data-scroller>
          <h3 class="heading blur-fade-reveal" data-blur-fade-reveal data-band="70" data-settle="700" style="--bfr-blur: 16px; --bfr-duration: 0.7s; --bfr-delay: 0s">
            One accession at a time
          </h3>
          <p class="body blur-fade-reveal" data-blur-fade-reveal data-band="70" data-settle="700" style="--bfr-blur: 16px; --bfr-duration: 0.7s; --bfr-delay: 0s">
            A wider start blur and a shorter, undelayed settle reads as a snap into focus rather than a cascade, which suits a single block of copy on its own.
          </p>
        </div>
      </section>
    </div>

    <script>
      // Returns a "replay" function that re-arms the element instead of ever touching innerHTML:
      // the markup never changes, only the is-visible class and (for scroll-triggered elements)
      // the IntersectionObserver's watch list.
      function attach(el) {
        var holdTimer = null;
        var observer = null;

        function clearHold() {
          if (holdTimer !== null) {
            window.clearTimeout(holdTimer);
            holdTimer = null;
          }
        }

        function resolve() {
          if (el.classList.contains("is-visible")) return;
          el.classList.add("is-visible");
          var hold = Number(el.dataset.hold || 0);
          if (hold > 0) {
            var settle = Number(el.dataset.settle || 0);
            clearHold();
            holdTimer = window.setTimeout(function () {
              el.classList.remove("is-visible");
            }, settle + hold);
          }
        }

        el.addEventListener("focusin", resolve);
        var reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
        if (reduced || typeof IntersectionObserver === "undefined") {
          resolve();
        } else {
          var band = Number(el.dataset.band || 85);
          var root = el.closest("[data-scroller]");
          observer = new IntersectionObserver(
            function (entries) {
              entries.forEach(function (entry) {
                if (entry.isIntersecting) {
                  resolve();
                  observer.disconnect();
                }
              });
            },
            { root: root, rootMargin: "0px 0px -" + band + "% 0px", threshold: 0 },
          );
          observer.observe(el);
        }

        return function replay() {
          clearHold();
          el.classList.remove("is-visible");
          if (observer) {
            observer.observe(el);
          } else {
            resolve();
          }
        };
      }

      function boot(section) {
        var scroller = section.querySelector("[data-scroller]");
        var replays = Array.prototype.map.call(scroller.querySelectorAll("[data-blur-fade-reveal]"), attach);
        section.querySelector("[data-replay]").addEventListener("click", function () {
          scroller.scrollTop = 0;
          replays.forEach(function (replay) {
            replay();
          });
        });
      }

      document.querySelectorAll(".card").forEach(boot);
    </script>
  </body>
</html>

Nearby