### Start the Development Server

Source: https://github.com/codse/animata/blob/main/content/docs/contributing/running-locally.mdx

Run this command to start the Next.js development server for Animata.

```sh
yarn dev
```

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

### Install Dependencies

Source: https://github.com/codse/animata/blob/main/content/docs/button/get-started-button.mdx

Install the 'lucide-react' package using npm.

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

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

### Install Expense Tracker Widget via CLI

Source: https://github.com/codse/animata/blob/main/content/docs/widget/expense-tracker.mdx

Use this command to install the Expense Tracker widget using the CLI.

```bash
npm install @animata/widget-expense-tracker
```

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

### Install reveal-image Component (CLI)

Source: https://github.com/codse/animata/blob/main/content/docs/list/reveal-image.mdx

Use this command to install the reveal-image component via the CLI. This will create the necessary file in your project.

```bash
touch components/animata/list/reveal-image.tsx
```

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

### Install Dependencies

Source: https://github.com/codse/animata/blob/main/content/docs/button/animated-follow-button.mdx

Install the necessary motion library for the animated button functionality.

```bash
npm install motion
```

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

### Install Notification Card via CLI

Source: https://github.com/codse/animata/blob/main/content/docs/card/notification-card.mdx

Use this command to install the notification-card component using the CLI.

```bash
npm install card@notification-card
```

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

### Set Up Environment Variables

Source: https://github.com/codse/animata/blob/main/content/docs/contributing/running-locally.mdx

Duplicate the example environment file to create your local configuration.

```sh
cp .env.example .env
```

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

### Install Basic Dependencies

Source: https://github.com/codse/animata/blob/main/content/docs/setup.mdx

Install the essential dependencies for Animata. Ensure you have these installed before proceeding.

```bash
npm install tailwind-merge clsx lucide-react
```

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

### Install Duolingo Button via CLI

Source: https://github.com/codse/animata/blob/main/content/docs/button/duolingo.mdx

Use this command to install the Duolingo button component. It creates the necessary file structure.

```bash
mkdir -p components/animata/button && touch components/animata/button/duolingo.tsx
```

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

### Install Dependencies for Accordion FAQ

Source: https://github.com/codse/animata/blob/main/content/docs/accordion/faq.mdx

Install the necessary dependencies for the FAQ accordion component. This includes 'motion' for animations and 'lucide-react' for icons.

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

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

### Create Led Board Component File

Source: https://github.com/codse/animata/blob/main/content/docs/card/led-board.mdx

Use this command to create the directory and the `led-board.tsx` file. This is a setup step before pasting the component code.

```bash
mkdir -p components/animata/card && touch components/animata/card/led-board.tsx
```

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

### Create Pricing Component File

Source: https://github.com/codse/animata/blob/main/content/docs/section/pricing.mdx

Creates a new file for the pricing component in the specified directory. This command should be run after installing dependencies.

```bash
mkdir -p components/animata/section && touch components/animata/section/pricing.tsx
```

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

### Install GitHub Card Skew Component

Source: https://github.com/codse/animata/blob/main/content/docs/card/github-card-skew.mdx

Use this command to install the GitHub Card Skew component via the CLI.

```bash
npm install @animata/card-github-card-skew
# or
yarn add @animata/card-github-card-skew
```

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

### Install Email Feature Card Component

Source: https://github.com/codse/animata/blob/main/content/docs/card/email-feature-card.mdx

Use this command to install the email-feature-card component via the registry.

```bash
npx @animata/cli install card email-feature-card
```

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

### Install Gauge Chart Component

Source: https://github.com/codse/animata/blob/main/content/docs/graphs/gauge-chart.mdx

Use this command to install the gauge-chart component. It will create a new file `gauge-chart.tsx` in the specified directory.

```bash
mkdir -p components/animata/graphs && touch components/animata/graphs/gauge-chart.tsx
```

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

### Install Dependencies for Music Stack Interaction

Source: https://github.com/codse/animata/blob/main/content/docs/widget/music-stack-interaction.mdx

Install the necessary dependencies for the music stack interaction widget. This includes 'lucide-react' and 'motion'.

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

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

### Install Ring Chart via CLI

Source: https://github.com/codse/animata/blob/main/content/docs/graphs/ring-chart.mdx

Use this command to install the ring chart component using the CLI.

```bash
npm install @animata/graphs
# or
yarn add @animata/graphs
```

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

### Install Project Dependencies

Source: https://github.com/codse/animata/blob/main/README.md

Install necessary npm packages for styling, utility functions, and animation support.

```sh
npm install tailwind-merge clsx lucide-react tailwindcss-animate
```

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

### Install Project Dependencies

Source: https://github.com/codse/animata/blob/main/content/docs/contributing/running-locally.mdx

Install all necessary Node.js packages for the project using Yarn.

```sh
yarn
```

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

### Create Storage Widget File

Source: https://github.com/codse/animata/blob/main/content/docs/widget/storage-widget.mdx

Use this command to create the necessary directory and file for the Storage Widget. This is part of the manual installation process.

```bash
mkdir -p components/animata/widget && touch components/animata/widget/storage-widget.tsx
```

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

### Install Dependencies for Hero Component

Source: https://github.com/codse/animata/blob/main/content/docs/hero/product-features.mdx

Install the necessary dependencies for the hero component. This includes 'motion' and 'react-wrap-balancer'.

```bash
npm install motion react-wrap-balancer
```

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

### Install Dependencies for Direction Card

Source: https://github.com/codse/animata/blob/main/content/docs/widget/direction-card.mdx

Install the 'lucide-react' dependency using npm. This is a required step before running the widget.

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

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

### Install Gibberish Text Component via CLI

Source: https://github.com/codse/animata/blob/main/content/docs/text/gibberish-text.mdx

Use this command to install the Gibberish Text component. This command creates a new file for the component.

```bash
touch components/animata/text/gibberish-text.tsx
```

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

### Create Video Chat Widget File

Source: https://github.com/codse/animata/blob/main/content/docs/widget/video-chat.mdx

This command creates the directory and the `video-chat.tsx` file where the widget code will be placed. It's part of the manual setup process.

```bash
mkdir -p components/animata/widget && touch components/animata/widget/video-chat.tsx
```

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

### Install Text Animator Runtime

Source: https://github.com/codse/animata/blob/main/content/docs/text/bottom-up-letters.mdx

Installs the shared WAAPI loop runtime for text presets. Skip if already added for another text preset.

```bash
mkdir -p components/animata/text && touch components/animata/text/text-animator.tsx
```

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

### Create Gradient Bento Grid File

Source: https://github.com/codse/animata/blob/main/content/docs/bento-grid/gradient.mdx

Use this command to create the gradient.tsx file in the specified directory. This is the first step for manual installation.

```bash
mkdir -p components/animata/bento-grid && touch components/animata/bento-grid/gradient.tsx
```

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

### Create Glowing Card Component File

Source: https://github.com/codse/animata/blob/main/content/docs/card/glowing-card.mdx

Use this bash command to create the necessary directory and an empty TypeScript file for the glowing card component. This is a setup step before pasting the component's code.

```bash
mkdir -p components/animata/card && touch components/animata/card/glowing-card.tsx
```

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

### Get Started Button Component

Source: https://github.com/codse/animata/blob/main/content/docs/button/index.mdx

Renders a GetStartedButton component. Ideal for primary call-to-actions.

```tsx
import GetStartedButton from "@/animata/button/get-started-button";

<GetStartedButton />
```

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

### Install and Use Specific Node.js Version with NVM

Source: https://github.com/codse/animata/blob/main/content/docs/contributing/running-locally.mdx

If the required Node.js version is not installed, use NVM to install it first, then switch to it.

```sh
nvm install && nvm use
```

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

### Create Slack Intro Hero Component File

Source: https://github.com/codse/animata/blob/main/content/docs/hero/slack-intro.mdx

Use this command to create the necessary directory and file for the Slack intro hero component.

```bash
mkdir -p components/animata/hero && touch components/animata/hero/slack-intro.tsx
```

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

### Create VPN Widget File

Source: https://github.com/codse/animata/blob/main/content/docs/widget/vpn-widget.mdx

Creates the directory and an empty file for the VPN widget component.

```bash
mkdir -p components/animata/widget && touch components/animata/widget/vpn-widget.tsx
```

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

### Create Widget File

Source: https://github.com/codse/animata/blob/main/content/docs/widget/mobile-detail.mdx

Create the directory and the `mobile-detail.tsx` file. This command ensures the file exists at the correct path.

```bash
mkdir -p components/animata/widget && touch components/animata/widget/mobile-detail.tsx
```

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

### Install Dependencies

Source: https://github.com/codse/animata/blob/main/content/docs/button/ai-button.mdx

Install the necessary tsparticles packages for the AI Button component. This is a prerequisite for using the component.

```bash
npm install tsparticles @tsparticles/react @tsparticles/engine
```

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

### Create Image Reveal Component File

Source: https://github.com/codse/animata/blob/main/content/docs/image/images-reveal.mdx

Create the directory and the 'images-reveal.tsx' file for the component.

```bash
mkdir -p components/animata/image && touch components/animata/image/images-reveal.tsx
```

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

### Create Study Timer Component File

Source: https://github.com/codse/animata/blob/main/content/docs/widget/study-timer.mdx

Create the directory and the `study-timer.tsx` file for the widget using the mkdir and touch commands.

```bash
mkdir -p components/animata/widget && touch components/animata/widget/study-timer.tsx
```

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

### Create Profile Widget File

Source: https://github.com/codse/animata/blob/main/content/docs/widget/profile.mdx

Use this command to create the necessary file for the profile widget.

```bash
mkdir -p components/animata/widget && touch components/animata/widget/profile.tsx
```

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

### Create Grid Component File

Source: https://github.com/codse/animata/blob/main/content/docs/background/grid.mdx

Use this command to create the necessary file for the Grid component.

```bash
mkdir -p components/animata/background && touch components/animata/background/grid.tsx
```

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

### Create Ring Chart File

Source: https://github.com/codse/animata/blob/main/content/docs/graphs/ring-chart.mdx

Run this command to create the necessary directory and file for the ring chart component.

```bash
mkdir -p components/animata/graphs && touch components/animata/graphs/ring-chart.tsx
```

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

### Install Dependencies for External Link Button

Source: https://github.com/codse/animata/blob/main/content/docs/button/external-link-button.mdx

Install the necessary Radix UI icons package for the external link button functionality.

```bash
npm install @radix-ui/react-icons
```

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

### Create Photo Booth File

Source: https://github.com/codse/animata/blob/main/content/docs/image/photo-booth.mdx

Use this command to create the necessary file structure for the photo-booth component.

```bash
mkdir -p components/animata/image && touch components/animata/image/photo-booth.tsx
```

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

### Install Dependencies for Icon Hover Interaction

Source: https://github.com/codse/animata/blob/main/content/docs/icon/hover-interaction.mdx

Install the necessary npm packages for the icon hover interaction component. This includes 'motion' and '@radix-ui/react-icons'.

```bash
npm install motion @radix-ui/react-icons
```

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

### Create Button File

Source: https://github.com/codse/animata/blob/main/content/docs/button/animated-follow-button.mdx

Create the directory and the TypeScript file for the animated follow button component.

```bash
mkdir -p components/animata/button && touch components/animata/button/animated-follow-button.tsx
```

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

### Create FAQ Accordion File

Source: https://github.com/codse/animata/blob/main/content/docs/accordion/faq.mdx

Create the directory and the `faq.tsx` file for the accordion component. This command ensures the file is placed in the correct location within your project structure.

```bash
mkdir -p components/animata/accordion && touch components/animata/accordion/faq.tsx
```

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

### PR Labels Metadata Example

Source: https://github.com/codse/animata/blob/main/content/docs/contributing/guidelines.mdx

Example of how to specify labels for a component in its metadata. Use labels like `requires interaction` and `click` or `hover` if the component needs user interaction.

```mdx
---
labels: ["requires interaction", "click"]
---
```

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

### Blur Out Up Text Animation

Source: https://github.com/codse/animata/blob/main/content/docs/text/index.mdx

Applies a 'blur out up' animation effect to text elements. No specific props are shown in this example.

```javascript
import BlurOutUp from "@/animata/text/blur-out-up";

<BlurOutUp />
```

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

### Create Battery Widget File

Source: https://github.com/codse/animata/blob/main/content/docs/widget/battery.mdx

Create the necessary directory and file for the battery widget component.

```bash
mkdir -p components/animata/widget && touch components/animata/widget/battery.tsx
```

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

### Create Mirror Text File

Source: https://github.com/codse/animata/blob/main/content/docs/text/mirror-text.mdx

Use this command to create the necessary file for the mirror text component. Ensure the directory structure is as specified.

```bash
mkdir -p components/animata/text && touch components/animata/text/mirror-text.tsx
```

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

### Create Reminder Widget File

Source: https://github.com/codse/animata/blob/main/content/docs/widget/reminder-widget.mdx

Create the necessary directory and file for the Reminder Widget.

```bash
mkdir -p components/animata/widget && touch components/animata/widget/reminder-widget.tsx
```

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

### Create Carousel Component File

Source: https://github.com/codse/animata/blob/main/content/docs/carousel/image-carousel.mdx

Use this bash command to create the necessary directory and file for the image carousel component during manual installation.

```bash
mkdir -p components/animata/carousel && touch components/animata/carousel/image-carousel.tsx
```

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

### Add CSS Animations

Source: https://github.com/codse/animata/blob/main/content/docs/carousel/image-carousel.mdx

Include these CSS keyframes and theme variables to enable fade-in animations for the carousel. This is part of the manual installation process.

```css
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@theme {
  --animate-fade-in: fadeIn 0.5s ease-in;
}
```

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

### Create Score Board File

Source: https://github.com/codse/animata/blob/main/content/docs/widget/score-board.mdx

Use this command to create the necessary file for the score board widget.

```bash
mkdir -p components/animata/widget && touch components/animata/widget/score-board.tsx
```

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

### Create Bento Grid Nine Component File

Source: https://github.com/codse/animata/blob/main/content/docs/bento-grid/nine.mdx

Use this command to create the necessary directory and file for the bento grid nine component.

```bash
mkdir -p components/animata/bento-grid && touch components/animata/bento-grid/nine.tsx
```

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

### Create Dot Component File

Source: https://github.com/codse/animata/blob/main/content/docs/background/dot.mdx

Use this command to create the necessary file for the dot background component.

```bash
mkdir -p components/animata/background && touch components/animata/background/dot.tsx
```

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

### Create Announcement Ribbon File

Source: https://github.com/codse/animata/blob/main/content/docs/container/announcement-ribbon.mdx

Use this command to create the necessary directory and file for the Announcement Ribbon component.

```bash
mkdir -p components/animata/container && touch components/animata/container/announcement-ribbon.tsx
```

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

### Create Shared Axis Z Component File

Source: https://github.com/codse/animata/blob/main/content/docs/text/shared-axis-z.mdx

Creates the directory and an empty file for the shared-axis-z component. This command should be run after installing the shared runtime.

```bash
mkdir -p components/animata/text && touch components/animata/text/shared-axis-z.tsx
```

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

### Create Button File

Source: https://github.com/codse/animata/blob/main/content/docs/button/get-started-button.mdx

Create a new file for the button component in the specified directory.

```bash
mkdir -p components/animata/button && touch components/animata/button/get-started-button.tsx
```

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

### Create Moving Gradient Component File

Source: https://github.com/codse/animata/blob/main/content/docs/background/moving-gradient.mdx

Command to create a new TypeScript/JSX file for the moving gradient component. This is a setup step before pasting the component code.

```bash
mkdir -p components/animata/background && touch components/animata/background/moving-gradient.tsx
```

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

### Create Live Score Widget File

Source: https://github.com/codse/animata/blob/main/content/docs/widget/live-score.mdx

Use this command to create the necessary file for the live score widget.

```bash
mkdir -p components/animata/widget && touch components/animata/widget/live-score.tsx
```

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

### Create Blurry Blob Component File

Source: https://github.com/codse/animata/blob/main/content/docs/background/blurry-blob.mdx

Use this bash command to create the necessary directory and an empty TypeScript file for the blurry blob component. This is part of the manual installation process.

```bash
mkdir -p components/animata/background && touch components/animata/background/blurry-blob.tsx
```

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

### Create Bento Grid Six Component File

Source: https://github.com/codse/animata/blob/main/content/docs/bento-grid/six.mdx

Use this command to create the necessary directory and file for the Bento Grid Six component.

```bash
mkdir -p components/animata/bento-grid && touch components/animata/bento-grid/six.tsx
```

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

### Create Animated Gradient Text Component File

Source: https://github.com/codse/animata/blob/main/content/docs/text/animated-gradient-text.mdx

Command to create a new TypeScript React file for the animated gradient text component. This is a setup step before pasting the component's code.

```bash
mkdir -p components/animata/text && touch components/animata/text/animated-gradient-text.tsx
```

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

### Create GitHub Card Skew Component File

Source: https://github.com/codse/animata/blob/main/content/docs/card/github-card-skew.mdx

Run this command to create the github-card-skew.tsx file in the specified directory.

```bash
mkdir -p components/animata/card && touch components/animata/card/github-card-skew.tsx
```

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

### Create Bento Grid File

Source: https://github.com/codse/animata/blob/main/content/docs/bento-grid/eight.mdx

Use this command to create the necessary file for the bento grid component.

```bash
mkdir -p components/animata/bento-grid && touch components/animata/bento-grid/eight.tsx
```

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

### Create Bento Grid Seven File

Source: https://github.com/codse/animata/blob/main/content/docs/bento-grid/seven.mdx

Use this command to create the necessary file for the bento grid seven component.

```bash
mkdir -p components/animata/bento-grid && touch components/animata/bento-grid/seven.tsx
```

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

### Create Blur Stack Card File

Source: https://github.com/codse/animata/blob/main/content/docs/card/blur-stack-card.mdx

Create the directory and the blur-stack-card.tsx file for the component.

```bash
mkdir -p components/animata/card && touch components/animata/card/blur-stack-card.tsx
```

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

### Create Preloader File

Source: https://github.com/codse/animata/blob/main/content/docs/preloader/vertical-tiles.mdx

Create the directory and the `vertical-tiles.tsx` file for the preloader component.

```bash
mkdir -p components/animata/preloader && touch components/animata/preloader/vertical-tiles.tsx
```

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

### Create GitHub Card Shiny Component

Source: https://github.com/codse/animata/blob/main/content/docs/card/github-card-shiny.mdx

Run this command to create the necessary directory and file for the GitHub Card Shiny component.

```bash
```bash
mkdir -p components/animata/card && touch components/animata/card/github-card-shiny.tsx
```
```

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

### Create Expense Tracker Component File

Source: https://github.com/codse/animata/blob/main/content/docs/widget/expense-tracker.mdx

This command creates the necessary directory and an empty file for the expense tracker component.

```bash
mkdir -p components/animata/widget && touch components/animata/widget/expense-tracker.tsx
```

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

### Create Music Widget File

Source: https://github.com/codse/animata/blob/main/content/docs/widget/music-widget.mdx

Create the necessary directory and an empty file for the Music Widget. This command ensures the file structure is in place before pasting the widget code.

```bash
mkdir -p components/animata/widget && touch components/animata/widget/music-widget.tsx
```

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

### Create Typing Text Component File

Source: https://github.com/codse/animata/blob/main/content/docs/text/typing-text.mdx

Use this command to create the necessary file for the typing text component.

```bash
mkdir -p components/animata/text && touch components/animata/text/typing-text.tsx
```

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

### Create Bento Grid Three File

Source: https://github.com/codse/animata/blob/main/content/docs/bento-grid/three.mdx

Use this command to create the necessary file for the bento grid component.

```bash
mkdir -p components/animata/bento-grid && touch components/animata/bento-grid/three.tsx
```

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

### Create Widget File

Source: https://github.com/codse/animata/blob/main/content/docs/widget/alarm-clock.mdx

Execute this command to create the necessary directory and file for the alarm clock widget.

```bash
mkdir -p components/animata/widget && touch components/animata/widget/alarm-clock.tsx
```

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

### Create Bento Grid Five File

Source: https://github.com/codse/animata/blob/main/content/docs/bento-grid/five.mdx

Use this command to create the necessary file for the bento grid component.

```bash
mkdir -p components/animata/bento-grid && touch components/animata/bento-grid/five.tsx
```

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

### Create Shopping List File

Source: https://github.com/codse/animata/blob/main/content/docs/widget/shopping-list.mdx

Use this command to create the shopping-list.tsx file in the specified directory.

```bash
mkdir -p components/animata/widget && touch components/animata/widget/shopping-list.tsx
```

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

### Create Flower Menu File

Source: https://github.com/codse/animata/blob/main/content/docs/fabs/flower-menu.mdx

Use this command to create the necessary file for the flower menu component.

```bash
mkdir -p components/animata/fabs && touch components/animata/fabs/flower-menu.tsx
```

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

### Create Cursor Tracker Component File

Source: https://github.com/codse/animata/blob/main/content/docs/container/cursor-tracker.mdx

Run this command to create the cursor-tracker.tsx file in the specified directory. This file will contain the component's implementation.

```bash
mkdir -p components/animata/container && touch components/animata/container/cursor-tracker.tsx
```

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

### Create Clock Widget File

Source: https://github.com/codse/animata/blob/main/content/docs/widget/clock-with-photo.mdx

Use this command to create the necessary file for the clock widget. Ensure the directory structure is correct.

```bash
mkdir -p components/animata/widget && touch components/animata/widget/clock-with-photo.tsx
```

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

### Create Wave Reveal Component File

Source: https://github.com/codse/animata/blob/main/content/docs/text/wave-reveal.mdx

Use this command to create the necessary TypeScript file for the Wave Reveal component.

```bash
touch components/animata/text/wave-reveal.tsx
```

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

### Create Music Stack Interaction Component File

Source: https://github.com/codse/animata/blob/main/content/docs/widget/music-stack-interaction.mdx

Create the directory and the component file for the music stack interaction widget. This command ensures the file path is correctly set up.

```bash
mkdir -p components/animata/widget && touch components/animata/widget/music-stack-interaction.tsx
```

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

### Create Spinner Component File

Source: https://github.com/codse/animata/blob/main/content/docs/progress/spinner.mdx

Use this command to create the spinner.tsx file in the correct directory.

```bash
mkdir -p components/animata/progress && touch components/animata/progress/spinner.tsx
```

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

### Create Bento Grid Ten File

Source: https://github.com/codse/animata/blob/main/content/docs/bento-grid/ten.mdx

Use this command to create the necessary file for the Bento Grid Ten component.

```bash
mkdir -p components/animata/bento-grid && touch components/animata/bento-grid/ten.tsx
```

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

### Create Slide Arrow Button File

Source: https://github.com/codse/animata/blob/main/content/docs/button/slide-arrow-button.mdx

Run this command to create the directory and file for the slide arrow button component.

```bash
mkdir -p components/animata/button && touch components/animata/button/slide-arrow-button.tsx
```

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

### Create Underline Hover Text Component File

Source: https://github.com/codse/animata/blob/main/content/docs/text/underline-hover-text.mdx

Use this command to create the necessary file for the underline hover text component.

```bash
mkdir -p components/animata/text && touch components/animata/text/underline-hover-text.tsx
```

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

### Create Card File

Source: https://github.com/codse/animata/blob/main/content/docs/card/comment-reply-card.mdx

Create the card file in the specified directory.

```bash
mkdir -p components/animata/card && touch components/animata/card/comment-reply-card.tsx
```

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

### Create menu-animation.tsx file

Source: https://github.com/codse/animata/blob/main/content/docs/list/menu-animation.mdx

Create the menu-animation.tsx file in the specified directory using the mkdir and touch commands.

```bash
mkdir -p components/animata/list && touch components/animata/list/menu-animation.tsx
```

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

### Create Bento Grid Eleven File

Source: https://github.com/codse/animata/blob/main/content/docs/bento-grid/eleven.mdx

Use this command to create the necessary file for the Bento Grid component.

```bash
mkdir -p components/animata/bento-grid && touch components/animata/bento-grid/eleven.tsx
```

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

### Create Swipe Button File

Source: https://github.com/codse/animata/blob/main/content/docs/button/swipe-button.mdx

Use this command to create the necessary file for the swipe button component.

```bash
mkdir -p components/animata/button && touch components/animata/button/swipe-button.tsx
```

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

### Create Bold Copy Component File

Source: https://github.com/codse/animata/blob/main/content/docs/text/bold-copy.mdx

Use this command to create the necessary file for the Bold Copy component. This command ensures the directory structure is in place before creating the file.

```bash
mkdir -p components/animata/text && touch components/animata/text/bold-copy.tsx
```

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

### Create Water Tracker File

Source: https://github.com/codse/animata/blob/main/content/docs/widget/water-tracker.mdx

Create the water-tracker.tsx file in the specified directory.

```bash
mkdir -p components/animata/widget && touch components/animata/widget/water-tracker.tsx
```

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

### Create Web Hooks Card File

Source: https://github.com/codse/animata/blob/main/content/docs/card/webhooks-card.mdx

Use this command to create the necessary file for the Web Hooks card component.

```bash
mkdir -p components/animata/card && touch components/animata/card/WebHooks-card.tsx
```

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

### Create Storage Status Widget File

Source: https://github.com/codse/animata/blob/main/content/docs/widget/storage-status.mdx

Use this command to create the necessary file for the Storage Status widget.

```bash
mkdir -p components/animata/widget && touch components/animata/widget/storage-status.tsx
```

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

### Create Reminder Widget File

Source: https://github.com/codse/animata/blob/main/content/docs/widget/reminder.mdx

Use this command to create the necessary directory and file for the reminder widget.

```bash
mkdir -p components/animata/widget && touch components/animata/widget/reminder.tsx
```

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

### Create Status Button File

Source: https://github.com/codse/animata/blob/main/content/docs/button/status-button.mdx

Run this command to create the directory and the status-button.tsx file for the component.

```bash
mkdir -p components/animata/button && touch components/animata/button/status-button.tsx
```

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

### Create Donut Chart File

Source: https://github.com/codse/animata/blob/main/content/docs/graphs/donut-chart.mdx

Use this command to create the necessary file for the donut chart component.

```bash
mkdir -p components/animata/graphs && touch components/animata/graphs/donut-chart.tsx
```

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

### Create External Link Button File

Source: https://github.com/codse/animata/blob/main/content/docs/button/external-link-button.mdx

Create the directory and file for the external link button component.

```bash
mkdir -p components/animata/button && touch components/animata/button/external-link-button.tsx
```

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

### Create Algolia White Button Component File

Source: https://github.com/codse/animata/blob/main/content/docs/button/algolia-white-button.mdx

Use this command to create the necessary file for the Algolia white button component.

```bash
mkdir -p components/animata/button && touch components/animata/button/algolia-white-button.tsx
```

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

### Create Animated Dock File

Source: https://github.com/codse/animata/blob/main/content/docs/container/animated-dock.mdx

Create the directory and the `animated-dock.tsx` file for the component. This command ensures the file is placed in the correct location within your project structure.

```bash
mkdir -p components/animata/container && touch components/animata/container/animated-dock.tsx
```

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

### Create Tilted Cover Component File

Source: https://github.com/codse/animata/blob/main/content/docs/image/tilted-cover.mdx

Use this command to create the necessary directory and file for the tilted cover component. This command assumes you are in the root of your project.

```bash
mkdir -p components/animata/image && touch components/animata/image/tilted-cover.tsx
```

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

### Create Text Flip Component File

Source: https://github.com/codse/animata/blob/main/content/docs/text/text-flip.mdx

Use this bash command to create the necessary directory and file for the Text Flip component. This sets up the file structure for the animation.

```bash
mkdir -p components/animata/text && touch components/animata/text/text-flip.tsx
```

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

### Create Algolia Blue Button Component File

Source: https://github.com/codse/animata/blob/main/content/docs/button/algolia-blue-button.mdx

Use this command to create the necessary file structure for the Algolia Blue Button component.

```bash
mkdir -p components/animata/button && touch components/animata/button/algolia-blue-button.tsx
```

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

### Create Notes Widget File

Source: https://github.com/codse/animata/blob/main/content/docs/widget/notes.mdx

Use this command to create the notes.tsx file in the specified directory.

```bash
mkdir -p components/animata/widget && touch components/animata/widget/notes.tsx
```

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

### Create Per-Character Rise Component File

Source: https://github.com/codse/animata/blob/main/content/docs/text/per-character-rise.mdx

This command creates the directory and an empty file for the 'per-character-rise' component. Paste the component code into the created file.

```bash
mkdir -p components/animata/text && touch components/animata/text/per-character-rise.tsx
```

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

### Create Swap Text Component File

Source: https://github.com/codse/animata/blob/main/content/docs/text/swap-text.mdx

Use the touch command to create the swap-text.tsx file in the specified directory. This is a prerequisite for pasting the component's code.

```bash
touch components/animata/text/swap-text.tsx
```

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

### Create Text Border Animation Component

Source: https://github.com/codse/animata/blob/main/content/docs/text/text-border-animation.mdx

Use this command to create the necessary file for the text border animation component.

```bash
mkdir -p components/animata/text && touch components/animata/text/text-border-animation.tsx
```

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

### Create line-by-line-slide component

Source: https://github.com/codse/animata/blob/main/content/docs/text/line-by-line-slide.mdx

Generates the main component file for the line-by-line slide animation.

```bash
mkdir -p components/animata/text && touch components/animata/text/line-by-line-slide.tsx
```

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

### Create Case Study Card File

Source: https://github.com/codse/animata/blob/main/content/docs/card/case-study-card.mdx

Use this command to create a new TypeScript file for the case study card component.

```bash
mkdir -p components/animata/card && touch components/animata/card/case-study-card.tsx
```

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

### Create Widget File

Source: https://github.com/codse/animata/blob/main/content/docs/widget/weekly-progress.mdx

Create the necessary directory and file for the weekly progress widget. This command ensures the file exists at the specified path.

```bash
mkdir -p components/animata/widget && touch components/animata/widget/weekly-progress.tsx
```

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

### Create Product Features Component File

Source: https://github.com/codse/animata/blob/main/content/docs/hero/product-features.mdx

Create the directory and the TypeScript file for the product features component. This command ensures the path exists and creates an empty file.

```bash
mkdir -p components/animata/hero && touch components/animata/hero/product-features.tsx
```

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

### Create Split Text Component File

Source: https://github.com/codse/animata/blob/main/content/docs/text/split-text.mdx

Use this command to create the necessary file for the Split Text component.

```bash
mkdir -p components/animata/text && touch components/animata/text/split-text.tsx
```