### Install Overlay Effect via CLI

Source: https://github.com/paceui/ui/blob/main/content/docs/components/overlay-effect.mdx

Installs the Overlay Effect component using the PaceUI CLI.

```bash
npx shadcn@latest add "@paceui-ui/overlay-effect"
```

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

### Install Squash Text via CLI

Source: https://github.com/paceui/ui/blob/main/content/docs/components/squash-text.mdx

Installs the Squash Text component using the PaceUI CLI.

```bash
npx shadcn@latest add @paceui-ui/squash-text
```

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

### Configure PaceUI Registry

Source: https://github.com/paceui/ui/blob/main/content/docs/installation.mdx

Adds the PaceUI component registry to your project's `components.json` file, enabling the discovery and installation of PaceUI components.

```json
{
    ...
    "registries": {
        "@paceui-ui": "https://ui.paceui.com/r/{name}.json"  // [!code highlight]
    }
}
```

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

### Install Swap Component via CLI

Source: https://github.com/paceui/ui/blob/main/content/docs/components/swap.mdx

Installs the PaceUI Swap component using the shadcn CLI. This is the recommended method for quick integration.

```bash
npx shadcn@latest add @paceui-ui/swap
```

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

### Install Reveal Text Component

Source: https://github.com/paceui/ui/blob/main/content/docs/components/reveal-text.mdx

Installs the Pace UI Reveal Text component using the npm CLI.

```bash
npx shadcn@latest add @paceui-ui/reveal-text
```

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

### Install Reveal On Scroll via CLI

Source: https://github.com/paceui/ui/blob/main/content/docs/components/reveal-on-scroll.mdx

Installs the 'reveal-on-scroll' component using the shadcn-ui CLI.

```bash
npx shadcn@latest add @paceui-ui/reveal-on-scroll
```

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

### Install Profile Peek via CLI

Source: https://github.com/paceui/ui/blob/main/content/docs/components/profile-peek.mdx

Installs the Profile Peek component using the PaceUI CLI. This is the recommended method for quick integration.

```bash
npx shadcn@latest add @paceui-ui/profile-peek
```

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

### Install Response Writer Manually

Source: https://github.com/paceui/ui/blob/main/content/docs/components/response-writer.mdx

Manually installs the Response Writer component by adding dependencies and copying the component's code. Requires installing gsap and @gsap/react.

```bash
npm install gsap @gsap/react
```

```typescript
import React from "react";
import { cn } from "@/lib/utils";

interface ResponseWriterProps extends React.TextareaHTMLAttributes<HTMLDivElement> {
  text: string;
}

const ResponseWriter = React.forwardRef<HTMLDivElement, ResponseWriterProps>(
  ({ className, text, ...props }, ref) => {
    return (
      <div
        ref={ref}
        className={cn(
          "flex h-full min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
          className
        )}
        {...props}
      >
        <div className="flex-1 overflow-y-auto whitespace-pre-wrap break-words p-2">
          {text}
        </div>
      </div>
    );
  }
);
ResponseWriter.displayName = "ResponseWriter";

export { ResponseWriter };

```

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

### Install Response Writer via CLI

Source: https://github.com/paceui/ui/blob/main/content/docs/components/response-writer.mdx

Installs the Response Writer component using the shadcn CLI. This is the quickest way to add the component to your project.

```bash
npx shadcn@latest add @paceui-ui/response-writer
```

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

### Install Flip Reveal via CLI

Source: https://github.com/paceui/ui/blob/main/content/docs/components/flip-reveal.mdx

Installs the PaceUI Flip Reveal component using the shadcn CLI. This is the recommended method for quick integration.

```bash
npx shadcn@latest add @paceui-ui/flip-reveal
```

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

### Install Github Star Counter Manually

Source: https://github.com/paceui/ui/blob/main/content/docs/components/github-star-counter.mdx

Manually installs the Github Star Counter component by adding dependencies and copying the component's code. Requires installing gsap and @gsap/react.

```bash
npm install gsap @gsap/react
```

```typescript
import React from 'react';
import gsap from 'gsap';

interface GithubStarCounterProps {
  repo: string;
}

const GithubStarCounter: React.FC<GithubStarCounterProps> = ({ repo = 'shadcn/ui' }) => {
  const [stars, setStars] = React.useState<number | null>(null);

  React.useEffect(() => {
    const fetchStars = async () => {
      try {
        const response = await fetch(`https://api.github.com/repos/${repo}`);
        const data = await response.json();
        setStars(data.stargazers_count);
        gsap.fromTo(
          '#star-count',
          { opacity: 0, y: 20 },
          { opacity: 1, y: 0, duration: 1, ease: 'power2.out' }
        );
      } catch (error) {
        console.error('Error fetching stars:', error);
      }
    };

    fetchStars();
  }, [repo]);

  return (
    <div className="flex items-center space-x-2">
      <span className="text-sm font-medium">Stars:</span>
      {stars !== null ? (
        <span id="star-count" className="text-lg font-bold">
          {stars.toLocaleString()}
        </span>
      ) : (
        <span className="text-lg font-bold">Loading...</span>
      )}
    </div>
  );
};

export default GithubStarCounter;

```

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

### Install Modal Selector via CLI

Source: https://github.com/paceui/ui/blob/main/content/docs/components/modal-selector.mdx

Installs the Modal Selector component using the PaceUI CLI. This is the recommended method for quick integration.

```bash
npx shadcn@latest add @paceui-ui/modal-selector
```

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

### Install Modal Selector Manually

Source: https://github.com/paceui/ui/blob/main/content/docs/components/modal-selector.mdx

Manually installs the Modal Selector component by adding dependencies and copying the component code. Requires installing gsap and @gsap/react.

```bash
npm install gsap @gsap/react
```

```typescript
import { ModalSelector } from "@paceui-ui/modal-selector";

// Usage example:
<ModalSelector showCapabilities={true} showDescription={true} />
```

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

### Install Dot Loader via CLI

Source: https://github.com/paceui/ui/blob/main/content/docs/components/dot-loader.mdx

Installs the Dot Loader component using npm and the shadcn CLI.

```bash
npx shadcn@latest add @paceui-ui/dot-loader
```

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

### Install Spring Button via CLI

Source: https://github.com/paceui/ui/blob/main/content/docs/components/spring-button.mdx

Installs the Spring Button component using the PaceUI CLI. This is the recommended method for quick integration.

```bash
npx shadcn@latest add @paceui-ui/spring-button
```

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

### Install AI Suggestions via CLI

Source: https://github.com/paceui/ui/blob/main/content/docs/components/ai-suggestions.mdx

Installs the AI Suggestions component using the PaceUI CLI. This is the quickest way to add the component to your project.

```bash
npx shadcn@latest add @paceui-ui/ai-suggestions
```

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

### Install Stagger on Scroll via CLI

Source: https://github.com/paceui/ui/blob/main/content/docs/components/stagger-on-scroll.mdx

Installs the '@paceui-ui/stagger-on-scroll' package using the shadcn-ui CLI.

```bash
npx shadcn@latest add @paceui-ui/stagger-on-scroll
```

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

### Install Liquid Glass Component via CLI

Source: https://github.com/paceui/ui/blob/main/content/docs/components/liquid-glass.mdx

Installs the Liquid Glass component using the PaceUI CLI. This is the recommended method for quick integration.

```bash
npx shadcn@latest add @paceui-ui/liquid-glass
```

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

### Install Tilt Card via CLI

Source: https://github.com/paceui/ui/blob/main/content/docs/components/tilt-card.mdx

Installs the PaceUI Tilt Card component using the shadcn CLI. This is the recommended method for quick integration.

```bash
npx shadcn@latest add @paceui-ui/tilt-card
```

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

### Install Gradient Shadow Manually

Source: https://github.com/paceui/ui/blob/main/content/docs/components/gradient-shadow.mdx

Manually installs the PaceUI Gradient Shadow component by adding GSAP dependencies and copying the component's code. Ensure GSAP and its React integration are installed.

```javascript
npm install gsap @gsap/react
```

```javascript
import { GradientShadow } from "@paceui-ui/gradient-shadow";

// Usage example:
<GradientShadow colors={['#ff0000', '#0000ff']} />;

```

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

### Install BouncingText via CLI

Source: https://github.com/paceui/ui/blob/main/content/docs/components/bouncing-text.mdx

Installs the BouncingText component using the shadcn-ui CLI. This is the quickest way to add the component to your project.

```bash
npx shadcn@latest add "@paceui-ui/bouncing-text"
```

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

### Install ScrambleText via CLI

Source: https://github.com/paceui/ui/blob/main/content/docs/components/scramble-text.mdx

Installs the ScrambleText component using the shadcn-ui CLI. This is the recommended method for quick integration.

```bash
npx shadcn@latest add @paceui-ui/scramble-text
```

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

### Install Text Fall Button via CLI

Source: https://github.com/paceui/ui/blob/main/content/docs/components/text-fall-button.mdx

Installs the Text Fall Button component using the shadcn-ui CLI.

```bash
npx shadcn@latest add @paceui-ui/text-fall-button
```

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

### Install Layered Stack via CLI

Source: https://github.com/paceui/ui/blob/main/content/docs/components/layered-stack.mdx

Installs the Layered Stack component using the PaceUI CLI. This is the quickest way to add the component to your project.

```bash
npx shadcn@latest add "@paceui-ui/layered-stack"
```

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

### Install Animated Stack via CLI

Source: https://github.com/paceui/ui/blob/main/content/docs/components/animated-stack.mdx

Installs the Animated Stack component using the PaceUI CLI. This is the quickest way to add the component to your project.

```bash
npx shadcn@latest add "@paceui-ui/animated-stack"
```

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

### Install Distort Text via CLI

Source: https://github.com/paceui/ui/blob/main/content/docs/components/distort-text.mdx

Installs the Distort Text component into your project using the shadcn-ui CLI.

```bash
npx shadcn@latest add @paceui-ui/distort-text
```

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

### Install Modal Ability Selector via CLI

Source: https://github.com/paceui/ui/blob/main/content/docs/components/modal-ability-selector.mdx

Installs the Modal Ability Selector component using the Pace UI CLI.

```bash
npx shadcn@latest add @paceui-ui/modal-ability-selector
```

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

### Install Token Counter via CLI

Source: https://github.com/paceui/ui/blob/main/content/docs/components/token-counter.mdx

Installs the PaceUI Token Counter component using npm and the shadcn-ui CLI. This is the recommended method for quick integration.

```bash
npx shadcn@latest add @paceui-ui/token-counter
```

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

### Install Gradient Shadow via CLI

Source: https://github.com/paceui/ui/blob/main/content/docs/components/gradient-shadow.mdx

Installs the PaceUI Gradient Shadow component using the shadcn CLI. This is the quickest way to add the component to your project.

```bash
npx shadcn@latest add @paceui-ui/gradient-shadow
```

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

### Install Profile Peek Manually

Source: https://github.com/paceui/ui/blob/main/content/docs/components/profile-peek.mdx

Manually installs the Profile Peek component by adding dependencies and copying the component code. Requires GSAP and @gsap/react.

```bash
npm install gsap @gsap/react
```

```typescript
import React, { ReactNode } from "react";

interface ProfilePeekProps {
  trigger: ReactNode;
  content: ReactNode;
}

const ProfilePeek: React.FC<ProfilePeekProps> = ({ trigger, content }) => {
  // Component implementation details would go here
  return (
    <div className="profile-peek-container">
      <div className="profile-peek-trigger">{trigger}</div>
      <div className="profile-peek-content">{content}</div>
    </div>
  );
};

export default ProfilePeek;
```

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

### Install Swap Component Manually

Source: https://github.com/paceui/ui/blob/main/content/docs/components/swap.mdx

Manually installs the PaceUI Swap component by adding dependencies and copying the component code. Requires GSAP for animations.

```bash
npm install gsap @gsap/react
```

```typescript
import React from 'react';
import { Swap } from '@paceui-ui/swap';

function MySwapComponent() {
  return (
    <Swap duration={0.5} effects={['fade', 'slide']}>
      <div>Content 1</div>
      <div>Content 2</div>
    </Swap>
  );
}

export default MySwapComponent;
```

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

### Install Dot Flow via CLI

Source: https://github.com/paceui/ui/blob/main/content/docs/components/dot-flow.mdx

Installs the Dot Flow component using the PaceUI CLI. This is the quickest way to add the component to your project.

```bash
npx shadcn@latest add @paceui-ui/dot-flow
```

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

### Install Draw Line Text Component

Source: https://github.com/paceui/ui/blob/main/content/docs/components/draw-line-text.mdx

Installs the Draw Line Text component using npm. This command adds the necessary package to your project.

```bash
npx shadcn@latest add @paceui-ui/draw-line-text
```

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

### Install Github Star Counter via CLI

Source: https://github.com/paceui/ui/blob/main/content/docs/components/github-star-counter.mdx

Installs the Github Star Counter component using the Pace UI CLI. This is the quickest way to add the component to your project.

```bash
npx shadcn@latest add @paceui-ui/github-star-counter
```

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

### Install Overlay Effect Manually

Source: https://github.com/paceui/ui/blob/main/content/docs/components/overlay-effect.mdx

Manually installs the Overlay Effect component by adding dependencies and copying code. Requires GSAP and its React integration.

```bash
npm install gsap @gsap/react
```

```typescript
import React from "react";
import { useGSAP } from "@gsap/react";
import gsap from "gsap";

interface OverlayEffectProps {
  effect?: "type-1" | "type-2";
}

const OverlayEffect: React.FC<OverlayEffectProps> = ({ effect = "type-1" }) => {
  useGSAP(() => {
    const overlay = document.querySelector(".overlay");
    if (!overlay) return;

    const handleMouseMove = (e: MouseEvent) => {
      gsap.to(overlay, {
        x: e.clientX,
        y: e.clientY,
        duration: 0.5,
        ease: "power2.out",
      });
    };

    document.addEventListener("mousemove", handleMouseMove);

    return () => {
      document.removeEventListener("mousemove", handleMouseMove);
    };
  }, [effect]);

  return (
    <div className="overlay fixed inset-0 pointer-events-none z-50">
      {/* Content of the overlay based on effect */}
      <div className="absolute inset-0 bg-blue-500 opacity-50 blur-xl"></div>
    </div>
  );
};

export default OverlayEffect;

```

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

### Install Liquid Cursor via CLI

Source: https://github.com/paceui/ui/blob/main/content/docs/components/liquid-cursor.mdx

Installs the PaceUI Liquid Cursor component using the shadcn CLI. This is the quickest way to add the component to your project.

```bash
npx shadcn@latest add @paceui-ui/liquid-cursor
```

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

### Install Mouse Wave Text via CLI

Source: https://github.com/paceui/ui/blob/main/content/docs/components/mouse-wave-text.mdx

Installs the Mouse Wave Text component using the PaceUI CLI. This is the quickest way to add the component to your project.

```bash
npx shadcn@latest add @paceui-ui/mouse-wave-text
```

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

### Manual Installation and Usage

Source: https://github.com/paceui/ui/blob/main/content/docs/components/reveal-text.mdx

Provides instructions for manually installing the Reveal Text component, including dependencies and code integration. It requires GSAP and @gsap/react.

```bash
npm install gsap @gsap/react
```

```typescript
import React from 'react';
import { RevealText } from '@paceui-ui/reveal-text';

function MyComponent() {
  return (
    <RevealText>
      This text will be revealed.
    </RevealText>
  );
}
```

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

### Install GSAP Dependencies for Animated Stack

Source: https://github.com/paceui/ui/blob/main/content/docs/components/animated-stack.mdx

Manually installs the required GSAP dependencies for the Animated Stack component. These libraries are essential for the component's animations.

```bash
npm install gsap @gsap/react
```

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

### Install AI Suggestions Manually

Source: https://github.com/paceui/ui/blob/main/content/docs/components/ai-suggestions.mdx

Manually installs the AI Suggestions component by adding dependencies and copying the component's code into your project. Requires GSAP for animations.

```bash
npm install gsap @gsap/react
```

```typescript
import { AiSuggestions } from "@paceui-ui/ai-suggestions";

function MyComponent() {
  return (
    <AiSuggestions />
  );
}
```

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

### Install Squash Text Dependencies and Code

Source: https://github.com/paceui/ui/blob/main/content/docs/components/squash-text.mdx

Manually installs GSAP and @gsap/react dependencies and provides the SquashText component code. Ensure to update import paths as needed.

```bash
npm install gsap @gsap/react
```

```typescript
import React from 'react';
import { gsap } from 'gsap';
import { SplitText } from 'gsap/SplitText';

gsap.registerPlugin(SplitText);

interface SquashTextProps {
    children: React.ReactNode;
    repeat?: boolean | number;
}

const SquashText: React.FC<SquashTextProps> = ({
    children,
    repeat = true,
}) => {
    const textRef = React.useRef<HTMLDivElement>(null);

    React.useEffect(() => {
        if (textRef.current) {
            const split = new SplitText(textRef.current, {
                type: 'chars',
                charsClass: 'char',
            });

            const chars = split.chars;

            gsap.fromTo(
                chars,
                { y: 20, scaleY: 0.5, transformOrigin: 'bottom' },
                {
                    y: 0,
                    scaleY: 1,
                    stagger: 0.05,
                    ease: 'elastic.out(1, 0.75)',
                    repeat: repeat ? -1 : 0,
                    duration: 1,
                    delay: 0.5,
                }
            );
        }
    }, [repeat]);

    return <div ref={textRef}>{children}</div>;
};

export default SquashText;

```

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

### Install Tilt Card Manually

Source: https://github.com/paceui/ui/blob/main/content/docs/components/tilt-card.mdx

Manually installs the PaceUI Tilt Card component by adding dependencies and copying the component code. Requires GSAP and its React integration.

```bash
npm install gsap @gsap/react
```

```typescript
import React from "react";
import { Tilt } from "@paceui/react";

export default function TiltCardDemo() {
  return (
    <Tilt
      className="w-full rounded-lg shadow-lg"
      perspective={1000}
      transitionSpeed={500}
      gyroscope={false}
    >
      <div className="relative h-full w-full rounded-lg bg-primary-500 p-6">
        <div className="absolute inset-0 rounded-lg bg-gradient-to-br from-blue-500 to-purple-600 opacity-50 blur-lg"></div>
        <div className="relative z-10 flex h-full flex-col items-center justify-center gap-4">
          <h1 className="text-2xl font-bold text-white">PaceUI Tilt Card</h1>
          <p className="text-white/80">Hover over me!</p>
        </div>
      </div>
    </Tilt>
  );
}
```

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

### Install Modal Ability Selector Manually

Source: https://github.com/paceui/ui/blob/main/content/docs/components/modal-ability-selector.mdx

Manually installs the Modal Ability Selector component by adding dependencies and copying code. Requires gsap and @gsap/react.

```bash
npm install gsap @gsap/react
```

```typescript
import React from 'react';

interface ModalAbilitySelectorProps {
  maxVisible?: number;
  buttonVariant?: 'ghost' | 'outline' | 'default';
}

const ModalAbilitySelector: React.FC<ModalAbilitySelectorProps> = ({
  maxVisible = 3,
  buttonVariant = 'ghost',
}) => {
  // Component implementation
  return (
    <div>
      {/* Modal Ability Selector UI */}
    </div>
  );
};

export default ModalAbilitySelector;

```

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

### Install BouncingText Dependencies and Code

Source: https://github.com/paceui/ui/blob/main/content/docs/components/bouncing-text.mdx

Manually installs the necessary dependencies (gsap and @gsap/react) and provides the component's source code for integration into your project. Ensure to update import paths as needed.

```bash
npm install gsap @gsap/react
```

```typescript
import React from 'react';
import { SplitText } from 'gsap/SplitText';
import { useGSAP } from '@gsap/react';
import gsap from 'gsap';

interface BouncingTextProps {
  children: React.ReactNode;
  repeat?: boolean | number;
}

const BouncingText: React.FC<BouncingTextProps> = ({
  children,
  repeat = true,
}) => {
  useGSAP(() => {
    gsap.registerPlugin(SplitText);

    const split = new SplitText('#bouncing-text', {
      type: 'chars',
    });

    gsap.from(split.chars, {
      y: 100,
      opacity: 0,
      stagger: 0.1,
      repeat: repeat ? -1 : 0,
      yoyo: true,
      ease: 'power2.out',
    });
  }, {
    scope: '#bouncing-text',
    dependencies: [repeat],
  });

  return (
    <span id="bouncing-text" className="inline-block">
      {children}
    </span>
  );
};

export default BouncingText;

```

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

### Initialize Project with PaceUI

Source: https://github.com/paceui/ui/blob/main/content/docs/installation.mdx

Initializes a new Next.js project or configures an existing one using the shadcn-ui CLI, preparing it for PaceUI integration.

```bash
npx shadcn@canary init
```

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

### Install Token Counter Manually

Source: https://github.com/paceui/ui/blob/main/content/docs/components/token-counter.mdx

Manually installs the PaceUI Token Counter component by adding dependencies and copying the component code. Requires npm install for gsap and @gsap/react.

```bash
npm install gsap @gsap/react
```

```typescript
import React, { useRef, useState, useEffect } from "react";
import { cn } from "@/lib/utils";

interface TokenCounterProps {
  sourceRef: React.RefObject<HTMLElement>;
  token: number;
  className?: string;
}

export const TokenCounter = React.forwardRef<HTMLDivElement, TokenCounterProps>(
  ({ sourceRef, token, className }, ref) => {
    const internalRef = useRef<HTMLDivElement>(null);
    const [currentTokens, setCurrentTokens] = useState(token);

    useEffect(() => {
      setCurrentTokens(token);
    }, [token]);

    return (
      <div
        ref={ref || internalRef}
        className={cn(
          "flex items-center justify-center rounded-md border px-3 py-1 text-sm font-medium transition-colors focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2",
          className
        )}
      >
        {currentTokens}
      </div>
    );
  }
);

TokenCounter.displayName = "TokenCounter";

```

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

### Sample Flip Reveal Example

Source: https://github.com/paceui/ui/blob/main/content/docs/components/flip-reveal.mdx

Provides a sample implementation of the Flip Reveal component, illustrating how to manage the visibility of items using specific keys and CSS classes for transitions.

```tsx
import React, { useState } from "react";
import { FlipReveal, FlipRevealItem } from "@paceui-ui/flip-reveal";

const SampleFlipReveal = () => {
  const [visibleKeys, setVisibleKeys] = useState<string[]>(['1']);

  const toggleKey = (key: string) => {
    setVisibleKeys((prevKeys) =>
      prevKeys.includes(key)
        ? prevKeys.filter((k) => k !== key)
        : [...prevKeys, key]
    );
  };

  const items = [
    { id: '1', content: "Visible Item" },
    { id: '2', content: "Hidden Item" },
    { id: '3', content: "Another Visible Item" },
  ];

  return (
    <div className="p-4">
      <div className="mb-4">
        <button onClick={() => toggleKey('1')} className="mr-2 px-3 py-1 bg-blue-500 text-white rounded">Toggle Item 1</button>
        <button onClick={() => toggleKey('2')} className="mr-2 px-3 py-1 bg-green-500 text-white rounded">Toggle Item 2</button>
        <button onClick={() => toggleKey('3')} className="mr-2 px-3 py-1 bg-red-500 text-white rounded">Toggle Item 3</button>
      </div>
      <FlipReveal keys={visibleKeys} showClass="opacity-100" hideClass="opacity-0">
        {items.map((item) => (
          <FlipRevealItem key={item.id} flipKey={item.id}>
            <div className={`w-40 h-40 flex items-center justify-center m-2 rounded-lg shadow-lg transition-opacity duration-500 ${visibleKeys.includes(item.id) ? 'bg-blue-500 text-white' : 'bg-gray-300 text-gray-700'}`}>
              {item.content}
            </div>
          </FlipRevealItem>
        ))}
      </FlipReveal>
    </div>
  );
};

export default SampleFlipReveal;
```

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

### Add TextReveal Component

Source: https://github.com/paceui/ui/blob/main/content/docs/installation.mdx

Adds the TextReveal component from PaceUI to your project using the shadcn-ui CLI.

```bash
npx shadcn@canary add @paceui-ui/text-reveal
```

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

### Install Flip Reveal Manually

Source: https://github.com/paceui/ui/blob/main/content/docs/components/flip-reveal.mdx

Manually installs the PaceUI Flip Reveal component by adding GSAP dependencies and copying the component's source code. Ensure to update import paths as needed.

```bash
npm install gsap @gsap/react
```

```typescript
import { FlipReveal, FlipRevealItem } from "@paceui-ui/flip-reveal";

// Example Usage:
function App() {
  const items = [
    { id: 1, content: "Item 1" },
    { id: 2, content: "Item 2" },
    { id: 3, content: "Item 3" },
  ];

  return (
    <FlipReveal keys="all" showClass="show" hideClass="hide">
      {items.map((item) => (
        <FlipRevealItem key={item.id} flipKey={item.id.toString()}>
          <div className="w-32 h-32 bg-blue-500 flex items-center justify-center text-white">
            {item.content}
          </div>
        </FlipRevealItem>
      ))}
    </FlipReveal>
  );
}

export default App;
```

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

### Install Text Fall Button Dependencies and Code

Source: https://github.com/paceui/ui/blob/main/content/docs/components/text-fall-button.mdx

Manually installs the necessary GSAP dependencies and provides the component's code for integration into a project.

```bash
npm install gsap @gsap/react
```

```tsx
import React from 'react';
import { gsap } from 'gsap';

interface TextFallButtonProps {
  children: React.ReactNode;
  effectOnHover?: boolean;
  effectOnLoad?: boolean;
}

const TextFallButton: React.FC<TextFallButtonProps> = ({
  children,
  effectOnHover = true,
  effectOnLoad = true,
}) => {
  const buttonRef = React.useRef<HTMLButtonElement>(null);

  React.useEffect(() => {
    if (buttonRef.current && effectOnLoad) {
      const chars = buttonRef.current.innerText.split('');
      gsap.from(chars, {
        y: -50,
        opacity: 0,
        stagger: 0.05,
        ease: 'elastic.out(1, 0.7)',
        duration: 1,
      });
    }
  }, [effectOnLoad]);

  const handleMouseEnter = () => {
    if (buttonRef.current && effectOnHover) {
      const chars = buttonRef.current.innerText.split('');
      gsap.to(chars, {
        y: 50,
        opacity: 0,
        stagger: 0.05,
        ease: 'elastic.in(1, 0.7)',
        duration: 0.5,
      });
    }
  };

  const handleMouseLeave = () => {
    if (buttonRef.current && effectOnHover) {
      const chars = buttonRef.current.innerText.split('');
      gsap.from(chars, {
        y: -50,
        opacity: 0,
        stagger: 0.05,
        ease: 'elastic.out(1, 0.7)',
        duration: 0.5,
      });
    }
  };

  return (
    <button
      ref={buttonRef}
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
      className="text-fall-button"
    >
      {children}
    </button>
  );
};

export default TextFallButton;

```

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

### Import and Use TextReveal Component

Source: https://github.com/paceui/ui/blob/main/content/docs/installation.mdx

Demonstrates how to import and use the TextReveal component within a React Next.js application.

```javascript
import { TextReveal } from "@/components/gsap/text-reveal" // [!code highlight]

export default function Home() {
    return (
        <TextReveal>
            PaceUI
        </TextReveal>
    )
}
```