Lumen Notification Stack

import type { CSSProperties } from "react";

const css = ".dp-lumen-notification-stack-asset{position:relative;display:grid;place-items:center;padding:0px;opacity:1.00;transform:translate(0px,0px) perspective(900px) rotateX(0deg) rotateZ(0deg);transform-style:preserve-3d;filter:contrast(1.00) saturate(1.00) hue-rotate(0deg) blur(0.00px) drop-shadow(0 14px 48px rgba(0,0,0,.42));transition:transform .45s cubic-bezier(.2,.8,.2,1),filter .45s ease,opacity .35s ease;will-change:transform,filter,opacity;}\n.dp-lumen-notification-stack-asset::before{content:\"\";position:absolute;inset:0px;border-radius:25px;background:radial-gradient(circle at 35% 25%,#fb718552,transparent 42%),radial-gradient(circle at 66% 72%,#f59e0b4d,transparent 50%);filter:blur(53px);opacity:0.26;z-index:-1;pointer-events:none;}\n.dp-lumen-notification-stack-asset::after{content:\"\";position:absolute;inset:0px;border-radius:25px;border:0px solid rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.14);opacity:0;pointer-events:none;}\n.dp-lumen-notification-stack-stage{--a:#fbbf24;--b:#fb7185;--deep:#78350f;--ink:#eef2ff;--muted:#8f9aad;position:relative;display:grid;place-items:center;width:278px;min-height:202px;color:var(--ink);font-family:ui-sans-serif,system-ui,sans-serif;}.dp-lumen-notification-stack-surface{position:relative;width:100%;min-height:100%;border:1px solid rgba(255,255,255,.1);border-radius:18px;background:rgba(17,19,25,.9);box-shadow:0 9px 39px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.1);overflow:hidden;}.dp-lumen-notification-stack-eyebrow{font:600 9px/1 ui-monospace,SFMono-Regular,monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);}.dp-lumen-notification-stack-title{margin:0;font-size:18px;line-height:1.1;letter-spacing:-.04em;}.dp-lumen-notification-stack-copy{margin:0;color:var(--muted);font-size:11px;line-height:1.55;}.dp-lumen-notification-stack-button{border:1px solid rgba(255,255,255,.14);border-radius:9px;background:rgba(255,255,255,.08);color:var(--ink);font:600 10px ui-monospace,SFMono-Regular,monospace;padding:9px 11px;}.dp-lumen-notification-stack-button:hover{background:rgba(255,255,255,.14);}.dp-lumen-notification-stack-still *{animation-play-state:paused!important;}.dp-lumen-notification-stack-stage{min-height:360px;}.dp-lumen-notification-stack-stack{position:relative;width:100%;height:310px;}.dp-lumen-notification-stack-notice{position:absolute;left:0;right:0;top:0;height:70px;display:flex;align-items:center;gap:12px;padding:0 14px;border:1px solid rgba(255,255,255,.1);border-radius:16px;background:rgba(22,22,24,.96);box-shadow:0 10px 24px -14px rgba(0,0,0,.6);transform-origin:50% 0;z-index:calc(10 - var(--i));transform:translateY(calc(106px + var(--i) * 11px)) scale(calc(1 - var(--i) * .055));transition:transform .6s cubic-bezier(.3,1.25,.4,1),border-color .25s;}.dp-lumen-notification-stack-notice-mark{width:36px;height:36px;flex:none;border-radius:11px;display:grid;place-items:center;background:color-mix(in srgb,var(--k) 16%,transparent);color:var(--k);}.dp-lumen-notification-stack-notice-mark svg{width:17px;height:17px;}.dp-lumen-notification-stack-notice b,.dp-lumen-notification-stack-notice small{display:block;}.dp-lumen-notification-stack-notice b{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.dp-lumen-notification-stack-notice small{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.dp-lumen-notification-stack-notice time{font-size:11px;color:var(--muted);align-self:flex-start;margin:14px 0 0 auto;}.dp-lumen-notification-stack-stack:hover .dp-lumen-notification-stack-notice,.dp-lumen-notification-stack-stack.open .dp-lumen-notification-stack-notice{transform:translateY(calc(var(--i) * 80px)) scale(1);}.dp-lumen-notification-stack-stack:focus-visible{outline:2px solid #fbbf24;outline-offset:6px;border-radius:18px;}";
const markup = "<div class=\"dp-lumen-notification-stack-asset\"><article class=\"dp-lumen-notification-stack-stage\"><div class=\"dp-lumen-notification-stack-stack\" tabindex=\"0\" role=\"group\" aria-label=\"Notifications. Hover or press to expand\"><div class=\"dp-lumen-notification-stack-notice\" style=\"--i:0;--k:#2fbf71\"><span class=\"dp-lumen-notification-stack-notice-mark\"><svg viewBox=\"0 0 20 20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M10 14V5M6.5 8.5L10 5l3.5 3.5M4 16h12\"/></svg></span><span><b>Deploy succeeded</b><small>lumen-web is live on production</small></span><time>2m</time></div><div class=\"dp-lumen-notification-stack-notice\" style=\"--i:1;--k:#fbbf24\"><span class=\"dp-lumen-notification-stack-notice-mark\"><svg viewBox=\"0 0 20 20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3.5 4.5h13v9H9l-3.5 3v-3h-2z\"/></svg></span><span><b>Sara commented</b><small>&quot;Can we try the yearly toggle first?&quot;</small></span><time>8m</time></div><div class=\"dp-lumen-notification-stack-notice\" style=\"--i:2;--k:#f5a524\"><span class=\"dp-lumen-notification-stack-notice-mark\"><svg viewBox=\"0 0 20 20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"10\" cy=\"10\" r=\"7\"/><path d=\"M10 6v8M12 7.7c-.5-.6-1.3-.9-2-.9-1.2 0-2 .6-2 1.5 0 2 4 1 4 3 0 .9-.8 1.5-2 1.5-.8 0-1.6-.3-2.1-.9\"/></svg></span><span><b>Invoice paid</b><small>$1,240.00 from Acme Inc.</small></span><time>1h</time></div><div class=\"dp-lumen-notification-stack-notice\" style=\"--i:3;--k:#fb7185\"><span class=\"dp-lumen-notification-stack-notice-mark\"><svg viewBox=\"0 0 20 20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6.5 15a3.5 3.5 0 0 1-.5-6.96A5 5 0 0 1 15.5 9 3 3 0 0 1 15 15z\"/></svg></span><span><b>Backup completed</b><small>3.2 GB archived to cold storage</small></span><time>3h</time></div></div></article></div>";

const stage: CSSProperties = {
  boxSizing: "border-box",
  width: "100%",
  minHeight: "360px",
  display: "grid",
  alignItems: "center",
  justifyContent: "center",
  padding: "48px 24px",
  overflow: "hidden",
  borderRadius: 28,
  background: "#0b0c10",
};

export function LumenNotificationStack() {
  return (
    <div
      style={stage}
      dangerouslySetInnerHTML={{ __html: "<style>" + css + "</style>" + markup }}
    />
  );
}