payjoin · aizuanjeme · Aug 10, 2026
diff --git a/src/components/Doodles/index.tsx b/src/components/Doodles/index.tsx
@@ -0,0 +1,123 @@
+/*
+ * Hand-drawn brand marks used to accent section headings. Each one positions
+ * itself absolutely, so the element it decorates has to be `relative` — for the
+ * word-level marks that means a `relative inline-block` span wrapping the word,
+ * so they measure against the word rather than the whole heading line.
+ */
+
+/*
+ * Marker loop around a highlighted word, in the spirit of a circled word on
+ * paper: it overshoots and crosses itself rather than closing cleanly.
+ * preserveAspectRatio="none" stretches it to whatever the word measures, and
+ * non-scaling-stroke keeps the line an even weight through that stretch.
+ */
+export function CircleScribble() {
+  return (
+    <svg
+      viewBox="0 0 200 60"
+      aria-hidden
+      preserveAspectRatio="none"
+      className="absolute -inset-x-4 -inset-y-2 text-primary sm:-inset-x-5 sm:-inset-y-3"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="3"
+      strokeLinecap="round"
+    >
+      <path
+        vectorEffect="non-scaling-stroke"
+        d="M176 13C148 1 62 -3 27 9 -1 19 3 45 41 53c50 10 130 6 150-12 7-7 4-18-14-25"
+      />
+    </svg>
+  );
+}
+
+/* Sparkle that sits over a highlighted word (Union.svg). */
+export function Sparkle() {
+  return (
+    <svg
+      viewBox="0 0 114 111"
+      aria-hidden
+      className="absolute -right-5 -top-4 h-4 w-4 rotate-12 text-primary sm:-right-7 sm:-top-6 sm:h-6 sm:w-6"
+      fill="currentColor"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M79.6641 89.6888C78.0036 87.8058 76.3981 85.9017 74.8025 83.8485C74.3353 83.3269 73.8786 82.7951 73.422 82.2632L73.4215 82.2627C72.3478 81.012 71.2744 79.7618 70.0651 78.648C66.7874 75.6291 63.1932 73.1226 59.5879 70.6083C58.8868 70.1194 58.1853 69.6301 57.4856 69.1368C57.2963 70.2401 57.1167 71.3479 56.9587 72.4633C56.858 73.417 56.7301 74.3634 56.6024 75.3071C56.3239 77.3665 56.0472 79.4131 56.0601 81.4943C56.085 85.5166 56.9018 89.4504 57.7242 93.4108C57.8072 93.8107 57.8903 94.2109 57.9726 94.6115C58.8722 98.9875 60.7434 100.696 60.7434 105.165C60.7434 112.328 53.4867 111.035 52.6481 110.676C52.6378 110.672 52.6267 110.667 52.6149 110.662L52.5652 110.642C51.9393 110.382 49.8708 109.524 49.2899 106.757C49.1527 106.104 49.0073 103.47 49.0059 103.339L48.9888 95.7574C48.8648 93.2643 48.9468 90.794 49.0288 88.3268C49.1027 86.0994 49.1766 83.8745 49.0987 81.6378C49.0297 79.6593 48.762 77.715 48.4929 75.7605C48.3424 74.6672 48.1915 73.5707 48.0746 72.4633C47.8877 71.1443 47.6676 69.8362 47.4354 68.534C46.4774 69.1646 45.5178 69.7852 44.561 70.404C40.3617 73.1196 36.2178 75.7993 32.5127 79.1388C29.4406 81.9077 27.0544 85.3217 24.7509 88.8059C22.5971 92.0637 20.9614 95.6222 19.5073 99.5102C18.0652 102.373 14.576 103.523 11.7205 102.078C8.86503 100.632 7.71761 97.1339 9.1596 94.2712C13.4189 87.5405 18.7192 82.4677 24.0761 77.3408C24.2197 77.2033 24.3634 77.0658 24.5071 76.9283C26.7945 74.7383 29.0361 72.5046 31.182 70.1588C34.4208 66.6184 37.3673 62.9337 40.2642 59.0802C36.9756 58.5262 33.6737 58.0431 30.3027 57.99C27.2048 57.941 24.1358 58.3258 21.063 58.7111L21.0619 58.7112C20.0702 58.8355 19.078 58.9599 18.0844 59.0698C15.4561 59.3605 12.8721 59.7237 10.2788 60.0881C8.81502 60.2939 7.34827 60.5 5.86897 60.6937C2.67025 60.734 0.0406457 58.1633 0.000465806 54.9564C-0.0397141 51.7497 2.52458 49.1135 5.7233 49.0732C6.98903 49.2067 8.24602 49.3484 9.50004 49.4898L9.50049 49.4899C12.3056 49.8062 15.0959 50.1209 17.9361 50.3373C18.8486 50.4068 19.7604 50.4877 20.672 50.5685C23.828 50.8484 26.981 51.1281 30.1438 50.9347C33.104 50.7539 35.9894 50.2263 38.8532 49.597C38.69 49.3758 38.5257 49.1551 38.36 48.9348C37.9442 48.4248 37.481 47.7967 36.959 47.0889C35.689 45.3669 34.071 43.173 31.9423 41.0591C27.4475 36.5954 21.4599 32.2031 17.2033 29.0807C15.7169 27.9903 14.4415 27.0548 13.5146 26.3252C11.199 24.1125 11.1109 20.4314 13.3181 18.1099C15.5252 15.7885 19.1972 15.7002 21.5128 17.9129C22.3956 18.9351 23.5543 20.4088 24.9085 22.1312C28.1465 26.2494 32.5019 31.789 36.8748 35.9747C39.0437 38.0508 41.2771 39.6136 43.0294 40.8397C43.7475 41.3422 44.385 41.7883 44.9039 42.1899C45.5166 42.6269 46.1331 43.0526 46.7513 43.4715C47.0148 42.1953 47.3042 40.9315 47.5934 39.6683C48.199 37.0232 48.8042 34.3802 49.1701 31.6302C49.3266 30.4549 49.3667 29.2689 49.4068 28.0826C49.4299 27.3995 49.453 26.7161 49.4983 26.0348L49.2613 12.9391L49.2045 5.44193C49.4076 2.24143 52.1645 -0.191742 55.3571 0.0119061C58.5496 0.215554 60.9767 2.97933 60.7735 6.17995L58.8722 14.1075L56.7089 26.4171C56.6874 26.9679 56.654 27.5188 56.6205 28.0697L56.6204 28.0703C56.5426 29.3506 56.4648 30.6312 56.5375 31.9096C56.7017 34.7945 57.2106 37.5672 57.7472 40.345L61.3384 36.7711C61.6393 36.436 62.1958 35.9156 62.929 35.23C64.4114 33.8436 66.6162 31.7817 68.891 29.21C73.0743 24.4806 77.6057 18.2765 80.7772 13.9342C82.0418 12.2028 83.0901 10.7675 83.814 9.83964C86.0106 7.50823 89.6822 7.40335 92.0078 9.60556C94.3332 11.8076 94.4378 15.4884 92.2412 17.8198C91.4838 18.4867 90.3688 19.4195 89.0277 20.5415C84.9107 23.9857 78.6623 29.213 74.0829 34.0067C71.1011 37.1281 69.0066 40.1083 68.0426 41.4799C67.9179 41.6574 67.812 41.808 67.7257 41.9284C66.6806 43.701 65.7234 45.5032 64.7837 47.3091C66.4 47.4877 68.0052 47.6869 69.6148 47.8866C71.5081 48.1216 73.4077 48.3573 75.3383 48.5612C75.8978 48.5777 76.4567 48.599 77.0153 48.6202L77.0164 48.6203C82.3786 48.8242 87.2962 48.1236 92.5129 46.8811C94.0983 46.5035 95.685 46.1256 97.2863 45.8096L107.458 43.798C110.63 43.3854 113.54 45.6327 113.951 48.8131C114.363 51.9935 112.121 54.9104 108.949 55.3228L98.338 54.8829C97.0433 54.931 95.7495 54.9589 94.4567 54.9868L94.4557 54.9868C89.5692 55.0922 84.7947 55.3918 79.9941 56.3152C78.5985 56.5836 77.2023 56.8522 75.7873 57.0455C74.4314 57.3366 73.0914 57.6361 71.7575 57.9343L71.7568 57.9344C69.3845 58.4647 67.0313 58.9906 64.6426 59.4571C65.8635 61.0967 67.0386 62.7618 68.2138 64.427C70.4349 67.5743 72.6566 70.7223 75.1882 73.6995C76.1639 74.8469 77.2453 75.8967 78.3274 76.9472C78.9579 77.5593 79.5888 78.1717 80.199 78.8038C82.3267 80.7162 84.3852 82.5045 86.6359 84.1069C88.0525 85.1155 89.5587 85.9333 91.1544 86.759C91.3428 86.8552 94.8751 89.2073 96.1626 90.3143C98.2749 92.1307 98.2787 94.3546 98.2795 94.8382C98.2795 94.8564 98.2796 94.8722 98.2797 94.8853C98.2797 98.0923 95.6826 100.696 92.4835 100.696C86.6851 100.696 86.1707 97.0671 79.6641 89.6888Z"
+      />
+    </svg>
+  );
+}
+
+/*
+ * The rotation lives inside the keyframe rather than in a `rotate-*` class,
+ * because an animated `transform` replaces the one Tailwind composes — the hand
+ * would snap upright the moment the animation took over. Rotated ~195deg, a
+ * negative translateY runs down-and-slightly-left in page space, so the gesture
+ * reads as poking at the frame below. Reduced motion keeps the pose, drops the
+ * movement.
+ */
+const handMotion = `
+  @keyframes pjPoint {
+    0%, 100% { transform: rotate(195deg) translateY(0); }
+    50%      { transform: rotate(195deg) translateY(-12px); }
+  }
+
+  .pjPoint { animation: pjPoint 2.4s ease-in-out infinite; }
+
+  @media (prefers-reduced-motion: reduce) {
+    .pjPoint { animation: none; transform: rotate(195deg); }
+  }
+`;
+
+/*
+ * Hand (Vector.svg) that reaches toward whatever sits below it. The source art
+ * has the fingers pointing up, so it is flipped to angle down into the target.
+ * It hangs off the top edge of its parent, which must be `relative` and must
+ * leave enough headroom above itself for the hand to occupy — see the frame
+ * wrapper in FigmaDemo. Kept off phones, where there is no room beside the
+ * frame for it to sit without covering the content.
+ */
+export function PointingHand() {
+  return (
+    <>
+      <style>{handMotion}</style>
+      <svg
+        viewBox="0 0 165 301"
+        aria-hidden
+        className="pjPoint pointer-events-none absolute bottom-full right-4 -mb-24 hidden w-16 text-primary sm:right-8 sm:-mb-28 sm:block sm:w-20 lg:right-14 lg:-mb-32 lg:w-24"
+        fill="currentColor"
+      >
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M47.1508 300.583C46.8189 292.987 47.1508 233.43 47.1508 225.822C47.1508 204.77 47.638 183.775 44.2558 163.091C42.0738 149.747 34.6052 135.87 28.1932 125.241C21.4145 114.002 -6.40325 88.5162 1.35346 70.3362C10.4491 49.0182 32.1221 81.2122 38.6694 89.7294C39.0109 90.1736 42.4419 94.5968 43.3579 92.9986C52.9958 76.1851 7.68235 7.36488 32.9812 5.50313C51.6284 4.13123 57.4763 26.6283 64.8103 45.2231C67.0825 50.984 68.9251 56.8421 70.4985 62.9785C71.0634 65.1824 71.6928 67.3395 71.9958 69.6377C72.1042 70.4605 71.9129 72.641 72.3937 72.0881C72.7711 71.6543 72.3937 66.8309 72.3937 66.248C72.3937 57.7054 71.835 48.8509 73.0926 40.4334C73.7195 36.2371 75.0157 14.6395 80.842 4.38963C83.925 -1.03411 91.0372 -0.666763 93.9456 1.41519C101.249 6.64295 100.113 46.0392 99.333 55.0341C98.824 60.9017 98.06 66.713 97.4375 72.5578C97.1498 75.2594 97.0397 78.1523 97.0397 77.9315C97.0397 64.7452 115.514 15.2942 128.07 22.0907C134.407 25.5209 128.299 64.0073 126.871 69.7521C125.781 74.1386 124.176 78.3794 123.28 82.8356C122.936 84.5444 122.051 89.5852 122.78 88.0948C127.587 78.263 145.069 40.2644 160.897 47.7908C168.29 51.3069 163.571 62.6482 162.891 68.7013C158.747 105.599 126.072 119.14 117.992 161.688C114.283 181.222 113.42 201.527 112.204 221.5C111.794 228.238 112.731 293.613 112.444 300.349C112.388 301.661 47.1508 300.583 47.1508 300.583Z"
+        />
+      </svg>
+    </>
+  );
+}
+
+/* Smiley parked in a band's corner (Group 1000011090.svg). */
+export function SmileyDoodle() {
+  return (
+    <svg
+      viewBox="0 0 182 117"
+      aria-hidden
+      className="pointer-events-none absolute left-8 top-16 hidden w-20 -rotate-12 text-primary/25 sm:block lg:left-16 lg:w-28"
+      fill="currentColor"
+    >
+      <path d="M173.97 43.4902C177.379 43.4902 182.915 46.1677 181.288 55.3178C180.804 58.0387 181.096 59.067 180.001 61.8825C179.419 63.3797 178.761 64.8758 177.962 66.3131C177.172 67.7344 176.317 69.1251 175.336 70.4197C172.61 74.0535 169.147 77.4616 165.274 80.5841C159.969 84.8611 153.989 88.6753 148.399 91.8071C135.396 100.138 122.005 106.311 107.896 110.387C93.8935 114.432 79.2007 116.34 63.5793 116.478C56.5072 116.415 48.8744 116.214 41.5892 114.99C36.2904 114.099 31.1711 112.672 26.5199 110.455C22.012 108.306 18.0515 105.501 14.5244 102.278C9.37678 97.5737 5.15953 91.9775 1.46702 86.3623C-0.411325 83.5172 -0.767026 74.0322 2.07845 72.1537C4.92369 70.2754 8.75871 71.0605 10.6371 73.9058C13.2943 77.9156 16.2376 81.9354 19.7178 85.4879C22.8648 88.7 26.4604 91.5269 30.7255 93.5422C34.3604 95.2609 38.3729 96.3141 42.5095 97.0011C49.1477 98.1035 56.1019 98.25 62.5441 98.3014C77.065 98.6745 90.7528 97.2694 103.923 94.0744C117.295 90.8308 130.144 85.8046 142.715 78.6431C147.65 75.4318 152.958 71.6359 157.516 67.3432C160.453 64.5783 163.003 61.5703 164.948 58.4425C166.163 55.0505 167.131 51.8519 167.889 48.415C168.808 44.2528 172.138 43.4902 173.97 43.4902Z" />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M127.039 1.04389C130.671 2.59536 130.44 9.81153 130.772 13.1395C131.811 23.5234 132.59 36.0732 129.153 46.0692C127.85 49.8588 123.644 58.5256 118.14 56.9902C114.901 56.0866 113.184 50.1309 112.353 47.4145C109.082 36.7241 112.383 26.6544 112.912 15.6608C113.339 6.81001 116.845 -3.31042 127.039 1.04389Z"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M54.5432 1.04389C50.9107 2.59536 51.1424 9.81153 50.8096 13.1395C49.7713 23.5234 48.9918 36.0732 52.429 46.0692C53.7321 49.8588 57.9385 58.5256 63.4422 56.9902C66.6815 56.0866 68.3984 50.1309 69.2294 47.4145C72.5 36.7241 69.1989 26.6544 68.6696 15.6608C68.2432 6.81001 64.7374 -3.31042 54.5432 1.04389Z"
+      />
+    </svg>
+  );
+}
diff --git a/src/components/FigmaDemo/index.jsx b/src/components/FigmaDemo/index.jsx
@@ -1,20 +1,51 @@
+import { PointingHand } from "../Doodles";
+
+const PROTOTYPE_SRC =
+  "https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2F7BpOmi30JgG6gIaE0T7fL4%2FPayjoin-Designs-Bitcoin-Wallet-UI-Kit-%2526-Design-System%3Fpage-id%3D4263%253A62592%26node-id%3D4954%253A70101%26viewport%3D-4364%252C-2385%252C0.48%26scaling%3Dmin-zoom%26starting-point-node-id%3D4954%253A70101";
+
+/*
+ * Lightest band on the page: it lifts the demo out of the dark testimonial band
+ * above and steps back down into the closing band below, so the page reads
+ * darkest → lightest → settling rather than flat.
+ */
 export default function FigmaDemo() {
   return (
-    <div className="min-h-screen bg-tertiary w-full flex justify-center">
-    <section className="flex flex-col gap-24 my-20 w-4/5">
-      <h2 className="text-6xl">Try it Yourself</h2>
-      <span className="text-4xl">
-        Click through the app to see all it takes to payjoin
-      </span>
-      <iframe
-        title="Payjoin Demo"
-        className="w-full h-[66vh]"
-        style={{ border: "1px solid rgba(0, 0, 0, 0.1)" }}
-        src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2F7BpOmi30JgG6gIaE0T7fL4%2FPayjoin-Designs-Bitcoin-Wallet-UI-Kit-%2526-Design-System%3Fpage-id%3D4263%253A62592%26node-id%3D4954%253A70101%26viewport%3D-4364%252C-2385%252C0.48%26scaling%3Dmin-zoom%26starting-point-node-id%3D4954%253A70101"
-        allowfullscreen
-      />
-    </section>
-      </div>
+    <div
+      className="w-full bg-[#46192b]
+        bg-[radial-gradient(60%_50%_at_15%_10%,rgba(247,83,148,0.12)_0%,rgba(70,25,43,0)_60%),radial-gradient(50%_45%_at_95%_90%,rgba(106,57,76,0.45)_0%,rgba(70,25,43,0)_70%)]"
+    >
+      <section className="mx-auto flex w-full max-w-5xl flex-col items-center gap-6 px-5 py-20 text-center sm:px-8 sm:py-32 lg:px-10">
+        <h2 className="mb-0 text-4xl font-bold leading-[1.1] tracking-tight sm:text-5xl lg:text-6xl">
+          Try it{" "}
+          <span className="bg-gradient-to-r from-[#f75394] from-35% to-[#6A394C] bg-clip-text text-transparent">
+            Yourself
+          </span>
+        </h2>
+
+        <p className="mb-0 max-w-[46ch] text-base text-white/70 sm:text-lg">
+          Click through the app to see all it takes to payjoin
+        </p>
+
+        {/* The hand overlaps the frame's top-right corner and only its upper
+            part breaks out above, so the wrapper owns the positioning context
+            and needs just enough top margin to clear that part. */}
+        <div className="relative mt-8 w-full sm:mt-14 lg:mt-16">
+          <PointingHand />
 
+          <div className="overflow-hidden rounded-2xl border border-solid border-white/10 bg-[#3a1523] p-2 shadow-lg shadow-black/20 sm:p-3">
+            {/* Aspect ratio rather than viewport height: the prototype is a
+                phone UI, so it gets a tall frame on phones and a wide one on
+                desktop instead of a 66vh box that changes shape per device. */}
+            <iframe
+              title="Payjoin Demo"
+              className="aspect-[3/4] w-full rounded-xl border-0 sm:aspect-[16/10]"
+              src={PROTOTYPE_SRC}
+              loading="lazy"
+              allowFullScreen
+            />
+          </div>
+        </div>
+      </section>
+    </div>
   );
 }