diff --git a/index.html b/index.html
new file mode 100644
index 0000000..a023aee
--- /dev/null
+++ b/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Stain Font Viewer</title>
+  <style>
+    @font-face {
+      font-family: 'Stain';
+      src: url('./dist/Stain.otf') format('opentype');
+    }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+      background-color: #fcfcfc; color: #333;
+      padding: 2em; line-height: 1.6;
+    }
+    h1, h2 { font-weight: 400; }
+    textarea {
+      width: 100%; height: 100px; font-size: 1.5em;
+      border: 1px solid #ccc; border-radius: 4px; padding: 0.5em;
+      box-sizing: border-box; margin-bottom: 1em;
+    }
+    .display { font-size: 3em; padding: 0.2em; border: 1px dashed #ddd; }
+    .stain { font-family: 'Stain', sans-serif; }
+    .candara { font-family: Candara, Calibri, 'Segoe UI', sans-serif; }
+  </style>
+</head>
+<body>
+  <h1>Stain Font</h1>
+  <textarea id="input" placeholder="Type here...">ABC abc</textarea>
+  <h2>Stain Font</h2>
+  <p class="display stain" id="stain-display">ABC abc</p>
+  <h2>Comparison (Candara / System Sans-Serif)</h2>
+  <p class="display candara" id="candara-display">ABC abc</p>
+
+  <script>
+    const i = document.getElementById('input');
+    const sd = document.getElementById('stain-display');
+    const cd = document.getElementById('candara-display');
+    i.oninput = () => sd.textContent = cd.textContent = i.value || i.placeholder;
+  </script>
+</body>
+</html>
