Refractive glass panel

24:T3837, Refractive glass panel
Cabin signal
4.2 Mbps
Uplink steady since departure, forty one minutes ago.
Cabin air
21.4 °C
Filtered and recirculated every six minutes.
25:T262ed,
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Refractive glass panel</title>
    <style>
      body {
        margin: 0;
        min-height: 100vh;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 2.5rem;
        padding: 3rem 1.5rem;
        background: #0b0d10;
        font-family: system-ui, sans-serif;
      }
      .scene {
        position: relative;
        width: 320px;
        height: 320px;
        border-radius: 20px;
        overflow: hidden;
        flex-shrink: 0;
      }
      .scene__sky {
        position: absolute;
        inset: 0;
      }
      .scene__sun {
        position: absolute;
        width: 110px;
        height: 110px;
        border-radius: 999px;
        right: 34px;
        top: 34px;
      }
      .scene__skyline {
        position: absolute;
        inset: auto 0 0 0;
        height: 38%;
        display: flex;
        align-items: flex-end;
        gap: 10px;
        padding: 0 20px;
      }
      .scene__building {
        flex-shrink: 0;
      }
      .scene__lights {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 6%;
        display: flex;
        justify-content: center;
        gap: 28px;
      }
      .scene__lights span {
        display: block;
        height: 8px;
        border-radius: 999px;
      }

      .rgp-root {
        position: absolute;
        isolation: isolate;
        overflow: hidden;
        color: #fff;
        outline: none;
      }
      .rgp-root:focus-within {
        box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
        outline-offset: 2px;
      }
      .rgp-defs {
        position: absolute;
        width: 0;
        height: 0;
        overflow: hidden;
      }
      .rgp-layer {
        position: absolute;
        inset: 0;
        pointer-events: none;
      }
      .rgp-frost {
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        background: rgba(255, 255, 255, 0.03);
      }
      .rgp-sheen {
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
      }
      .rgp-content {
        position: relative;
        z-index: 1;
        padding: 20px;
      }
      .rgp-eyebrow {
        margin: 0;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.7);
      }
      .rgp-value {
        margin: 8px 0 0;
        font-size: 28px;
        font-weight: 600;
        line-height: 1;
      }
      .rgp-value small {
        font-size: 13px;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.6);
      }
      .rgp-note {
        margin: 10px 0 0;
        font-size: 13px;
        line-height: 1.4;
        color: rgba(255, 255, 255, 0.75);
      }
      .rgp-button {
        margin-top: 16px;
        border: 1px solid rgba(255, 255, 255, 0.25);
        background: rgba(255, 255, 255, 0.1);
        color: #fff;
        font: inherit;
        font-size: 12px;
        font-weight: 500;
        padding: 7px 14px;
        border-radius: 6px;
        cursor: pointer;
      }
      .rgp-button:hover {
        background: rgba(255, 255, 255, 0.2);
      }
      .rgp-button:focus-visible {
        outline: 2px solid rgba(255, 255, 255, 0.6);
        outline-offset: 2px;
      }
    </style>
  </head>
  <body>
    <div class="scene">
      <div class="scene__sky" style="background: linear-gradient(180deg, #2c1b4d 0%, #7a2e4e 46%, #e4632f 78%, #f5c542 100%)">
        <div class="scene__sun" style="background: #ffe9a8"></div>
        <div class="scene__skyline"></div>
        <div class="scene__lights"><span style="width: 40px; background: #f5c542; opacity: 0.8"></span><span style="width: 24px; background: #ff6a1f; opacity: 0.75"></span><span style="width: 32px; background: #f5c542; opacity: 0.7"></span></div>
      </div>
      <div
        class="rgp-root"
        data-rgp
        data-rgp-radius="20"
        data-rgp-strength="180"
        data-rgp-thickness="7"
        data-rgp-tint="#FFFFFF"
        tabindex="0"
        style="left: 30px; top: 40px; right: 30px; bottom: 40px; border-radius: 20px"
      >
        <div class="rgp-content">
          <p class="rgp-eyebrow">Cabin signal</p>
          <p class="rgp-value">4.2 <small>Mbps</small></p>
          <p class="rgp-note">Uplink steady since departure, forty one minutes ago.</p>
          <button type="button" class="rgp-button">View network</button>
        </div>
      </div>
    </div>

    <div class="scene">
      <div class="scene__sky" style="background: linear-gradient(180deg, #10202e 0%, #123a4a 55%, #1f6a63 100%)">
        <div class="scene__sun" style="background: #9be15d; width: 70px; height: 70px; right: 60px; top: 58px"></div>
        <div class="scene__skyline"></div>
        <div class="scene__lights"><span style="width: 34px; background: #38bdf8; opacity: 0.8"></span><span style="width: 20px; background: #9be15d; opacity: 0.7"></span><span style="width: 40px; background: #38bdf8; opacity: 0.65"></span></div>
      </div>
      <div
        class="rgp-root"
        data-rgp
        data-rgp-radius="28"
        data-rgp-strength="240"
        data-rgp-thickness="12"
        data-rgp-tint="#9BE15D"
        tabindex="0"
        style="left: 26px; top: 34px; right: 26px; bottom: 34px; border-radius: 28px"
      >
        <div class="rgp-content">
          <p class="rgp-eyebrow">Cabin air</p>
          <p class="rgp-value">21.4 <small>&deg;C</small></p>
          <p class="rgp-note">Filtered and recirculated every six minutes.</p>
          <button type="button" class="rgp-button">Adjust</button>
        </div>
      </div>
    </div>

    <script>
      var BUILDINGS = [
        { w: 34, h: "58%", c: "#1b1030" },
        { w: 46, h: "84%", c: "#241542" },
        { w: 30, h: "46%", c: "#1b1030" },
        { w: 54, h: "96%", c: "#2a1850" },
        { w: 38, h: "66%", c: "#1b1030" },
        { w: 44, h: "78%", c: "#241542" },
        { w: 32, h: "52%", c: "#1b1030" },
      ];

      function buildSkyline(container) {
        BUILDINGS.forEach(function (b) {
          var div = document.createElement("div");
          div.className = "scene__building";
          div.style.width = b.w + "px";
          div.style.height = b.h;
          div.style.background = b.c;
          container.appendChild(div);
        });
      }
      document.querySelectorAll(".scene__skyline").forEach(buildSkyline);

      function detectSupport() {
        if (typeof window === "undefined" || typeof CSS === "undefined" || typeof CSS.supports !== "function") return false;
        var backdrop = CSS.supports("backdrop-filter", "blur(1px)") || CSS.supports("-webkit-backdrop-filter", "blur(1px)");
        var svgFilter = typeof window.SVGFEDisplacementMapElement !== "undefined";
        return backdrop && svgFilter;
      }

      var SVG_NS = "http://www.w3.org/2000/svg";

      function buildFilter(filterId, baseScale) {
        var svg = document.createElementNS(SVG_NS, "svg");
        svg.setAttribute("aria-hidden", "true");
        svg.setAttribute("focusable", "false");
        svg.setAttribute("class", "rgp-defs");
        var defs = document.createElementNS(SVG_NS, "defs");

        var filter = document.createElementNS(SVG_NS, "filter");
        filter.setAttribute("id", filterId);
        filter.setAttribute("x", "-30%");
        filter.setAttribute("y", "-30%");
        filter.setAttribute("width", "160%");
        filter.setAttribute("height", "160%");
        filter.setAttribute("color-interpolation-filters", "sRGB");

        var turbulence = document.createElementNS(SVG_NS, "feTurbulence");
        turbulence.setAttribute("type", "fractalNoise");
        turbulence.setAttribute("baseFrequency", "0.03 0.045");
        turbulence.setAttribute("numOctaves", "2");
        turbulence.setAttribute("seed", "4");
        turbulence.setAttribute("stitchTiles", "stitch");
        turbulence.setAttribute("result", "rgp-noise");
        filter.appendChild(turbulence);

        var channels = [
          { scale: baseScale, values: "1 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 0", disp: "rgp-r", mat: "rgp-rc" },
          { scale: baseScale * 0.72, values: "0 0 0 0 0  0 1 0 0 0  0 0 0 0 0  0 0 0 1 0", disp: "rgp-g", mat: "rgp-gc" },
          { scale: baseScale * 0.46, values: "0 0 0 0 0  0 0 0 0 0  0 0 1 0 0  0 0 0 1 0", disp: "rgp-b", mat: "rgp-bc" },
        ];
        channels.forEach(function (ch) {
          var disp = document.createElementNS(SVG_NS, "feDisplacementMap");
          disp.setAttribute("in", "SourceGraphic");
          disp.setAttribute("in2", "rgp-noise");
          disp.setAttribute("scale", String(ch.scale));
          disp.setAttribute("xChannelSelector", "R");
          disp.setAttribute("yChannelSelector", "G");
          disp.setAttribute("result", ch.disp);
          filter.appendChild(disp);

          var mat = document.createElementNS(SVG_NS, "feColorMatrix");
          mat.setAttribute("in", ch.disp);
          mat.setAttribute("type", "matrix");
          mat.setAttribute("values", ch.values);
          mat.setAttribute("result", ch.mat);
          filter.appendChild(mat);
        });

        var blend1 = document.createElementNS(SVG_NS, "feBlend");
        blend1.setAttribute("in", "rgp-rc");
        blend1.setAttribute("in2", "rgp-gc");
        blend1.setAttribute("mode", "screen");
        blend1.setAttribute("result", "rgp-rg");
        filter.appendChild(blend1);

        var blend2 = document.createElementNS(SVG_NS, "feBlend");
        blend2.setAttribute("in", "rgp-rg");
        blend2.setAttribute("in2", "rgp-bc");
        blend2.setAttribute("mode", "screen");
        blend2.setAttribute("result", "rgp-rgb");
        filter.appendChild(blend2);

        var transfer = document.createElementNS(SVG_NS, "feComponentTransfer");
        transfer.setAttribute("in", "rgp-rgb");
        ["feFuncR", "feFuncG", "feFuncB"].forEach(function (tag) {
          var fn = document.createElementNS(SVG_NS, tag);
          fn.setAttribute("type", "linear");
          fn.setAttribute("slope", "1.05");
          fn.setAttribute("intercept", "0.01");
          transfer.appendChild(fn);
        });
        filter.appendChild(transfer);

        defs.appendChild(filter);

        var mask = document.createElementNS(SVG_NS, "mask");
        mask.setAttribute("id", filterId + "-mask");
        mask.setAttribute("maskUnits", "userSpaceOnUse");
        mask.setAttribute("x", "0");
        mask.setAttribute("y", "0");
        mask.setAttribute("width", "320");
        mask.setAttribute("height", "320");
        var ring = document.createElementNS(SVG_NS, "rect");
        ring.setAttribute("fill", "none");
        ring.setAttribute("stroke", "#fff");
        mask.appendChild(ring);
        defs.appendChild(mask);

        svg.appendChild(defs);
        return { svg: svg, turbulence: turbulence, mask: mask, ring: ring };
      }

      function setupPanel(root, index) {
        var filterId = "rgp-filter-" + index;
        var cornerRadius = Number(root.dataset.rgpRadius || 20);
        var thickness = Number(root.dataset.rgpThickness || 7);
        var tintColor = root.dataset.rgpTint || "#FFFFFF";
        var baseScale = Number(root.dataset.rgpStrength || 180) / 9;
        var contentEl = root.firstElementChild;

        var built = buildFilter(filterId, baseScale);
        root.insertBefore(built.svg, contentEl);

        var refract = document.createElement("div");
        refract.className = "rgp-layer rgp-refract";
        refract.setAttribute("aria-hidden", "true");
        refract.hidden = true;
        refract.style.mask = "url(#" + filterId + "-mask)";
        refract.style.webkitMask = "url(#" + filterId + "-mask)";
        refract.style.backdropFilter = "url(#" + filterId + ")";
        refract.style.webkitBackdropFilter = "blur(0.2px)";
        root.insertBefore(refract, contentEl);

        var frost = document.createElement("div");
        frost.className = "rgp-layer rgp-frost";
        frost.setAttribute("aria-hidden", "true");
        root.insertBefore(frost, contentEl);

        var tint = document.createElement("div");
        tint.className = "rgp-layer";
        tint.setAttribute("aria-hidden", "true");
        tint.style.background = "linear-gradient(160deg, " + tintColor + "26 0%, " + tintColor + "08 42%, transparent 70%)";
        root.insertBefore(tint, contentEl);

        var sheen = document.createElement("div");
        sheen.className = "rgp-layer rgp-sheen";
        sheen.setAttribute("aria-hidden", "true");
        root.insertBefore(sheen, contentEl);

        if (detectSupport()) refract.hidden = false;

        var frame = 0;
        function update() {
          var w = Math.max(1, Math.round(root.clientWidth));
          var h = Math.max(1, Math.round(root.clientHeight));
          var radius = Math.max(0, Math.min(cornerRadius, Math.min(w, h) / 2));
          var t = Math.max(1, Math.min(thickness, Math.min(w, h) / 2));
          var ringRadius = Math.max(0, radius - t / 2);
          built.turbulence.setAttribute("baseFrequency", 9 / Math.max(40, w) + " " + 9 / Math.max(40, h));
          built.mask.setAttribute("width", String(w));
          built.mask.setAttribute("height", String(h));
          built.ring.setAttribute("x", String(t / 2));
          built.ring.setAttribute("y", String(t / 2));
          built.ring.setAttribute("width", String(Math.max(0, w - t)));
          built.ring.setAttribute("height", String(Math.max(0, h - t)));
          built.ring.setAttribute("rx", String(ringRadius));
          built.ring.setAttribute("stroke-width", String(t));
          root.style.borderRadius = radius + "px";
        }

        if (typeof ResizeObserver !== "undefined") {
          var observer = new ResizeObserver(function () {
            window.cancelAnimationFrame(frame);
            frame = window.requestAnimationFrame(update);
          });
          observer.observe(root);
        }
        update();
      }

      document.querySelectorAll("[data-rgp]").forEach(function (root, index) {
        setupPanel(root, index);
      });
    </script>
  </body>
</html>
Nearby
