تایپ‌شونده

typewriterانیمیشن

متنی که حرف‌به‌حرف ظاهر میشه و اتصال حروف فارسی را درست نگه می‌داره.

نصب

  1. با CLI

    اگر هنوز init نکردید، اول از راهنمای نصب پروژه را آماده کنید. بعد این دستور کامپوننت و وابستگی‌هاش را می‌نویسه.

    $ npx vibefarsi add typewriter
  2. نصب دستی

    محتوای تب «کد» را در components/animations/typewriter.tsx بگذارید. کلیدفریم را هم به globals.css اضافه کنید.

    $ npm i lucide-react
    کپی کل فایلregistry json

استفاده

usage.tsx
1import { Typewriter } from "@/components/animations/typewriter"23<Typewriter text="یک فرم ثبت‌نام فارسی بساز." speed={70} loopDelay={2000} />

پراپ‌ها

پراپنوعپیش‌فرضتوضیح
speednumber70میلی‌ثانیه برای هر حرف.
loopDelaynumber0مکث در پایان و شروع دوباره. صفر یعنی فقط یک بار.

نکته‌ها

  • چون هر بار زیررشته‌ی کامل رندر میشه، حروف فارسی درست به هم می‌چسبن. حرف‌ها را جدا انیمیت نکنید.