پرتو اتصال

نصب

1. با CLI

   اگر هنوز init نکردید، اول از راهنمای نصب پروژه را آماده کنید. بعد این دستور کامپوننت و وابستگی‌هاش را می‌نویسه.

   $ npx vibefarsi add animated-beam

2. نصب دستی

   محتوای تب «کد» را در components/animations/animated-beam.tsx بگذارید. کلیدفریم را هم به globals.css اضافه کنید.

   $ npm i lucide-react
   کپی کل فایلregistry json

استفاده

1import { AnimatedBeam } from "@/components/animations/animated-beam"23const box = useRef(null), a = useRef(null), b = useRef(null)45<div ref={box} className="relative">6  <div ref={a}>…</div><div ref={b}>…</div>7  <AnimatedBeam containerRef={box} fromRef={a} toRef={b} curvature={-40} />8</div>

پراپ‌ها

نکته‌ها

• با pathLength=100 محاسبه‌ی dash از طول واقعی مسیر مستقله و نیازی به getTotalLength نیست.
• خط با z-index منفی زیر دو سر می‌نشینه. به ظرف relative isolate بدید تا پشت پس‌زمینه‌ی ظرف نره.