{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "glass-shipment-flow",
  "type": "registry:ui",
  "title": "Glass Shipment Flow",
  "description": "iOS 26 liquid-glass shipment flow diagram with animated travelling-light SVG paths connecting stacked order cards.",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "registry/ruixenui/glass-shipment-flow.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { motion } from \"motion/react\";\n\n/* ── theme ────────────────────────────────────────────────── */\n\nconst CSS = `\n.af{\n  --af-card:linear-gradient(135deg,rgba(255,255,255,.86),rgba(255,255,255,.74));\n  --af-brd:rgba(0,0,0,.06);\n  --af-sh:0 0 1px rgba(0,0,0,.03),0 4px 16px rgba(0,0,0,.04),0 20px 48px rgba(0,0,0,.05),inset 0 1px 0 rgba(255,255,255,.9);\n  --af-txt:#111827;\n  --af-sub:#9ca3af;\n  --af-sep:rgba(0,0,0,.06);\n  --af-path:rgba(0,0,0,.07);\n  --af-blue:#3b82f6;\n  --af-blue-bg:rgba(59,130,246,.08);\n  --af-orange:#f97316;\n  --af-orange-bg:rgba(249,115,22,.1);\n  --af-stack:linear-gradient(135deg,rgba(255,255,255,.55),rgba(255,255,255,.42));\n  --af-stack-brd:rgba(0,0,0,.04);\n  --af-pill-brd:rgba(0,0,0,.1);\n}\n.dark .af,[data-theme=\"dark\"] .af{\n  --af-card:linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,.028));\n  --af-brd:rgba(255,255,255,.08);\n  --af-sh:0 1px 3px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.04);\n  --af-txt:#f3f4f6;\n  --af-sub:#6b7280;\n  --af-sep:rgba(255,255,255,.06);\n  --af-path:rgba(255,255,255,.06);\n  --af-blue:#60a5fa;\n  --af-blue-bg:rgba(96,165,250,.1);\n  --af-orange:#fb923c;\n  --af-orange-bg:rgba(251,146,60,.1);\n  --af-stack:linear-gradient(135deg,rgba(255,255,255,.04),rgba(255,255,255,.02));\n  --af-stack-brd:rgba(255,255,255,.05);\n  --af-pill-brd:rgba(255,255,255,.12);\n}\n@keyframes af-flow{from{stroke-dashoffset:0}to{stroke-dashoffset:-1}}\n@keyframes af-flow-rev{from{stroke-dashoffset:0}to{stroke-dashoffset:1}}\n@keyframes af-pulse{0%,100%{opacity:1}50%{opacity:.35}}\n`;\n\n/* ── component ───────────────────────────────────────────── */\n\ninterface GlassShipmentFlowProps {\n  style?: React.CSSProperties;\n}\n\nconst M = \"ui-monospace,SFMono-Regular,Menlo,monospace\";\n\nexport default function GlassShipmentFlow({ style }: GlassShipmentFlowProps) {\n  return (\n    <>\n      <style dangerouslySetInnerHTML={{ __html: CSS }} />\n      <div\n        className=\"af\"\n        style={{\n          position: \"relative\",\n          display: \"flex\",\n          minHeight: 480,\n          width: \"fit-content\",\n          minWidth: 620,\n          flexDirection: \"column\",\n          alignItems: \"center\",\n          justifyContent: \"center\",\n          ...style,\n        }}\n      >\n        {/* ── connection svg ── */}\n        <svg\n          viewBox=\"0 0 280 120\"\n          fill=\"none\"\n          aria-hidden\n          style={{\n            position: \"absolute\",\n            inset: 0,\n            margin: \"auto\",\n            height: \"100%\",\n            width: \"54%\",\n            pointerEvents: \"none\",\n          }}\n        >\n          <defs>\n            <filter id=\"af-gb\" x=\"-20%\" y=\"-100%\" width=\"140%\" height=\"300%\">\n              <feGaussianBlur in=\"SourceGraphic\" stdDeviation=\"2.5\" />\n            </filter>\n            <filter id=\"af-gg\" x=\"-20%\" y=\"-100%\" width=\"140%\" height=\"300%\">\n              <feGaussianBlur in=\"SourceGraphic\" stdDeviation=\"2.5\" />\n            </filter>\n          </defs>\n\n          {/* request rail */}\n          <path d=\"M55 50 H225\" stroke=\"var(--af-path)\" strokeLinecap=\"round\" />\n          <path\n            d=\"M55 50 H225\"\n            pathLength={1}\n            stroke=\"var(--af-blue)\"\n            strokeWidth={3}\n            strokeLinecap=\"round\"\n            strokeDasharray=\"0.12 0.38\"\n            opacity={0.45}\n            filter=\"url(#af-gb)\"\n            style={{ animation: \"af-flow 3s linear infinite\" }}\n          />\n          <path\n            d=\"M55 50 H225\"\n            pathLength={1}\n            stroke=\"var(--af-blue)\"\n            strokeWidth={1.5}\n            strokeLinecap=\"round\"\n            strokeDasharray=\"0.12 0.38\"\n            style={{ animation: \"af-flow 3s linear infinite\" }}\n          />\n\n          {/* response rail */}\n          <path d=\"M55 70 H225\" stroke=\"var(--af-path)\" strokeLinecap=\"round\" />\n          <path\n            d=\"M55 70 H225\"\n            pathLength={1}\n            stroke=\"var(--af-orange)\"\n            strokeWidth={3}\n            strokeLinecap=\"round\"\n            strokeDasharray=\"0.12 0.38\"\n            opacity={0.45}\n            filter=\"url(#af-gg)\"\n            style={{ animation: \"af-flow-rev 3.5s linear infinite\" }}\n          />\n          <path\n            d=\"M55 70 H225\"\n            pathLength={1}\n            stroke=\"var(--af-orange)\"\n            strokeWidth={1.5}\n            strokeLinecap=\"round\"\n            strokeDasharray=\"0.12 0.38\"\n            style={{ animation: \"af-flow-rev 3.5s linear infinite\" }}\n          />\n        </svg>\n\n        {/* ── cards layer ── */}\n        <div\n          style={{\n            position: \"relative\",\n            zIndex: 10,\n            display: \"flex\",\n            alignItems: \"center\",\n            gap: 104,\n          }}\n        >\n          {/* ─── left card: in transit — with stacked depth ─── */}\n          <motion.div\n            initial={{ opacity: 0, y: 10 }}\n            animate={{ opacity: 1, y: 0 }}\n            transition={{ duration: 0.7, ease: [0.16, 1, 0.3, 1] }}\n            style={{ position: \"relative\", paddingTop: 10 }}\n          >\n            {/* stack — back (peeks above main card) */}\n            <div\n              style={{\n                position: \"absolute\",\n                top: 0,\n                left: 8,\n                right: 8,\n                bottom: 10,\n                borderRadius: 20,\n                background: \"var(--af-stack)\",\n                border: \"1px solid var(--af-stack-brd)\",\n                backdropFilter: \"blur(8px)\",\n                WebkitBackdropFilter: \"blur(8px)\",\n              }}\n            />\n            {/* stack — mid (peeks above main card) */}\n            <div\n              style={{\n                position: \"absolute\",\n                top: 5,\n                left: 4,\n                right: 4,\n                bottom: 5,\n                borderRadius: 20,\n                background: \"var(--af-stack)\",\n                border: \"1px solid var(--af-stack-brd)\",\n                backdropFilter: \"blur(8px)\",\n                WebkitBackdropFilter: \"blur(8px)\",\n              }}\n            />\n\n            {/* main card */}\n            <div\n              style={{\n                position: \"relative\",\n                width: 224,\n                borderRadius: 20,\n                background: \"var(--af-card)\",\n                border: \"1px solid var(--af-brd)\",\n                boxShadow: \"var(--af-sh)\",\n                backdropFilter: \"blur(32px) saturate(1.6)\",\n                WebkitBackdropFilter: \"blur(32px) saturate(1.6)\",\n                color: \"var(--af-txt)\",\n                padding: \"22px 20px\",\n              }}\n            >\n              {/* top row: badge + order id */}\n              <div\n                style={{\n                  display: \"flex\",\n                  alignItems: \"center\",\n                  justifyContent: \"space-between\",\n                  marginBottom: 20,\n                }}\n              >\n                <div\n                  style={{\n                    display: \"inline-flex\",\n                    alignItems: \"center\",\n                    gap: 6,\n                    padding: \"5px 12px 5px 9px\",\n                    borderRadius: 999,\n                    background: \"var(--af-orange-bg)\",\n                  }}\n                >\n                  <div\n                    style={{\n                      width: 6,\n                      height: 6,\n                      borderRadius: \"50%\",\n                      background: \"var(--af-orange)\",\n                      animation: \"af-pulse 2s ease-in-out infinite\",\n                    }}\n                  />\n                  <span\n                    style={{\n                      fontSize: 11,\n                      fontWeight: 600,\n                      color: \"var(--af-orange)\",\n                    }}\n                  >\n                    In Progress\n                  </span>\n                </div>\n                <span\n                  style={{\n                    fontSize: 10,\n                    color: \"var(--af-sub)\",\n                    fontFamily: M,\n                  }}\n                >\n                  #YQZNFA\n                </span>\n              </div>\n\n              {/* price + inline metrics */}\n              <div style={{ marginBottom: 24 }}>\n                <div\n                  style={{\n                    display: \"flex\",\n                    alignItems: \"baseline\",\n                    gap: 10,\n                  }}\n                >\n                  <span\n                    style={{\n                      fontSize: 32,\n                      fontWeight: 700,\n                      letterSpacing: -1.5,\n                      lineHeight: 1,\n                    }}\n                  >\n                    $200-250\n                  </span>\n                </div>\n                <div\n                  style={{\n                    display: \"flex\",\n                    alignItems: \"center\",\n                    gap: 10,\n                    marginTop: 6,\n                  }}\n                >\n                  <span\n                    style={{\n                      fontSize: 12,\n                      color: \"var(--af-blue)\",\n                      fontWeight: 500,\n                    }}\n                  >\n                    +14%\n                  </span>\n                  <span\n                    style={{\n                      fontSize: 12,\n                      color: \"var(--af-sub)\",\n                    }}\n                  >\n                    +$25,26\n                  </span>\n                </div>\n              </div>\n\n              {/* route visualization */}\n              <div\n                style={{\n                  display: \"flex\",\n                  gap: 12,\n                  alignItems: \"stretch\",\n                  marginBottom: 24,\n                }}\n              >\n                {/* vertical dots + solid line */}\n                <div\n                  style={{\n                    display: \"flex\",\n                    flexDirection: \"column\",\n                    alignItems: \"center\",\n                    paddingTop: 5,\n                    paddingBottom: 5,\n                  }}\n                >\n                  <div\n                    style={{\n                      width: 9,\n                      height: 9,\n                      borderRadius: \"50%\",\n                      background: \"var(--af-orange)\",\n                      flexShrink: 0,\n                    }}\n                  />\n                  <div\n                    style={{\n                      flex: 1,\n                      width: 2,\n                      minHeight: 22,\n                      background: \"var(--af-orange)\",\n                      opacity: 0.35,\n                      borderRadius: 1,\n                    }}\n                  />\n                  <div\n                    style={{\n                      width: 9,\n                      height: 9,\n                      borderRadius: \"50%\",\n                      border: \"2px solid var(--af-orange)\",\n                      opacity: 0.6,\n                      flexShrink: 0,\n                    }}\n                  />\n                </div>\n                {/* addresses */}\n                <div\n                  style={{\n                    display: \"flex\",\n                    flexDirection: \"column\",\n                    justifyContent: \"space-between\",\n                    paddingTop: 1,\n                    paddingBottom: 1,\n                    minWidth: 0,\n                  }}\n                >\n                  <span\n                    style={{\n                      fontSize: 11,\n                      lineHeight: 1.3,\n                    }}\n                  >\n                    1248 N Highland Ave,\n                    <br />\n                    <span style={{ color: \"var(--af-sub)\" }}>\n                      Los Angeles, CA 90038\n                    </span>\n                  </span>\n                  <span\n                    style={{\n                      fontSize: 11,\n                      color: \"var(--af-sub)\",\n                      lineHeight: 1.3,\n                    }}\n                  >\n                    2530 W 8th St,\n                    <br />\n                    Los Angeles, CA 90057\n                  </span>\n                </div>\n              </div>\n\n              {/* footer */}\n              <div\n                style={{\n                  height: 1,\n                  background: \"var(--af-sep)\",\n                  marginBottom: 14,\n                }}\n              />\n              <div\n                style={{\n                  display: \"flex\",\n                  justifyContent: \"space-between\",\n                  alignItems: \"center\",\n                }}\n              >\n                <span style={{ fontSize: 11, color: \"var(--af-sub)\" }}>\n                  Oct 2, 2025\n                </span>\n                <div\n                  style={{\n                    display: \"inline-flex\",\n                    alignItems: \"center\",\n                    gap: 4,\n                    padding: \"4px 10px\",\n                    borderRadius: 999,\n                    border: \"1px solid var(--af-pill-brd)\",\n                    fontSize: 10,\n                    color: \"var(--af-sub)\",\n                    fontFamily: M,\n                  }}\n                >\n                  <svg\n                    width={10}\n                    height={10}\n                    viewBox=\"0 0 24 24\"\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    strokeWidth={2}\n                    strokeLinecap=\"round\"\n                  >\n                    <circle cx={12} cy={13} r={8} />\n                    <path d=\"M12 9v4l2 2\" />\n                    <path d=\"M5 3L2 6\" />\n                    <path d=\"M22 6l-3-3\" />\n                    <path d=\"M12 2v2\" />\n                  </svg>\n                  00:43:52\n                </div>\n              </div>\n            </div>\n          </motion.div>\n\n          {/* ─── right card: delivered — with stacked depth ─── */}\n          <motion.div\n            initial={{ opacity: 0, y: 10 }}\n            animate={{ opacity: 1, y: 0 }}\n            transition={{\n              duration: 0.7,\n              delay: 0.08,\n              ease: [0.16, 1, 0.3, 1],\n            }}\n            style={{ position: \"relative\", paddingTop: 10 }}\n          >\n            {/* stack — back */}\n            <div\n              style={{\n                position: \"absolute\",\n                top: 0,\n                left: 8,\n                right: 8,\n                bottom: 10,\n                borderRadius: 20,\n                background: \"var(--af-stack)\",\n                border: \"1px solid var(--af-stack-brd)\",\n                backdropFilter: \"blur(8px)\",\n                WebkitBackdropFilter: \"blur(8px)\",\n              }}\n            />\n            {/* stack — mid */}\n            <div\n              style={{\n                position: \"absolute\",\n                top: 5,\n                left: 4,\n                right: 4,\n                bottom: 5,\n                borderRadius: 20,\n                background: \"var(--af-stack)\",\n                border: \"1px solid var(--af-stack-brd)\",\n                backdropFilter: \"blur(8px)\",\n                WebkitBackdropFilter: \"blur(8px)\",\n              }}\n            />\n\n            {/* main card */}\n            <div\n              style={{\n                position: \"relative\",\n                width: 224,\n                borderRadius: 20,\n                background: \"var(--af-card)\",\n                border: \"1px solid var(--af-brd)\",\n                boxShadow: \"var(--af-sh)\",\n                backdropFilter: \"blur(32px) saturate(1.6)\",\n                WebkitBackdropFilter: \"blur(32px) saturate(1.6)\",\n                color: \"var(--af-txt)\",\n                padding: \"22px 20px\",\n              }}\n            >\n              {/* top row: badge + order id */}\n              <div\n                style={{\n                  display: \"flex\",\n                  alignItems: \"center\",\n                  justifyContent: \"space-between\",\n                  marginBottom: 20,\n                }}\n              >\n                <div\n                  style={{\n                    display: \"inline-flex\",\n                    alignItems: \"center\",\n                    gap: 6,\n                    padding: \"5px 12px 5px 9px\",\n                    borderRadius: 999,\n                    background: \"var(--af-blue-bg)\",\n                  }}\n                >\n                  <div\n                    style={{\n                      width: 6,\n                      height: 6,\n                      borderRadius: \"50%\",\n                      background: \"var(--af-blue)\",\n                    }}\n                  />\n                  <span\n                    style={{\n                      fontSize: 11,\n                      fontWeight: 600,\n                      color: \"var(--af-blue)\",\n                    }}\n                  >\n                    Delivered\n                  </span>\n                </div>\n                <span\n                  style={{\n                    fontSize: 10,\n                    color: \"var(--af-sub)\",\n                    fontFamily: M,\n                  }}\n                >\n                  #MPLN47\n                </span>\n              </div>\n\n              {/* amount + inline metrics */}\n              <div style={{ marginBottom: 24 }}>\n                <div\n                  style={{\n                    display: \"flex\",\n                    alignItems: \"baseline\",\n                    gap: 10,\n                  }}\n                >\n                  <span\n                    style={{\n                      fontSize: 32,\n                      fontWeight: 700,\n                      letterSpacing: -1.5,\n                      lineHeight: 1,\n                    }}\n                  >\n                    $1,240\n                  </span>\n                </div>\n                <div\n                  style={{\n                    display: \"flex\",\n                    alignItems: \"center\",\n                    gap: 10,\n                    marginTop: 6,\n                  }}\n                >\n                  <span\n                    style={{\n                      fontSize: 12,\n                      color: \"var(--af-blue)\",\n                      fontWeight: 500,\n                    }}\n                  >\n                    +8%\n                  </span>\n                  <span style={{ fontSize: 12, color: \"var(--af-sub)\" }}>\n                    +$92,40\n                  </span>\n                </div>\n              </div>\n\n              {/* route visualization */}\n              <div\n                style={{\n                  display: \"flex\",\n                  gap: 12,\n                  alignItems: \"stretch\",\n                  marginBottom: 24,\n                }}\n              >\n                <div\n                  style={{\n                    display: \"flex\",\n                    flexDirection: \"column\",\n                    alignItems: \"center\",\n                    paddingTop: 5,\n                    paddingBottom: 5,\n                  }}\n                >\n                  <div\n                    style={{\n                      width: 9,\n                      height: 9,\n                      borderRadius: \"50%\",\n                      background: \"var(--af-orange)\",\n                      flexShrink: 0,\n                    }}\n                  />\n                  <div\n                    style={{\n                      flex: 1,\n                      width: 2,\n                      minHeight: 22,\n                      background: \"var(--af-orange)\",\n                      opacity: 0.3,\n                      borderRadius: 1,\n                    }}\n                  />\n                  <div\n                    style={{\n                      width: 9,\n                      height: 9,\n                      borderRadius: \"50%\",\n                      border: \"2px solid var(--af-orange)\",\n                      opacity: 0.5,\n                      flexShrink: 0,\n                    }}\n                  />\n                </div>\n                <div\n                  style={{\n                    display: \"flex\",\n                    flexDirection: \"column\",\n                    justifyContent: \"space-between\",\n                    paddingTop: 1,\n                    paddingBottom: 1,\n                    minWidth: 0,\n                  }}\n                >\n                  <span\n                    style={{\n                      fontSize: 11,\n                      lineHeight: 1.3,\n                    }}\n                  >\n                    88 Colin P Kelly Jr St,\n                    <br />\n                    <span style={{ color: \"var(--af-sub)\" }}>\n                      San Francisco, CA 94107\n                    </span>\n                  </span>\n                  <span\n                    style={{\n                      fontSize: 11,\n                      color: \"var(--af-sub)\",\n                      lineHeight: 1.3,\n                    }}\n                  >\n                    1 Hacker Way,\n                    <br />\n                    Menlo Park, CA 94025\n                  </span>\n                </div>\n              </div>\n\n              {/* footer */}\n              <div\n                style={{\n                  height: 1,\n                  background: \"var(--af-sep)\",\n                  marginBottom: 14,\n                }}\n              />\n              <div\n                style={{\n                  display: \"flex\",\n                  justifyContent: \"space-between\",\n                  alignItems: \"center\",\n                }}\n              >\n                <span style={{ fontSize: 11, color: \"var(--af-sub)\" }}>\n                  Sep 28, 2025\n                </span>\n                <div\n                  style={{\n                    display: \"inline-flex\",\n                    alignItems: \"center\",\n                    gap: 4,\n                    padding: \"4px 10px\",\n                    borderRadius: 999,\n                    border: \"1px solid var(--af-pill-brd)\",\n                    fontSize: 10,\n                    color: \"var(--af-sub)\",\n                    fontFamily: M,\n                  }}\n                >\n                  <svg\n                    width={10}\n                    height={10}\n                    viewBox=\"0 0 24 24\"\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    strokeWidth={2}\n                    strokeLinecap=\"round\"\n                  >\n                    <circle cx={12} cy={13} r={8} />\n                    <path d=\"M12 9v4l2 2\" />\n                    <path d=\"M5 3L2 6\" />\n                    <path d=\"M22 6l-3-3\" />\n                    <path d=\"M12 2v2\" />\n                  </svg>\n                  01:12:08\n                </div>\n              </div>\n            </div>\n          </motion.div>\n        </div>\n      </div>\n    </>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ruixen/glass-shipment-flow.tsx"
    }
  ]
}