### Install Dependencies with npm, pnpm, or yarn

Source: https://www.reactbits.dev/

Choose your preferred package manager to install dependencies. This is a prerequisite for adding components.

```bash
npx pnpm dlx bunx --bun yarn dlx
```

--------------------------------

### Install GSAP Dependency

Source: https://www.reactbits.dev/get-started/installation

Install the GSAP library, a common dependency for React Bits components, using npm.

```bash
1npm install gsap
```

--------------------------------

### Use SplitText Component

Source: https://www.reactbits.dev/get-started/installation

Basic usage example of the SplitText component, demonstrating how to import and render it with specified props for text manipulation.

```javascript
1import SplitText from "./SplitText";

<SplitText
  text="Hello, you!"
  delay={100}
  duration={0.6}/>
```

--------------------------------

### Initialize shadcn MCP Server for Claude

Source: https://www.reactbits.dev/get-started/mcp

Run this command in your project to initialize the shadcn MCP server for the Claude client.

```bash
npx shadcn@latest mcp init --client claude
```

--------------------------------

### Ascii Text Component Props

Source: https://www.reactbits.dev/text-animations/ascii-text

Configuration options for the Ascii Text component.

```APIDOC
## Ascii Text Component

### Props

- `text` (string, optional): The text displayed on the plane in the ASCII scene. Defaults to `"Hello World!"`.
- `enableWaves` (boolean, optional): If false, disables the wavy text animation. Defaults to `true`.
- `asciiFontSize` (number, optional): Size of the ASCII glyphs in the overlay. Defaults to `12`.
- `textFontSize` (number, optional): Pixel size for the text that's drawn onto the plane texture. Defaults to `200`.
- `planeBaseHeight` (number, optional): How tall the plane is in 3D. The plane width is auto-based on text aspect. Defaults to `8`.
- `textColor` (string, optional): The color of the text drawn onto the plane texture. Defaults to `#fdf9f3`.
- `strokeColor` (string, optional): Not used here, but you could add it if you want an outline effect. Defaults to `N/A`.
```

--------------------------------

### Configure MCP Registries

Source: https://www.reactbits.dev/get-started/mcp

Add the @react-bits registry to your project's components.json file to enable component discovery.

```json
{
  "registries": {
    "@react-bits": "https://reactbits.dev/r/{name}.json"
  }
}
```

--------------------------------

### Add Aurora-TS-TW Component with npm

Source: https://www.reactbits.dev/

Use this command to add the Aurora-TS-TW component to your project. Works with any React project.

```bash
npx shadcn@latest add @react-bits/Aurora-TS-TW
```

--------------------------------

### Lightning Component Props

Source: https://www.reactbits.dev/backgrounds/lightning

This section details the available properties for customizing the Lightning component.

```APIDOC
## Props

Property| Type| Default| Description  
---|---|---|---
`hue`| number| `230`| Hue of the lightning in degrees (0 to 360).
`xOffset`| number| `0`| Horizontal offset of the lightning in normalized units.
`speed`| number| `1`| Animation speed multiplier for the lightning.
`intensity`| number| `1`| Brightness multiplier for the lightning.
`size`| number| `1`| Scale factor for the bolt size.
```

--------------------------------

### Use ColorBends Component

Source: https://www.reactbits.dev/

Import and use the ColorBends component with various customization props. Ensure the component is correctly imported from '@components/ColorBends'.

```javascript
import { ColorBends } from '@components/ColorBends';

function App() {
  return (
    <ColorBends
      color="#A855F7"
      speed={0.2}
      frequency={1.0}
      noise={0.15}
      bandWidth={0.14}
      rotation={90}
      fadeTop={0.75}
      iterations={1}
      intensity={1.3}
    />
  )
}
```

--------------------------------

### Orbit Images Component Props

Source: https://www.reactbits.dev/animations/orbit-images

This section details the properties available for the Orbit Images component, allowing for extensive customization of the orbiting animation.

```APIDOC
## Orbit Images Component Props

This component allows for the creation of orbiting image animations with various customization options.

### Props

| Property | Type | Default | Description |
|---|---|---|---|
| `images` | string[] | `[]` | Array of image URLs to orbit along the path. |
| `altPrefix` | string | `"Orbiting image"` | Prefix for auto-generated alt attributes. |
| `shape` | string | `"ellipse"` | Preset shape: ellipse, circle, square, rectangle, triangle, star, heart, infinity, wave, or custom. |
| `customPath` | string | `undefined` | Custom SVG path string (used when shape="custom"). |
| `baseWidth` | number | `1400` | Base width for the design coordinate space used for responsive scaling. |
| `radiusX` | number | `700` | Horizontal radius for ellipse/rectangle shapes. |
| `radiusY` | number | `170` | Vertical radius for ellipse/rectangle shapes. |
| `radius` | number | `300` | Radius for circle, square, triangle, star, heart shapes. |
| `starPoints` | number | `5` | Number of points for star shape. |
| `starInnerRatio` | number | `0.5` | Inner radius ratio for star (0-1). |
| `rotation` | number | `-8` | Rotation angle of the entire orbit path in degrees. |
| `duration` | number | `40` | Duration of one complete orbit in seconds. |
| `itemSize` | number | `64` | Width/height of each orbiting item in pixels. |
| `direction` | string | `"normal"` | Animation direction: "normal" or "reverse". |
| `fill` | boolean | `true` | Whether to distribute items evenly around the orbit. |
| `width` | number | `"100%"` | Container width in pixels or "100%". |
| `height` | number | `"auto"` | Container height in pixels or "auto". |
| `className` | string | `""` | Additional CSS class for the container. |
| `showPath` | boolean | `false` | Whether to show the orbit path for debugging. |
| `pathColor` | string | `"rgba(0,0,0,0.1)"` | Stroke color when showPath is true. |
| `pathWidth` | number | `2` | Stroke width when showPath is true. |
| `easing` | string | `"linear"` | Animation easing: linear, easeIn, easeOut, easeInOut. |
| `paused` | boolean | `false` | Whether the animation is paused. |
| `centerContent` | ReactNode | `undefined` | Custom content rendered at the center of the orbit. |
| `responsive` | boolean | `false` | Enable responsive scaling based on container width. |
```