Signature Component

Open In Editor Publish Your Code

21 October 2024

Password rules + toggle Web Components

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Signature Component</title>
  <style>
    @import url('https://unpkg.com/normalize.css') layer(normalize);
    @import url('https://fonts.googleapis.com/css2?family=Gloria+Hallelujah&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

@layer normalize, base, demo, popover, signing;

@layer signing {
      :is(.animated, .signature) {
        width: var(--surface-width);
        pointer-events: none;
        svg {
          width: 100%;
          path {
            stroke-width: 3px;
          }
        }
      }
      [popover][data-signed='true'] {
        :is(canvas, [popover] button, .canvas) {
          pointer-events: none;
        }
        .status {
          translate: 0 100%;
          clip-path: inset(-100% 0 0 0);
        }
        .secondary button span {
          translate: 0 100%;
        }
      }
      .secondary button span {
        transition: translate 0.2s ease-out;
      }

[popover][data-valid='true']:has(.hold:active) canvas {
        opacity: 0.1;
      }
      [popover] canvas {
        transition: opacity 0.2s ease-out;
      }

[popover][data-valid='true'] .hold:active .status {
        transition-duration: calc(var(--sign-on, 0.2) * 1s), 0.2s;
        clip-path: inset(-100% 0 0 0);
      }

:root:has([data-signed='true']) .toggle {
        background: hsl(140 80% 90%);
        color: hsl(140 90% 30%);
      }

.hold {
        padding: 0;
        border: 0;
        border-radius: 4px;
        user-select: none;
        height: 32px;
        position: relative;
        overflow: hidden;

.status {
          display: inline-block;
          position: absolute;
          inset: 0;
          color: hsl(140 90% 30%);
          clip-path: inset(-100% 100% 0 0);
          transition: clip-path 0.2s ease-out, translate 0.2s ease-out;
        }

.track {
          background: hsl(140 80% 90%);
          width: 100%;
          height: 200%;
          display: inline-block;
          display: grid;
          grid-template-rows: 1fr 1fr;
          position: absolute;
          bottom: 0;

span {
            display: grid;
            place-items: center;
          }
        }

> span:last-of-type {
          height: 100%;
          display: flex;
          align-items: center;
          padding: 0.25rem 0.75rem;
        }
      }
    }

@layer popover {
      :root {
        --toggle-size: 44px;
        --surface-width: 380px;
        --surface-height: 200px;
        --shadow-color: 0 0% 0%;
        --shadow: 0px 0.5px 0.6px hsl(var(--shadow-color) / 0.07),
          0px 1.7px 2.2px -0.4px hsl(var(--shadow-color) / 0.09),
          0px 3.2px 4.1px -0.7px hsl(var(--shadow-color) / 0.11),
          -0.1px 6.1px 7.8px -1.1px hsl(var(--shadow-color) / 0.13),
          -0.2px 11.2px 14.3px -1.5px hsl(var(--shadow-color) / 0.15);
      }

[data-clickable] {
        cursor: default;
      }

.placeholder {
        width: var(--toggle-size);
        aspect-ratio: 1;
        display: grid;
        place-items: center;
        top: 0;
        left: 0;
        pointer-events: none;
        position: absolute;

svg {
          width: 20px;
          height: 20px;
        }
      }

[popover] {
        width: var(--surface-width);
        max-width: calc(100vw - 2rem);
        height: var(--surface-height);
        height: fit-content;
        border-radius: 6px;
        margin: 0;
        inset: unset;
        opacity: 0;
        padding: 0;
        overflow: hidden;
        border: 0;
        background: canvasText;
        color: canvas;
        box-shadow: var(--shadow);

.popover__content {
          padding: 0.5rem 0;
          display: grid;
          grid-template-rows: auto 1fr auto;
          height: 100%;
          width: 100%;
          filter: blur(4px);
          opacity: 0;
          width: var(--surface-width);
          max-width: calc(100vw - 2rem);
          border-radius: inherit;
          font-size: 0.875rem;

button {
            cursor: pointer;
          }

header {
            display: flex;
            gap: 0 0.5rem;
            padding-inline: 0.875rem;
            color: light-dark(hsl(0 0% 50%), hsl(0 0% 80%));

svg {
              width: 16px;
              height: 16px;
              opacity: 0;
            }
          }

footer {
            padding-inline: 0.5rem;
            display: flex;
            justify-content: space-between;

.secondary {
              display: flex;
              gap: 0.25rem;

button {
                display: grid;
                padding: 0;
                place-items: center;
                width: 32px;
                aspect-ratio: 1;
                border: 0;
                background: #0000;
                color: color-mix(in oklch, canvasText, #0000);
                position: relative;
                transition: color 0.2s ease-out;

span {
                  height: 100%;
                  width: 100%;
                  display: grid;
                  place-items: center;
                }

&::after {
                  content: '';
                  opacity: 0;
                  position: absolute;
                  inset: 0;
                  border-radius: 6px;
                  background: color-mix(in oklch, canvasText, #0000 94%);
                  transition: opacity 0.2s ease-out;
                }

&:is(:hover, :focus-visible) {
                  color: canvasText;

&::after {
                    opacity: 1;
                  }
                }
              }

svg {
                width: 18px;
                height: 18px;
              }
            }
          }

.canvas {
            position: relative;
            height: 130px;
          }

canvas {
            flex: 1;
            width: 100%;
            height: 100%;
            position: absolute;
            inset: 0;
          }
        }

&::after {
          content: '';
          position: absolute;
          inset: 0;
          border-radius: inherit;
          pointer-events: none;
          border: 1px solid light-dark(hsl(0 0% 80%), hsl(0 0% 50%));
        }

&:popover-open {
          display: flex;
          flex-direction: column;
        }
      }
    }

@layer demo {
      .arrow {
        display: inline-block;
        opacity: 0.8;
        position: fixed;
        font-size: 0.875rem;
        font-family: 'Gloria Hallelujah', cursive;
        transition: opacity 0.26s ease-out;

&.arrow--instruction {
          top: 50%;
          left: 50%;
          translate: -160% -70%;
          rotate: -10deg;
          svg {
            color: hsl(0 0% 65%);
            scale: 1 1;
            top: 130%;
            rotate: 35deg;
            left: 10%;
            width: 60%;
            translate: 120% 60%;
            position: absolute;
          }
        }

span {
          display: inline-block;
          white-space: nowrap;
        }
      }

[data-dragging='true'] {
        cursor: grabbing;
      }
      [data-debug='true'] .target {
        opacity: 1;
      }

.toggle {
        width: var(--toggle-size);
        aspect-ratio: 1;
        border-radius: 50%;
        display: grid;
        place-items: center;
        padding: 0;
        position: fixed;
        top: 0;
        left: 0;
        color: canvas;
        background: canvasText;
        border-style: solid;
        border-color: color-mix(in oklch, canvasText, #0000 85%);
        border-width: 1px;
        box-shadow: var(--shadow);

svg {
          width: 20px;
          height: 20px;
        }
      }
      .targets {
        position: fixed;
        inset: 1.5rem;
        pointer-events: none;
      }
      .target {
        pointer-events: all;
        width: var(--toggle-size);
        aspect-ratio: 1;
        background: hsl(var(--hue, 10) 80% 50% / 0.2);
        border-radius: 50%;
        opacity: 0;
        transition: opacity 0.26s ease-out;
        position: fixed;

&[data-active='true'] {
          --hue: 150;
        }

&::after {
          content: '';
          width: max(var(--toggle-size), var(--snap-proximity) * 2px);
          aspect-ratio: 1;
          border-radius: 50%;
          background: hsl(var(--hue, 10) 80% 50% / 0.1);
          outline: 2px dashed hsl(var(--hue, 10) 80% 50% / 0.5);
          position: absolute;
          top: 50%;
          left: 50%;
          translate: -50% -50%;
          pointer-events: none;
        }

&.target--north {
          top: 1.5rem;
          left: 50%;
          translate: -50% 0%;
        }
        &.target--west {
          left: 1.5rem;
          top: 50%;
          translate: 0% -50%;
        }
        &.target--south-west {
          bottom: 1.5rem;
          left: 1.5rem;
        }
        &.target--south {
          bottom: 1.5rem;
          left: 50%;
          translate: -50% 0;
        }
        &.target--east {
          top: 50%;
          right: 1.5rem;
          translate: 0 -50%;
        }
        &.target--south-east {
          bottom: 1.5rem;
          right: 1.5rem;
        }
      }
    }

@layer base {
      :root {
        --font-size-min: 16;
        --font-size-max: 20;
        --font-ratio-min: 1.2;
        --font-ratio-max: 1.33;
        --font-width-min: 375;
        --font-width-max: 1500;
      }

html {
        color-scheme: light dark;
      }

[data-theme='light'] {
        color-scheme: light only;
      }

[data-theme='dark'] {
        color-scheme: dark only;
      }

:where(.fluid) {
        --fluid-min: calc(
          var(--font-size-min) * pow(var(--font-ratio-min), var(--font-level, 0))
        );
        --fluid-max: calc(
          var(--font-size-max) * pow(var(--font-ratio-max), var(--font-level, 0))
        );
        --fluid-preferred: calc(
          (var(--fluid-max) - var(--fluid-min)) /
            (var(--font-width-max) - var(--font-width-min))
        );
        --fluid-type: clamp(
          (var(--fluid-min) / 16) * 1rem,
          ((var(--fluid-min) / 16) * 1rem) -
            (((var(--fluid-preferred) * var(--font-width-min)) / 16) * 1rem) +
            (var(--fluid-preferred) * var(--variable-unit, 100vi)),
          (var(--fluid-max) / 16) * 1rem
        );
        font-size: var(--fluid-type);
      }

*,
      *:after,
      *:before {
        box-sizing: border-box;
      }

body {
        background: light-dark(#fff, #000);
        display: grid;
        place-items: center;
        min-height: 100vh;
        font-family: 'Inter', 'SF Pro Text', 'SF Pro Icons', 'AOS Icons',
          'Helvetica Neue', Helvetica, Arial, sans-serif, system-ui;
      }

body::before {
        --size: 45px;
        --line: color-mix(in hsl, canvasText, transparent 80%);
        content: '';
        height: 100vh;
        width: 100vw;
        position: fixed;
        background: linear-gradient(
              90deg,
              var(--line) 1px,
              transparent 1px var(--size)
            )
            calc(var(--size) * 0.36) 50% / var(--size) var(--size),
          linear-gradient(var(--line) 1px, transparent 1px var(--size)) 0%
            calc(var(--size) * 0.32) / var(--size) var(--size);
        mask: linear-gradient(-20deg, transparent 50%, white);
        top: 0;
        transform-style: flat;
        pointer-events: none;
        z-index: -1;
      }

.bear-link {
        color: canvasText;
        position: fixed;
        top: 1rem;
        left: 1rem;
        width: 48px;
        aspect-ratio: 1;
        display: grid;
        place-items: center;
        opacity: 0.8;
      }

:where(.x-link, .bear-link):is(:hover, :focus-visible) {
        opacity: 1;
      }

.bear-link svg {
        width: 75%;
      }

.sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border-width: 0;
      }
    }

#error {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background: #2a1a1a;
      color: #ff6b6b;
      padding: 1em;
      font-family: 'Fira Code', monospace;
      font-size: 0.9em;
      border-top: 2px solid #ff3b3b;
      max-height: 30%;
      overflow: auto;
      display: none;
      z-index: 10;
      box-shadow: 0 -5px 15px rgba(0,0,0,0.3);
    }
    
    #error.show {
      display: block;
      animation: slideUp 0.3s ease-out;
    }
    
    @keyframes slideUp {
      from { transform: translateY(100%); }
      to { transform: translateY(0); }
    }
    
    #error-close {
      position: absolute;
      top: 0.5em;
      right: 0.5em;
      background: transparent;
      border: none;
      color: #ff9b9b;
      cursor: pointer;
      font-size: 1.2em;
    }
    
    #error-message {
      white-space: pre-wrap;
      margin-right: 1.5em;
    }
    
    .error-line {
      color: #ff9b9b;
      font-weight: bold;
    }
    
    .error-highlight {
      background: rgba(255, 0, 0, 0.2);
      border-bottom: 1px dashed #ff3b3b;
    }
  </style>
</head>
<body>
  <button
    aria-label="Sign Document"
    class="toggle"
    popovertarget="sign"
    popovertargetaction="toggle"
  >
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      stroke="currentColor"
      stroke-linecap="round"
      stroke-linejoin="round"
      stroke-width="2"
      class="lucide lucide-pen-line"
      viewBox="0 0 24 24"
    >
      <path
        d="M12 20h9M16.38 3.62a1 1 0 0 1 3 3L7.37 18.64a2 2 0 0 1-.86.5l-2.87.84a.5.5 0 0 1-.62-.62l.84-2.87a2 2 0 0 1 .5-.86z"
      />
      <path style="opacity: 0" d="M20 6 9 17l-5-5"></path>
    </svg>
  </button>
  <div id="sign" popover="manual">
    <span class="placeholder">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        stroke="currentColor"
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="2"
        class="lucide lucide-pen-line"
        viewBox="0 0 24 24"
      >
        <path
          id="morph"
          d="M12 20h9M16.38 3.62a1 1 0 0 1 3 3L7.37 18.64a2 2 0 0 1-.86.5l-2.87.84a.5.5 0 0 1-.62-.62l.84-2.87a2 2 0 0 1 .5-.86z"
        />
        <path
          id="pen"
          style="opacity: 0"
          d="M12 20h9M16.38 3.62a1 1 0 0 1 3 3L7.37 18.64a2 2 0 0 1-.86.5l-2.87.84a.5.5 0 0 1-.62-.62l.84-2.87a2 2 0 0 1 .5-.86z"
        />
        <path id="check" style="opacity: 0" d="M20 6 9 17l-5-5"></path>
      </svg>
    </span>
    <div class="popover__content">
      <header>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          class="lucide lucide-pen-line"
          viewBox="0 0 24 24"
        >
          <path
            id="sign"
            d="M12 20h9M16.38 3.62a1 1 0 0 1 3 3L7.37 18.64a2 2 0 0 1-.86.5l-2.87.84a.5.5 0 0 1-.62-.62l.84-2.87a2 2 0 0 1 .5-.86z"
          />
          <path id="check" style="opacity: 0" d="M20 6 9 17l-5-5"></path>
        </svg>
        <span>Draw signature</span>
      </header>
      <div data-clickable="true" class="canvas">
        <canvas data-clickable="true"></canvas>
        <div class="animated">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none">
            <path
              fill="none"
              stroke="currentColor"
              strokeWidth="2.5"
              strokeLinecap="round"
              strokeLinejoin="round"
              d=""
            />
          </svg>
        </div>
      </div>
      <footer>
        <div class="secondary">
          <button class="erase" aria-label="Erase" title="Erase">
            <span>
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                class="lucide lucide-eraser"
              >
                <path
                  d="m7 21-4.3-4.3c-1-1-1-2.5 0-3.4l9.6-9.6c1-1 2.5-1 3.4 0l5.6 5.6c1 1 1 2.5 0 3.4L13 21"
                ></path>
                <path d="M22 21H7"></path>
                <path d="m5 11 9 9"></path>
              </svg>
            </span>
          </button>
          <button aria-label="Use text input">
            <span>
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                class="lucide lucide-type"
              >
                <path d="M12 4v16"></path>
                <path d="M4 7V5a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2"></path>
                <path d="M9 20h6"></path>
              </svg>
            </span>
          </button>
        </div>
        <button
          class="hold"
          aria-label="Hold to confirm"
          title="Hold to confirm"
        >
          <span class="status">
            <span class="track">
              <span>Signed</span>
              <span>Hold to confirm</span>
            </span>
          </span>
          <span>Hold to confirm</span>
        </button>
      </footer>
    </div>
  </div>
  <div class="targets">
    <div class="target target--north"></div>
    <div class="target target--west"></div>
    <div class="target target--south-west"></div>
    <div class="target target--south"></div>
    <div class="target target--south-east"></div>
    <div class="target target--east"></div>
  </div>
  <div class="info">
    <span class="arrow arrow--instruction">
      <span>open to sign</span>
      <svg viewBox="0 0 97 52" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path
          fill-rule="evenodd"
          clip-rule="evenodd"
          d="M74.568 0.553803C74.0753 0.881909 73.6295 1.4678 73.3713 2.12401C73.1367 2.70991 72.3858 4.67856 71.6584 6.50658C70.9544 8.35803 69.4526 11.8031 68.3498 14.1936C66.1441 19.0214 65.839 20.2167 66.543 21.576C67.4581 23.3337 69.4527 23.9196 71.3064 22.9821C72.4797 22.3728 74.8965 19.5839 76.9615 16.4435C78.8387 13.5843 78.8387 13.6077 78.1113 18.3418C77.3369 23.4275 76.4687 26.2866 74.5915 30.0364C73.254 32.7316 71.8461 34.6299 69.218 37.3485C65.9563 40.6999 62.2254 42.9732 57.4385 44.4965C53.8718 45.6449 52.3935 45.8324 47.2546 45.8324C43.3594 45.8324 42.1158 45.7386 39.9805 45.2933C32.2604 43.7466 25.3382 40.9577 19.4015 36.9735C15.0839 34.0909 12.5028 31.7004 9.80427 27.9975C6.80073 23.9196 4.36038 17.2403 3.72682 11.475C3.37485 8.1471 3.1402 7.32683 2.43624 7.13934C0.770217 6.71749 0.183578 7.77211 0.0193217 11.5219C-0.26226 18.5996 2.55356 27.1304 7.17619 33.1066C13.8403 41.7545 25.432 48.4103 38.901 51.2696C41.6465 51.8555 42.2566 51.9023 47.4893 51.9023C52.3935 51.9023 53.426 51.832 55.5144 51.3867C62.2723 49.9337 68.5375 46.6292 72.949 42.1998C76.0464 39.1296 78.1113 36.2939 79.8946 32.7081C82.1942 28.0912 83.5317 23.3103 84.2591 17.17C84.3999 15.8576 84.6111 14.7795 84.7284 14.7795C84.8223 14.7795 85.4559 15.1311 86.1364 15.5763C88.037 16.7716 90.3835 17.8965 93.5748 19.0918C96.813 20.3339 97.3996 20.287 96.4141 18.9512C94.9123 16.9122 90.055 11.5219 87.1219 8.63926C84.0949 5.66288 83.8368 5.33477 83.5552 4.1864C83.3909 3.48332 83.0155 2.68649 82.6401 2.31151C82.0065 1.6553 80.4109 1.04595 79.9885 1.30375C79.8712 1.37406 79.2845 1.11626 78.6744 0.717845C77.2431 -0.172727 75.7413 -0.243024 74.568 0.553803Z"
          fill="currentColor"
        />
      </svg>
    </span>
  </div>
  <a
    aria-label="Follow Jhey"
    class="bear-link"
    href="https://x.com/mtr5560636248"
    target="_blank"
    rel="noreferrer noopener"
  >
    <svg
      class="w-9"
      viewBox="0 0 969 955"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <circle
        cx="161.191"
        cy="320.191"
        r="133.191"
        stroke="currentColor"
        stroke-width="20"
      ></circle>
      <circle
        cx="806.809"
        cy="320.191"
        r="133.191"
        stroke="currentColor"
        stroke-width="20"
      ></circle>
      <circle
        cx="695.019"
        cy="587.733"
        r="31.4016"
        fill="currentColor"
      ></circle>
      <circle
        cx="272.981"
        cy="587.733"
        r="31.4016"
        fill="currentColor"
      ></circle>
      <path
        d="M564.388 712.083C564.388 743.994 526.035 779.911 483.372 779.911C440.709 779.911 402.356 743.994 402.356 712.083C402.356 680.173 440.709 664.353 483.372 664.353C526.035 664.353 564.388 680.173 564.388 712.083Z"
        fill="currentColor"
      ></path>
      <rect
        x="310.42"
        y="448.31"
        width="343.468"
        height="51.4986"
        fill="#FF1E1E"
      ></rect>
      <path
        fill-rule="evenodd"
        clip-rule="evenodd"
        d="M745.643 288.24C815.368 344.185 854.539 432.623 854.539 511.741H614.938V454.652C614.938 433.113 597.477 415.652 575.938 415.652H388.37C366.831 415.652 349.37 433.113 349.37 454.652V511.741L110.949 511.741C110.949 432.623 150.12 344.185 219.845 288.24C289.57 232.295 384.138 200.865 482.744 200.865C581.35 200.865 675.918 232.295 745.643 288.24Z"
        fill="currentColor"
      ></path>
    </svg>
  </a>
  <div id="error">
    <button id="error-close">×</button>
    <div id="error-message"></div>
  </div>

const config = {
      theme: 'light',
      proximity: 120,
      debug: false,
      duration: 0.35,
    };

const ctrl = new Tweakpane.Pane({
      title: 'config',
      expanded: true,
    });

const update = () => {
      document.documentElement.dataset.theme = config.theme;
      document.documentElement.dataset.debug = config.debug;
      document.documentElement.style.setProperty(
        '--snap-proximity',
        config.proximity
      );
    };

const sync = (event) => {
      if (
        !document.startViewTransition ||
        event.target.controller.view.labelElement.innerText !== 'theme'
      )
        return update();
      document.startViewTransition(() => update());
    };

const spots = ctrl.addFolder({ title: 'hot spots', expanded: false });

spots.addInput(config, 'proximity', {
      min: 0,
      max: 300,
      step: 1,
      label: 'proximity',
    });

ctrl.addInput(config, 'duration', {
      min: 0.2,
      max: 5,
      step: 0.01,
      label: 'duration(s)',
    });

spots.addInput(config, 'debug', {
      label: 'debug',
    });

ctrl.addInput(config, 'theme', {
      label: 'theme',
      options: {
        System: 'system',
        Light: 'light',
        Dark: 'dark',
      },
    });

ctrl.on('change', sync);
    update();

// GSAP Draggable Implementation
    const button = document.querySelector('[aria-label^="Sign"]');
    const targets = document.querySelectorAll('.target');

const getClosestPoint = (target, maxDistance = Number.POSITIVE_INFINITY) => {
      if (maxDistance !== Number.POSITIVE_INFINITY)
        document.documentElement.style.setProperty('--snap-proximity', maxDistance);
      let closest = null;
      let minDistance = Number.POSITIVE_INFINITY;

const coordinates = Array.from(targets).map((el) => {
        const rect = el.getBoundingClientRect();
        return {
          x: rect.left + rect.width / 2,
          y: rect.top + rect.height / 2,
          element: el,
        };
      });

for (const coord of coordinates) {
        const dx = Math.min(window.innerWidth, Math.max(0, target.x)) - coord.x;
        const dy = Math.min(window.innerHeight, Math.max(0, target.y)) - coord.y;
        const distance = Math.hypot(dx, dy);
        if (distance < minDistance) {
          minDistance = distance;
          closest = coord;
        }
      }

if (minDistance <= maxDistance) {
        return {
          coordinate: closest,
          distance: minDistance,
        };
      }

return null;
    };

const RESISTANCE_PIXELS = 80;
    const DEFAULT_RESISTANCE = 0.75;
    const END_RESISTANCE = 0;
    gsap.set(button, {
      x: window.innerWidth * 0.5,
      y: window.innerHeight * 0.5,
      yPercent: -50,
      xPercent: -50,
    });

// Make magnetic hotspots draggable
    for (const target of targets) {
      Draggable.create(target, {
        inertia: false,
        type: 'x,y',
      });
    }

Draggable.create(button, {
      inertia: true,
      allowContextMenu: true,
      allowEventDefault: true,
      type: 'x,y',
      dragResistance: DEFAULT_RESISTANCE,
      resistance: 1800,
      snap: {
        points: function (point) {
          const { isDragging, __unlocked, startX, startY } = this;
          const closestPoint = getClosestPoint(point, config.proximity);
          if (!isDragging && !__unlocked) {
            return { x: startX, y: startY };
          } else if (__unlocked && closestPoint) {
            for (const t of targets) t.dataset.active = false;
            closestPoint.coordinate.element.dataset.active = true;
            return closestPoint.coordinate;
          }
          return point;
        },
      },
      bounds: '.targets',
      onDragStart: function (event) {
        const bounds = this.target.getBoundingClientRect();
        const currentPoint = {
          x: bounds.left + bounds.width / 2,
          y: bounds.top + bounds.height / 2,
        };
        this.__start = currentPoint;
        this.dragResistance = DEFAULT_RESISTANCE;
        this.__unlocked = false;
        document.documentElement.dataset.dragging = true;
      },
      onDrag: function (event) {
        const { startX, startY, x, y } = this;
        const distance = Math.hypot(x - startX, y - startY);
        const newResistance = gsap.utils.clamp(
          END_RESISTANCE,
          DEFAULT_RESISTANCE,
          gsap.utils.mapRange(
            0,
            RESISTANCE_PIXELS,
            DEFAULT_RESISTANCE,
            END_RESISTANCE
          )(Math.abs(distance))
        );
        if (!this.__unlocked) this.dragResistance = newResistance;
        if (!this.__unlocked && newResistance === END_RESISTANCE) {
          this.__unlocked = true;
          document.querySelector('.arrow--instruction').style.opacity = 0;
          for (const t of targets) t.dataset.active = false;
        }
      },
      onDragEnd: function () {
        this.dragResistance = DEFAULT_RESISTANCE;
        this.__unlocked = false;
      },
      onRelease: () => {
        document.documentElement.dataset.dragging = false;
      },
      onThrowComplete: function () {
        this.dragResistance = DEFAULT_RESISTANCE;
        this.__unlocked = false;
      },
    });

// Popover functionality
    const pop = document.querySelector('[popover]');
    let f;
    let popDrag;
    const closePopover = async (event) => {
      if ((event && event.key === 'Escape') || event === undefined) {
        pop.dataset.closing = 'true';
        if (popDrag) popDrag[0].kill();

let closerBounds;
        const pos = pop.getBoundingClientRect();
        const center = {
          x: pos.x + pos.width * 0.5,
          y: pos.y + pos.height * 0.5,
        };
        const {
          x: buttonX,
          y: buttonY,
          width: buttonWidth,
          height: buttonHeight,
        } = button.getBoundingClientRect();
        const closest = getClosestPoint(center, config.proximity);
        if (closest) {
          closerBounds = closest.coordinate.element.getBoundingClientRect();
          gsap.set(button, {
            opacity: 0,
            x: closest.coordinate.x,
            y: closest.coordinate.y,
          });
        }
        const state = Flip.getState(
          [
            pop,
            '.placeholder',
            '.placeholder > svg',
            '[popover] .popover__content',
          ],
          {
            nested: true,
            props: 'borderRadius, scale, opacity, filter, backgroundColor, color',
          }
        );
        
        gsap.set(pop, {
          width: buttonWidth,
          height: buttonHeight,
          top: closest
            ? closerBounds.top + closerBounds.height * 0.5
            : buttonY + buttonHeight * 0.5,
          left: closest
            ? closerBounds.left + closerBounds.width * 0.5
            : buttonX + buttonWidth * 0.5,
          opacity: 1,
          borderRadius: '21px',
          x: 0,
          y: 0,
          xPercent: -50,
          yPercent: -50,
          backgroundColor:
            pop.dataset.signed === 'true'
              ? 'hsl(140 80% 90%)'
              : getComputedStyle(document.body).color,
          color:
            pop.dataset.signed === 'true'
              ? 'hsl(140 90% 30%)'
              : getComputedStyle(document.body).backgroundColor,
        });
        gsap.set('.placeholder > svg', {
          width: 20,
          height: 20,
          y: 0,
          opacity: 1,
        });
        gsap.set('[popover] .popover__content', {
          y: 0,
          opacity: 0,
          filter: 'blur(4px)',
        });
        
        const tl = gsap.timeline({ paused: true });
        tl.add(
          Flip.from(state, {
            duration: config.duration,
            nested: true,
            ease: 'power2.inOut',
          })
        );
        if (pop.dataset.signed === 'true') {
          tl.to(
            '#morph',
            {
              morphSVG: '#check',
              duration: config.duration,
              ease: 'power2.inOut',
            },
            0
          );
        }
        await tl.play();
        gsap.set(button, { opacity: 1, boxShadow: 'var(--shadow)' });
        pop.hidePopover();
      }
    };

const handleOffClick = (event) => {
      if (!event.target.closest('[popover]')) closePopover();
    };

let vertical = 'center';
      if (center.y < popHeight * 0.5 + 24) vertical = 'bottom';
      if (center.y > window.innerHeight - (popHeight * 0.5 + 24)) vertical = 'top';
      let horizontal = 'center';
      if (center.x < popWidth * 0.5) horizontal = 'left';
      if (center.x > window.innerWidth - popWidth * 0.5) horizontal = 'right';
      const result = `vertical: ${vertical}; horizontal: ${horizontal};`;

gsap.set(pop, {
        width: buttonWidth,
        height: buttonHeight,
        top: buttonY,
        left: buttonX,
        opacity: 1,
        borderRadius: '22px',
        backgroundColor:
          pop.dataset.signed === 'true'
            ? 'hsl(140 80% 90%)'
            : getComputedStyle(document.body).color,
        color:
          pop.dataset.signed === 'true'
            ? 'hsl(140 90% 30%)'
            : getComputedStyle(document.body).backgroundColor,
      });

const state = Flip.getState(
        [pop, '.placeholder', '.placeholder > svg', '[popover] .popover__content'],
        {
          nested: true,
          props: 'borderRadius, scale, opacity, filter, backgroundColor, color, y',
        }
      );

const position = {
        left: center.x,
        top: center.y,
        xPercent: -50,
        yPercent: -50,
      };

if (horizontal === 'left') {
        position.right = 'unset';
        position.left = '1.5rem';
        position.xPercent = 0;
      }
      if (horizontal === 'right') {
        position.left = 'unset';
        position.right = '1.5rem';
        position.xPercent = 0;
      }
      if (vertical === 'bottom') {
        position.top = '1.5rem';
        position.bottom = 'unset';
        position.yPercent = 0;
      }
      if (vertical === 'top') {
        position.bottom = '1.5rem';
        position.top = 'unset';
        position.yPercent = 0;
      }

gsap.set(pop, { clearProps: 'width,height' });
      gsap.set(pop, {
        ...position,
        opacity: 1,
        borderRadius: '6px',
        backgroundColor: getComputedStyle(document.body).backgroundColor,
        color: getComputedStyle(document.body).color,
      });

gsap.set('.placeholder > svg', {
        width: 16,
        height: 16,
        y: -6,
        opacity: 0.5,
      });

gsap.set('[popover] .popover__content', {
        y: 0,
        opacity: 1,
        filter: 'blur(0px)',
        background: '#0000',
      });

pop.addEventListener('toggle', async (event) => {
      if (event.newState === 'open') {
        openPopover();
      } else {
        gsap.set([pop, '.placeholder > svg', '[popover] .popover__content'], {
          clearProps: 'all',
        });
        gsap.set(button, {
          opacity: 1,
        });
        pop.dataset.closing = 'false';
        window.removeEventListener('keydown', closePopover);
        window.removeEventListener('click', handleOffClick);
      }
    });

// Signature handling
    const erase = document.querySelector('button.erase');
    const hold = document.querySelector('button.hold');
    const animated = document.querySelector('.animated');
    const animatedElement = animated.querySelector('svg');
    const animatedPath = animated.querySelector('path');
    const canvas = document.querySelector('[popover] canvas');
    const ctx = canvas.getContext('2d');
    const DPR = window.devicePixelRatio || 1;

const calibrateCanvas = () => {
      if (strokes.length === 0) {
        const rect = canvas.getBoundingClientRect();
        canvas.width = Math.floor(rect.width * DPR);
        canvas.height = Math.floor(rect.height * DPR);

ctx.scale(DPR, DPR);
        ctx.lineWidth = 2.5;
        ctx.lineCap = 'round';
        ctx.lineJoin = 'round';
        ctx.strokeStyle = 'canvasText';
      }
    };

const strokes = [];
    let minTime = Number.POSITIVE_INFINITY;
    let maxTime = Number.NEGATIVE_INFINITY;

const render = () => {
      for (const stroke of strokes) {
        const points = stroke.points;
        if (points.length > 0) {
          ctx.beginPath();
          ctx.moveTo(points[0].x, points[0].y);

for (let i = 1; i < points.length; i++) {
            ctx.lineTo(points[i].x, points[i].y);
          }
          ctx.stroke();
        }
      }
    };

const sign = (event) => {
      const currentStroke = strokes[strokes.length - 1];
      currentStroke.points.push(getPoint(event));
    };

const startSigning = (event) => {
      gsap.ticker.add(render);
      strokes.push({
        points: [getPoint(event)],
      });
      canvas.addEventListener('pointermove', sign);
    };

const stopSigning = (event) => {
      gsap.ticker.remove(render);
      canvas.removeEventListener('pointermove', sign);
    };

let signoff;
    const reverseSignature = () => {
      if (signoff) {
        signoff.pause();
        gsap.set(animatedPath, {
          attr: {
            d: '',
          },
        });
      }
    };

let all;
    const replaySignature = async () => {
      if (!isValidSignature()) return;

all = [];
      let minTime = Number.POSITIVE_INFINITY;
      let maxTime = Number.NEGATIVE_INFINITY;

canvas.addEventListener('pointerdown', startSigning);
    canvas.addEventListener('pointerup', stopSigning);
    erase.addEventListener('click', clearSignature);
    hold.addEventListener('pointerdown', replaySignature);
    hold.addEventListener('pointerup', reverseSignature);

const isValidSignature = () => {
      const MIN_POINTS = 50;
      const MIN_DISTANCE = 150;

let totalPoints = 0;
      let totalDistance = 0;

for (const stroke of strokes) {
        const points = stroke.points;
        totalPoints += points.length;

for (let i = 1; i < points.length; i++) {
          const dx = points[i].x - points[i - 1].x;
          const dy = points[i].y - points[i - 1].y;
          totalDistance += Math.sqrt(dx * dx + dy * dy);
        }
      }

return totalPoints >= MIN_POINTS && totalDistance >= MIN_DISTANCE;
    };

ctrl.addButton({ title: 'reset signature' }).on('click', () => {
      pop.dataset.signed = 'false';
      strokes.length = 0;
      clearSignature();
      for (const button of document.querySelectorAll('[popover] button')) {
        button.removeAttribute('disabled');
      }
      hold.setAttribute('aria-label', 'Hold to confirm');
      gsap.set('.toggle svg path:first-of-type', { clearProps: 'all' });
      gsap.set('.toggle svg path:last-of-type', { opacity: 0 });
      gsap.set('#morph', { morphSVG: '#pen' });
    });

// Error handling
    function highlightErrorLine(lineNumber) {
      const textarea = document.getElementById("shaderCode");
      const lines = textarea.value.split('\n');
      
      if (lineNumber >= 0 && lineNumber < lines.length) {
        const container = document.getElementById("shaderContainer");
        const highlight = document.createElement("div");
        highlight.className = "error-highlight";
        
        const lineHeight = 18;
        highlight.style.position = "absolute";
        highlight.style.left = "0";
        highlight.style.right = "0";
        highlight.style.height = `${lineHeight}px`;
        highlight.style.top = `${lineNumber * lineHeight + 32}px`;
        
        container.appendChild(highlight);
        textarea.scrollTop = lineNumber * lineHeight;
        return highlight;
      }
      return null;
    }

function hideError() {
      const errorEl = document.getElementById("error");
      errorEl.classList.remove("show");
      if (errorEl._highlight) {
        errorEl._highlight.remove();
        errorEl._highlight = null;
      }
    }

document.getElementById("error-close").addEventListener("click", hideError);
  </script>
</body>
</html>

Signature Component

Password rules + toggle Web Components

HTML

CSS

JS

Password rules + toggle Web Components

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS