ظهور النص (TextReveal)

يُظهر تأثير ظهور النص (TextReveal) النص حرفًا حرفًا عند وصوله إلى الشاشة. أما العربية فتظهر كلمةً كلمة، لتبقى حروفها متصلة.

التثبيت

bash

npx @smicolon/cli add text-reveal

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

معاينة

كلمةً كلمة

يُظهر الجزء WordReveal النص كلمةً كلمة مع تمويه خفيف، ويناسب الأسطر الأطول بأي لغة.

النصوص المتصلة الحروف

تتصل الحروف العربية بما يجاورها، ولو وُضع كل حرف في عنصر مستقل لانفصلت. لذلك إذا احتوى النص على العربية، أظهره التأثير كلمةً كلمة، ويبقى النص اللاتيني حرفًا حرفًا.

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

تقرأ التقنيات المساعدة النص كاملًا مرة واحدة، والأجزاء المتحركة مخفية عنها.
إذا فعّل المستخدم إعداد prefers-reduced-motion، يظهر النص كله دفعة واحدة.
مع triggerOnView ينتظر التأثير حتى يظهر نصف النص على الشاشة، ثم يعمل مرة واحدة.

الخصائص (props)

الخاصية	النوع	الافتراضي	الوصف
`text`	`string`	لا يوجد	النص المراد إظهاره.
`delay`	`number`	`0.03`	الثواني بين ظهور جزء والذي يليه.
`duration`	`number`	`0.3`	مدة ظهور كل جزء بالثواني.
`triggerOnView`	`boolean`	`true`	ينتظر حتى يظهر النص على الشاشة.
`WordReveal`	`{ text, delay, duration, triggerOnView }`	لا يوجد	مثله لكن كلمةً كلمة، وقيمة `delay` الافتراضية 0.1 وقيمة `duration` 0.4.
`className`	`string`	لا يوجد	أصناف (class) إضافية للمكوّن.

الاستخدام

tsx

import { TextReveal, WordReveal } from "@/components/ui/text-reveal"

<TextReveal text="مرحبًا بك في متجري" className="text-4xl font-bold" />

<WordReveal text="توصيل مجاني لكل الطلبات داخل الرياض هذا الأسبوع." delay={0.1} />