<svg class="page__feature fox" viewBox="0 0 245 231" fill="none" xmlns="http://www.w3.org/2000/svg">
  <title>A fox dressed in a purple wizard’s robes and hat, and holding a wand topped with a star. It conjures up blue smoke from a cauldron marked with a star symbol.</title>
  <path d="m19.53 23.56 3.92.49-10.06 93.54s-.17 4.83-4.21 4.17c-4.04-.66-3.25-5.11-3.25-5.11l13.6-93.1v.01Z" fill="#DCB99B" />
  <path d="m26.02 32.85-3.72-2.68c-.86-.62-2.05-.75-3.02-.34l-4.23 1.79c-2.08.88-4.5-.77-3.96-2.71l1.76-6.36c.17-.62.03-1.29-.39-1.84L8.17 15.1c-1.15-1.51-.03-3.46 2.04-3.55l5.83-.25c.95-.04 1.78-.5 2.21-1.2l2.69-4.44c1.12-1.86 4.4-1.49 5.08.57l1.63 4.93c.26.79.97 1.41 1.89 1.66l5.63 1.53c2 .55 2.67 2.7 1.21 3.92l-5.42 4.52c-.53.44-.81 1.06-.78 1.7l.31 6.59c.09 2.01-2.63 3.09-4.47 1.77Z" fill="#D288A9" />
  <path d="M61.1 159.03c-5.51-1.14-16.48-2.72-25.55.3-1.61.54-2.64 2.45-2.16 4.03 1.52 4.55 4.88 14.08 13.87 21.44 8.03 6.39 17.94 10.67 25.69-2.15s-.71-21.39-11.85-23.63v.01Z" fill="#C07347" />
  <path d="M56.44 157.44c-8.79-2.71-20.55-4.06-27.29-2.38-1.69.42-2.66 2.25-2.03 3.86 1.62 3.86 9.2 15.03 15.36 21.37 2.74 3.01 6.66 2.66 8.26.54.96-1.27.94-3.1.13-4.88 2.17.43 4.3-.14 5.58-1.71 1.81-2.21 1.26-5.64-1.15-8.02 2.37.26 4.46-.43 5.29-1.95 1.18-2.18.55-5.68-4.16-6.83h.01Z" fill="#DCB99B" />
  <path d="M71.98 220.24c-7.53-1.42-5.9-8.57-5.9-8.57l2.96-49.39s1.12-15.39 14.68-12.84c13.56 2.55 9.25 16.45 9.25 16.45l-11.8 48.59s-1.66 7.18-9.19 5.76Z" fill="#C07347" />
  <path d="m58.911 208.477 16.068-.62a6.385 6.385 0 0 1 6.621 6.129l.175 4.517a3.942 3.942 0 0 1-3.786 4.089l-25.91 1a3.709 3.709 0 0 1-3.85-3.565c-.237-6.135 4.556-11.314 10.692-11.55h-.01Z" fill="#C07347" />
  <path d="M135.67 219.97c7.53-1.42 5.9-8.57 5.9-8.57l-2.96-49.39s-1.12-15.39-14.68-12.84c-13.56 2.55-9.25 16.45-9.25 16.45l11.8 48.59s1.66 7.18 9.19 5.76Z" fill="#C16B31" />
  <path d="m155.681 223.316-25.911-1a3.941 3.941 0 0 1-3.785-4.089l.174-4.517a6.385 6.385 0 0 1 6.622-6.129l16.068.62c6.135.237 10.929 5.415 10.692 11.551a3.709 3.709 0 0 1-3.85 3.564h-.01Z" fill="#C16B31" />
  <path d="M182.69 75.6a6.244 6.244 0 0 0-8.25-.69L148.63 94.1c-4.16 3.98-4.3 10.58-.32 14.74s10.58 4.3 14.74.32l20.02-25.35a6.254 6.254 0 0 0-.39-8.2l.01-.01Z" fill="#C07347" />
  <path d="M184.28 84.16c6.777 0 12.27-5.493 12.27-12.27 0-6.776-5.493-12.27-12.27-12.27-6.777 0-12.27 5.494-12.27 12.27 0 6.777 5.493 12.27 12.27 12.27Z" fill="#C07347" />
  <path d="m167.48 121.81-14.44-33.83-31.09 19.89c-7.19 4.4-9.9 13.51-6.3 21.13a16.496 16.496 0 0 0 18.52 9.04l29.22-7.83c3.63-.97 5.56-4.93 4.08-8.39l.01-.01Z" fill="#7A6D8F" />
  <path d="m151.691 85.843-.009.004a5.71 5.71 0 0 0-2.673 7.62l15.915 33.114a5.71 5.71 0 0 0 7.62 2.673l.009-.005a5.71 5.71 0 0 0 2.673-7.62l-15.915-33.114a5.71 5.71 0 0 0-7.62-2.672Z" fill="#5A4D6D" />
  <path d="M14.42 99.76a6.26 6.26 0 0 1 8.04-1.98l28.49 14.91c4.73 3.28 5.91 9.78 2.63 14.51-3.28 4.73-9.78 5.91-14.51 2.63l-23.75-21.9c-2.29-2.12-2.68-5.6-.9-8.16v-.01Z" fill="#C07347" />
  <path d="M13.15 106.3c6.777 0 12.27-5.493 12.27-12.27 0-6.776-5.493-12.27-12.27-12.27C6.373 81.76.88 87.253.88 94.03c0 6.777 5.493 12.27 12.27 12.27Z" fill="#C07347" />
  <path d="m38.73 143.24 1.85-37.83 36.06 7.86c8.27 1.63 13.98 9.23 13.24 17.63-.68 7.69-6.59 13.88-14.23 14.9l-31.21 2.9c-3.17.29-5.86-2.28-5.7-5.46h-.01Z" fill="#7A6D8F" />
  <path d="m44.198 102.671-.01-.001a5.71 5.71 0 0 0-6.048 5.351l-2.243 36.671a5.71 5.71 0 0 0 5.351 6.048l.01.001a5.71 5.71 0 0 0 6.048-5.351l2.243-36.671a5.71 5.71 0 0 0-5.35-6.048Z" fill="#5A4D6D" />
  <path d="m148.12 198.89-85.77 1.77c-2.69.06-4.76-2.37-4.27-5.02l10.08-88.79c2.34-15.1 14.95-26.5 30.21-27.3 15.42-.81 29.25 9.42 32.99 24.39l20.78 89.57c.73 2.67-1.25 5.32-4.02 5.38Z" fill="#7A6D8F" />
  <path d="M106.16 126.046c15.933-3.065 27.47-12.725 25.767-21.576-1.703-8.851-16-13.541-31.934-10.476-15.934 3.066-27.47 12.726-25.768 21.577 1.703 8.851 16 13.541 31.935 10.475Z" fill="#5A4D6D" />
  <path d="M158.34 196.41v-.01a5.71 5.71 0 0 0-5.71-5.71H56.31a5.71 5.71 0 0 0-5.71 5.71v.01a5.71 5.71 0 0 0 5.71 5.71h96.32a5.71 5.71 0 0 0 5.71-5.71Z" fill="#5A4D6D" />
  <path d="M128.72 149.19c7.39 0 13.38-6.214 13.38-13.88s-5.99-13.88-13.38-13.88c-7.39 0-13.38 6.214-13.38 13.88s5.99 13.88 13.38 13.88Z" fill="#9DB1CE" />
  <path d="M120.93 166.87c8.235 0 14.91-6.922 14.91-15.46s-6.675-15.46-14.91-15.46-14.91 6.922-14.91 15.46 6.675 15.46 14.91 15.46Z" fill="#9DB1CE" />
  <path d="M145.69 145.21c7.39 0 13.38-6.214 13.38-13.88s-5.99-13.88-13.38-13.88c-7.39 0-13.38 6.214-13.38 13.88s5.99 13.88 13.38 13.88Z" fill="#9DB1CE" />
  <path d="M158.31 131.87c8.235 0 14.91-6.922 14.91-15.46s-6.675-15.46-14.91-15.46-14.91 6.922-14.91 15.46 6.675 15.46 14.91 15.46Z" fill="#9DB1CE" />
  <path d="M145.85 159.49c7.39 0 13.38-6.214 13.38-13.88s-5.99-13.88-13.38-13.88c-7.39 0-13.38 6.214-13.38 13.88s5.99 13.88 13.38 13.88Z" fill="#9DB1CE" />
  <path d="M157.69 155.95c8.235 0 14.91-6.922 14.91-15.46s-6.675-15.46-14.91-15.46-14.91 6.922-14.91 15.46 6.675 15.46 14.91 15.46Z" fill="#9DB1CE" />
  <path d="M178.95 122.82c9.278 0 16.8-7.799 16.8-17.42 0-9.62-7.522-17.42-16.8-17.42s-16.8 7.8-16.8 17.42c0 9.621 7.522 17.42 16.8 17.42Z" fill="#9DB1CE" />
  <path d="M194.58 144.32c10.979 0 19.88-9.232 19.88-20.62 0-11.388-8.901-20.62-19.88-20.62s-19.88 9.232-19.88 20.62c0 11.388 8.901 20.62 19.88 20.62Z" fill="#9DB1CE" />
  <path d="M198.44 107.27c6.556 0 11.87-5.511 11.87-12.31 0-6.798-5.314-12.31-11.87-12.31-6.556 0-11.87 5.511-11.87 12.31s5.314 12.31 11.87 12.31Z" fill="#9DB1CE" />
  <path d="M212.04 122c7.76 0 14.05-6.519 14.05-14.56s-6.29-14.56-14.05-14.56c-7.76 0-14.05 6.519-14.05 14.56S204.28 122 212.04 122Z" fill="#9DB1CE" />
  <path d="M232.05 114.9c6.633 0 12.01-5.574 12.01-12.45 0-6.876-5.377-12.45-12.01-12.45s-12.01 5.574-12.01 12.45c0 6.876 5.377 12.45 12.01 12.45Z" fill="#9DB1CE" />
  <path d="M219.19 105.93c7.158 0 12.96-6.017 12.96-13.44 0-7.423-5.802-13.44-12.96-13.44-7.158 0-12.96 6.017-12.96 13.44 0 7.423 5.802 13.44 12.96 13.44Z" fill="#9DB1CE" />
  <path d="M171.96 144.77c8.82 0 15.97-7.414 15.97-16.56 0-9.146-7.15-16.56-15.97-16.56s-15.97 7.414-15.97 16.56c0 9.146 7.15 16.56 15.97 16.56Z" fill="#9DB1CE" />
  <path d="M183.61 196.02c.2-12.2-5.49-25.62-14.82-35.6h3.97c1.51 0 2.73-1.22 2.73-2.73v-4.85c0-1.51-1.22-2.73-2.73-2.73H99.89c-1.51 0-2.73 1.22-2.73 2.73v4.85c0 1.51 1.22 2.73 2.73 2.73h3.97c-9.33 9.97-15.01 23.4-14.82 35.6.14 10.93 4.74 18.22 12.26 22.91l-1.56 6.4a4.58 4.58 0 0 0 8.42 3.37l3.12-5.42c7.25 2.14 15.83 3.02 25.05 3.07 8.53-.05 16.5-.8 23.39-2.61l3.5 5.23a4.584 4.584 0 0 0 8.17-3.95l-1.64-5.15c8.46-4.63 13.72-12.16 13.86-23.85Z" fill="#050505" />
  <path d="M140.24 204.1c-8.66 0-15.68-7.02-15.68-15.68s6.99-15.66 15.64-15.68c1.05 0 2.07.1 3.06.29.55.11.82-.65.32-.91a18.723 18.723 0 0 0-8.54-2.06c-10.19 0-18.58 8.21-18.78 18.39-.21 10.54 8.28 19.16 18.77 19.16 3.38 0 6.54-.89 9.28-2.45.79-.45.32-1.65-.56-1.45-1.13.26-2.3.39-3.51.39Z" fill="#63594E" />
  <path d="M36.63 42.37c7.3-.08 14.01 1.22 19.84 3.65.49.2.97.41 1.44.63 6.84 3.11 13.26 7.63 16.14 14.58 3.42 9.92-6.74 22.78-17.31 20.34-8.61-2.29-13.81-11-17.01-18.94-.18-.49-.36-.98-.52-1.48-1.84-5.49-2.79-11.81-2.58-18.78Z" fill="#050505" />
  <path d="M54.59 51.23c-.4.55-.48 1.18-.31 1.86-3.94-.97-7.22-.63-7.82 1.79-.54 2.22 1.62 4.21 4.91 5.45-2.87 1.3-4.26 3.49-3.45 6.04 1.01 3.14 4.63 4.2 8.78 2.82-.93 2.02-.85 3.89.81 5 2.49 1.66 5.65-.29 7.59-3.67l3.03-9.22c.29-1.19-.09-2.45-.99-3.31-1.39-1.33-5.27-4.81-5.27-4.81s-5.57-4.4-7.27-1.94l-.01-.01Z" fill="#fff" />
  <path d="M127.91 20.6c-6.5 3.33-11.83 7.6-15.86 12.47-.34.41-.66.82-.98 1.23-4.61 5.93-8.18 12.93-7.5 20.42 1.59 10.37 16.57 17.02 24.79 9.94 6.56-6.04 7.1-16.16 6.24-24.68-.06-.51-.14-1.03-.22-1.55-.93-5.72-3.04-11.75-6.46-17.82l-.01-.01Z" fill="#050505" />
  <path d="M117.4 35.93c.6.31.96.85 1.11 1.53 3.1-2.61 6.19-3.77 7.8-1.87 1.47 1.74.42 4.49-1.97 7.06 3.15-.11 5.37 1.23 5.77 3.88.49 3.27-2.28 5.82-6.61 6.43 1.73 1.4 2.49 3.1 1.5 4.84-1.49 2.59-5.19 2.25-8.43.08l-6.81-6.91c-.79-.94-1.01-2.23-.58-3.41.66-1.81 2.58-6.65 2.58-6.65s3.03-6.42 5.65-4.97l-.01-.01Z" fill="#fff" />
  <path d="M106.35 113.27c56.32-14.69 35.96-57.21 35.96-57.21L40.46 81.21s.59 45.93 65.89 32.06Z" fill="#DCB99B" />
  <path d="M93.67 67.89c-2.44 3.24-3.42 6.5-2.47 9.34 2.51 7.55 17.87 14.24 34.02 8.87 18.55-6.65 17.03-30.32 17.03-30.32s-23.89 5.98-48.58 12.12v-.01Z" fill="#C07347" />
  <path d="M40.46 81.22c-.18.04 9.32 16.22 30.17 15.3 20.85-.92 30.76-14.49 29.66-22.37-.35-2.52-1.78-5.66-4.51-7.37-24.97 6.21-51.62 13.7-55.31 14.44h-.01Z" fill="#C07347" />
  <path d="M51.96 81.95c-2.51-15.2 9.1-34.04 31.26-39.24 22.17-5.2 44.16 4.16 49.27 18.5L51.95 81.95h.01Z" fill="#C07347" />
  <path d="M112.12 43.97 55.91 63.54l6.63-59.05c.37-3.25 4.34-4.67 6.68-2.39l42.9 41.87Z" fill="#7A6D8F" />
  <path d="M26.89 74.07c.37 1 1.48 1.5 2.48 1.13l115.68-43.52c1-.37 1.5-1.48 1.13-2.48-.37-1-1.48-1.5-2.48-1.13L28.02 71.59c-1 .37-1.5 1.48-1.13 2.48Z" fill="#7A6D8F" />
  <path d="M84.51 94.55s2.15 10.04 15.46 7.29c13.31-2.75 10.28-13.59 10.28-13.59s-9.9.06-14.64-3.71c-2.75 7.18-11.09 10.01-11.09 10.01h-.01Z" fill="#050505" />
  <path d="M92.03 99.46c.35-2.16 4.26-4.02 7.55-2.1.89-2.07 5.56-3.53 6.92-1.65.33 3.1-13.2 6.17-14.47 3.75Z" fill="#D288A9" />
  <path d="m85.66 93.45 6.75-4.91 1.42 6.35c.12 1.1-1.61 2.19-2.94 1.37l-5.22-2.82-.01.01Z" fill="#fff" />
  <path d="m99.46 86.09 8.28 2.45-2.74 3.89c-.38 1.54-2.52 1.83-3.15.43l-2.38-6.78-.01.01Z" fill="#fff" />
  <path d="M79.53 96.21c-.67 0-1.22-.54-1.22-1.22 0-.68.54-1.23 1.22-1.23 6.94-.04 13.08-4.73 14.27-10.93l.43-2.21 1.62 1.55c2.99 2.87 12.14 7.22 19.73 4.3a1.223 1.223 0 0 1 .88 2.28c-7.65 2.94-16.4-.44-20.77-3.56-2.19 6.36-8.79 10.97-16.16 11.01v.01Z" fill="#050505" />
  <path d="M105 53.93c-8.13.27-14.93 3.98-17.67 9.03-1.15-1.7-2.67-2.99-4.52-3.65-5.97-2.15-13.1 2.89-16.16 11.33-.08.22-.15.44-.23.66-2.88 7.62-.95 20.62 9.44 19.84 7.31-.3 11.59-7.04 13.26-13.63.07-.3.14-.6.2-.9.06-.3.12-.6.17-.89 3.68 3.72 9.92 6.07 16.88 5.83 10.84-.37 19.33-6.85 18.95-14.47-.38-7.63-9.48-13.51-20.32-13.15Z" fill="#fff" />
  <path d="M119.31 57.48c-3.75-2.96-8.91-5.21-15.02-5-8.13.27-14.93 3.98-17.67 9.03-1.15-1.7-2.67-2.99-4.52-3.65-6.12-2.21-13.46 3.16-16.39 11.99-.79 2.38-1.17 4.77-1.2 7.03 3.76-1.84 5.36-10.18 12.69-12.78 8.79-4.32 9.62 4.97 11.73 4.13 2.28-.91.78-7.79 13.62-10.21 5.37-1.01 10.93 1.68 16.76-.53v-.01Z" fill="#D288A9" />
  <path d="M83.744 75.279c.835-3.77-.372-7.242-2.696-7.757-2.324-.515-4.885 2.123-5.72 5.892-.835 3.77.373 7.242 2.697 7.757 2.324.515 4.884-2.123 5.72-5.892Z" fill="#050505" />
  <path d="M110.619 70.832c1.292-2.044-.301-5.372-3.56-7.431-3.258-2.06-6.948-2.073-8.24-.028-1.293 2.045.3 5.372 3.559 7.432 3.259 2.06 6.948 2.072 8.241.027Z" fill="#050505" />
  <path d="M124.79 54.21c-.44-.55-1.21-.65-1.71-.21-1.11.97-2.34 1.7-3.6 2.22.95-.76 1.83-1.62 2.62-2.62 1-1.37-1.06-3-1.98-1.57a14.35 14.35 0 0 1-3.31 3.6c.84-.91 1.57-1.94 2.14-3.11.69-1.56-1.6-2.71-2.22-1.12-.54 1.48-1.55 2.86-2.74 3.99-.77.72-1.64 1.34-2.57 1.84-21.09-2.3-23.69 10.03-23.79 10.57-.13.68.29 1.37.94 1.54.1.03.2.04.29.04.54 0 1.02-.38 1.14-.96.09-.45 2.45-10.93 21.91-8.58 1.73.21 7.73.55 12.75-3.83.5-.44.55-1.24.11-1.8h.02Z" fill="#050505" />
  <path d="M89.81 67.36c-.11-.23-2.72-5.62-7.9-6.09-4.34-.39-8.94 2.82-13.7 9.54-1.28.69-2.7 1.13-4.15 1.33-1.67.22-3.4.14-4.89-.37-1.63-.52-2.3 1.99-.65 2.44 1.38.31 2.77.38 4.13.27-1.48.29-3 .38-4.47.21-1.71-.18-1.86 2.45-.14 2.53.92 0 1.81-.07 2.69-.2-1.24.3-2.57.37-3.98.19-.69-.09-1.29.41-1.37 1.1-.08.69.42 1.33 1.1 1.41.73.09 1.45.13 2.15.11 4.34-.1 8.06-2.3 10.83-6.43 4.44-6.6 8.67-9.92 12.24-9.62 3.73.33 5.82 4.56 5.86 4.64.3.63 1.05.91 1.66.61.62-.3.87-1.05.57-1.68l.02.01Z" fill="#050505" />
  <path d="M103.9 76.27c.87 3.45-8.67 8.86-8.67 8.86s-10.87-.28-11.74-3.73c-.87-3.45 3-7.39 8.64-8.81 5.64-1.42 10.91.23 11.77 3.68Z" fill="#050505" />
</svg>
<canvas class="wand-canvas"></canvas>

@import "https://unpkg.com/open-props/open-props.min.css";
@import "https://unpkg.com/open-props/normalize.min.css";

body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  background: var(--gray-8);
}

.fox {
  width: 50vmin;
}

.wand-canvas {
  height: 100vh;
  width: 100vw;
  position: fixed;
  pointer-events: none;
  left: 0;
  top: 0;
}

const mapRange = (inputLower, inputUpper, outputLower, outputUpper, value) => {
  const INPUT_RANGE = inputUpper - inputLower;
  const OUTPUT_RANGE = outputUpper - outputLower;
  return clamp(
    outputLower,
    outputUpper,
    outputLower + (((value - inputLower) / INPUT_RANGE) * OUTPUT_RANGE || 0)
  );
};

const clamp = (min, max, value) => Math.min(Math.max(value, min), max);

let wandFrame;
const CANVAS = document.querySelector(".wand-canvas");
let ctx = CANVAS.getContext("2d");

const blocks = [];
const createBlock = ({ x, y, movementX, movementY }) => {
  const LOWER_SIZE = CANVAS.height * 0.05;
  const UPPER_SIZE = CANVAS.height * 0.25;
  const size = mapRange(
    0,
    100,
    LOWER_SIZE,
    UPPER_SIZE,
    Math.max(Math.abs(movementX), Math.abs(movementY))
  );
  const rate = mapRange(LOWER_SIZE, UPPER_SIZE, 1, 5, size);
  const { left, top, width, height } = CANVAS.getBoundingClientRect();

  const block = {
    hue: Math.random() * 359,
    x: x - left,
    y: y - top,
    size,
    rate
  };

  blocks.push(block);
};

const drawBlocks = () => {
  ctx.clearRect(0, 0, CANVAS.width, CANVAS.height);

  for (let b = 0; b < blocks.length; b++) {
    const block = blocks[b];
    ctx.strokeStyle = ctx.fillStyle = `hsla(${block.hue}, 80%, 80%, 0.5)`;
    ctx.beginPath();
    ctx.arc(block.x, block.y, block.size * 0.5, 0, 2 * Math.PI);
    ctx.stroke();
    ctx.fill();

    block.size -= block.rate;
    block.y += block.rate;

    if (block.size <= 0) {
      blocks.splice(b, 1);
    }
  }
  wandFrame = requestAnimationFrame(drawBlocks);
};

const init = () => {
  const { height, width } = CANVAS.getBoundingClientRect();
  CANVAS.height = height;
  CANVAS.width = width;
  ctx = CANVAS.getContext("2d");
  blocks.length = 0;
  if (wandFrame) cancelAnimationFrame(wandFrame);
  wandFrame = requestAnimationFrame(drawBlocks);
};

const setUp = () => {
  if (window.matchMedia("(prefers-reduced-motion: no-preference)").matches) {
    // Use a timeout so the <canvas> has gained full size.
    setTimeout(() => {
      init();
      window.addEventListener("pointermove", createBlock);
      window.addEventListener("resize", init);
    }, 500);
  }
};

setUp();