تدرّج متحرك (AnimatedGradient)

يعرض تأثير تدرّج متحرك (AnimatedGradient) خلفية من بقع لونية تتحرك ببطء، للأقسام الرئيسية والبطاقات.

التثبيت

bash

npx @smicolon/cli add animated-gradient

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

معاينة

مع محتوى

تشكيلة الخريف وصلت

قطع جديدة من الكتان والصوف والجلد، في المتجر الآن.

ألوان مخصّصة

تقبل الخاصية colors حتى أربعة ألوان، لونًا لكل بقعة. ومتغيرات CSS مثل var(--chart-1) تتبع الوضعين الفاتح والداكن.

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

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

الخصائص (props)

الخاصية	النوع	الافتراضي	الوصف
`children`	`ReactNode`	لا يوجد	المحتوى فوق التدرّج.
`colors`	`string[]`	`["var(--primary)", "var(--secondary)", …]`	ألوان البقع، لون لكل بقعة.
`speed`	`number`	`10`	مدة الدورة بالثواني، وكلما زادت كانت الحركة أبطأ.
`blur`	`"sm" \| "md" \| "lg" \| "xl" \| "2xl" \| "3xl"`	`"3xl"`	مقدار نعومة البقع.
`AnimatedGradientText`	`{ colors, speed }`	لا يوجد	نص يملؤه تدرّج متحرك.
`className`	`string`	لا يوجد	أصناف (class) إضافية للمكوّن.

الاستخدام

tsx

import { AnimatedGradient } from "@/components/ui/animated-gradient"

<AnimatedGradient
  className="flex h-56 items-center justify-center rounded-lg"
  speed={3}
  colors={["var(--chart-1)", "var(--chart-2)", "var(--chart-4)", "var(--chart-5)"]}
>
  <h3 className="text-2xl font-bold">تشكيلة الخريف وصلت</h3>
</AnimatedGradient>