---
title: Animated Meteors Link
description: A dynamic, high-performance meteor connection component connecting DOM elements with curved Bezier vector paths, shooting meteor trails, impact spark droplets, and interactive color themes.
---

<ComponentPreview name="animated-meteors-link-demo" />

## Premium Pro Component

This is a premium Pro component. To get access to its source code and advanced interactive configurations:
1. Visit the pricing page: [https://lightswind.com/pricing](https://lightswind.com/pricing)
2. Purchase a license to unlock this component.

If you have already purchased a license, you can install this component directly via our CLI:

```bash
npx lightswind@latest add animated-meteors-link
```

*(Note: Make sure you have configured your API key in your project to authenticate your Pro license).*

## Installation

<Tabs defaultValue="cli">

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx lightswind@latest add animated-meteors-link
```

</TabsContent>

<TabsContent value="manual">

> [!IMPORTANT]
> This is a premium component. Manual copy-paste source code is only available to Pro license holders.
> Please purchase a plan at [https://lightswind.com/pricing](https://lightswind.com/pricing) to unlock manual access, or use the authenticated CLI command:
> 
> ```bash
> npx lightswind@latest add animated-meteors-link
> ```

</TabsContent>

</Tabs>

## Usage

```tsx
import { AnimatedMeteorsLink } from "@/components/lightswind-pro/animated-meteors-link"
```

```tsx
import { useRef } from "react";
import { AnimatedMeteorsLink } from "@/components/lightswind-pro/animated-meteors-link";

export function Demo() {
  const containerRef = useRef(null);
  const sourceRef = useRef(null);
  const targetRef = useRef(null);

  return (
    <div ref={containerRef} className="relative flex justify-between p-12">
      <div ref={sourceRef}>Source Node</div>
      <div ref={targetRef}>Target Node</div>

      <AnimatedMeteorsLink
        containerRef={containerRef}
        sourceRef={sourceRef}
        targetRef={targetRef}
        curvature={45}
        meteorCount={2}
        duration={3}
        themePreset="cyber-neon"
        bidirectional={true}
        enableSplash={true}
      />
    </div>
  );
}
```