@vfrey/vfrey 0.0.1 → 1.0.0-beta.0

package/src/remotion/films/rea/drawings.tsx

@@ -0,0 +1,907 @@
+import type { ReactNode } from "react";
+
+const sans = "Liberation Sans, Arial, sans-serif";
+const mono = "Liberation Mono, Menlo, monospace";
+
+const githubPath =
+  "M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12";
+
+const javascriptPath =
+  "M0 0h24v24H0V0zm22.034 18.276c-.175-1.095-.888-2.015-3.003-2.873-.736-.345-1.554-.585-1.797-1.14-.091-.33-.105-.51-.046-.705.15-.646.915-.84 1.515-.66.39.12.75.42.976.9 1.034-.676 1.034-.676 1.755-1.125-.27-.42-.404-.601-.586-.78-.63-.705-1.469-1.065-2.834-1.034l-.705.089c-.676.165-1.32.525-1.71 1.005-1.14 1.291-.811 3.541.569 4.471 1.365 1.02 3.361 1.244 3.616 2.205.24 1.17-.87 1.545-1.966 1.41-.811-.18-1.26-.586-1.755-1.336l-1.83 1.051c.21.48.45.689.81 1.109 1.74 1.756 6.09 1.666 6.871-1.004.029-.09.24-.705.074-1.65l.046.067zm-8.983-7.245h-2.248c0 1.938-.009 3.864-.009 5.805 0 1.232.063 2.363-.138 2.711-.33.689-1.18.601-1.566.48-.396-.196-.597-.466-.83-.855-.063-.105-.11-.196-.127-.196l-1.825 1.125c.305.63.75 1.172 1.324 1.517.855.51 2.004.675 3.207.405.783-.226 1.458-.691 1.811-1.411.51-.93.402-2.07.397-3.346.012-2.054 0-4.109 0-6.179l.004-.056z";
+
+function shadow(id: string) {
+  return (
+    <filter id={`${id}-sh`} x="-25%" y="-20%" width="150%" height="160%">
+      <feDropShadow dx="0" dy="16" stdDeviation="10" floodColor="#000" floodOpacity="0.42" />
+    </filter>
+  );
+}
+
+export function GithubMark({ size = 42, fill = "#f6f3ec" }: { size?: number; fill?: string }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" aria-hidden>
+      <path fill={fill} d={githubPath} />
+    </svg>
+  );
+}
+
+export function NotesApp({ id, query, filter, width }: { id: string; query: string; filter: number; width: number }) {
+  const notes = [
+    { title: "Grocery list", line: "oat milk, eggs", keep: false },
+    { title: "Search ideas", line: "how the box filters", keep: true },
+    { title: "Train times", line: "platform three", keep: false },
+    { title: "Recipe", line: "search the pantry", keep: true },
+    { title: "Monday", line: "call home", keep: false },
+  ];
+  const height = Math.round(width * (780 / 640));
+  return (
+    <svg width={width} height={height} viewBox="0 0 640 780">
+      <defs>
+        {shadow(id)}
+        <linearGradient id={`${id}-paper`} x1="0" y1="0" x2="0" y2="1">
+          <stop offset="0" stopColor="#fff6cc" />
+          <stop offset="1" stopColor="#e4bc52" />
+        </linearGradient>
+        <linearGradient id={`${id}-spine`} x1="0" y1="0" x2="1" y2="0">
+          <stop offset="0" stopColor="#c8922a" />
+          <stop offset="1" stopColor="#f0d48a" />
+        </linearGradient>
+      </defs>
+      <ellipse cx="330" cy="748" rx="240" ry="18" fill="#000" opacity="0.3" />
+      <rect x="40" y="24" width="560" height="700" rx="34" fill={`url(#${id}-paper)`} filter={`url(#${id}-sh)`} />
+      <rect x="40" y="24" width="26" height="700" fill={`url(#${id}-spine)`} />
+      <circle cx="104" cy="72" r="11" fill="#ff5d6c" />
+      <circle cx="138" cy="72" r="11" fill="#f0c14a" />
+      <circle cx="172" cy="72" r="11" fill="#3dce8e" />
+      <text x="210" y="84" fill="#5c4212" fontSize="34" fontFamily={sans} fontWeight="700">
+        Notes
+      </text>
+      <rect x="86" y="112" width="470" height="76" rx="38" fill="#fffaf0" stroke="#b8882e" strokeWidth="4" />
+      <circle cx="132" cy="150" r="16" fill="none" stroke="#5c4212" strokeWidth="5" />
+      <path d="M144 162 L158 176" stroke="#5c4212" strokeWidth="5" strokeLinecap="round" />
+      <text x="176" y="162" fill="#2c210c" fontSize="32" fontFamily={sans}>
+        {query}
+        <tspan fill="#b8882e">|</tspan>
+      </text>
+      {notes.map((note, index) => {
+        const y = 214 + index * 96;
+        const gone = note.keep ? 0 : filter;
+        return (
+          <g key={note.title} opacity={1 - gone * 0.92} transform={`translate(${gone * 90} 0)`}>
+            <rect x="86" y={y} width="470" height="82" rx="16" fill="#fffaf0" />
+            <text x="110" y={y + 34} fill="#2c210c" fontSize="26" fontFamily={sans} fontWeight="700">
+              {note.title}
+            </text>
+            <text x="110" y={y + 62} fill="#7a5e28" fontSize="20" fontFamily={sans}>
+              {note.line}
+            </text>
+          </g>
+        );
+      })}
+    </svg>
+  );
+}
+
+export function LockedFolder({ id, width }: { id: string; width: number }) {
+  const height = Math.round(width * 0.78);
+  return (
+    <svg width={width} height={height} viewBox="0 0 480 374">
+      <defs>
+        {shadow(id)}
+        <linearGradient id={`${id}-body`} x1="0" y1="0" x2="0" y2="1">
+          <stop offset="0" stopColor="#f7d56a" />
+          <stop offset="1" stopColor="#d39a28" />
+        </linearGradient>
+        <linearGradient id={`${id}-flap`} x1="0" y1="0" x2="0" y2="1">
+          <stop offset="0" stopColor="#c48418" />
+          <stop offset="1" stopColor="#8d5d0c" />
+        </linearGradient>
+        <linearGradient id={`${id}-lock`} x1="0" y1="0" x2="0" y2="1">
+          <stop offset="0" stopColor="#f4f7fb" />
+          <stop offset="1" stopColor="#9aa6bd" />
+        </linearGradient>
+      </defs>
+      <ellipse cx="240" cy="348" rx="170" ry="16" fill="#000" opacity="0.28" />
+      <path d="M70 96 H190 L214 68 H300 V110 H70 Z" fill="#e8c15a" />
+      <rect x="48" y="96" width="384" height="236" rx="22" fill={`url(#${id}-body)`} filter={`url(#${id}-sh)`} />
+      <path d="M48 196 H432 V310 a22 22 0 0 1 -22 22 H70 a22 22 0 0 1 -22 -22 Z" fill={`url(#${id}-flap)`} />
+      <path d="M168 232 L140 256 L168 280" fill="none" stroke="#fff6cc" strokeWidth="8" strokeLinejoin="round" strokeLinecap="round" />
+      <path d="M196 228 L236 284" stroke="#fff6cc" strokeWidth="8" strokeLinecap="round" />
+      <path d="M264 232 L292 256 L264 280" fill="none" stroke="#fff6cc" strokeWidth="8" strokeLinejoin="round" strokeLinecap="round" />
+      <rect x="292" y="118" width="78" height="64" rx="12" fill={`url(#${id}-lock)`} />
+      <path d="M308 122 V100 a24 24 0 0 1 48 0 V122" fill="none" stroke="#dfe6f2" strokeWidth="10" />
+      <circle cx="331" cy="148" r="6" fill="#3a4256" />
+      <rect x="327" y="150" width="8" height="16" rx="3" fill="#3a4256" />
+    </svg>
+  );
+}
+
+export function ReaPlate({ id, width }: { id: string; width: number }) {
+  const height = Math.round(width * 0.42);
+  return (
+    <svg width={width} height={height} viewBox="0 0 640 270">
+      <defs>
+        {shadow(id)}
+        <linearGradient id={`${id}-plate`} x1="0" y1="0" x2="0" y2="1">
+          <stop offset="0" stopColor="#2a354c" />
+          <stop offset="1" stopColor="#141b2c" />
+        </linearGradient>
+        <linearGradient id={`${id}-rim`} x1="0" y1="0" x2="1" y2="1">
+          <stop offset="0" stopColor="#ffe08a" />
+          <stop offset="1" stopColor="#b8860b" />
+        </linearGradient>
+      </defs>
+      <ellipse cx="320" cy="246" rx="220" ry="14" fill="#000" opacity="0.35" />
+      <rect x="28" y="28" width="584" height="200" rx="36" fill={`url(#${id}-rim)`} filter={`url(#${id}-sh)`} />
+      <rect x="42" y="42" width="556" height="172" rx="28" fill={`url(#${id}-plate)`} />
+      <circle cx="118" cy="128" r="36" fill="none" stroke="#f0c14a" strokeWidth="8" />
+      <circle cx="118" cy="128" r="16" fill="#8eb6ff" opacity="0.85" />
+      <path d="M142 152 L168 178" stroke="#f0c14a" strokeWidth="8" strokeLinecap="round" />
+      <text x="196" y="148" fill="#f6f3ec" fontSize="78" fontFamily={sans} fontWeight="700">
+        REA
+      </text>
+    </svg>
+  );
+}
+
+export function RepoCard({
+  id,
+  pathName,
+  stars,
+  fill,
+  dim,
+  width,
+}: {
+  id: string;
+  pathName: string;
+  stars: string;
+  fill: number;
+  dim: number;
+  width: number;
+}) {
+  const height = Math.round(width * 0.62);
+  return (
+    <svg width={width} height={height} viewBox="0 0 760 470" opacity={1 - dim * 0.45}>
+      <defs>
+        {shadow(id)}
+        <linearGradient id={`${id}-card`} x1="0" y1="0" x2="0" y2="1">
+          <stop offset="0" stopColor="#243044" />
+          <stop offset="1" stopColor="#151c2c" />
+        </linearGradient>
+        <linearGradient id={`${id}-star`} x1="0" y1="0" x2="0" y2="1">
+          <stop offset="0" stopColor="#ffe08a" />
+          <stop offset="1" stopColor="#e0a31a" />
+        </linearGradient>
+      </defs>
+      <rect x="24" y="20" width="712" height="420" rx="32" fill={`url(#${id}-card)`} filter={`url(#${id}-sh)`} />
+      <rect x="24" y="300" width="712" height="140" rx="32" fill="#101726" />
+      <rect x="24" y="300" width="712" height="40" fill="#101726" />
+      <svg x="56" y="52" width="64" height="64" viewBox="0 0 24 24">
+        <path fill="#f6f3ec" d={githubPath} />
+      </svg>
+      <text x="140" y="98" fill="#f6f3ec" fontSize="40" fontFamily={mono}>
+        {pathName}
+      </text>
+      {[0, 1, 2, 3].map((row) => (
+        <g key={row} opacity={0.85}>
+          <rect x="56" y={150 + row * 34} width={18} height="18" rx="4" fill="#3d4d68" />
+          <rect x="88" y={154 + row * 34} width={280 - row * 30} height="12" rx="6" fill="#3d4d68" />
+        </g>
+      ))}
+      <circle cx="560" cy="168" r="78" fill="#101726" stroke="#f0c14a" strokeWidth="4" />
+      <path
+        d="M560 112 L574 150 H614 L582 172 L594 212 L560 188 L526 212 L538 172 L506 150 H546 Z"
+        fill={fill > 0.5 ? `url(#${id}-star)` : "none"}
+        stroke="#f0c14a"
+        strokeWidth="6"
+        strokeLinejoin="round"
+      />
+      <text x="430" y="390" fill="#f6f3ec" fontSize="54" fontFamily={sans} fontWeight="700" textAnchor="middle">
+        {stars}
+      </text>
+    </svg>
+  );
+}
+
+export function ChatWindow({
+  id,
+  typed,
+  connected,
+  width,
+}: {
+  id: string;
+  typed: string;
+  connected: number;
+  width: number;
+}) {
+  const height = Math.round(width * 0.72);
+  return (
+    <svg width={width} height={height} viewBox="0 0 760 548">
+      <defs>
+        {shadow(id)}
+        <linearGradient id={`${id}-win`} x1="0" y1="0" x2="0" y2="1">
+          <stop offset="0" stopColor="#2c3850" />
+          <stop offset="1" stopColor="#141b2b" />
+        </linearGradient>
+      </defs>
+      <rect x="20" y="16" width="720" height="512" rx="28" fill={`url(#${id}-win)`} filter={`url(#${id}-sh)`} />
+      <rect x="20" y="16" width="720" height="72" rx="28" fill="#101726" />
+      <rect x="20" y="52" width="720" height="36" fill="#101726" />
+      <circle cx="64" cy="52" r="10" fill="#ff5d6c" />
+      <circle cx="96" cy="52" r="10" fill="#f0c14a" />
+      <circle cx="128" cy="52" r="10" fill="#3dce8e" />
+      <circle cx="660" cy="52" r="14" fill={connected > 0.6 ? "#3dce8e" : "#3a465f"} />
+      <rect x="676" y="46" width="28" height="12" rx="6" fill={connected > 0.6 ? "#3dce8e" : "#3a465f"} />
+      <rect x="56" y="120" width="420" height="84" rx="22" fill="#243044" />
+      <text x="80" y="170" fill="#d5dbea" fontSize="26" fontFamily={sans}>
+        How can I help?
+      </text>
+      {typed ? (
+        <g>
+          <rect x="250" y="224" width="460" height="120" rx="22" fill="#f0c14a" />
+          <text x="274" y="270" fill="#2a2108" fontSize="24" fontFamily={sans}>
+            {typed.slice(0, 32)}
+          </text>
+          {typed.length > 32 ? (
+            <text x="274" y="306" fill="#2a2108" fontSize="24" fontFamily={sans}>
+              {typed.slice(32, 64)}
+            </text>
+          ) : null}
+        </g>
+      ) : null}
+      <rect x="56" y="430" width="648" height="70" rx="18" fill="#0e1422" stroke="#3a465f" strokeWidth="3" />
+      <path d="M650 454 L684 466 L650 478 L658 466 Z" fill="#f0c14a" />
+    </svg>
+  );
+}
+
+export function LayerStack({ id, lit, width }: { id: string; lit: number; width: number }) {
+  const height = Math.round(width * 0.72);
+  const slabs = [
+    { y: 20, label: "What you see", kind: "screen" },
+    { y: 150, label: "The code", kind: "code" },
+    { y: 280, label: "Compiled", kind: "chip" },
+  ];
+  return (
+    <svg width={width} height={height} viewBox="0 0 760 520">
+      <defs>
+        <linearGradient id={`${id}-top`} x1="0" y1="0" x2="0" y2="1">
+          <stop offset="0" stopColor="#d5deee" />
+          <stop offset="1" stopColor="#8ea0bd" />
+        </linearGradient>
+        <linearGradient id={`${id}-face`} x1="0" y1="0" x2="0" y2="1">
+          <stop offset="0" stopColor="#5d6d8c" />
+          <stop offset="1" stopColor="#2c384e" />
+        </linearGradient>
+      </defs>
+      {slabs.map((slab, index) => {
+        const on = lit > index ? 1 : 0;
+        return (
+          <g key={slab.kind}>
+            <rect x="40" y={slab.y + 36} width="680" height="78" rx="16" fill={`url(#${id}-face)`} />
+            <rect
+              x="40"
+              y={slab.y}
+              width="680"
+              height="78"
+              rx="16"
+              fill={`url(#${id}-top)`}
+              stroke={on ? "#f0c14a" : "#243044"}
+              strokeWidth={on ? 6 : 0}
+            />
+            {slab.kind === "screen" ? (
+              <rect x="70" y={slab.y + 18} width="120" height="42" rx="8" fill="#141b2b" />
+            ) : null}
+            {slab.kind === "code" ? (
+              <path d="M90 28 L70 52 L90 76 M130 28 L150 52 L130 76" transform={`translate(0 ${slab.y})`} fill="none" stroke="#141b2b" strokeWidth="6" strokeLinecap="round" />
+            ) : null}
+            {slab.kind === "chip" ? (
+              <g>
+                {[0, 1, 2, 3].map((pin) => (
+                  <rect key={pin} x={70 + pin * 22} y={slab.y + 8} width="8" height="16" rx="2" fill="#141b2b" />
+                ))}
+                <rect x="78" y={slab.y + 28} width="70" height="28" rx="4" fill="#141b2b" />
+              </g>
+            ) : null}
+            <text x="230" y={slab.y + 50} fill="#141b2b" fontSize="28" fontFamily={sans} fontWeight="700">
+              {slab.label}
+            </text>
+          </g>
+        );
+      })}
+    </svg>
+  );
+}
+
+export function TerminalWindow({ id, text, width }: { id: string; text: string; width: number }) {
+  const height = Math.round(width * 0.58);
+  return (
+    <svg width={width} height={height} viewBox="0 0 900 520">
+      <defs>
+        {shadow(id)}
+        <linearGradient id={`${id}-term`} x1="0" y1="0" x2="0" y2="1">
+          <stop offset="0" stopColor="#243044" />
+          <stop offset="1" stopColor="#101622" />
+        </linearGradient>
+      </defs>
+      <rect x="16" y="12" width="868" height="490" rx="28" fill={`url(#${id}-term)`} filter={`url(#${id}-sh)`} />
+      <circle cx="64" cy="64" r="12" fill="#ff5d6c" />
+      <circle cx="104" cy="64" r="12" fill="#f0c14a" />
+      <circle cx="144" cy="64" r="12" fill="#3dce8e" />
+      <text x="48" y="180" fill="#3dce8e" fontSize="40" fontFamily={mono}>
+        ${" "}
+        <tspan fill="#f0c14a">{text}</tspan>
+        <tspan fill="#f6f3ec">▌</tspan>
+      </text>
+    </svg>
+  );
+}
+
+export function EnterKey({ id, press, width }: { id: string; press: number; width: number }) {
+  const height = Math.round(width * 0.72);
+  return (
+    <svg width={width} height={height} viewBox="0 0 220 160" style={{ translate: `0px ${press * 10}px`, scale: `1 ${1 - press * 0.12}` }}>
+      <defs>
+        <linearGradient id={`${id}-key`} x1="0" y1="0" x2="0" y2="1">
+          <stop offset="0" stopColor="#f7f8fb" />
+          <stop offset="1" stopColor="#b7c0d1" />
+        </linearGradient>
+      </defs>
+      <rect x="18" y="28" width="184" height="28" rx="8" fill="#6d7890" />
+      <rect x="18" y="8" width="184" height="100" rx="16" fill={`url(#${id}-key)`} />
+      <path d="M48 58 H130 V40 L168 70 L130 100 V82 H48 Z" fill="#2a3142" />
+    </svg>
+  );
+}
+
+export function NameTile({ id, name, ring, dashed, width }: { id: string; name: string; ring: number; dashed: boolean; width: number }) {
+  const height = Math.round(width * 0.72);
+  return (
+    <svg width={width} height={height} viewBox="0 0 240 172">
+      <defs>
+        <linearGradient id={`${id}-tile`} x1="0" y1="0" x2="0" y2="1">
+          <stop offset="0" stopColor="#314158" />
+          <stop offset="1" stopColor="#1a2333" />
+        </linearGradient>
+      </defs>
+      <rect x="16" y="28" width="208" height="120" rx="22" fill="#121926" />
+      <rect
+        x="16"
+        y="12"
+        width="208"
+        height="120"
+        rx="22"
+        fill={`url(#${id}-tile)`}
+        stroke={ring ? "#f0c14a" : dashed ? "#8ea0bd" : "#0000"}
+        strokeWidth="6"
+        strokeDasharray={dashed ? "10 8" : "0"}
+      />
+      <text x="120" y="82" textAnchor="middle" fill="#f6f3ec" fontSize={name.length > 8 ? 24 : 28} fontFamily={sans} fontWeight="700">
+        {name}
+      </text>
+    </svg>
+  );
+}
+
+export function ReviewSheet({ id, rows, width }: { id: string; rows: number; width: number }) {
+  const height = Math.round(width * 0.7);
+  const lines = ["Add the connection", "Keep a backup", "Restart after"];
+  return (
+    <svg width={width} height={height} viewBox="0 0 680 476">
+      <defs>
+        {shadow(id)}
+        <linearGradient id={`${id}-paper`} x1="0" y1="0" x2="0" y2="1">
+          <stop offset="0" stopColor="#fffaf2" />
+          <stop offset="1" stopColor="#e4d3b4" />
+        </linearGradient>
+      </defs>
+      <rect x="30" y="20" width="620" height="430" rx="18" fill={`url(#${id}-paper)`} filter={`url(#${id}-sh)`} />
+      <path d="M560 20 H650 V110 L560 20 Z" fill="#d9c29a" />
+      <rect x="30" y="20" width="620" height="70" fill="#f0e2c4" />
+      <text x="60" y="66" fill="#3a2e18" fontSize="32" fontFamily={sans} fontWeight="700">
+        Review
+      </text>
+      {lines.map((line, index) => (
+        <g key={line} opacity={rows > index ? 1 : 0}>
+          <rect x="70" y={130 + index * 90} width="36" height="44" rx="6" fill="#f7f1e4" stroke="#b8882e" strokeWidth="3" />
+          <path d="M78 152 H98 M78 162 H98" stroke="#b8882e" strokeWidth="3" />
+          <rect x="130" y={130 + index * 90} width="36" height="36" rx="8" fill="#fff" stroke="#3a2e18" strokeWidth="3" />
+          {rows > index + 0.6 ? <path d="M138 148 L146 158 L160 138" fill="none" stroke="#1f8a4c" strokeWidth="4" /> : null}
+          <text x="186" y={160 + index * 90} fill="#3a2e18" fontSize="28" fontFamily={sans}>
+            {line}
+          </text>
+        </g>
+      ))}
+    </svg>
+  );
+}
+
+export function ApproveButton({ id, width }: { id: string; width: number }) {
+  const height = Math.round(width * 0.42);
+  return (
+    <svg width={width} height={height} viewBox="0 0 360 150">
+      <defs>
+        <linearGradient id={`${id}-btn`} x1="0" y1="0" x2="0" y2="1">
+          <stop offset="0" stopColor="#ffe08a" />
+          <stop offset="1" stopColor="#e0a31a" />
+        </linearGradient>
+      </defs>
+      <rect x="16" y="28" width="328" height="96" rx="48" fill="#8a6410" />
+      <rect x="16" y="12" width="328" height="96" rx="48" fill={`url(#${id}-btn)`} />
+      <path d="M78 62 L98 82 L138 40" fill="none" stroke="#3a2a08" strokeWidth="8" strokeLinecap="round" />
+      <text x="160" y="74" fill="#3a2a08" fontSize="36" fontFamily={sans} fontWeight="700">
+        Approve
+      </text>
+    </svg>
+  );
+}
+
+export function Laptop({ id, width }: { id: string; width: number }) {
+  const height = Math.round(width * 0.72);
+  return (
+    <svg width={width} height={height} viewBox="0 0 860 620">
+      <defs>
+        {shadow(id)}
+        <linearGradient id={`${id}-lid`} x1="0" y1="0" x2="0" y2="1">
+          <stop offset="0" stopColor="#d5deee" />
+          <stop offset="1" stopColor="#8b97ad" />
+        </linearGradient>
+        <linearGradient id={`${id}-base`} x1="0" y1="0" x2="0" y2="1">
+          <stop offset="0" stopColor="#9aa6bb" />
+          <stop offset="1" stopColor="#5c677c" />
+        </linearGradient>
+      </defs>
+      <ellipse cx="430" cy="590" rx="300" ry="18" fill="#000" opacity="0.3" />
+      <path d="M70 500 H790 L840 575 H20 Z" fill={`url(#${id}-base)`} filter={`url(#${id}-sh)`} />
+      <rect x="150" y="548" width="560" height="14" rx="7" fill="#3e475a" />
+      <rect x="110" y="36" width="640" height="450" rx="24" fill={`url(#${id}-lid)`} />
+      <rect x="136" y="60" width="588" height="392" rx="12" fill="#101622" />
+      <circle cx="430" cy="48" r="5" fill="#3e475a" />
+    </svg>
+  );
+}
+
+export function Cloud({ id, width }: { id: string; width: number }) {
+  const height = Math.round(width * 0.62);
+  return (
+    <svg width={width} height={height} viewBox="0 0 360 220">
+      <defs>
+        <linearGradient id={`${id}-cloud`} x1="0" y1="0" x2="0" y2="1">
+          <stop offset="0" stopColor="#f7fbff" />
+          <stop offset="1" stopColor="#b7c3d6" />
+        </linearGradient>
+      </defs>
+      <ellipse cx="180" cy="190" rx="120" ry="14" fill="#000" opacity="0.25" />
+      <path
+        d="M90 160 H250 a50 50 0 0 0 8 -98 a70 70 0 0 0 -132 -8 a46 46 0 0 0 -36 106 Z"
+        fill={`url(#${id}-cloud)`}
+      />
+      <ellipse cx="150" cy="78" rx="46" ry="28" fill="#ffffff" opacity="0.55" />
+    </svg>
+  );
+}
+
+export function NoMark({ id, width }: { id: string; width: number }) {
+  return (
+    <svg width={width} height={width} viewBox="0 0 160 160">
+      <defs>
+        <linearGradient id={`${id}-no`} x1="0" y1="0" x2="0" y2="1">
+          <stop offset="0" stopColor="#ff8b98" />
+          <stop offset="1" stopColor="#d23b4e" />
+        </linearGradient>
+      </defs>
+      <circle cx="80" cy="80" r="68" fill={`url(#${id}-no)`} />
+      <rect x="28" y="68" width="104" height="22" rx="11" fill="#fff6f7" transform="rotate(-28 80 80)" />
+    </svg>
+  );
+}
+
+export function ReportSheet({ id, shown, width }: { id: string; shown: number; width: number }) {
+  const height = Math.round(width * 1.15);
+  const blocks = [
+    { title: "Explained", y: 150, kind: "lines" },
+    { title: "Proof", y: 360, kind: "checks" },
+    { title: "Not proven", y: 570, kind: "dash" },
+  ];
+  return (
+    <svg width={width} height={height} viewBox="0 0 640 820">
+      <defs>
+        {shadow(id)}
+        <linearGradient id={`${id}-sheet`} x1="0" y1="0" x2="0" y2="1">
+          <stop offset="0" stopColor="#fffaf2" />
+          <stop offset="1" stopColor="#ead9b8" />
+        </linearGradient>
+      </defs>
+      <rect x="36" y="24" width="568" height="760" rx="16" fill={`url(#${id}-sheet)`} filter={`url(#${id}-sh)`} />
+      <path d="M480 24 H604 V148 L480 24 Z" fill="#d7c29a" />
+      <text x="70" y="100" fill="#3a2e18" fontSize="40" fontFamily={sans} fontWeight="700">
+        The answer
+      </text>
+      {blocks.map((block, index) => (
+        <g key={block.title} opacity={shown > index ? 1 : 0}>
+          <text x="70" y={block.y} fill="#3a2e18" fontSize="28" fontFamily={sans} fontWeight="700">
+            {block.title}
+          </text>
+          {block.kind === "lines" ? (
+            <g>
+              <rect x="70" y={block.y + 24} width="420" height="16" rx="8" fill="#c9b48a" />
+              <rect x="70" y={block.y + 52} width="340" height="16" rx="8" fill="#c9b48a" />
+              <circle cx="540" cy={block.y + 36} r="28" fill="#f0c14a" />
+              <path d="M524 36 H556" transform={`translate(0 ${block.y})`} stroke="#3a2e18" strokeWidth="4" />
+            </g>
+          ) : null}
+          {block.kind === "checks" ? (
+            <g>
+              {[0, 1].map((row) => (
+                <g key={row}>
+                  <circle cx="92" cy={block.y + 40 + row * 48} r="16" fill="none" stroke="#5c4212" strokeWidth="4" />
+                  <path d="M108 28 L124 44" transform={`translate(0 ${block.y + row * 48})`} stroke="#5c4212" strokeWidth="4" strokeLinecap="round" />
+                  <path d="M70 52 L82 64 L106 40" transform={`translate(40 ${block.y + row * 48})`} fill="none" stroke="#1f8a4c" strokeWidth="4" />
+                  <rect x="160" y={block.y + 28 + row * 48} width="300" height="14" rx="7" fill="#c9b48a" />
+                </g>
+              ))}
+            </g>
+          ) : null}
+          {block.kind === "dash" ? (
+            <g>
+              <rect x="70" y={block.y + 20} width="480" height="70" rx="14" fill="none" stroke="#8a7040" strokeWidth="4" strokeDasharray="10 8" />
+              <circle cx="118" cy={block.y + 55} r="18" fill="#f0c14a" />
+              <text x="110" y={block.y + 64} fill="#3a2e18" fontSize="26" fontFamily={sans} fontWeight="700">
+                ?
+              </text>
+            </g>
+          ) : null}
+        </g>
+      ))}
+    </svg>
+  );
+}
+
+export function Chip({ id, width }: { id: string; width: number }) {
+  return (
+    <svg width={width} height={width} viewBox="0 0 280 280">
+      <defs>
+        {shadow(id)}
+        <linearGradient id={`${id}-chip`} x1="0" y1="0" x2="0" y2="1">
+          <stop offset="0" stopColor="#d5deee" />
+          <stop offset="1" stopColor="#7e8ba3" />
+        </linearGradient>
+      </defs>
+      <ellipse cx="140" cy="250" rx="90" ry="12" fill="#000" opacity="0.3" />
+      <rect x="78" y="70" width="18" height="150" fill="#5c677c" />
+      {[0, 1, 2, 3].map((pin) => (
+        <g key={pin}>
+          <rect x="40" y={84 + pin * 36} width="48" height="14" rx="3" fill="#c5cedf" />
+          <rect x="192" y={84 + pin * 36} width="48" height="14" rx="3" fill="#c5cedf" />
+          <rect x={96 + pin * 28} y="40" width="14" height="40" rx="3" fill="#c5cedf" />
+          <rect x={96 + pin * 28} y="210" width="14" height="40" rx="3" fill="#c5cedf" />
+        </g>
+      ))}
+      <rect x="70" y="70" width="150" height="150" rx="16" fill={`url(#${id}-chip)`} filter={`url(#${id}-sh)`} />
+      <rect x="104" y="104" width="82" height="82" rx="10" fill="#1b2436" />
+      <path d="M118 146 H172 M146 118 V172" stroke="#8eb6ff" strokeWidth="4" />
+    </svg>
+  );
+}
+
+export function JsWindow({ id, width }: { id: string; width: number }) {
+  const height = Math.round(width * 0.72);
+  return (
+    <svg width={width} height={height} viewBox="0 0 640 460">
+      <defs>
+        {shadow(id)}
+        <linearGradient id={`${id}-js`} x1="0" y1="0" x2="0" y2="1">
+          <stop offset="0" stopColor="#2e3b52" />
+          <stop offset="1" stopColor="#151c2c" />
+        </linearGradient>
+      </defs>
+      <rect x="20" y="16" width="600" height="420" rx="24" fill={`url(#${id}-js)`} filter={`url(#${id}-sh)`} />
+      <circle cx="60" cy="58" r="10" fill="#ff5d6c" />
+      <circle cx="92" cy="58" r="10" fill="#f0c14a" />
+      <circle cx="124" cy="58" r="10" fill="#3dce8e" />
+      <svg x="520" y="28" width="72" height="72" viewBox="0 0 24 24">
+        <path fill="#f7df1e" d={javascriptPath} />
+      </svg>
+      <text x="48" y="160" fill="#9ad0ff" fontSize="28" fontFamily={mono}>
+        search(notes)
+      </text>
+      <text x="48" y="210" fill="#d5dbea" fontSize="28" fontFamily={mono}>
+        filter the list
+      </text>
+      <text x="48" y="260" fill="#d5dbea" fontSize="28" fontFamily={mono}>
+        return matches
+      </text>
+    </svg>
+  );
+}
+
+export function AnswerSlip({ id, width }: { id: string; width: number }) {
+  const height = Math.round(width * 0.7);
+  return (
+    <svg width={width} height={height} viewBox="0 0 280 196">
+      <defs>
+        <linearGradient id={`${id}-slip`} x1="0" y1="0" x2="0" y2="1">
+          <stop offset="0" stopColor="#fffaf2" />
+          <stop offset="1" stopColor="#e7d3ae" />
+        </linearGradient>
+      </defs>
+      <rect x="16" y="12" width="248" height="168" rx="16" fill={`url(#${id}-slip)`} />
+      <path d="M190 12 H264 V86 L190 12 Z" fill="#d9c29a" />
+      <rect x="40" y="70" width="150" height="12" rx="6" fill="#c9b48a" />
+      <rect x="40" y="96" width="110" height="12" rx="6" fill="#c9b48a" />
+      <path d="M40 140 L56 156 L92 120" fill="none" stroke="#1f8a4c" strokeWidth="8" strokeLinecap="round" />
+    </svg>
+  );
+}
+
+export function LampBench({ id, lit, width }: { id: string; lit: number; width: number }) {
+  const height = Math.round(width * 0.9);
+  return (
+    <svg width={width} height={height} viewBox="0 0 300 270">
+      <defs>
+        <linearGradient id={`${id}-lamp`} x1="0" y1="0" x2="0" y2="1">
+          <stop offset="0" stopColor="#ffe08a" />
+          <stop offset="1" stopColor="#c88812" />
+        </linearGradient>
+      </defs>
+      <ellipse cx="150" cy="250" rx="100" ry="12" fill="#000" opacity="0.28" />
+      <rect x="40" y="200" width="220" height="28" rx="8" fill="#8b97ad" />
+      <path d="M70 200 C90 120 150 90 188 70" fill="none" stroke="#d5deee" strokeWidth="10" strokeLinecap="round" />
+      <path d="M150 48 H230 L210 110 H168 Z" fill={`url(#${id}-lamp)`} opacity={0.45 + lit * 0.55} />
+      <rect x="96" y="150" width="70" height="50" rx="6" fill="#c5cedf" stroke={lit ? "#f0c14a" : "#5c677c"} strokeWidth="4" />
+      <rect x="114" y="164" width="34" height="24" rx="3" fill="#1b2436" />
+    </svg>
+  );
+}
+
+export function HexMonitor({ id, width }: { id: string; width: number }) {
+  const height = Math.round(width * 0.86);
+  return (
+    <svg width={width} height={height} viewBox="0 0 300 258">
+      <defs>
+        <linearGradient id={`${id}-bezel`} x1="0" y1="0" x2="0" y2="1">
+          <stop offset="0" stopColor="#d5deee" />
+          <stop offset="1" stopColor="#7d8ba3" />
+        </linearGradient>
+      </defs>
+      <rect x="28" y="16" width="244" height="180" rx="16" fill={`url(#${id}-bezel)`} />
+      <rect x="46" y="34" width="208" height="140" rx="8" fill="#102418" />
+      {[0, 1, 2, 3].map((row) => (
+        <g key={row}>
+          {[0, 1, 2, 3, 4].map((col) => (
+            <rect key={col} x={62 + col * 36} y={50 + row * 28} width="24" height="16" rx="3" fill="#3dce8e" opacity={0.35 + ((row + col) % 3) * 0.2} />
+          ))}
+        </g>
+      ))}
+      <rect x="120" y="196" width="60" height="28" fill="#8b97ad" />
+      <rect x="80" y="222" width="140" height="16" rx="6" fill="#5c677c" />
+    </svg>
+  );
+}
+
+export function ScopeTower({ id, width }: { id: string; width: number }) {
+  const height = Math.round(width * 0.95);
+  return (
+    <svg width={width} height={height} viewBox="0 0 300 285">
+      <defs>
+        <linearGradient id={`${id}-tube`} x1="0" y1="0" x2="1" y2="0">
+          <stop offset="0" stopColor="#9aa6bb" />
+          <stop offset="0.5" stopColor="#f4f7fb" />
+          <stop offset="1" stopColor="#6d7890" />
+        </linearGradient>
+      </defs>
+      <rect x="70" y="250" width="160" height="18" rx="8" fill="#5c677c" />
+      <rect x="126" y="70" width="48" height="180" rx="16" fill={`url(#${id}-tube)`} />
+      <circle cx="150" cy="58" r="40" fill="#d5deee" stroke="#6d7890" strokeWidth="8" />
+      <circle cx="150" cy="58" r="18" fill="#8eb6ff" />
+      <rect x="92" y="150" width="116" height="16" rx="6" fill="#8b97ad" />
+    </svg>
+  );
+}
+
+export function EditorWindow({ id, lines, search, width }: { id: string; lines: number; search: number; width: number }) {
+  const height = Math.round(width * 0.86);
+  return (
+    <svg width={width} height={height} viewBox="0 0 520 448">
+      <defs>
+        {shadow(id)}
+        <linearGradient id={`${id}-ed`} x1="0" y1="0" x2="0" y2="1">
+          <stop offset="0" stopColor="#2a354a" />
+          <stop offset="1" stopColor="#121826" />
+        </linearGradient>
+      </defs>
+      <rect x="12" y="10" width="496" height="420" rx="20" fill={`url(#${id}-ed)`} filter={`url(#${id}-sh)`} />
+      <rect x="12" y="10" width="180" height="48" rx="12" fill="#101622" />
+      <text x="36" y="42" fill="#f6f3ec" fontSize="20" fontFamily={sans}>
+        Your project
+      </text>
+      {[0, 1, 2, 3, 4].map((row) => (
+        <g key={row} opacity={lines > row ? 1 : 0.15}>
+          <text x="28" y={100 + row * 36} fill="#6d7890" fontSize="18" fontFamily={mono}>
+            {row + 1}
+          </text>
+          <rect x="64" y={84 + row * 36} width={220 - row * 16} height="14" rx="6" fill="#3d4e6b" />
+        </g>
+      ))}
+      <rect x="300" y="80" width="180" height="300" rx="16" fill="#0e1422" />
+      <g opacity={search}>
+        <rect x="318" y="120" width="146" height="40" rx="20" fill="#fffaf0" />
+        <circle cx="340" cy="140" r="8" fill="none" stroke="#5c4212" strokeWidth="3" />
+        <path d="M346 146 L354 154" stroke="#5c4212" strokeWidth="3" strokeLinecap="round" />
+      </g>
+    </svg>
+  );
+}
+
+export function ProofCard({ id, width }: { id: string; width: number }) {
+  const height = Math.round(width * 0.72);
+  return (
+    <svg width={width} height={height} viewBox="0 0 420 300">
+      <defs>
+        <linearGradient id={`${id}-proof`} x1="0" y1="0" x2="0" y2="1">
+          <stop offset="0" stopColor="#243044" />
+          <stop offset="1" stopColor="#151c2c" />
+        </linearGradient>
+      </defs>
+      <rect x="16" y="12" width="388" height="270" rx="22" fill={`url(#${id}-proof)`} />
+      <circle cx="70" cy="70" r="22" fill="none" stroke="#f0c14a" strokeWidth="5" />
+      <path d="M86 86 L104 104" stroke="#f0c14a" strokeWidth="5" strokeLinecap="round" />
+      <path d="M300 48 L320 70 L360 30" fill="none" stroke="#3dce8e" strokeWidth="8" strokeLinecap="round" />
+      <rect x="48" y="130" width="300" height="16" rx="8" fill="#3d4e6b" />
+      <rect x="48" y="166" width="240" height="16" rx="8" fill="#3d4e6b" />
+      <rect x="48" y="214" width="180" height="36" rx="18" fill="#102418" />
+      <text x="70" y="240" fill="#3dce8e" fontSize="20" fontFamily={sans} fontWeight="700">
+        Proof
+      </text>
+    </svg>
+  );
+}
+
+export function Funnel({ id, width }: { id: string; width: number }) {
+  const height = Math.round(width * 0.8);
+  return (
+    <svg width={width} height={height} viewBox="0 0 200 160">
+      <defs>
+        <linearGradient id={`${id}-fun`} x1="0" y1="0" x2="0" y2="1">
+          <stop offset="0" stopColor="#9ad0ff" />
+          <stop offset="1" stopColor="#3d6ea8" />
+        </linearGradient>
+      </defs>
+      <path d="M20 20 H180 L120 100 H80 Z" fill={`url(#${id}-fun)`} />
+      <rect x="86" y="100" width="28" height="36" fill="#3d6ea8" />
+      <circle cx="100" cy="148" r="8" fill="#f0c14a" />
+    </svg>
+  );
+}
+
+export function MiniBox({ id, width }: { id: string; width: number }) {
+  const height = Math.round(width * 0.7);
+  return (
+    <svg width={width} height={height} viewBox="0 0 200 140">
+      <rect x="10" y="28" width="180" height="84" rx="42" fill="#fffaf0" stroke="#b8882e" strokeWidth="4" />
+      <circle cx="48" cy="70" r="12" fill="none" stroke="#5c4212" strokeWidth="4" />
+      <path d="M57 79 L70 92" stroke="#5c4212" strokeWidth="4" strokeLinecap="round" />
+      <rect x="84" y="62" width="78" height="12" rx="6" fill="#e4bc52" />
+    </svg>
+  );
+}
+
+export function MiniList({ id, width }: { id: string; width: number }) {
+  const height = Math.round(width * 0.8);
+  return (
+    <svg width={width} height={height} viewBox="0 0 200 160">
+      <rect x="16" y="12" width="168" height="136" rx="16" fill="#fffaf0" />
+      {[0, 1, 2].map((row) => (
+        <rect key={row} x="32" y={32 + row * 36} width={120 - row * 16} height="16" rx="8" fill="#e4bc52" />
+      ))}
+    </svg>
+  );
+}
+
+export function AppPane({ id, locked, width }: { id: string; locked: boolean; width: number }) {
+  const height = Math.round(width * 0.85);
+  return (
+    <svg width={width} height={height} viewBox="0 0 300 255">
+      <defs>
+        <linearGradient id={`${id}-app`} x1="0" y1="0" x2="0" y2="1">
+          <stop offset="0" stopColor="#2c3850" />
+          <stop offset="1" stopColor="#151c2c" />
+        </linearGradient>
+      </defs>
+      <rect x="20" y="16" width="260" height="210" rx="20" fill={`url(#${id}-app)`} />
+      <rect x="40" y="70" width="220" height="120" rx="12" fill="#101622" />
+      <rect x="58" y="96" width="140" height="14" rx="7" fill="#3d4e6b" />
+      <rect x="58" y="122" width="100" height="14" rx="7" fill="#3d4e6b" />
+      {locked ? (
+        <g>
+          <rect x="188" y="40" width="46" height="36" rx="6" fill="#d5deee" />
+          <path d="M198 42 V30 a14 14 0 0 1 28 0 V42" fill="none" stroke="#f6f3ec" strokeWidth="5" />
+        </g>
+      ) : (
+        <circle cx="230" cy="52" r="16" fill="#3dce8e" />
+      )}
+    </svg>
+  );
+}
+
+export function GateArm({ id, open, blocked, width }: { id: string; open: number; blocked: boolean; width: number }) {
+  const height = Math.round(width * 0.7);
+  const angle = -78 * open;
+  return (
+    <svg width={width} height={height} viewBox="0 0 360 250">
+      <defs>
+        <linearGradient id={`${id}-post`} x1="0" y1="0" x2="1" y2="0">
+          <stop offset="0" stopColor="#d5deee" />
+          <stop offset="1" stopColor="#6d7890" />
+        </linearGradient>
+      </defs>
+      <rect x="36" y="40" width="28" height="190" rx="8" fill={`url(#${id}-post)`} />
+      <circle cx="50" cy="48" r="16" fill="#f0c14a" />
+      <g transform={`rotate(${angle} 50 70)`}>
+        <rect x="50" y="58" width="250" height="26" rx="8" fill={blocked ? "#d23b4e" : "#f0c14a"} />
+        {[0, 1, 2, 3, 4].map((bar) => (
+          <rect key={bar} x={80 + bar * 40} y="58" width="16" height="26" fill="#1b2436" opacity="0.35" />
+        ))}
+      </g>
+    </svg>
+  );
+}
+
+export function OfficialSeal({ id, width }: { id: string; width: number }) {
+  return (
+    <svg width={width} height={width} viewBox="0 0 160 160">
+      <defs>
+        <linearGradient id={`${id}-seal`} x1="0" y1="0" x2="0" y2="1">
+          <stop offset="0" stopColor="#ffe08a" />
+          <stop offset="1" stopColor="#c88812" />
+        </linearGradient>
+      </defs>
+      <circle cx="80" cy="80" r="70" fill={`url(#${id}-seal)`} />
+      <circle cx="80" cy="80" r="52" fill="none" stroke="#3a2a08" strokeWidth="4" />
+      <path d="M52 82 L72 102 L112 58" fill="none" stroke="#3a2a08" strokeWidth="10" strokeLinecap="round" />
+    </svg>
+  );
+}
+
+export function CrossStamp({ id, width }: { id: string; width: number }) {
+  return (
+    <svg width={width} height={width} viewBox="0 0 160 160">
+      <circle cx="80" cy="80" r="68" fill="#d23b4e" />
+      <path d="M48 48 L112 112 M112 48 L48 112" stroke="#fff6f7" strokeWidth="14" strokeLinecap="round" />
+    </svg>
+  );
+}
+
+export function ArrowShaft({ progress, x1, y1, x2, y2, color = "#f0c14a" }: { progress: number; x1: number; y1: number; x2: number; y2: number; color?: string }) {
+  const length = Math.hypot(x2 - x1, y2 - y1);
+  const angle = (Math.atan2(y2 - y1, x2 - x1) * 180) / Math.PI;
+  const drawn = Math.max(0, length * progress);
+  return (
+    <div style={{ position: "absolute", left: x1, top: y1, width: drawn, height: 10, background: color, borderRadius: 6, transformOrigin: "0 50%", rotate: `${angle}deg` }}>
+      {progress > 0.92 ? (
+        <div
+          style={{
+            position: "absolute",
+            right: -6,
+            top: -8,
+            width: 0,
+            height: 0,
+            borderTop: "13px solid transparent",
+            borderBottom: "13px solid transparent",
+            borderLeft: `20px solid ${color}`,
+          }}
+        />
+      ) : null}
+    </div>
+  );
+}
+
+export function Tag({ text, x, y }: { text: string; x: number; y: number }) {
+  return (
+    <div style={{ position: "absolute", left: x, top: y, color: "#c5cedf", fontSize: 28, fontWeight: 700, letterSpacing: 0.2 }}>{text}</div>
+  );
+}
+
+export function dim(amount: number): ReactNode {
+  return amount;
+}