متن جریانی

streaming-textانیمیشن

کلمه‌ها یکی‌یکی از دل تاری در می‌آن، انگار جواب مدل دارد شکل می‌گیره نه تایپ میشه؛ یک نقطه‌ی نرم هم تا رسیدن کلمه‌ی آخر سرِ جریان را نشان میده.

نصب

  1. با CLI

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

    $ npx vibefarsi add streaming-text
  2. نصب دستی

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

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

استفاده

usage.tsx
1import { StreamingText } from "@/components/animations/streaming-text"23<StreamingText text="پاسخ مدل این‌جا کلمه‌به‌کلمه ظاهر می‌شود." gap={60} />

پراپ‌ها

پراپنوعپیش‌فرضتوضیح
textstring-متن کامل.
gapnumber60میلی‌ثانیه بین کلمه‌ها.
fadenumber300میلی‌ثانیه‌ی رفع تاری هر کلمه.

نکته‌ها

  • برای تایپ حرف‌به‌حرف از «تایپ‌شونده» استفاده کنید؛ این یکی برای حس جریان پاسخ مدله و چون کلمه‌ها جدا هستن اتصال حروف فارسی مشکلی نداره.