@anthusai/papyrus 0.0.0 → 1.0.0-next.1

package/publications/threat_intelligence/pictograms/art.tsx

@@ -0,0 +1,608 @@
+"use client";
+
+import { motion } from "motion/react";
+import type { CSSProperties, ReactElement } from "react";
+import type { ThreatIntelligencePictogramSlug } from "./registry";
+import {
+  Box,
+  Line,
+  Node,
+  PictogramSvg,
+  pointsPath,
+  type PictogramMotion,
+  type PictogramPalette,
+} from "./system";
+
+export type RegisteredPictogramProps = {
+  alt: string;
+  timing: PictogramMotion;
+  palette: PictogramPalette;
+};
+
+export type PictogramRegistryEntry = {
+  aspectRatio?: number;
+  render: (props: RegisteredPictogramProps) => ReactElement;
+};
+
+function BalanceShiftPictogram({ alt, palette, timing }: RegisteredPictogramProps) {
+  const scalePalette = {
+    ...palette,
+    edge: "var(--foreground-strong)",
+    node: "var(--foreground-strong)",
+    muted: "color-mix(in srgb, var(--foreground-strong) 54%, var(--background) 46%)",
+  };
+  const nodeTransition = timing.prefersReducedMotion
+    ? { duration: 0 }
+    : {
+        duration: timing.cycleS,
+        repeat: Infinity,
+        ease: "easeInOut",
+        times: [0, 0.24, 0.42, 0.62, 1],
+        delay: timing.delayS(900),
+      };
+  const animationDelay = `${timing.delayS()}s`;
+  const beamStyle = {
+    animation: timing.prefersReducedMotion ? "none" : `ti-scale-beam ${timing.cycleS}s ease-in-out ${animationDelay} infinite`,
+    transform: timing.prefersReducedMotion ? "rotate(7deg)" : undefined,
+    transformBox: "view-box",
+    transformOrigin: "160px 118px",
+  } as CSSProperties;
+  const leftPanStyle = {
+    animation: timing.prefersReducedMotion ? "none" : `ti-scale-left-pan ${timing.cycleS}s ease-in-out ${animationDelay} infinite`,
+    transform: timing.prefersReducedMotion ? "translateY(-10px)" : undefined,
+  } as CSSProperties;
+  const rightPanStyle = {
+    animation: timing.prefersReducedMotion ? "none" : `ti-scale-right-pan ${timing.cycleS}s ease-in-out ${animationDelay} infinite`,
+    transform: timing.prefersReducedMotion ? "translateY(12px)" : undefined,
+  } as CSSProperties;
+
+  return (
+    <PictogramSvg alt={alt} viewBox="0 0 320 320">
+      <style>
+        {`
+          @keyframes ti-scale-beam {
+            0%, 16%, 100% { transform: rotate(0deg); }
+            38%, 82% { transform: rotate(7deg); }
+          }
+
+          @keyframes ti-scale-left-pan {
+            0%, 16%, 100% { transform: translateY(0); }
+            38%, 82% { transform: translateY(-10px); }
+          }
+
+          @keyframes ti-scale-right-pan {
+            0%, 16%, 100% { transform: translateY(0); }
+            38%, 82% { transform: translateY(12px); }
+          }
+        `}
+      </style>
+      <g transform="translate(160 166) scale(1.14) translate(-160 -166)">
+        <Line d="M 160 86 V 246" palette={scalePalette} width={8} />
+        <Line d="M 124 246 H 196" palette={scalePalette} width={9} />
+        <g>
+          <g style={beamStyle}>
+            <path
+              d="M 72 118 L 248 118"
+              fill="none"
+              stroke={scalePalette.edge}
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={8}
+            />
+            <path
+              d="M 160 118 L 248 118"
+              fill="none"
+              stroke={palette.accent}
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={8}
+            />
+          </g>
+          <g style={leftPanStyle}>
+            <path
+              d="M 78 118 L 42 198 H 128 L 78 118 Z"
+              fill="none"
+              stroke={scalePalette.edge}
+              strokeLinejoin="round"
+              strokeWidth={6}
+            />
+            <circle cx={70} cy={180} fill={scalePalette.node} opacity={0.88} r={15} />
+            <circle cx={92} cy={190} fill={scalePalette.muted} opacity={0.86} r={11} />
+          </g>
+          <g style={rightPanStyle}>
+            <path
+              d="M 246 118 L 190 212 H 288 L 246 118 Z"
+              fill="none"
+              stroke={palette.accent}
+              strokeLinejoin="round"
+              strokeWidth={7}
+            />
+            <motion.circle
+              animate={timing.prefersReducedMotion ? { opacity: 0.78, scale: 1 } : { opacity: [0.42, 0.42, 0.62, 0.82, 0.82], scale: [1, 1, 1.02, 1.04, 1.04] }}
+              cx={208}
+              cy={198}
+              fill={palette.accent}
+              initial={false}
+              opacity={0.78}
+              r={13}
+              transition={nodeTransition as any}
+            />
+            <motion.circle
+              animate={timing.prefersReducedMotion ? { opacity: 0.9, scale: 1 } : { opacity: [0.5, 0.5, 0.76, 0.95, 0.95], scale: [1, 1, 1.03, 1.07, 1.07] }}
+              cx={232}
+              cy={188}
+              fill={palette.accent}
+              initial={false}
+              opacity={0.9}
+              r={14}
+              transition={{ ...nodeTransition, delay: timing.delayS(1200) } as any}
+            />
+            <motion.circle
+              animate={timing.prefersReducedMotion ? { opacity: 1, scale: 1 } : { opacity: [0.55, 0.55, 0.84, 1, 1], scale: [1, 1, 1.03, 1.1, 1.1] }}
+              cx={254}
+              cy={200}
+              fill={palette.accent}
+              initial={false}
+              opacity={1}
+              r={16}
+              transition={{ ...nodeTransition, delay: timing.delayS(1550) } as any}
+            />
+            <motion.circle
+              animate={timing.prefersReducedMotion ? { opacity: 0.82, scale: 1 } : { opacity: [0.38, 0.38, 0.68, 0.88, 0.88], scale: [1, 1, 1.02, 1.06, 1.06] }}
+              cx={274}
+              cy={189}
+              fill={palette.accent}
+              initial={false}
+              opacity={0.82}
+              r={12}
+              transition={{ ...nodeTransition, delay: timing.delayS(1900) } as any}
+            />
+          </g>
+        </g>
+        <circle cx={160} cy={118} fill={palette.frame} r={23} stroke={scalePalette.edge} strokeWidth={7} />
+      </g>
+    </PictogramSvg>
+  );
+}
+
+function NewsroomFlowPictogram({ alt, palette, timing }: RegisteredPictogramProps) {
+  const newsroomPalette = {
+    ...palette,
+    edge: "var(--foreground-strong)",
+    node: "var(--foreground-strong)",
+    muted: "color-mix(in srgb, var(--foreground-strong) 54%, var(--background) 46%)",
+  };
+  const animationDelay = `${timing.delayS()}s`;
+  const wheelStyle = {
+    animation: timing.prefersReducedMotion ? "none" : `ti-newsroom-wheel ${timing.cycleS}s ease-in-out ${animationDelay} infinite`,
+    transform: timing.prefersReducedMotion ? "rotate(7deg)" : undefined,
+    transformBox: "view-box",
+    transformOrigin: "160px 70px",
+  } as CSSProperties;
+  const dotStyle = {
+    animation: timing.prefersReducedMotion ? "none" : `ti-newsroom-dot ${timing.cycleS}s linear ${timing.delayS(1200)}s infinite`,
+    transform: timing.prefersReducedMotion ? "translate(196px, 0)" : undefined,
+  } as CSSProperties;
+  const activeLineStyle = {
+    animation: timing.prefersReducedMotion ? "none" : `ti-newsroom-flow ${timing.cycleS}s linear ${timing.delayS(1200)}s infinite`,
+    opacity: timing.prefersReducedMotion ? 0.85 : undefined,
+    strokeDashoffset: timing.prefersReducedMotion ? -224 : undefined,
+  } as CSSProperties;
+  const flowCenters = [
+    [62, 214],
+    [160, 160],
+    [258, 214],
+    [160, 264],
+    [62, 214],
+  ] as Array<[number, number]>;
+  const flowPath = pointsPath(flowCenters);
+  const states = [
+    { cx: 62, cy: 214, r: 30, inner: "M 48 214 H 76" },
+    { cx: 160, cy: 160, r: 32, inner: "M 146 152 H 174 M 146 168 H 174" },
+    { cx: 258, cy: 214, r: 30, inner: "M 246 204 H 270 M 246 214 H 270 M 246 224 H 270" },
+    { cx: 160, cy: 264, r: 30, inner: "M 148 256 L 160 268 L 176 250" },
+  ];
+
+  return (
+    <PictogramSvg alt={alt} viewBox="0 0 320 320">
+      <style>
+        {`
+          @keyframes ti-newsroom-wheel {
+            0%, 16%, 100% { transform: rotate(-5deg); }
+            34% { transform: rotate(8deg); }
+            54% { transform: rotate(-3deg); }
+            72% { transform: rotate(6deg); }
+          }
+
+          @keyframes ti-newsroom-dot {
+            0%, 100% { transform: translate(0, 0); }
+            18% { transform: translate(98px, -54px); }
+            36% { transform: translate(196px, 0); }
+            54% { transform: translate(98px, 50px); }
+            72% { transform: translate(0, 0); }
+          }
+
+          @keyframes ti-newsroom-flow {
+            0% { opacity: 0.2; stroke-dashoffset: 0; }
+            18% { opacity: 0.95; stroke-dashoffset: -112; }
+            36% { opacity: 0.95; stroke-dashoffset: -224; }
+            54% { opacity: 0.95; stroke-dashoffset: -334; }
+            72%, 100% { opacity: 0.2; stroke-dashoffset: -444; }
+          }
+        `}
+      </style>
+      <g transform="translate(160 172) scale(1.12) translate(-160 -172)">
+        <g style={wheelStyle}>
+          <circle cx={160} cy={70} fill="none" r={44} stroke={newsroomPalette.edge} strokeWidth={8} />
+          <circle cx={160} cy={70} fill={palette.frame} r={8} stroke={newsroomPalette.edge} strokeWidth={5} />
+          <Line d="M 160 70 V 28" palette={newsroomPalette} width={5} />
+          <Line d="M 160 70 L 124 94" palette={newsroomPalette} width={5} />
+          <Line d="M 160 70 L 196 94" palette={newsroomPalette} width={5} />
+        </g>
+        <Line d="M 160 116 V 128" opacity={0.7} palette={newsroomPalette} tone="muted" width={4} />
+        <Line d={flowPath} opacity={0.42} palette={newsroomPalette} tone="muted" width={5} />
+        <path
+          d={flowPath}
+          fill="none"
+          stroke={palette.accent}
+          strokeDasharray="44 440"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={5}
+          style={activeLineStyle}
+        />
+        {states.map((state, index) => (
+          <g key={`${state.cx}-${state.cy}`}>
+            <circle cx={state.cx} cy={state.cy} fill={palette.frame} r={state.r} stroke={newsroomPalette.edge} strokeWidth={6} />
+            <Line d={state.inner} opacity={index === 2 ? 0.9 : 0.72} palette={index === 2 ? palette : newsroomPalette} tone={index === 2 ? "accent" : "muted"} width={4} />
+            <Node palette={index === 2 ? palette : newsroomPalette} tone={index === 2 ? "accent" : "node"} x={state.cx} y={state.cy} />
+          </g>
+        ))}
+        <circle cx={62} cy={214} fill={palette.accent} r={7} style={dotStyle} />
+      </g>
+    </PictogramSvg>
+  );
+}
+
+function AwsDiscoveryPictogram({ alt, palette, timing }: RegisteredPictogramProps) {
+  const awsPalette = {
+    ...palette,
+    edge: "var(--foreground-strong)",
+    node: "var(--foreground-strong)",
+    muted: "color-mix(in srgb, var(--foreground-strong) 54%, var(--background) 46%)",
+  };
+  const riskStyle = (offsetMs: number, resting = false) =>
+    ({
+      animation: timing.prefersReducedMotion ? "none" : `ti-aws-risk ${timing.cycleS}s ease-in-out ${timing.delayS(offsetMs)}s infinite`,
+      opacity: timing.prefersReducedMotion && resting ? 1 : timing.prefersReducedMotion ? 0.86 : 0.18,
+      transformBox: "fill-box",
+      transformOrigin: "center",
+    }) as CSSProperties;
+  const buckets = [
+    { x: 92, y: 74, risk: null },
+    { x: 160, y: 74, risk: null },
+    { x: 228, y: 74, risk: "warning", offset: 2200, markerDx: 15, markerDy: -20 },
+    { x: 92, y: 150, risk: "warning", offset: 4200 },
+    { x: 160, y: 150, risk: null },
+    { x: 228, y: 150, risk: null },
+    { x: 92, y: 226, risk: null },
+    { x: 160, y: 226, risk: "accent", offset: 6200, markerDx: 24, markerDy: -16, markerR: 20 },
+    { x: 228, y: 226, risk: "accent", offset: 8200, markerDx: 12, markerDy: -24 },
+  ];
+
+  return (
+    <PictogramSvg alt={alt} viewBox="0 0 320 320">
+      <style>
+        {`
+          @keyframes ti-aws-risk {
+            0%, 18%, 100% { opacity: 0.18; transform: scale(0.9); }
+            26% { opacity: 1; transform: scale(1.14); }
+            34%, 78% { opacity: 1; transform: scale(1); }
+            88% { opacity: 0.42; transform: scale(0.96); }
+          }
+        `}
+      </style>
+      <g transform="translate(160 160) scale(1.14) translate(-160 -150)">
+        {buckets.map((bucket) => {
+          const stroke = bucket.risk === "accent" ? palette.accent : bucket.risk === "warning" ? palette.warning : awsPalette.edge;
+          const markerX = bucket.x + (bucket.markerDx ?? 20);
+          const markerY = bucket.y + (bucket.markerDy ?? -19);
+          const markerR = bucket.markerR ?? 10;
+          return (
+            <g key={`aws-bucket-${bucket.x}-${bucket.y}`}>
+              <path
+                d={`M ${bucket.x - 22} ${bucket.y - 16} C ${bucket.x - 22} ${bucket.y - 27}, ${bucket.x + 22} ${bucket.y - 27}, ${bucket.x + 22} ${bucket.y - 16} V ${bucket.y + 18} C ${bucket.x + 22} ${bucket.y + 29}, ${bucket.x - 22} ${bucket.y + 29}, ${bucket.x - 22} ${bucket.y + 18} Z`}
+                fill={palette.frame}
+                stroke={awsPalette.edge}
+                strokeLinejoin="round"
+                strokeWidth={5}
+              />
+              <path
+                d={`M ${bucket.x - 22} ${bucket.y - 16} C ${bucket.x - 22} ${bucket.y - 5}, ${bucket.x + 22} ${bucket.y - 5}, ${bucket.x + 22} ${bucket.y - 16}`}
+                fill="none"
+                opacity={0.72}
+                stroke={awsPalette.muted}
+                strokeLinecap="round"
+                strokeWidth={4}
+              />
+              <Node palette={awsPalette} x={bucket.x} y={bucket.y + 2} />
+              {bucket.risk ? (
+                <g style={riskStyle(bucket.offset ?? 0, bucket.risk === "accent")}>
+                  <circle cx={markerX} cy={markerY} fill={stroke} r={markerR} />
+                  <path d={`M ${markerX - markerR * 0.8} ${markerY} H ${markerX + markerR * 0.8} M ${markerX} ${markerY - markerR * 0.8} V ${markerY + markerR * 0.8}`} stroke={palette.frame} strokeLinecap="round" strokeWidth={markerR >= 16 ? 4.8 : 3.4} />
+                </g>
+              ) : null}
+            </g>
+          );
+        })}
+      </g>
+    </PictogramSvg>
+  );
+}
+
+function AzureBlastRadiusPictogram({ alt, palette, timing }: RegisteredPictogramProps) {
+  const azurePalette = {
+    ...palette,
+    edge: "var(--foreground-strong)",
+    node: "var(--foreground-strong)",
+    muted: "color-mix(in srgb, var(--foreground-strong) 54%, var(--background) 46%)",
+  };
+  const animationDelay = `${timing.delayS(1000)}s`;
+  const pathStyle = {
+    animation: timing.prefersReducedMotion ? "none" : `ti-azure-path ${timing.cycleS}s ease-in-out ${animationDelay} infinite`,
+    opacity: timing.prefersReducedMotion ? 0.95 : undefined,
+    strokeDashoffset: timing.prefersReducedMotion ? -270 : undefined,
+  } as CSSProperties;
+  const riskStyle = (offsetMs: number) =>
+    ({
+      animation: timing.prefersReducedMotion ? "none" : `ti-azure-risk ${timing.cycleS}s ease-in-out ${timing.delayS(offsetMs)}s infinite`,
+      opacity: timing.prefersReducedMotion ? 0.95 : 0.18,
+      transformBox: "fill-box",
+      transformOrigin: "center",
+    }) as CSSProperties;
+
+  return (
+    <PictogramSvg alt={alt} viewBox="0 0 320 320">
+      <style>
+        {`
+          @keyframes ti-azure-path {
+            0%, 16%, 100% { opacity: 0.18; stroke-dashoffset: 0; }
+            34%, 66% { opacity: 0.95; stroke-dashoffset: -270; }
+            78% { opacity: 0.28; stroke-dashoffset: -270; }
+          }
+
+          @keyframes ti-azure-risk {
+            0%, 20%, 100% { opacity: 0.18; transform: scale(0.9); }
+            32%, 70% { opacity: 1; transform: scale(1.08); }
+            82% { opacity: 0.35; transform: scale(1); }
+          }
+        `}
+      </style>
+      <g transform="translate(160 160) scale(1.1) translate(-160 -160)">
+        <rect fill={palette.frame} height={214} rx={12} stroke={azurePalette.edge} strokeWidth={7} width={222} x={49} y={54} />
+        <Line d="M 82 88 H 238 M 82 232 H 238" opacity={0.38} palette={azurePalette} tone="muted" width={4} />
+        <circle cx={104} cy={112} fill={palette.frame} r={34} stroke={azurePalette.edge} strokeWidth={6} />
+        <Line d="M 92 118 C 94 102, 114 102, 116 118" palette={azurePalette} tone="muted" width={4} />
+        <Node palette={azurePalette} x={104} y={104} />
+        <rect fill={palette.frame} height={52} rx={8} stroke={azurePalette.edge} strokeWidth={6} width={74} x={184} y={86} />
+        <rect fill={palette.frame} height={52} rx={8} stroke={azurePalette.edge} strokeWidth={6} width={74} x={184} y={154} />
+        <rect fill={palette.frame} height={40} rx={8} stroke={azurePalette.edge} strokeWidth={6} width={64} x={96} y={196} />
+        <Line d="M 198 112 H 244 M 198 180 H 244 M 108 216 H 148" opacity={0.72} palette={azurePalette} tone="muted" width={4} />
+        <Line d={pointsPath([[138, 112], [184, 112], [184, 180], [160, 216]])} opacity={0.34} palette={azurePalette} tone="muted" width={4} />
+        <path
+          d={pointsPath([[104, 112], [142, 112], [184, 112], [222, 112], [222, 180], [160, 216]])}
+          fill="none"
+          stroke={palette.accent}
+          strokeDasharray="44 270"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={6}
+          style={pathStyle}
+        />
+        <Node palette={azurePalette} x={104} y={112} />
+        <Node palette={azurePalette} x={222} y={112} />
+        <Node palette={azurePalette} x={222} y={180} />
+        <Node palette={azurePalette} x={160} y={216} />
+        <g style={riskStyle(3400)}>
+          <circle cx={222} cy={112} fill={palette.warning} r={12} />
+          <path d="M 213 112 H 231 M 222 103 V 121" stroke={palette.frame} strokeLinecap="round" strokeWidth={4} />
+        </g>
+        <g style={riskStyle(6200)}>
+          <circle cx={160} cy={216} fill={palette.accent} r={18} />
+          <path d="M 146 216 H 174 M 160 202 V 230" stroke={palette.frame} strokeLinecap="round" strokeWidth={5} />
+        </g>
+      </g>
+    </PictogramSvg>
+  );
+}
+
+function OpenAIInfraPictogram({ alt, palette, timing }: RegisteredPictogramProps) {
+  const aiPalette = {
+    ...palette,
+    edge: "var(--foreground-strong)",
+    node: "var(--foreground-strong)",
+    muted: "color-mix(in srgb, var(--foreground-strong) 54%, var(--background) 46%)",
+  };
+  const animationDelay = `${timing.delayS(1400)}s`;
+  const pathStyle = {
+    animation: timing.prefersReducedMotion ? "none" : `ti-ai-path ${timing.cycleS}s ease-in-out ${animationDelay} infinite`,
+    opacity: timing.prefersReducedMotion ? 0.95 : undefined,
+    strokeDashoffset: timing.prefersReducedMotion ? -280 : undefined,
+  } as CSSProperties;
+  const riskStyle = (offsetMs: number) =>
+    ({
+      animation: timing.prefersReducedMotion ? "none" : `ti-ai-risk ${timing.cycleS}s ease-in-out ${timing.delayS(offsetMs)}s infinite`,
+      opacity: timing.prefersReducedMotion ? 0.95 : 0.16,
+      transformBox: "fill-box",
+      transformOrigin: "center",
+    }) as CSSProperties;
+
+  return (
+    <PictogramSvg alt={alt} viewBox="0 0 320 320">
+      <style>
+        {`
+          @keyframes ti-ai-path {
+            0%, 16%, 100% { opacity: 0.16; stroke-dashoffset: 0; }
+            34%, 68% { opacity: 0.95; stroke-dashoffset: -280; }
+            82% { opacity: 0.28; stroke-dashoffset: -280; }
+          }
+
+          @keyframes ti-ai-risk {
+            0%, 20%, 100% { opacity: 0.16; transform: scale(0.9); }
+            30%, 72% { opacity: 1; transform: scale(1.08); }
+            84% { opacity: 0.34; transform: scale(1); }
+          }
+        `}
+      </style>
+      <g transform="translate(160 160) scale(1.1) translate(-160 -160)">
+        <rect fill={palette.frame} height={72} rx={12} stroke={aiPalette.edge} strokeWidth={7} width={94} x={113} y={44} />
+        <Line d="M 130 68 H 190 M 130 92 H 190" opacity={0.72} palette={aiPalette} tone="muted" width={4} />
+        <Node palette={aiPalette} x={160} y={80} />
+        <rect fill={palette.frame} height={54} rx={9} stroke={aiPalette.edge} strokeWidth={6} width={78} x={44} y={154} />
+        <rect fill={palette.frame} height={54} rx={9} stroke={aiPalette.edge} strokeWidth={6} width={78} x={198} y={154} />
+        <rect fill={palette.frame} height={48} rx={9} stroke={aiPalette.edge} strokeWidth={6} width={72} x={124} y={226} />
+        <Line d={pointsPath([[160, 116], [83, 154], [83, 181], [160, 226]])} opacity={0.32} palette={aiPalette} tone="muted" width={4} />
+        <Line d={pointsPath([[160, 116], [237, 154], [237, 181], [160, 226]])} opacity={0.32} palette={aiPalette} tone="muted" width={4} />
+        <path
+          d={pointsPath([[83, 181], [120, 142], [160, 80], [200, 142], [237, 181], [160, 250]])}
+          fill="none"
+          stroke={palette.accent}
+          strokeDasharray="44 280"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={6}
+          style={pathStyle}
+        />
+        <Line d="M 58 181 H 108 M 212 181 H 262 M 140 250 H 180" opacity={0.72} palette={aiPalette} tone="muted" width={4} />
+        <Node palette={aiPalette} x={83} y={181} />
+        <Node palette={aiPalette} x={237} y={181} />
+        <Node palette={aiPalette} x={160} y={250} />
+        <g style={riskStyle(2600)}>
+          <circle cx={83} cy={181} fill={palette.warning} r={12} />
+          <path d="M 74 181 H 92 M 83 172 V 190" stroke={palette.frame} strokeLinecap="round" strokeWidth={4} />
+        </g>
+        <g style={riskStyle(5600)}>
+          <circle cx={237} cy={181} fill={palette.accent} r={14} />
+          <path d="M 226 181 H 248 M 237 170 V 192" stroke={palette.frame} strokeLinecap="round" strokeWidth={4.5} />
+        </g>
+        <g style={riskStyle(8200)}>
+          <circle cx={160} cy={250} fill={palette.accent} r={18} />
+          <path d="M 146 250 H 174 M 160 236 V 264" stroke={palette.frame} strokeLinecap="round" strokeWidth={5} />
+        </g>
+      </g>
+    </PictogramSvg>
+  );
+}
+
+function GamingIsolationPictogram({ alt, palette, timing }: RegisteredPictogramProps) {
+  const gamingPalette = {
+    ...palette,
+    edge: "var(--foreground-strong)",
+    node: "var(--foreground-strong)",
+    muted: "color-mix(in srgb, var(--foreground-strong) 54%, var(--background) 46%)",
+  };
+  const animationDelay = `${timing.delayS(1200)}s`;
+  const attemptStyle = {
+    animation: timing.prefersReducedMotion ? "none" : `ti-gaming-attempt ${timing.cycleS}s ease-in-out ${animationDelay} infinite`,
+    opacity: timing.prefersReducedMotion ? 0.86 : undefined,
+  } as CSSProperties;
+  const barrierStyle = {
+    animation: timing.prefersReducedMotion ? "none" : `ti-gaming-barrier ${timing.cycleS}s ease-in-out ${animationDelay} infinite`,
+  } as CSSProperties;
+  const blockedDotStyle = {
+    animation: timing.prefersReducedMotion ? "none" : `ti-gaming-blocked-dot ${timing.cycleS}s ease-in-out ${animationDelay} infinite`,
+    opacity: timing.prefersReducedMotion ? 1 : undefined,
+  } as CSSProperties;
+
+  return (
+    <PictogramSvg alt={alt} viewBox="0 0 320 320">
+      <style>
+        {`
+          @keyframes ti-gaming-attempt {
+            0%, 16%, 100% { opacity: 0.18; }
+            34%, 58% { opacity: 0.95; }
+            72% { opacity: 0.3; }
+          }
+
+          @keyframes ti-gaming-barrier {
+            0%, 20%, 100% { opacity: 0.62; }
+            38%, 62% { opacity: 1; }
+          }
+
+          @keyframes ti-gaming-blocked-dot {
+            0%, 24%, 100% { opacity: 0; }
+            38%, 64% { opacity: 1; }
+            76% { opacity: 0.24; }
+          }
+        `}
+      </style>
+      <g transform="translate(160 160) scale(1.12) translate(-160 -160)">
+        <rect fill={palette.frame} height={152} rx={10} stroke={gamingPalette.edge} strokeWidth={7} width={92} x={202} y={84} />
+        <Line d="M 160 58 V 262" opacity={0.72} palette={gamingPalette} tone="muted" width={5} />
+        <path
+          d="M 160 58 V 262"
+          fill="none"
+          stroke={palette.accent}
+          strokeDasharray="10 13"
+          strokeLinecap="round"
+          strokeWidth={5}
+          style={barrierStyle}
+        />
+
+        <g transform="translate(34 67) scale(0.47)">
+          <path
+            d="M 24 170 C 31 136, 58 122, 88 128 C 98 130, 101 135, 106 135 H 114 C 119 135, 122 130, 132 128 C 162 122, 189 136, 196 170 L 207 200 C 216 228, 194 246, 170 236 C 154 230, 142 214, 132 198 L 125 187 H 95 L 88 198 C 78 214, 66 230, 50 236 C 26 246, 4 228, 13 200 Z"
+            fill={palette.frame}
+            stroke={gamingPalette.edge}
+            strokeLinejoin="round"
+            strokeWidth={7}
+          />
+          <Line d="M 52 176 H 86 M 69 159 V 193" opacity={0.9} palette={gamingPalette} tone="muted" width={7} />
+          <circle cx={151} cy={166} fill={gamingPalette.node} r={8} />
+          <circle cx={173} cy={184} fill={gamingPalette.muted} r={8} />
+          <circle cx={173} cy={148} fill={gamingPalette.muted} r={8} />
+        </g>
+        <Node palette={palette} tone="warning" x={102} y={136} />
+
+        <path
+          d={pointsPath([
+            [102, 136],
+            [124, 150],
+            [142, 160],
+            [151, 160],
+          ])}
+          fill="none"
+          stroke={palette.accent}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={6}
+          style={attemptStyle}
+        />
+        <g style={blockedDotStyle}>
+          <Line d="M 151 151 L 169 169 M 169 151 L 151 169" palette={palette} tone="accent" width={5} />
+        </g>
+
+        <Box fillOpacity={0.04} height={34} palette={gamingPalette} strokeTone="edge" width={50} x={224} y={110} />
+        <Box fillOpacity={0.04} height={34} palette={gamingPalette} strokeTone="edge" width={50} x={224} y={156} />
+        <Box fillOpacity={0.04} height={34} palette={gamingPalette} strokeTone="edge" width={50} x={224} y={202} />
+        <Line d="M 236 127 H 262 M 236 173 H 262 M 236 219 H 262" opacity={0.72} palette={gamingPalette} tone="muted" width={4} />
+        <Node palette={gamingPalette} x={249} y={127} />
+        <Node palette={gamingPalette} x={249} y={173} />
+        <Node palette={gamingPalette} x={249} y={219} />
+      </g>
+    </PictogramSvg>
+  );
+}
+
+export const THREAT_INTELLIGENCE_PICTOGRAM_REGISTRY: Record<ThreatIntelligencePictogramSlug, PictogramRegistryEntry> = {
+  "the-balance-of-power-is-shifting": { aspectRatio: 1, render: BalanceShiftPictogram },
+  "how-our-newsroom-learns": { aspectRatio: 1, render: NewsroomFlowPictogram },
+  "audit-aws-exposure-before-attackers-do": { aspectRatio: 1, render: AwsDiscoveryPictogram },
+  "audit-azure-blast-radius-before-attackers-do": { aspectRatio: 1, render: AzureBlastRadiusPictogram },
+  "treat-openai-accounts-like-production-infrastructure": { aspectRatio: 1, render: OpenAIInfraPictogram },
+  "how-to-play-games-securely": { aspectRatio: 1, render: GamingIsolationPictogram },
+};
+
+export function getPictogramRegistryEntry(slug: ThreatIntelligencePictogramSlug): PictogramRegistryEntry {
+  return THREAT_INTELLIGENCE_PICTOGRAM_REGISTRY[slug];
+}

package/publications/threat_intelligence/pictograms/figure.tsx

@@ -0,0 +1,82 @@
+"use client";
+
+import Image from "next/image";
+import type { ArticleImageLayout, ArticleImageThemeVariants } from "../../../lib/articles";
+import { shouldBypassImageOptimization } from "../../../lib/image-url";
+import { resolveThemedImageSrc } from "../../../lib/themed-image";
+import {
+  getThreatIntelligencePictogramPhaseOffset,
+  isThreatIntelligencePictogramSlug,
+} from "./registry";
+import { useResolvedPapyrusTheme } from "../../../components/use-resolved-papyrus-theme";
+import { THREAT_INTELLIGENCE_PICTOGRAM_REGISTRY } from "./art";
+import { PICTOGRAM_PALETTE, PictogramFrame, usePictogramMotion } from "./system";
+
+type PictogramFigureProps = {
+  alt: string;
+  caption?: string;
+  credit: string;
+  figureClassName: string;
+  height: number;
+  layout?: ArticleImageLayout;
+  priority?: boolean;
+  sizes: string;
+  slug: string;
+  src?: string;
+  themeVariants?: ArticleImageThemeVariants;
+  width: number;
+};
+
+export function PictogramFigure({
+  alt,
+  caption,
+  credit,
+  figureClassName,
+  height,
+  layout,
+  priority = false,
+  sizes,
+  slug,
+  src = "",
+  themeVariants,
+  width,
+}: PictogramFigureProps) {
+  const resolvedTheme = useResolvedPapyrusTheme();
+  const themedImageSrc = resolveThemedImageSrc(src, themeVariants, resolvedTheme);
+  const registeredSlug = isThreatIntelligencePictogramSlug(slug) ? slug : null;
+  const motionState = usePictogramMotion(registeredSlug ? getThreatIntelligencePictogramPhaseOffset(registeredSlug) : 0);
+
+  if (!registeredSlug) {
+    if (!themedImageSrc) {
+      return null;
+    }
+    return (
+      <figure className={figureClassName}>
+        <Image
+          src={themedImageSrc}
+          alt={alt}
+          width={width}
+          height={height}
+          sizes={sizes}
+          priority={priority}
+          unoptimized={shouldBypassImageOptimization(themedImageSrc)}
+        />
+        <figcaption>{caption ?? credit}</figcaption>
+      </figure>
+    );
+  }
+
+  const entry = THREAT_INTELLIGENCE_PICTOGRAM_REGISTRY[registeredSlug];
+  const palette = PICTOGRAM_PALETTE;
+  const aspectRatio = layout?.aspectRatio ?? entry.aspectRatio ?? 1;
+  const Pictogram = entry.render;
+
+  return (
+    <figure className={`${figureClassName} pictogram-figure`} data-pictogram-slug={slug}>
+      <PictogramFrame aspectRatio={aspectRatio}>
+        <Pictogram alt={alt} palette={palette} timing={motionState} />
+      </PictogramFrame>
+      <figcaption>{caption ?? credit}</figcaption>
+    </figure>
+  );
+}