Number Animation

<script setup lang="ts">
import { computed, ref } from "vue";
import { DigitSwap } from "@/components/orvui/motion/number";
const visible = ref(false);
const number = computed(() => visible.value ? "4242 4242 4242 0806" : "•••• •••• •••• 0806");
function toggle() { visible.value = !visible.value; }
</script>
<template>
  <div class="flex w-80 flex-col gap-5">
    <div class="flex flex-col gap-2"><span class="text-xs font-medium text-muted-foreground">Card number</span>
      <DigitSwap :value="number" :animation-key="visible ? 'revealed' : 'masked'" :direction="visible ? 'up' : 'down'" :suffix-length="4"
        :glyph-class-name="visible ? 'text-foreground' : 'text-muted-foreground'" suffix-class-name="text-foreground" class="font-mono text-lg tracking-[0.08em] tabular-nums" />
    </div>
    <button type="button" :aria-label="visible ? 'Animate masked number' : 'Animate card number'" :aria-pressed="visible" @click="toggle"
      class="h-10 self-start rounded-lg border border-border px-3 text-sm font-medium text-foreground outline-none transition-colors hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring">Animate</button>
  </div>
</template>

<script setup lang="ts">
import { onBeforeUnmount, onMounted, ref } from "vue";
import { NumberTicker } from "@/components/orvui/motion/number";
const users = ref(48273);
let interval: ReturnType<typeof setInterval> | undefined;
function increment() { users.value += Math.floor(50 * Math.random()); }
onMounted(() => { interval = setInterval(increment, 2500); });
onBeforeUnmount(() => { clearInterval(interval); });
const formatCount = (count: number) => count.toLocaleString();
</script>
<template>
  <div class="flex flex-col items-center gap-3"><p class="text-xs text-muted-foreground">Active users</p>
    <NumberTicker :value="users" prefix="" class="text-4xl font-semibold tracking-tight text-foreground tabular-nums" :format="formatCount" />
    <p class="text-xs text-muted-foreground">live · updates every 2.5s</p>
  </div>
</template>

<script setup lang="ts">
import { AnimatedNumber } from "@/components/orvui/motion/number";
const formatRevenue = (amount: number) => `$${Math.round(amount).toLocaleString()}`;
</script>
<template>
  <div class="flex flex-col items-center gap-3">
    <p class="text-xs text-muted-foreground">Monthly recurring revenue</p>
    <div class="text-4xl font-semibold tracking-tight text-foreground tabular-nums"><AnimatedNumber :value="129480" :format="formatRevenue" /></div>
    <p class="text-xs text-(--color-success)">+12.4% vs last month</p>
  </div>
</template>