لرزش خطا

error-shakeانیمیشن

دور فیلد را بگیرید؛ وقتی خطا می‌آد جعبه با لرزشی که کم‌کم آروم میشه تکان می‌خوره، حلقه‌ی قرمز و پیام ظاهر میشن و بعد چند ثانیه خودشون می‌رن.

سیستم طراحی

نصب

با CLI
اگر هنوز init نکردید، اول از راهنمای نصب پروژه را آماده کنید. بعد این دستور کامپوننت و وابستگی‌هاش را می‌نویسه.
$ npx vibefarsi add error-shake
نصب دستی
محتوای تب «کد» را در components/animations/error-shake.tsx بگذارید. کلیدفریم را هم به globals.css اضافه کنید.
$ npm i lucide-react
کپی کل فایلregistry json

usage.tsx

1import { ErrorShake } from "@/components/animations/error-shake"23<ErrorShake error={error}>4  <Input value={code} onChange={…} />5</ErrorShake>

پراپ	نوع	پیش‌فرض	توضیح
error	string \| null	-	متن خطا؛ هر بار مقدار جدید بگیره لرزش دوباره پخش میشه.
revertAfter	number	3000	میلی‌ثانیه تا برگشت خودکار به حالت عادی؛ صفر یعنی بمونه.
onRevert	() => void	-	وقتی حالت خطا خودش پاک شد صدا زده میشه تا state خودتون را هم خالی کنید.

فرزندها هیچ‌وقت دوباره mount نمیشن، پس فوکوس و مقدار ورودی سر جاش می‌مونه. لرزش با حذف و اضافه‌ی animation روی خود عنصر تکرار میشه.