کارت نورانی

spotlight-cardانیمیشن

هاله‌ی نرمی که دنبال ماوس روی کارت حرکت می‌کنه و حاشیه را روشن می‌کنه.

سیستم طراحی

پلن حرفه‌ای

ماوس را روی کارت بچرخانید

نصب

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

usage.tsx

1import { SpotlightCard } from "@/components/animations/spotlight-card"23<SpotlightCard><div className="p-5">…</div></SpotlightCard>