نص الآلة الكاتبة (Typewriter Text)

يكتب تأثير نص الآلة الكاتبة (Typewriter Text) النص حرفًا حرفًا، مع مؤشر كتابة يومض.

التثبيت

bash

npx @smicolon/fasla-ui@latest add typewriter-text

قبل إضافة أي مكوّن، شغّل الأمر init مرة واحدة في مشروعك. التفاصيل في صفحة التثبيت.

معاينة

كلمات متتالية

يكتب الجزء TypewriterWords كلمة، ثم يمحوها وينتقل إلى التالية.

وصل حديثًا:

إتاحة الوصول (accessibility)

مؤشر الكتابة مخفي عن التقنيات المساعدة.
إذا فعّل المستخدم إعداد prefers-reduced-motion، يظهر النص كاملًا دفعة واحدة، دون مؤشر كتابة.
يقرأ قارئ الشاشة النص كما هو لحظة وصوله إليه، وقد لا تكون كتابته اكتملت. اذكر الرسالة نفسها في مكان آخر من الصفحة.

الخصائص (props)

الخاصية	النوع	الافتراضي	الوصف
`text`	`string`	لا يوجد	النص المراد كتابته.
`speed`	`number`	`50`	مدة كتابة الحرف بالمللي ثانية.
`delay`	`number`	`0`	المللي ثانية قبل بدء الكتابة.
`cursor`	`boolean`	`true`	يُظهر مؤشر الكتابة.
`cursorChar`	`string`	`"\|"`	رمز مؤشر الكتابة.
`loop`	`boolean`	`false`	يعيد كتابة النص بعد توقف قصير.
`loopDelay`	`number`	`2000`	المللي ثانية قبل إعادة الكتابة.
`onComplete`	`() => void`	لا يوجد	تُستدعى عند اكتمال كتابة النص.
`TypewriterWords`	`{ words, speed, deleteDelay, wordDelay, cursor }`	لا يوجد	يكتب قائمة كلمات ويمحوها بالتتابع.
`className`	`string`	لا يوجد	أصناف (class) إضافية للمكوّن.

الاستخدام

TypewriterText

tsx

import { TypewriterText } from "@/components/ui/typewriter-text"

export function OrderStatus() {
  return <TypewriterText text="طلبك في الطريق إليك." speed={60} loop />
}

TypewriterWords

tsx

import { TypewriterWords } from "@/components/ui/typewriter-text"

export function NewIn() {
  return (
    <p>
      وصل حديثًا: <TypewriterWords words={["قمصان الكتان", "حقائب الجلد", "أوشحة الصوف"]} />
    </p>
  )
}