25:T1f082,
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Channel tile row</title>
    <style>
      body {
        margin: 0;
        min-height: 100vh;
        display: grid;
        place-items: center;
        background: #0b0d10;
        color: #edeff2;
        font-family: system-ui, sans-serif;
      }
      .stage {
        display: flex;
        flex-direction: column;
        gap: 2.5rem;
        padding: 2rem;
      }
      .channel-tile-row {
        display: flex;
        flex-direction: column;
        width: 262px;
      }
      .channel-tile-row__caption {
        margin: 0 0 0.75rem;
        font: 700 17px/1.4 system-ui, sans-serif;
        opacity: 0.6;
      }
      .channel-tile-row__tiles {
        display: flex;
        flex-wrap: wrap;
      }
      .channel-tile-row__tile {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        margin: 0;
        border: 0;
        border-radius: 2px;
        padding: 0;
        color: #fff;
        cursor: pointer;
        outline: none;
        animation: channel-tile-in 350ms ease backwards;
        transition: transform 100ms ease;
      }
      .channel-tile-row__tile:nth-child(2) { animation-delay: 50ms; }
      .channel-tile-row__tile:nth-child(3) { animation-delay: 100ms; }
      .channel-tile-row__tile:nth-child(4) { animation-delay: 150ms; }
      .channel-tile-row__tile:nth-child(5) { animation-delay: 200ms; }
      .channel-tile-row__tile:nth-child(6) { animation-delay: 250ms; }
      .channel-tile-row__tile:active {
        transform: translateY(1px);
      }
      .channel-tile-row__tile:focus-visible {
        box-shadow: inset 0 0 0 2px rgb(255 255 255 / 0.95);
      }
      .channel-tile-row__tint {
        position: absolute;
        inset: 0;
        background: var(--tile-tint, transparent);
        opacity: 0;
        transition: opacity 320ms ease;
      }
      .channel-tile-row__tile:hover .channel-tile-row__tint,
      .channel-tile-row__tile:focus-visible .channel-tile-row__tint,
      .channel-tile-row__tile[data-preview] .channel-tile-row__tint {
        opacity: 1;
      }
      .channel-tile-row__tile:active .channel-tile-row__tint {
        filter: brightness(0.78);
      }
      .channel-tile-row__tile svg {
        position: relative;
        z-index: 1;
      }
      .channel-tile-row__tile svg path {
        fill: none;
        stroke: currentColor;
        stroke-width: 1.9;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      @keyframes channel-tile-in {
        from {
          opacity: 0;
          transform: translateY(6px);
        }
      }
      @media (prefers-reduced-motion: reduce) {
        .channel-tile-row__tile {
          animation: none;
          transition: none;
        }
        .channel-tile-row__tint {
          transition: none;
        }
      }
    </style>
  </head>
  <body>
    <main class="stage">
      <section class="channel-tile-row" data-channel-tile-row data-accent="#313638">
        <p class="channel-tile-row__caption">Reach the team</p>
        <div class="channel-tile-row__tiles" data-autoplay style="gap: 10px">
          <button type="button" class="channel-tile-row__tile" aria-label="Email" title="Email" data-tint="#E05A4E" style="width: 50px; height: 50px; background-color: #313638">
            <span class="channel-tile-row__tint" aria-hidden="true"></span>
            <svg viewBox="0 0 24 24" width="26" height="26" aria-hidden="true" focusable="false">
              <path d="M3.5 6.5a2 2 0 0 1 2-2h13a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2h-13a2 2 0 0 1-2-2Z" />
              <path d="m4.5 7 7.5 5.5 7.5-5.5" />
            </svg>
          </button>
          <button type="button" class="channel-tile-row__tile" aria-label="Direct chat" title="Direct chat" data-tint="#43B96A" style="width: 50px; height: 50px; background-color: #313638">
            <span class="channel-tile-row__tint" aria-hidden="true"></span>
            <svg viewBox="0 0 24 24" width="26" height="26" aria-hidden="true" focusable="false">
              <path d="M4.5 5.5h15a1.5 1.5 0 0 1 1.5 1.5v8.5a1.5 1.5 0 0 1-1.5 1.5H10.4L5 21v-4h-.5A1.5 1.5 0 0 1 3 15.5V7a1.5 1.5 0 0 1 1.5-1.5Z" />
              <path d="M8.5 11h.01" />
              <path d="M12 11h.01" />
              <path d="M15.5 11h.01" />
            </svg>
          </button>
          <button type="button" class="channel-tile-row__tile" aria-label="Phone" title="Phone" data-tint="#E7A63C" style="width: 50px; height: 50px; background-color: #313638">
            <span class="channel-tile-row__tint" aria-hidden="true"></span>
            <svg viewBox="0 0 24 24" width="26" height="26" aria-hidden="true" focusable="false">
              <path d="M8.2 3.8 9.9 7.9a1.2 1.2 0 0 1-.3 1.3L7.9 10.9a14.2 14.2 0 0 0 5.2 5.2l1.7-1.7a1.2 1.2 0 0 1 1.3-.3l4.1 1.7a1.2 1.2 0 0 1 .7 1.2l-.3 2.4a1.7 1.7 0 0 1-1.8 1.5C10.9 20.4 3.6 13.1 3.1 5.2a1.7 1.7 0 0 1 1.5-1.8l2.4-.3a1.2 1.2 0 0 1 1.2.7Z" />
            </svg>
          </button>
          <button type="button" class="channel-tile-row__tile" aria-label="Video call" title="Video call" data-tint="#3FA6F0" style="width: 50px; height: 50px; background-color: #313638">
            <span class="channel-tile-row__tint" aria-hidden="true"></span>
            <svg viewBox="0 0 24 24" width="26" height="26" aria-hidden="true" focusable="false">
              <path d="M3.5 8a2 2 0 0 1 2-2h7a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-7a2 2 0 0 1-2-2Z" />
              <path d="m14.5 10.2 5.1-3a.7.7 0 0 1 1 .6v8.4a.7.7 0 0 1-1 .6l-5.1-3" />
            </svg>
          </button>
          <button type="button" class="channel-tile-row__tile" aria-label="Community" title="Community" data-tint="#35C0B0" style="width: 50px; height: 50px; background-color: #313638">
            <span class="channel-tile-row__tint" aria-hidden="true"></span>
            <svg viewBox="0 0 24 24" width="26" height="26" aria-hidden="true" focusable="false">
              <path d="M12 3.5a8.5 8.5 0 1 1 0 17 8.5 8.5 0 0 1 0-17Z" />
              <path d="M3.5 12h17" />
              <path d="M12 3.5c2.6 2.4 2.6 14.6 0 17" />
              <path d="M12 3.5c-2.6 2.4-2.6 14.6 0 17" />
            </svg>
          </button>
          <button type="button" class="channel-tile-row__tile" aria-label="Book a time" title="Book a time" data-tint="#DE6FA1" style="width: 50px; height: 50px; background-color: #313638">
            <span class="channel-tile-row__tint" aria-hidden="true"></span>
            <svg viewBox="0 0 24 24" width="26" height="26" aria-hidden="true" focusable="false">
              <path d="M4 7a1.5 1.5 0 0 1 1.5-1.5h13A1.5 1.5 0 0 1 20 7v12a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 4 19Z" />
              <path d="M8 3.5v3M16 3.5v3M4 10.5h16" />
            </svg>
          </button>
        </div>
      </section>
      <section class="channel-tile-row" data-channel-tile-row data-accent="#313638" data-shared-tint>
        <p class="channel-tile-row__caption">Follow the build</p>
        <div class="channel-tile-row__tiles" style="gap: 8px">
          <button type="button" class="channel-tile-row__tile" aria-label="Email" title="Email" style="width: 44px; height: 44px; background-color: #313638">
            <span class="channel-tile-row__tint" aria-hidden="true"></span>
            <svg viewBox="0 0 24 24" width="23" height="23" aria-hidden="true" focusable="false">
              <path d="M3.5 6.5a2 2 0 0 1 2-2h13a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2h-13a2 2 0 0 1-2-2Z" />
              <path d="m4.5 7 7.5 5.5 7.5-5.5" />
            </svg>
          </button>
          <button type="button" class="channel-tile-row__tile" aria-label="Direct chat" title="Direct chat" style="width: 44px; height: 44px; background-color: #313638">
            <span class="channel-tile-row__tint" aria-hidden="true"></span>
            <svg viewBox="0 0 24 24" width="23" height="23" aria-hidden="true" focusable="false">
              <path d="M4.5 5.5h15a1.5 1.5 0 0 1 1.5 1.5v8.5a1.5 1.5 0 0 1-1.5 1.5H10.4L5 21v-4h-.5A1.5 1.5 0 0 1 3 15.5V7a1.5 1.5 0 0 1 1.5-1.5Z" />
              <path d="M8.5 11h.01" />
              <path d="M12 11h.01" />
              <path d="M15.5 11h.01" />
            </svg>
          </button>
          <button type="button" class="channel-tile-row__tile" aria-label="Phone" title="Phone" style="width: 44px; height: 44px; background-color: #313638">
            <span class="channel-tile-row__tint" aria-hidden="true"></span>
            <svg viewBox="0 0 24 24" width="23" height="23" aria-hidden="true" focusable="false">
              <path d="M8.2 3.8 9.9 7.9a1.2 1.2 0 0 1-.3 1.3L7.9 10.9a14.2 14.2 0 0 0 5.2 5.2l1.7-1.7a1.2 1.2 0 0 1 1.3-.3l4.1 1.7a1.2 1.2 0 0 1 .7 1.2l-.3 2.4a1.7 1.7 0 0 1-1.8 1.5C10.9 20.4 3.6 13.1 3.1 5.2a1.7 1.7 0 0 1 1.5-1.8l2.4-.3a1.2 1.2 0 0 1 1.2.7Z" />
            </svg>
          </button>
          <button type="button" class="channel-tile-row__tile" aria-label="Video call" title="Video call" style="width: 44px; height: 44px; background-color: #313638">
            <span class="channel-tile-row__tint" aria-hidden="true"></span>
            <svg viewBox="0 0 24 24" width="23" height="23" aria-hidden="true" focusable="false">
              <path d="M3.5 8a2 2 0 0 1 2-2h7a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-7a2 2 0 0 1-2-2Z" />
              <path d="m14.5 10.2 5.1-3a.7.7 0 0 1 1 .6v8.4a.7.7 0 0 1-1 .6l-5.1-3" />
            </svg>
          </button>
          <button type="button" class="channel-tile-row__tile" aria-label="Community" title="Community" style="width: 44px; height: 44px; background-color: #313638">
            <span class="channel-tile-row__tint" aria-hidden="true"></span>
            <svg viewBox="0 0 24 24" width="23" height="23" aria-hidden="true" focusable="false">
              <path d="M12 3.5a8.5 8.5 0 1 1 0 17 8.5 8.5 0 0 1 0-17Z" />
              <path d="M3.5 12h17" />
              <path d="M12 3.5c2.6 2.4 2.6 14.6 0 17" />
              <path d="M12 3.5c-2.6 2.4-2.6 14.6 0 17" />
            </svg>
          </button>
          <button type="button" class="channel-tile-row__tile" aria-label="Book a time" title="Book a time" style="width: 44px; height: 44px; background-color: #313638">
            <span class="channel-tile-row__tint" aria-hidden="true"></span>
            <svg viewBox="0 0 24 24" width="23" height="23" aria-hidden="true" focusable="false">
              <path d="M4 7a1.5 1.5 0 0 1 1.5-1.5h13A1.5 1.5 0 0 1 20 7v12a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 4 19Z" />
              <path d="M8 3.5v3M16 3.5v3M4 10.5h16" />
            </svg>
          </button>
        </div>
      </section>
    </main>
    <script>
      function mixTowardWhite(hex, amount) {
        var value = hex.replace("#", "");
        var out = "#";
        [0, 2, 4].forEach(function (offset) {
          var channel = parseInt(value.slice(offset, offset + 2), 16);
          var mixed = Math.round(channel + (255 - channel) * amount);
          out += mixed.toString(16).padStart(2, "0");
        });
        return out;
      }
      document.querySelectorAll("[data-channel-tile-row]").forEach(function (row) {
        var accent = row.getAttribute("data-accent") || "#313638";
        var shared = row.hasAttribute("data-shared-tint");
        row.querySelectorAll(".channel-tile-row__tile").forEach(function (tile) {
          var tint = shared ? mixTowardWhite(accent, 0.3) : tile.getAttribute("data-tint") || accent;
          tile.style.setProperty("--tile-tint", tint);
        });
      });

      // Preview helper: steps the tint across the tiles on a timer so the row's defining
      // per-tile colour is visible without a pointer, then hands over the moment a visitor
      // actually touches a tile.
      document.querySelectorAll("[data-autoplay]").forEach(function (row) {
        var tiles = Array.prototype.slice.call(row.querySelectorAll(".channel-tile-row__tile"));
        if (tiles.length === 0) return;
        var index = 0;
        var live = false;
        var timer = window.setInterval(function () {
          if (live) return;
          tiles.forEach(function (tile) {
            tile.removeAttribute("data-preview");
          });
          tiles[index].setAttribute("data-preview", "");
          index = (index + 1) % tiles.length;
        }, 900);
        function handOver() {
          if (live) return;
          live = true;
          window.clearInterval(timer);
          tiles.forEach(function (tile) {
            tile.removeAttribute("data-preview");
          });
        }
        // Only a real tile counts as interaction; the row's padding and the gaps between
        // tiles must not end the preview.
        row.addEventListener("pointermove", function (event) {
          if (event.target && event.target.closest && event.target.closest("button")) handOver();
        });
        row.addEventListener("pointerdown", function (event) {
          if (event.target && event.target.closest && event.target.closest("button")) handOver();
        });
        row.addEventListener("focusin", handOver, true);
      });
    </script>
  </body>
</html>
Nearby
