متن جریانی
streaming-textانیمیشنکلمهها یکییکی از دل تاری در میآن، انگار جواب مدل دارد شکل میگیره نه تایپ میشه؛ یک نقطهی نرم هم تا رسیدن کلمهی آخر سرِ جریان را نشان میده.
نصب
با CLI
اگر هنوز init نکردید، اول از راهنمای نصب پروژه را آماده کنید. بعد این دستور کامپوننت و وابستگیهاش را مینویسه.
$ npx vibefarsi add streaming-textنصب دستی
محتوای تب «کد» را در
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} />پراپها
| پراپ | نوع | پیشفرض | توضیح |
|---|---|---|---|
| text | string | - | متن کامل. |
| gap | number | 60 | میلیثانیه بین کلمهها. |
| fade | number | 300 | میلیثانیهی رفع تاری هر کلمه. |
نکتهها
- برای تایپ حرفبهحرف از «تایپشونده» استفاده کنید؛ این یکی برای حس جریان پاسخ مدله و چون کلمهها جدا هستن اتصال حروف فارسی مشکلی نداره.