6 files changed, 255 insertions, 0 deletions
diff --git a/demo/asset/audio/pronounciation.mp3 b/demo/asset/audio/pronounciation.mp3
new file mode 100644
index 0000000..4f29344
--- /dev/null
+++ b/demo/asset/audio/pronounciation.mp3
diff --git a/demo/asset/audio/pronounciation.ogg b/demo/asset/audio/pronounciation.ogg
new file mode 100644
index 0000000..dc24a90
--- /dev/null
+++ b/demo/asset/audio/pronounciation.ogg
diff --git a/demo/asset/audio/pronounciation.wav b/demo/asset/audio/pronounciation.wav
new file mode 100644
index 0000000..2efc915
--- /dev/null
+++ b/demo/asset/audio/pronounciation.wav
diff --git a/demo/asset/image/og.png b/demo/asset/image/og.png
new file mode 100644
index 0000000..dbb2d13
--- /dev/null
+++ b/demo/asset/image/og.png
diff --git a/demo/asset/script/shared.js b/demo/asset/script/shared.js
new file mode 100644
index 0000000..73ea5c2
--- /dev/null
+++ b/demo/asset/script/shared.js
@@ -0,0 +1,48 @@
+function copyTextToClipboard(text, { target = document.body } = {}) {
+  if (typeof text !== "string")
+    throw new TypeError(`Expected parameter \`text\` to be a \`string\`, got \`${typeof text}\`.`);
+
+  const element = document.createElement("textarea");
+  const previouslyFocusedElement = document.activeElement;
+  let isSuccess = false;
+
+  element.value = text;
+  element.setAttribute("readonly", "");
+  element.style.contain = "strict";
+  element.style.position = "absolute";
+  element.style.left = "-9999px";
+  element.style.fontSize = "12pt";
+
+  const selection = document.getSelection();
+  const originalRange = selection.rangeCount > 0 && selection.getRangeAt(0);
+
+  target.append(element);
+
+  element.select();
+  element.selectionStart = 0;
+  element.selectionEnd = text.length;
+
+  try {
+    isSuccess = document.execCommand("copy");
+  } catch(_) {
+    //
+  }
+
+  element.remove();
+
+  if (originalRange) {
+    selection.removeAllRanges();
+    selection.addRange(originalRange);
+  }
+
+  if (previouslyFocusedElement)
+    previouslyFocusedElement.focus();
+  return isSuccess;
+
+  /// via https://github.com/sindresorhus/copy-text-to-clipboard
+}
+
+function playAudio() {
+  const audio = document.getElementById("speak");
+  audio.play();
+}
diff --git a/demo/asset/style/shared.css b/demo/asset/style/shared.css
new file mode 100644
index 0000000..ed8a6d1
--- /dev/null
+++ b/demo/asset/style/shared.css
@@ -0,0 +1,207 @@
+*, *::before, *::after {
+  margin: 0; padding: 0;
+  box-sizing: inherit;
+}
+
+html {
+  box-sizing: border-box;
+  font-size: 12px;
+  scroll-behavior: smooth;
+}
+
+body {
+  font-family: system-ui, sans-serif;
+  font-size: 1.25rem;
+  line-height: 1.33;
+}
+
+section {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+
+  &:not(.intro) {
+    height: 100vh;
+  }
+
+  &:not(:last-of-type) {
+    margin-bottom: 1rem;
+  }
+
+  h2 {
+    line-height: 1;
+    text-align: center;
+
+    @media (min-width: 901px) {
+      font-size: 5vw;
+    }
+
+    @media (min-width: 701px) and (max-width: 900px) {
+      font-size: 5rem;
+    }
+
+    @media (max-width: 700px) {
+      font-size: 2rem;
+    }
+
+    span {
+      opacity: 0.15;
+    }
+  }
+
+  h3 {
+    font-size: 5vw;
+    line-height: 1;
+    position: relative;
+    text-align: right;
+
+    &::after {
+      width: 100%; height: 100%;
+      bottom: 0; left: 0;
+
+      content: "";
+      position: absolute;
+    }
+  }
+
+  a {
+    transition: color 0.2s;
+  }
+
+  .info,
+  .swatches {
+    width: 100%; height: 50%;
+  }
+
+  .info {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding: 1rem;
+    position: relative;
+
+    p {
+      top: 1rem; left: 1rem;
+      letter-spacing: 0.05rem;
+      position: absolute;
+    }
+
+    h3 {
+      bottom: 1rem; right: 1rem;
+      position: absolute;
+    }
+  }
+
+  .swatches {
+    display: flex;
+    flex-direction: row;
+    height: 50%;
+    list-style-type: none;
+
+    .swatch {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      justify-content: end;
+      position: relative;
+
+      h3 {
+        z-index: 1;
+      }
+
+      p {
+        height: 100%;
+        padding: 1.5rem 1rem;
+        opacity: 0.5;
+        position: absolute;
+        writing-mode: vertical-rl;
+
+        @media (min-width: 701px) {
+          width: 100%;
+        }
+
+        &::after {
+          width: 100%; height: 75%;
+          bottom: 0; right: 0;
+
+          content: "";
+          position: absolute;
+        }
+      }
+    }
+  }
+
+  &.intro {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    height: 45vh;
+    justify-content: center;
+
+    h1 {
+      cursor: pointer;
+      font-size: 10rem;
+      max-width: 280px;
+      width: fit-content;
+    }
+
+    p {
+      padding: 2rem;
+      text-align: center;
+    }
+
+    .links {
+      .link {
+        border-radius: 5rem;
+        padding: 0.5rem 1rem;
+        text-decoration: none;
+        transition: background-color 0.2s;
+
+        &:not(:first-of-type) {
+          margin-left: 0.25rem;
+        }
+      }
+    }
+
+    .palette {
+      display: flex;
+      flex-direction: row;
+      width: 280px;
+
+      a {
+        width: calc(280px / 8); height: calc(280px / 8);
+      }
+    }
+  }
+}
+
+.notify {
+  width: 100%; height: 5rem;
+  bottom: 0; left: 0;
+
+  color: var(--uchu-yang);
+  display: flex;
+  flex-direction: column;
+  font-size: 1.5rem;
+  justify-content: center;
+  padding: 0 1.25rem;
+  position: fixed;
+  transition: transform 0.2s;;
+  user-select: none;
+
+  &:not(.active) {
+    transform: translateY(5rem);
+    z-index: 0;
+  }
+
+  &.active {
+    transform: translateY(0);
+    z-index: 10;
+  }
+}
+
+@keyframes loading {
+  50% {
+    color: var(--uchu-yang);
+  }
+}