S. EsmaeiliandClaude Opus 4.6
e31ef5a21f
Full 1:1 migration preserving all visuals, animations and behavior: - Nuxt 4 + Vue 3 (script setup, TypeScript strict) with SSG output - Tailwind CSS v4 with @tailwindcss/vite - Ant Design Vue 4 (dark theme, RTL, Persian locale) for design system - Pinia for state management (ui + contact stores) - motion-v (framer-motion port) for all animations - lucide-vue-next for icons - SEO improvements: og:image, canonical fix, real 404 page, JSON-LD services - JS bundle reduced from 302KB to 239KB gzip - Docker/nginx deployment preserved (out/ -> nginx) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
30 lines
886 B
Vue
30 lines
886 B
Vue
<script setup lang="ts">
|
|
import { useInView } from "motion-v";
|
|
|
|
const props = withDefaults(
|
|
defineProps<{ end: number; suffix?: string; duration?: number }>(),
|
|
{ suffix: "", duration: 1800 },
|
|
);
|
|
|
|
const el = ref<HTMLSpanElement | null>(null);
|
|
const inView = useInView(el, { once: true, margin: "-60px" });
|
|
const val = ref(0);
|
|
let raf = 0;
|
|
|
|
watch(inView, (v) => {
|
|
if (!v) return;
|
|
const t0 = performance.now();
|
|
const tick = (t: number) => {
|
|
const p = Math.min(1, (t - t0) / props.duration);
|
|
val.value = Math.round(props.end * (1 - Math.pow(1 - p, 3)));
|
|
if (p < 1) raf = requestAnimationFrame(tick);
|
|
};
|
|
raf = requestAnimationFrame(tick);
|
|
});
|
|
onBeforeUnmount(() => cancelAnimationFrame(raf));
|
|
</script>
|
|
|
|
<template>
|
|
<span ref="el" class="tabular-nums">{{ val.toLocaleString("fa-IR") }}<span v-if="suffix" class="text-accent">{{ suffix }}</span></span>
|
|
</template>
|