Introduce the animated display experiment

pages/experiments/input/index.vue

@@ -15,6 +15,20 @@
           Used to demonstrate to the user the strength of their password. For this example, length is strength.
         </template>
       </ExperimentCanvas>
+      <p>The number input with an animated display:</p>
+      <ExperimentCanvas>
+        <div class="flex w-56 flex-col">
+          <input
+            v-model="amount"
+            type="number"
+            class="rounded border bg-slate-200 px-3 py-2 outline-0 focus:border-slate-400 dark:bg-slate-800"
+          >
+          <div class="mt-3 flex h-6 items-center gap-1">
+            <small>US$</small>
+            <WlNumberDisplay :value="amount" />
+          </div>
+        </div>
+      </ExperimentCanvas>
     </Container>
   </NuxtLayout>
 </template>
@@ -25,6 +39,8 @@ import { ref } from 'vue'
 import Container from '~/components/shared/layout/Container.vue'
 import ExperimentCanvas from '~/components/shared/experiments/ExperimentCanvas.vue'
 import WlPasswordStrength from '~/components/experiments/input/WlPasswordStrength.vue'
+import WlNumberDisplay from '~/components/experiments/input/WlNumberDisplay.vue'
 
 const password = ref('')
+const amount = ref(0)
 </script>