Motion-Primitives

https://motion-primitives.com/docs
Admin
Motion-Primitives is a collection of reusable animated components built with Motion and Tailwind CSS...
Tokens:14,340
Snippets:153
Trust Score:7.9
Update:10 months ago
Show doc for...
Tokens:
Raw
### Install Motion Library

Source: https://motion-primitives.com/docs/installation

Installs the core Motion animation library using npm. This is a prerequisite for using the animation features of Motion-Primitives.

```bash
npm install motion
```

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

### Install Lucide React Icons

Source: https://motion-primitives.com/docs/installation

Installs the Lucide React icon library using npm. This is required if your project utilizes icons provided by Motion-Primitives or if you plan to use them independently.

```bash
npm install lucide-react
```

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

### Installation

Source: https://motion-primitives.com/docs/image-comparison

Instructions on how to install the Image Comparison component using the CLI.

```APIDOC
## Installation

### CLI

To install the Image Comparison component, use the following command:

```bash
npx motion-primitives@latest add image-comparison
```
```

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

### Installation

Source: https://motion-primitives.com/docs/accordion

Instructions on how to install the Accordion component using the CLI.

```APIDOC
## Installation

### Method
CLI Command

### Endpoint
N/A

### Parameters
N/A

### Request Example
```bash
npx motion-primitives@latest add accordion
```

### Response
#### Success Response (200)
Component installed successfully.

#### Response Example
N/A
```

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

### Installation

Source: https://motion-primitives.com/docs/sliding-number

Instructions for installing the Sliding Number component using the Motion Primitives CLI.

```APIDOC
## Installation

### Method
CLI Command

### Endpoint
N/A

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```bash
npx motion-primitives@latest add sliding-number
```

### Response
#### Success Response (200)
Installation complete.

#### Response Example
```
Successfully added sliding-number component.
```
```

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

### Add Text Effect Component using CLI

Source: https://motion-primitives.com/docs/installation

Demonstrates how to add the 'Text Effect' component to your project using the Motion-Primitives CLI. This command automates the process of integrating specific components.

```bash
npx motion-primitives@latest add text-effect
```

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

### Install Image Comparison Component

Source: https://motion-primitives.com/docs/image-comparison

This command installs the Image Comparison component using the Motion-Primitives CLI. Ensure you have Node.js and npm installed. This is the primary method for adding the component to your project.

```bash
npx motion-primitives@latest add image-comparison
```

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

### Install In View Component using shadcn

Source: https://motion-primitives.com/docs/in-view

This command installs the 'In View' component from Motion-Primitives using the shadcn CLI. It fetches the component's configuration and adds it to your project, simplifying setup.

```bash
npx shadcn add "https://motion-primitives.com/c/in-view.json"
```

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

### Install Glow Effect Component with CLI

Source: https://motion-primitives.com/docs/glow-effect

This snippet demonstrates how to install the Glow Effect component using the Motion-Primitives CLI. It's a straightforward command-line installation process.

```bash
npx motion-primitives@latest add glow-effect
```

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

### Install Text Shimmer Component

Source: https://motion-primitives.com/docs/text-shimmer

Installs the Text Shimmer component using the motion-primitives CLI. This is the recommended way to add the component to your project.

```bash
npx motion-primitives@latest add text-shimmer
```

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

### Install Disclosure Component using CLI

Source: https://motion-primitives.com/docs/disclosure

This command installs the Disclosure component using the motion-primitives CLI. Ensure you have the motion-primitives package and shadcn installed in your project.

```bash
npx motion-primitives@latest add disclosure
```

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

### Install Progressive Blur Component via CLI

Source: https://motion-primitives.com/docs/progressive-blur

This command installs the Progressive Blur component using the motion-primitives CLI. Ensure you have the latest version of motion-primitives installed.

```bash
npx motion-primitives@latest add progressive-blur
```

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

### Install Accordion Component using CLI

Source: https://motion-primitives.com/docs/accordion

This code snippet demonstrates how to install the Accordion component using the Motion-Primitives CLI. Ensure you have Node.js and npm installed. This command adds the accordion component to your project.

```bash
npx motion-primitives@latest add accordion
```

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

### Install Spinning Text Component

Source: https://motion-primitives.com/docs/spinning-text

Installs the Spinning Text component using the motion-primitives CLI. This is the recommended method for integrating the component into your project.

```bash
npx motion-primitives@latest add spinning-text
```

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

### Install Morphing Dialog using CLI

Source: https://motion-primitives.com/docs/morphing-dialog

This command installs the Morphing Dialog component and its dependencies using the motion-primitives CLI. Ensure you have Node.js and npm/yarn installed.

```bash
npx motion-primitives@latest add morphing-dialog
```

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

### Install Text Loop Component - CLI

Source: https://motion-primitives.com/docs/text-loop

Provides the command-line interface (CLI) command to install the Text Loop component using the motion-primitives shadcn integration. This is the recommended method for adding the component to your project.

```bash
npx motion-primitives@latest add text-loop
```

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

### Install Border Trail Component using CLI

Source: https://motion-primitives.com/docs/border-trail

Installs the Border Trail component using the motion-primitives CLI. This command adds the necessary files and configurations for using the component in your project.

```bash
npx motion-primitives@latest add border-trail
```

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

### Install Text Shimmer Wave Component (CLI)

Source: https://motion-primitives.com/docs/text-shimmer-wave

Install the Text Shimmer Wave component using the Motion-Primitives CLI. This command fetches and integrates the necessary files into your project.

```bash
npx motion-primitives@latest add text-shimmer-wave

```

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

### Scroll Progress Gradient Installation

Source: https://motion-primitives.com/docs/scroll-progress

Instructions on how to install the scroll-progress component using the command line interface.

```APIDOC
## Installation

CLIManual
motion-primitivesshadcn
```
npx motion-primitives@latest add scroll-progress
```
```

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

### Install Dock Component using CLI

Source: https://motion-primitives.com/docs/dock

Installs the Motion-Primitives Dock component using npm or yarn. This command adds the necessary files and configurations to your project for using the Dock component.

```bash
npx motion-primitives@latest add dock
```

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

### Utility Helper Function for Tailwind CSS Classes

Source: https://motion-primitives.com/docs/installation

Defines a utility function 'cn' to manage and merge Tailwind CSS classes efficiently. It uses 'clsx' for conditional class application and 'tailwind-merge' to resolve conflicts, ensuring clean class strings. This is essential for applying styles correctly with Motion-Primitives components.

```typescript
import { clsx, type ClassValue } from 'clsx';
import { twMerge } from 'tailwind-merge';

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}
```

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

### Install Text Roll Component using CLI

Source: https://motion-primitives.com/docs/text-roll

Installs the Text Roll component using the motion-primitives CLI. This command adds the necessary files to your project.

```bash
npx motion-primitives@latest add text-roll
```

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

### Install Text Scramble Component via CLI

Source: https://motion-primitives.com/docs/text-scramble

Installs the Text Scramble component using the Motion-Primitives CLI. This command-line interface (CLI) tool simplifies the integration of the component into your project. Ensure you have Node.js and npm/npx installed.

```bash
npx motion-primitives@latest add text-scramble
```

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

### Install Scroll Progress Component with Motion Primitives (CLI)

Source: https://motion-primitives.com/docs/scroll-progress

This command installs the scroll progress component using the Motion Primitives CLI. It requires Node.js and npm/npx to be installed. The command fetches and integrates the latest version of the scroll progress module.

```bash
npx motion-primitives@latest add scroll-progress
```

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

### Install Animated Group Component (CLI)

Source: https://motion-primitives.com/docs/animated-group

This command installs the Animated Group component using the Motion-Primitives CLI. It's a straightforward way to add the component to your project.

```bash
npx motion-primitives@latest add animated-group
```

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

### Install Animated Number Component with CLI

Source: https://motion-primitives.com/docs/animated-number

This command installs the animated number component using the motion-primitives CLI tool. It's a quick way to add the component to your project.

```bash
npx motion-primitives@latest add animated-number
```

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

### Install Text Morph Component using CLI

Source: https://motion-primitives.com/docs/text-morph

Installs the Text Morph component using the motion-primitives CLI. This command-line tool simplifies the integration of components into your project, ensuring you have the latest version.

```bash
npx motion-primitives@latest add text-morph
```

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

### Text Loop Basic Example - JavaScript

Source: https://motion-primitives.com/docs/text-loop

Demonstrates the basic implementation of the Text Loop component. It takes an array of strings and animates them sequentially with default settings. No external dependencies are required beyond React.

```jsx
import { TextLoop } from "motion-primitives";

function App() {
  return (
    <TextLoop>
      <span>How can I assist you today?</span>
    </TextLoop>
  );
}
```

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

### Text Roll Component Examples

Source: https://motion-primitives.com/docs/text-roll

Demonstrates different ways to use the Text Roll component, including basic usage, custom variants, and custom transition delays for character animations.

```jsx
import { TextRoll } from "motion-primitives";

// Basic example
<TextRoll>motion-primitives</TextRoll>

// Custom variants example
<TextRoll variants={{
  visible: {
    opacity: 1,
    scale: 1,
    transition: {
      duration: 0.3
    }
  },
  hidden: {
    opacity: 0,
    scale: 0.5,
    transition: {
      duration: 0.3
    }
  }
}}>
  motion-primitives
</TextRoll>

// Custom transition delay example
<TextRoll getEnterDelay={(i) => i * 0.2} getExitDelay={(i) => i * 0.2 + 0.5}>
  motion-primitives
</TextRoll>
```

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

### Basic In View Animation Example

Source: https://motion-primitives.com/docs/in-view

Demonstrates a simple 'In View' animation where an element fades in as it enters the viewport. This utilizes the default `hidden` and `visible` variants for opacity.

```jsx
import { InView } from "motion-primitives/components/in-view";

function MyComponent() {
  return (
    <InView>
      {({ inView, ref }) => (
        <div ref={ref}>
          {inView ? "In View" : "Not in View"}
        </div>
      )}
    </InView>
  );
}
```

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

### Spinning Text Component Basic Usage

Source: https://motion-primitives.com/docs/spinning-text

Demonstrates the basic usage of the SpinningText component to animate text circularly. This example shows the default animation without any custom configurations.

```jsx
<SpinningText>pre-order</SpinningText>
```

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

### Text Loop with onIndexChange Callback - JavaScript

Source: https://motion-primitives.com/docs/text-loop

Illustrates using the `onIndexChange` prop to execute a callback function whenever the displayed text item changes. This example uses it to alternate animation directions, adding dynamic visual interest. The callback receives the current index as an argument.

```jsx
import { TextLoop } from "motion-primitives";

function App() {
  const handleIndexChange = (index) => {
    console.log("Current index:", index);
    // Example: alternate animation direction based on index
  };

  return (
    <TextLoop onIndexChange={handleIndexChange}>
      <span>A Little Lost</span>
      <span>Arthur Russell</span>
    </TextLoop>
  );
}
```

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

### In View Animation with Images and Margin

Source: https://motion-primitives.com/docs/in-view

An example demonstrating 'In View' animations applied to elements containing images, incorporating the margin option for precise trigger control. This is useful for animating image galleries or content sections as they appear.

```jsx
import { InView } from "motion-primitives/components/in-view";

function ImageGallery() {
  return (
    <div>
      <InView viewOptions={{ margin: "50px" }}>
        {({ inView, ref }) => (
          <img ref={ref} src="/path/to/image1.jpg" alt="Image 1" />
        )}
      </InView>
      <InView viewOptions={{ margin: "50px" }}>
        {({ inView, ref }) => (
          <img ref={ref} src="/path/to/image2.jpg" alt="Image 2" />
        )}
      </InView>
    </div>
  );
}
```

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

### Text Scramble Component with Custom Trigger

Source: https://motion-primitives.com/docs/text-scramble

Shows how to control the Text Scramble animation using a custom trigger prop. The animation will only start when the 'trigger' prop is set to true. This is useful for synchronizing animations or responding to user interactions. The 'children' prop defines the text to be animated.

```jsx
import { TextScramble } from "motion-primitives";
import { useState } from "react";

function MyComponent() {
  const [isTriggered, setIsTriggered] = useState(false);

  return (
    <div>
      <button onClick={() => setIsTriggered(true)}>Animate Text</button>
      <TextScramble trigger={isTriggered}>
        Tyler, The Creator - I Hope You Fin Your Way Home
      </TextScramble>
    </div>
  );
}
```

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

### Accordion: Rotate Icon on Expansion (React)

Source: https://motion-primitives.com/docs/accordion

This example shows how to rotate an icon within an AccordionTrigger when its associated accordion section is expanded. It utilizes `group-data-[expanded]:...` CSS selectors to apply transformations, specifically a `-rotate-180` class, to elements inside the trigger.

```javascript
// Example usage within a React component:
// <AccordionItem value="1">
//   <AccordionTrigger>
//     <span className="group-data-[expanded]:-rotate-180 transition-transform duration-300">Icon</span>
//     <span>Section Header</span>
//   </AccordionTrigger>
//   <AccordionContent>
//     Content for section 1
//   </AccordionContent>
// </AccordionItem>
```

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

### Dialog Component API

Source: https://motion-primitives.com/docs/dialog

API documentation for the main Dialog component, detailing its props for controlling state, appearance, and behavior.

```APIDOC
## Dialog

### Description
A window overlaid on either the primary window or another dialog window, rendering the content underneath inert. Customize the dialog with variants and transition.

### Method
N/A (Component API)

### Endpoint
N/A (Component API)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
N/A

### Response
#### Success Response (200)
N/A

#### Response Example
N/A

### Component API Details
#### Dialog
- **children** (ReactNode) - Required - Children to be rendered within the dialog.
- **variants** (Variants) - Optional - Variants for controlling the animation states with specific properties for initial, animate, and exit states.
- **transition** (Transition) - Optional - Transition settings from framer-motion for animation effects.
- **className** (string) - Optional - Optional CSS class for styling the dialog container.
- **defaultOpen** (boolean) - Optional - If `true`, the dialog will be open by default. Default: `false`.
- **onOpenChange** (`(open: boolean) => void`) - Optional - Callback function that is called when the dialog's open state changes.
- **open** (boolean) - Optional - Controlled open state of the dialog.
```

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

### Spotlight Component API

Source: https://motion-primitives.com/docs/spotlight

The Spotlight component offers a dynamic spotlight effect that follows cursor movement. It provides customizable options for styling and animation.

```APIDOC
## Spotlight Component API

### Description
A dynamic spotlight effect component that follows cursor movement.

### Method
N/A (Component API)

### Endpoint
N/A (Component API)

### Parameters
#### Component Props
- **className** (string) - Optional - Additional CSS classes for styling
- **size** (number) - Optional - Size of the spotlight effect in pixels (default: 200)
- **springOptions** (SpringOptions) - Optional - Animation spring configuration (default: `{ bounce: 0 }`)

### Request Example
```json
{
  "className": "my-custom-class",
  "size": 300,
  "springOptions": {
    "stiffness": 100,
    "damping": 10
  }
}
```

### Response
N/A (Component API)

### Installation
```bash
npx motion-primitives@latest add spotlight
```
```

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

### DialogTrigger Component API

Source: https://motion-primitives.com/docs/dialog

API documentation for the DialogTrigger component, used to initiate the opening of a dialog.

```APIDOC
## DialogTrigger

### Description
Component used to trigger the opening of a dialog.

### Method
N/A (Component API)

### Endpoint
N/A (Component API)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
N/A

### Response
#### Success Response (200)
N/A

#### Response Example
N/A

### Component API Details
#### DialogTrigger
- **children** (ReactNode) - Required - The content to be rendered inside the trigger button.
- **className** (string) - Optional - Optional CSS class for styling the trigger button.
```

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

### Border Trail Component API

Source: https://motion-primitives.com/docs/border-trail

API documentation for the Border Trail component, detailing its props, types, default values, and descriptions.

```APIDOC
## Border Trail Component API

### Description
Animated border effect that moves along the edges of its parent container.

### Props

| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | | Additional CSS classes for styling the border trail. |
| size | number | 60 | Size of the animated border effect. |
| transition | Transition | | Custom transition settings for the animation. |
| onAnimationComplete | () => void | | Callback function triggered when the animation completes. |

### Installation

Use the following command to add the Border Trail component to your project:

```bash
npx motion-primitives@latest add border-trail
```

### Examples

- Border Trail Card
- Border Trail Loading Card
- Border Trail Textarea
```

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

### Text Loop with Custom Variants and Transition - JavaScript

Source: https://motion-primitives.com/docs/text-loop

Showcases the Text Loop component with custom animation variants and transition settings. This allows for more advanced and tailored text animations. The `variants` and `transition` props control the animation's appearance and behavior.

```jsx
import { TextLoop } from "motion-primitives";

function App() {
  const customVariants = {
    initial: { opacity: 0, y: 20 },
    animate: { opacity: 1, y: 0 },
    exit: { opacity: 0, y: -20 },
  };

  const customTransition = {
    duration: 0.5,
  };

  return (
    <TextLoop
      variants={customVariants}
      transition={customTransition}
    >
      <span>Beautiful templates for</span>
      <span>Founders</span>
    </TextLoop>
  );
}
```

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

### TextEffect Component API

Source: https://motion-primitives.com/docs/text-effect

API documentation for the TextEffect component, detailing its props, types, default values, and descriptions.

```APIDOC
## TextEffect Component API

### Description
Easily animate text content with various effects. You can apply animations per character or per word, and customize the animation effects using custom variants or preset animations.

### Method
Not Applicable (Component API)

### Endpoint
Not Applicable (Component API)

### Parameters
#### Props
- **children** (string) - The text content to be animated.
- **per** ('word' | 'char' | 'line') - Defines whether animation applies per word, character, or line. Defaults to 'word'.
- **as** (keyof JSX.IntrinsicElements) - The HTML tag to render, defaults to 'p'.
- **variants** ({ container?: Variants; item?: Variants; }) - Custom variants for container and item animations.
- **className** (string) - Optional CSS class for styling the component.
- **preset** ('blur-sm' | 'fade-in-blur' | 'scale' | 'fade' | 'slide') - Preset animations to apply to the text. Defaults to 'fade'.
- **delay** (number) - Delay before the animation starts. Defaults to 0.
- **trigger** (boolean) - Controls whether the animation should be triggered. Defaults to true.
- **onAnimationComplete** (() => void) - Callback function when the animation completes.
- **onAnimationStart** (() => void) - Callback function when the animation starts.
- **segmentWrapperClassName** (string) - Optional CSS class for styling segment wrappers.
- **style** (CSSProperties) - Optional inline styles for the component.
- **containerTransition** (Transition) - Optional transition for the container.
- **segmentTransition** (Transition) - Optional transition for the segments.
- **speedReveal** (number) - Controls the speed of the reveal animation. Defaults to 1.
- **speedSegment** (number) - Controls the speed of the animation. Defaults to 1.

### Request Example
Not Applicable (Component API)

### Response
#### Success Response (200)
Not Applicable (Component API)

#### Response Example
Not Applicable (Component API)
```

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

### Accordion Component API

Source: https://motion-primitives.com/docs/accordion

This section details the properties available for the Accordion, AccordionItem, AccordionTrigger, and AccordionContent components.

```APIDOC
## Accordion

### Description
A vertically stacked set of collapsible containers allowing users to toggle content visibility. Customize the animation effects with variants and transitions for expanding/collapsing the sections.

### Method
N/A (Component API)

### Endpoint
N/A (Component API)

### Parameters
#### Component API: Accordion
- **children** (ReactNode) - The content elements of the accordion.
- **className** (string) - Optional CSS class for styling the accordion container.
- **transition** (Transition) - Transition settings from motion for animation effects.
- **variants** ({ expanded: Variant; collapsed: Variant }) - Custom variants for expanded and collapsed states.
- **expandedValue** (React.Key) - Controlled expanded value.
- **onValueChange** ((value: React.Key | null) => void) - Callback function when the expanded value changes.

#### Component API: AccordionItem
- **value** (React.Key) - Required - Unique identifier for controlling the accordion item state.
- **children** (ReactNode) - The content elements of the accordion item.
- **className** (string) - Optional CSS class for styling the accordion item container.

#### Component API: AccordionTrigger
- **children** (ReactNode) - Content of the trigger, typically a string or formatted text.
- **className** (string) - Optional CSS class for styling the trigger element.

#### Component API: AccordionContent
- **children** (ReactNode) - The content displayed when the accordion item is expanded.
- **className** (string) - Optional CSS class for styling the content container.

### Request Example
N/A (Component API)

### Response
#### Success Response (200)
N/A (Component API)

#### Response Example
N/A (Component API)
```

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

### Cursor Component API

Source: https://motion-primitives.com/docs/cursor

API documentation for the custom cursor component, outlining its props, types, default values, and descriptions.

```APIDOC
## Cursor Component

### Description
A custom cursor component with optional spring animations. It can be globally applied to the page or attached specifically to a parent element.

### Method
Not applicable (Component API)

### Endpoint
Not applicable (Component API)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```json
{
  "example": "This is a component, not an API endpoint. See usage below."
}
```

### Response
#### Success Response (200)
Not applicable (Component API)

#### Response Example
```json
{
  "example": "This is a component, not an API endpoint. See usage below."
}
```

## Component API Details

| Prop               | Type                                                     | Default | Description                                                                                      |
|--------------------|----------------------------------------------------------|---------|--------------------------------------------------------------------------------------------------|
| children           | ReactNode                                                | required| Children to be rendered within the custom cursor. Mandatory.                                     |
| className          | string                                                   |         | Optional CSS class for styling the custom cursor container.                                      |
| springConfig       | SpringOptions                                            |         | Configuration for the spring physics used in the cursor's movement.                              |
| attachToParent     | boolean                                                  | `false` | If `true`, the cursor will only be visible when hovering over its parent component.              |
| transition         | Transition                                               |         | Transition settings from motion for animation effects.                                           |
| variants           | Object (with initial, animated, exit properties)         |         | Variants for controlling the animation states with specific properties for initial, animate, and exit states. |
| onPositionChange   | `(position: { x: number, y: number }) => void`            |         | Callback function that is called when the cursor position changes.                               |

## Installation

```bash
npx motion-primitives@latest add cursor
```
```

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

### Image Comparison Component API

Source: https://motion-primitives.com/docs/image-comparison

Details the properties available for the ImageComparison, ImageComparisonImage, and ImageComparisonSlider components.

```APIDOC
## Image Comparison Component API

This section details the properties for the core components used in creating an interactive image comparison interface.

### ImageComparison

This is the main wrapper component for the image comparison feature.

#### Properties

- **children** (React.ReactNode) - Required - ImageComparisonImage components. Allows nesting of `ImageComparisonImage` components to define the images to be compared.
- **className** (string) - Optional - Undefined - Optional CSS class for styling the component.
- **enableHover** (boolean) - Default: `false` - Controls whether hover effects are enabled on the comparison slider.
- **springOptions** (SpringOptions) - Default: `{ bounce: 0, duration: 0 }` - Options for customizing the spring animation of the slider. Accepts an object conforming to `SpringOptions`.

### ImageComparisonImage

Represents an individual image within the ImageComparison component.

#### Properties

- **className** (string) - Optional - Undefined - Optional CSS class for styling the image.
- **alt** (string) - Required - The alt text for the image, crucial for accessibility.
- **src** (string) - Required - The source URL of the image.
- **position** ('left' | 'right') - Default: `'left'` - Specifies the position of the image relative to the slider ('left' or 'right').

### ImageComparisonSlider

Represents the draggable slider used to compare the images.

#### Properties

- **className** (string) - Optional - Undefined - Optional CSS class for styling the slider.
```

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

### DialogDescription Component API

Source: https://motion-primitives.com/docs/dialog

API documentation for the DialogDescription component, used for displaying descriptive text within the dialog.

```APIDOC
## DialogDescription

### Description
Component for displaying descriptive text within the dialog.

### Method
N/A (Component API)

### Endpoint
N/A (Component API)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
N/A

### Response
#### Success Response (200)
N/A

#### Response Example
N/A

### Component API Details
#### DialogDescription
- **children** (ReactNode) - Required - The description content to be rendered inside the dialog.
- **className** (string) - Optional - Optional CSS class for styling the dialog description.
```

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

### DialogContent Component API

Source: https://motion-primitives.com/docs/dialog

API documentation for the DialogContent component, which defines the actual content displayed within the dialog.

```APIDOC
## DialogContent

### Description
Defines the content that will be displayed inside the dialog.

### Method
N/A (Component API)

### Endpoint
N/A (Component API)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
N/A

### Response
#### Success Response (200)
N/A

#### Response Example
N/A

### Component API Details
#### DialogContent
- **children** (ReactNode) - Required - The content to be rendered inside the dialog.
- **className** (string) - Optional - Optional CSS class for styling the dialog content.
- **container** (HTMLElement) - Optional - Specify a container element to portal the content into. Default: `document.body`.
```

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

### Tilt Component API

Source: https://motion-primitives.com/docs/tilt

Details the properties available for the Tilt component, allowing customization of its 3D tilt effect.

```APIDOC
## Tilt Component API

### Description
Provides details on the props available for the Tilt component to customize its 3D tilt effect.

### Method
N/A (Component API)

### Endpoint
N/A (Component API)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```json
{
  "description": "This section is not applicable for component API documentation."
}
```

### Response
#### Success Response (200)
- **className** (string) - Optional - Additional CSS classes for styling the tilt.
- **style** (MotionStyle) - Optional - Additional CSS styles for the tilt component.
- **rotationFactor** (number) - Optional, Default: 15 - Controls the maximum rotation angle in degrees.
- **isRevese** (boolean) - Optional, Default: false - Reverses the tilt effect's rotation direction.
- **springOptions** (SpringOptions) - Optional - Allows customization of the spring physics for the tilt effect.

#### Response Example
```json
{
  "description": "This section is not applicable for component API documentation."
}
```
```

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

### DialogHeader Component API

Source: https://motion-primitives.com/docs/dialog

API documentation for the DialogHeader component, used for structuring the header section of the dialog.

```APIDOC
## DialogHeader

### Description
Component for structuring the header section of the dialog.

### Method
N/A (Component API)

### Endpoint
N/A (Component API)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
N/A

### Response
#### Success Response (200)
N/A

#### Response Example
N/A

### Component API Details
#### DialogHeader
- **children** (ReactNode) - Required - The content to be rendered inside the dialog header.
- **className** (string) - Optional - Optional CSS class for styling the dialog header.
```

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

### Morphing Popover API

Source: https://motion-primitives.com/docs/morphing-popover

This section details the API for the MorphingPopover, MorphingPopoverTrigger, and MorphingPopoverContent components, including their props, types, defaults, and descriptions.

```APIDOC
## MorphingPopover API

### Description

The main component for creating a morphing popover. It manages the open state and animations.

### Method

N/A (Component API)

### Endpoint

N/A (Component API)

### Parameters

#### Props for MorphingPopover

- **children** (React.ReactNode) - Required - The content of the popover (trigger and content)
- **transition** (Transition) - Optional - Custom transition settings for the animations. Defaults to `{ type: 'spring', bounce: 0.1, duration: 0.4 }`.
- **defaultOpen** (boolean) - Optional - Whether the popover is open by default. Defaults to `false`.
- **open** (boolean) - Optional - Controlled open state.
- **onOpenChange** ((open: boolean) => void) - Optional - Callback fired when open state changes.
- **variants** (Variants) - Optional - Custom variants for the animation.
- **className** (string) - Optional - Additional CSS classes.

### MorphingPopoverTrigger API

### Description

This component defines the trigger element for the Morphing Popover.

### Method

N/A (Component API)

### Endpoint

N/A (Component API)

### Parameters

#### Props for MorphingPopoverTrigger

- **children** (React.ReactNode) - Required - The trigger element content.
- **asChild** (boolean) - Optional - Whether to merge props onto the child element. Defaults to `false`.
- **className** (string) - Optional - Additional CSS classes.

### MorphingPopoverContent API

### Description

This component defines the content that appears when the Morphing Popover is open.

### Method

N/A (Component API)

### Endpoint

N/A (Component API)

### Parameters

#### Props for MorphingPopoverContent

- **children** (React.ReactNode) - Required - The content to display in the popover.
- **className** (string) - Optional - Additional CSS classes.

### Installation

Use the following CLI command to install:
```bash
npx motion-primitives@latest add morphing-popover
```
```

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

### Text Shimmer Component API and Usage

Source: https://motion-primitives.com/docs/text-shimmer

Demonstrates the Text Shimmer component's API properties and basic usage. The component allows customization of text content, HTML tag, CSS classes, shimmer duration, and spread.

```jsx
import { TextShimmer } from "motion-primitives";

function MyComponent() {
  return (
    <TextShimmer
      duration={3} 
      spread={3} 
      className="my-custom-class"
    >
      Shimmering Text
    </TextShimmer>
  );
}
```

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

### Text Scramble Component Basic Usage

Source: https://motion-primitives.com/docs/text-scramble

Demonstrates the basic implementation of the Text Scramble component. It takes children (the text content) as a prop and applies a default scramble animation. No external dependencies are required beyond the component itself.

```jsx
import { TextScramble } from "motion-primitives";

function MyComponent() {
  return (
    <TextScramble>Text Scramble</TextScramble>
  );
}
```

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

### Spinning Text Component API

Source: https://motion-primitives.com/docs/spinning-text

Details on the props available for the SpinningText component, allowing customization of text animation, duration, radius, and more.

```APIDOC
## SpinningText Component API

### Description
Easily animate text circularly. Customize the animation with variants and transitions.

### Method
N/A (This is a component API, not an HTTP endpoint)

### Endpoint
N/A

### Parameters
#### Component Props
- **children** (`ReactElement`) - Required - The text content to be animated in a circular motion.
- **style** (`CSSProperties`) - Optional - Custom styles for the text container. Default: `{}`.
- **duration** (`number`) - Optional - The duration of the full circular rotation animation. Default: `10`.
- **className** (`string`) - Optional - A custom class name for the text container.
- **reverse** (`boolean`) - Optional - Determines if the animation should rotate in reverse. Default: `false`.
- **fontSize** (`number`) - Optional - The font size of the text being animated in rem. Default: `1`.
- **radius** (`number`) - Optional - The radius of the circular path for the text animation. Default: `5`.
- **transition** (`Transition`) - Optional - Custom transition effects for the animation.
- **variants** (`{ container?: Variants; item?: Variants; }`) - Optional - Variants for container and item animations.

### Request Example
```javascript
<SpinningText duration={15} radius={7} reverse={true}>
  Your Animated Text Here
</SpinningText>
```

### Response
#### Success Response (Component Render)
- The component renders animated text in a circular path.

#### Response Example
(Visual output depends on the component's rendering in a React environment)
```
```

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

### GlowEffect Component API

Source: https://motion-primitives.com/docs/glow-effect

This section details the props available for the GlowEffect component, allowing for customization of its appearance and behavior.

```APIDOC
## GlowEffect Component API

### Description
A customizable glow effect with animation modes, colors, blur, and transitions.

### Method
N/A (Component API)

### Endpoint
N/A (Component API)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
**className** (string) - Optional - Optional CSS class for styling the component.
**style** (React.CSSProperties) - Optional - Optional CSS properties for styling the component.
**colors** (string[]) - Optional - The colors to use for the glow effect. Defaults to ['#FF5733', '#33FF57', '#3357FF', '#F1C40F'].
**mode** ('rotate' | 'pulse' | 'breathe' | 'colorShift' | 'flowHorizontal' | 'static') - Optional - The mode to use for the glow effect. Defaults to 'rotate'.
**blur** ('number' | 'softest' | 'soft' | 'medium' | 'strong' | 'stronger' | 'strongest' | 'none') - Optional - The blur to use for the glow effect. Defaults to 'medium'.
**transition** (Transition) - Optional - The transition to use for the glow effect.
**scale** (number) - Optional - The scale to use for the glow effect. Defaults to 1.
**duration** (number) - Optional - The duration to use for the glow effect. Defaults to 5.

### Request Example
```json
{
  "className": "my-custom-glow",
  "colors": ["#FF0000", "#00FF00"],
  "mode": "pulse",
  "blur": "stronger",
  "scale": 1.5,
  "duration": 10
}
```

### Response
#### Success Response (200)
N/A (Component API)

#### Response Example
N/A (Component API)
```

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

### Disclosure Component API

Source: https://motion-primitives.com/docs/disclosure

API documentation for the Disclosure component, including its properties and child components.

```APIDOC
## Disclosure Component API

### Description

The Disclosure component allows users to toggle the visibility of content, either collapsed or expanded.

### Method

Not applicable (Component API)

### Endpoint

Not applicable (Component API)

### Parameters

#### Disclosure Component Props

- **open** (boolean) - Optional - Controls the visibility of the content. Default: `false`
- **onOpenChange** ((open: boolean) => void) - Optional - Callback function to handle changes in the open state.
- **children** (ReactNode) - Optional - The content to be toggled, typically includes `DisclosureTrigger` and `DisclosureContent`.
- **className** (string) - Optional - Additional CSS classes for the container.
- **variants** ({ expanded: Variant; collapsed: Variant }) - Optional - Custom animation variants for expanded and collapsed states.
- **transition** (Transition) - Optional - Custom transition settings for the motion animations.

#### DisclosureTrigger Props

- **children** (ReactNode) - Optional - The trigger element that will toggle the disclosure.
- **className** (string) - Optional - Additional CSS classes for the trigger element.

#### DisclosureContent Props

- **children** (ReactNode) - Optional - The content that will be shown or hidden by the disclosure.
- **className** (string) - Optional - Additional CSS classes for the content container.

### Request Example

```json
{
  "open": true,
  "onOpenChange": "(open: boolean) => console.log(open)",
  "children": [
    "<DisclosureTrigger>Show More</DisclosureTrigger>",
    "<DisclosureContent>This is the content that will be toggled.</DisclosureContent>"
  ],
  "className": "my-disclosure-class",
  "variants": {
    "expanded": {
      "opacity": 1,
      "height": "auto"
    },
    "collapsed": {
      "opacity": 0,
      "height": 0
    }
  },
  "transition": {
    "duration": 0.3,
    "ease": "ease-in-out"
  }
}
```

### Response

#### Success Response (200)

Not applicable (Component API)

#### Response Example

Not applicable (Component API)
```

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

### AnimatedGroup Component API

Source: https://motion-primitives.com/docs/animated-group

Details the props available for the AnimatedGroup component, including their types, default values, and descriptions.

```APIDOC
## AnimatedGroup Component API

### Description
A wrapper that adds animated transitions to a group of child elements. It's perfect for creating staggered animations for lists, grids, or any collection of components.

### Props

#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

#### Component Props

- **children** (ReactNode) - The child elements to be animated.
- **className** (string) - Optional CSS class for styling the component.
- **variants** ({ container?: Variants; item?: Variants; }) - Custom variants for container and item animations.
- **preset** ('fade' | 'slide' | 'scale' | 'blur-sm' | 'blur-slide') - Preset animations to apply to the group of elements.
- **as** (React.ElementType) - The HTML element to render the component as. Default: 'div'.
- **asChild** (React.ElementType) - The HTML element to render the child elements as. Default: 'div'.

### Installation

```bash
npx motion-primitives@latest add animated-group
```

### Request Example
```json
{
  "children": [
    "Item 1",
    "Item 2",
    "Item 3"
  ],
  "preset": "fade",
  "className": "my-animated-group"
}
```

### Response
#### Success Response (200)
This component does not have a direct success response as it's a UI component. The output is rendered HTML based on the provided props.

#### Response Example
(Rendered HTML based on the component's props and children)
```

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

### Text Shimmer Wave Basic Effect (CSS)

Source: https://motion-primitives.com/docs/text-shimmer-wave

Demonstrates the basic implementation of the Text Shimmer Wave effect using CSS. This code snippet shows how to apply the core styling for the shimmering animation.

```css
/* Placeholder for CSS code */

```

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

### Spinning Text Component with Custom Transition

Source: https://motion-primitives.com/docs/spinning-text

Shows how to apply custom transition effects to the SpinningText component. This allows for fine-grained control over the animation's timing and easing.

```jsx
<SpinningText transition={{ duration: 1 }}>motion-primitives</SpinningText>
```

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

### DialogClose Component API

Source: https://motion-primitives.com/docs/dialog

API documentation for the DialogClose component, used for the dialog's close button functionality.

```APIDOC
## DialogClose

### Description
Component for the dialog's close button, allowing users to dismiss the dialog.

### Method
N/A (Component API)

### Endpoint
N/A (Component API)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
N/A

### Response
#### Success Response (200)
N/A

#### Response Example
N/A

### Component API Details
#### DialogClose
- **className** (string) - Optional - Optional CSS class for styling the close button.
- **children** (ReactNode) - Optional - Optional content to be rendered inside the close button. If not provided, a default close icon will be used.
- **disabled** (boolean) - Optional - If `true`, the close button will be disabled.
```

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

### DialogTitle Component API

Source: https://motion-primitives.com/docs/dialog

API documentation for the DialogTitle component, used for displaying the title within the dialog header.

```APIDOC
## DialogTitle

### Description
Component for displaying the title within the dialog header.

### Method
N/A (Component API)

### Endpoint
N/A (Component API)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
N/A

### Response
#### Success Response (200)
N/A

#### Response Example
N/A

### Component API Details
#### DialogTitle
- **children** (ReactNode) - Required - The title content to be rendered inside the dialog.
- **className** (string) - Optional - Optional CSS class for styling the dialog title.
```

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

### Spinning Text Component with Custom Variants

Source: https://motion-primitives.com/docs/spinning-text

Illustrates the use of custom variants for the SpinningText component. Variants enable different animation states for the text container and individual characters.

```jsx
<SpinningText variants={{ container: { initial: { opacity: 0 }, animate: { opacity: 1 } } }}>pre-order</SpinningText>
```

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

### ScrollProgress Component API

Source: https://motion-primitives.com/docs/scroll-progress

Details on the properties available for the ScrollProgress component, including their types, default values, and descriptions.

```APIDOC
## Component API

### ScrollProgress

Prop| Type| Default| Description  
---|---|---|---
className| string| | Optional CSS class for styling the scroll progress.  
springOptions| SpringOptions| | Optional spring options for the scroll progress animation.  
containerRef| RefObject| | Optional Ref object for the container element.  
```

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

### Text Roll Component API

Source: https://motion-primitives.com/docs/text-roll

This section details the props available for the Text Roll component, allowing for customization of its animation and appearance.

```APIDOC
## Text Roll Component API

### Description
A text roll component that rotates each character, fully customizable for nice text animations.

### Method
Not Applicable (Component API)

### Endpoint
Not Applicable (Component API)

### Parameters
#### Props
- **children** (React.ReactNode) - Required - The text to roll.
- **className** (string) - Optional - The class name to apply to the component.
- **duration** (number) - Optional - The duration of the animation. Default: 0.5
- **getEnterDelay** ((i: number) => number) - Optional - The delay of the animation for each character. Default: (i) => i * 0.1
- **getExitDelay** ((i: number) => number) - Optional - The delay of the animation for each character. Default: (i) => i * 0.1 + 0.2
- **transition** (Transition) - Optional - The transition of the animation. Default: `{ ease: 'easeIn' }`
- **variants** (Object) - Optional - The variants of the animation.
- **onAnimationComplete** (() => void) - Optional - The callback function to call when the animation is complete.

### Request Example
```json
{
  "children": "Motion Primitives",
  "duration": 1,
  "className": "my-custom-class"
}
```

### Response
#### Success Response (200)
Component renders with the specified text animation.

#### Response Example
```json
{
  "message": "Component rendered successfully"
}
```
```

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

### GlowEffect Component API Reference

Source: https://motion-primitives.com/docs/glow-effect

This section outlines the configurable properties for the GlowEffect React component. It details the type, default value, and purpose of each prop, allowing for customization of the glow's appearance and behavior.

```json
{
  "className": "string | undefined",
  "style": "React.CSSProperties | undefined",
  "colors": "string[]",
  "mode": "'rotate' | 'pulse' | 'breathe' | 'colorShift' | 'flowHorizontal' | 'static'",
  "blur": "'number' | 'softest' | 'soft' | 'medium' | 'strong' | 'stronger' | 'strongest' | 'none'",
  "transition": "Transition | undefined",
  "scale": "number",
  "duration": "number"
}
```
Tokens:
Raw