### Install Spotlight via CLI

Source: https://github.com/ibelick/motion-primitives/blob/main/app/docs/spotlight/page.mdx

Instructions for installing the spotlight component using the command-line interface. This is the recommended method for quick setup.

```bash
npx --yes @motion-primitives/cli@latest spotlight
```

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

### Install Image Comparison via CLI

Source: https://github.com/ibelick/motion-primitives/blob/main/app/docs/image-comparison/page.mdx

Installs the image-comparison package using the command-line interface. This is the recommended method for quick setup.

```bash
<InstallationCli value='image-comparison' />
```

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

### Install In View Component via CLI

Source: https://github.com/ibelick/motion-primitives/blob/main/app/docs/in-view/page.mdx

Provides the command to install the In View component using the CLI. This is the recommended method for quick setup.

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

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

### Install Scroll Progress via CLI

Source: https://github.com/ibelick/motion-primitives/blob/main/app/docs/scroll-progress/page.mdx

Instructions for installing the scroll-progress package using the command-line interface. This is the recommended method for quick setup.

```bash
npm install @motion-primitives/scroll-progress
# or
yarn add @motion-primitives/scroll-progress
# or
pnpm add @motion-primitives/scroll-progress
```

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

### Example: Add Text Morph Component

Source: https://github.com/ibelick/motion-primitives/blob/main/cli/README.md

Demonstrates adding the 'text-morph' component. The CLI will automatically install necessary dependencies.

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

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

### Install Dock via CLI

Source: https://github.com/ibelick/motion-primitives/blob/main/app/docs/dock/page.mdx

Use the CLI to install the dock component into your project.

```bash
npx motion-primitives install dock
```

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

### Install Animated Number via CLI

Source: https://github.com/ibelick/motion-primitives/blob/main/app/docs/animated-number/page.mdx

Use this command to install the Animated Number component using the CLI. This is the recommended installation method for quick setup.

```bash
npm install animated-number
```

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

### Install Project Dependencies

Source: https://github.com/ibelick/motion-primitives/blob/main/CONTRIBUTING.md

Install all necessary project dependencies using npm.

```bash
npm install
```

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

### Install Carousel CLI

Source: https://github.com/ibelick/motion-primitives/blob/main/app/docs/carousel/page.mdx

Use the CLI to install the carousel component. This is the recommended installation method.

```bash
npx motion-primitives@latest install carousel
```

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

### Install Transition Panel via CLI

Source: https://github.com/ibelick/motion-primitives/blob/main/app/docs/transition-panel/page.mdx

Provides the command to install the transition-panel package using the CLI.

```bash
npm install @motion-primitives/transition-panel
# or
yarn add @motion-primitives/transition-panel
```

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

### Install Disclosure via CLI

Source: https://github.com/ibelick/motion-primitives/blob/main/app/docs/disclosure/page.mdx

Instructions for installing the Disclosure component using the command-line interface.

```bash
npx motion-primitives install disclosure
```

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

### Install Text Scramble via CLI

Source: https://github.com/ibelick/motion-primitives/blob/main/app/docs/text-scramble/page.mdx

Provides the command to install the text-scramble package using the command-line interface. This is the recommended method for quick setup.

```bash
npm install @motion-primitives/text-scramble
```

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

### Install Lucide React Icons

Source: https://github.com/ibelick/motion-primitives/blob/main/app/docs/installation/page.mdx

Install the Lucide React library to use icons within your project.

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

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

### Dialog Component Installation (Manual)

Source: https://github.com/ibelick/motion-primitives/blob/main/app/docs/dialog/page.mdx

Copy and paste this code into your project for manual installation. Remember to update import paths.

```typescript
import Dialog from "components/core/dialog";

// Usage example:
<Dialog>
  <DialogTrigger>Open Dialog</DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Dialog Title</DialogTitle>
    </DialogHeader>
    <DialogDescription>This is the dialog description.</DialogDescription>
    <DialogClose>Close</DialogClose>
  </DialogContent>
</Dialog>
```

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

### Install Glow Effect via CLI

Source: https://github.com/ibelick/motion-primitives/blob/main/app/docs/glow-effect/page.mdx

Command to install the glow-effect package using the CLI.

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

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

### Install Spinning Text via CLI

Source: https://github.com/ibelick/motion-primitives/blob/main/app/docs/spinning-text/page.mdx

Use this command to install the spinning-text package using the CLI.

```bash
npx motion-primitives install spinning-text
```

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

### Install Text Shimmer Wave via CLI

Source: https://github.com/ibelick/motion-primitives/blob/main/app/docs/text-shimmer-wave/page.mdx

Installs the text shimmer wave component using the command-line interface. Use the 'text-shimmer-wave' argument.

```bash
<InstallationCli value='text-shimmer-wave' />
```

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

### Install Motion Package

Source: https://github.com/ibelick/motion-primitives/blob/main/app/docs/installation/page.mdx

Use npm to install the Motion package, which is used for component animations.

```bash
npm install motion
```

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

### Install Motion Primitives CLI Globally

Source: https://github.com/ibelick/motion-primitives/blob/main/cli/README.md

Install the CLI globally to use commands directly from your terminal.

```bash
npm install -g motion-primitives
motion-primitives <command>
```

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

### Basic Text Roll Example

Source: https://github.com/ibelick/motion-primitives/blob/main/app/docs/text-roll/page.mdx

Demonstrates the default usage of the Text Roll component for simple text animations. No specific setup is required beyond importing the component.

```tsx
import { TextRollBasic } from './text-roll-basic';

// Usage:
<TextRollBasic />
```

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

### Install Text Loop via CLI

Source: https://github.com/ibelick/motion-primitives/blob/main/app/docs/text-loop/page.mdx

Provides the command to install the Text Loop component using the command-line interface.

```bash
npm install @motion-primitives/text-loop
# or
yarn add @motion-primitives/text-loop
# or
pnpm add @motion-primitives/text-loop
```

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

### Manual Installation of Dock Component

Source: https://github.com/ibelick/motion-primitives/blob/main/app/docs/dock/page.mdx

Copy and paste the provided code into your project for manual installation. Remember to update import paths as needed.

```typescript
import { motion } from 'framer-motion';

export function Dock({
  children,
  className,
  spring = { mass: 0.1, stiffness: 150, damping: 12 },
  magnification = 80,
  distance = 150,
  panelHeight = 64,
}: DockProps) {
  const variants: Variants = {
    visible: {
      opacity: 1,
      transition: {
        when: 'beforeChildren',
        staggerChildren: 0.05,
      },
    },
    hidden: {
      opacity: 0,
      transition: {
        when: 'afterChildren',
        staggerChildren: 0.05,
      },
    },
  };

  return (
    <motion.div
      variants={variants}
      initial='hidden'
      animate='visible'
      exit='hidden'
      className={cn(
        'fixed bottom-4 left-1/2 -translate-x-1/2 z-50 flex h-16 items-end gap-2',
        className
      )}
      style={{ '--dock-panel-height': `${panelHeight}px` } as React.CSSProperties}
    >
      <DockProvider
        spring={spring}
        magnification={magnification}
        distance={distance}
      >
        {children}
      </DockProvider>
    </motion.div>
  );
}

export interface DockProps {
  children: React.ReactNode;
  className?: string;
  spring?: SpringOptions;
  magnification?: number;
  distance?: number;
  panelHeight?: number;
}

const DockProvider = ({ children, spring, magnification, distance }: DockProps) => {
  const [hovered, setHovered] = React.useState<string | null>(null);

  return (
    <DockContext.Provider
      value={{
        hovered,
        setHovered,
        spring,
        magnification,
        distance,
      }}
    >
      {children}
    </DockContext.Provider>
  );
};

const DockContext = React.createContext<DockProps & { hovered: string | null; setHovered: (hovered: string | null) => void }>({
  hovered: null,
  setHovered: () => {},
  spring: { mass: 0.1, stiffness: 150, damping: 12 },
  magnification: 80,
  distance: 150,
});

export const useDock = () => React.useContext(DockContext);

```

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

### Tilt Component Installation (Manual)

Source: https://github.com/ibelick/motion-primitives/blob/main/app/docs/tilt/page.mdx

Copy and paste this code into your project to manually install the Tilt component. Remember to update import paths as needed.

```tsx
import { motion } from 'framer-motion';
import { twMerge } from 'tailwind-merge';
import { SpringOptions, useSpring } from 'framer-motion';

interface TiltProps extends React.HTMLAttributes<HTMLDivElement> {
  children: React.ReactNode;
  className?: string;
  style?: React.CSSProperties;
  rotationFactor?: number;
  isRevese?: boolean;
  springOptions?: SpringOptions;
}

export const Tilt = ({
  children,
  className,
  style,
  rotationFactor = 15,
  isRevese = false,
  springOptions,
  ...props
}: TiltProps) => {
  const [{ rotateX, rotateY }, api] = useSpring(() => ({ rotateX: 0, rotateY: 0 }), {
    ...springOptions,
  });

  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
    const rect = (e.target as HTMLDivElement).getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;
    const centerX = rect.width / 2;
    const centerY = rect.height / 2;

    const rotateX = ((y - centerY) / centerY) * rotationFactor * (isRevese ? -1 : 1);
    const rotateY = ((x - centerX) / centerX) * rotationFactor * (isRevese ? -1 : 1);

    api.start({ rotateX, rotateY });
  };

  const handleMouseLeave = () => {
    api.start({ rotateX: 0, rotateY: 0 });
  };

  return (
    <motion.div
      style={{
        ...style,
        rotateX,
        rotateY,
      }}
      onMouseMove={handleMouseMove}
      onMouseLeave={handleMouseLeave}
      className={twMerge('w-full h-full', className)}
      {...props}
    >
      {children}
    </motion.div>
  );
}; 

```

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

### Accordion Installation (Manual)

Source: https://github.com/ibelick/motion-primitives/blob/main/app/docs/accordion/page.mdx

Provides the code to be copied and pasted for manual installation of the Accordion component.

```tsx
import { Accordion } from 'components/core/accordion';

// Example usage:
<Accordion>
  <Accordion.Item value='item-1'>
    <Accordion.Trigger>Is it accessible?</Accordion.Trigger>
    <Accordion.Content>Yes. It adheres to the WAI-ARIA design pattern.</Accordion.Content>
  </Accordion.Item>
  <Accordion.Item value='item-2'>
    <Accordion.Trigger>Is it customizable?</Accordion.Trigger>
    <Accordion.Content>
      Yes. It supports custom styles and animations.
    </Accordion.Content>
  </Accordion.Item>
</Accordion>
```

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

### Install Transition Panel Manually

Source: https://github.com/ibelick/motion-primitives/blob/main/app/docs/transition-panel/page.mdx

Shows the code to copy and paste for manual installation of the Transition Panel component.

```tsx
import { Transition } from 'motion';

interface TransitionPanelProps extends MotionProps {
  children: React.ReactNode[];
  className?: string;
  transition?: Transition;
  activeIndex?: number;
  variants?: {
    enter: {
      opacity: number;
      x: number;
    };
    center: {
      opacity: number;
      x: number;
    };
    exit: {
      opacity: number;
      x: number;
    };
  };
}

export const TransitionPanel = ({
  children,
  className,
  transition,
  activeIndex = 0,
  variants,
  ...motionProps
}: TransitionPanelProps) => {
  return (
    <div className={`relative overflow-hidden ${className}`}>
      {children.map((child, index) => (
        <motion.div
          key={index}
          custom={{ index, activeIndex }}
          variants={{
            enter: {
              opacity: 1,
              x: 0,
              transition: {
                ...transition,
                delay: transition?.delay ?? 0.2 * (children.length - index),
              },
            },
            center: {
              opacity: 1,
              x: 0,
              transition: {
                ...transition,
                delay: transition?.delay ?? 0.2 * (children.length - index),
              },
            },
            exit: {
              opacity: 0,
              x: -100,
              transition: {
                ...transition,
                delay: transition?.delay ?? 0.2 * index,
              },
            },
            ...(variants?.enter && {
              enter: variants.enter,
            }),
            ...(variants?.center && {
              center: variants.center,
            }),
            ...(variants?.exit && {
              exit: variants.exit,
            }),
          }}
          initial="exit"
          animate="center"
          exit="exit"
          className="absolute inset-0"
          {...motionProps}
        >
          {child}
        </motion.div>
      ))}
    </div>
  );
};
```

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

### Install Sliding Number via CLI

Source: https://github.com/ibelick/motion-primitives/blob/main/app/docs/sliding-number/page.mdx

Use this command to install the sliding-number package using the CLI.

```bash
npx install-peerdeps --save sliding-number
```

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

### Tabs with Transition Panel Example

Source: https://github.com/ibelick/motion-primitives/blob/main/app/docs/transition-panel/page.mdx

Demonstrates how to use the Transition Panel with tabs for managing different content views.

```tsx
import { TabsTransitionPanel } from './transition-panel-tabs';
import ComponentCodePreview from '@/components/website/component-code-preview';

// ... other imports and component logic

<ComponentCodePreview
  classNameComponentContainer='p-20'
  component={<TabsTransitionPanel />}
  filePath='app/docs/transition-panel/transition-panel-tabs.tsx'
/>
```

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

### Animated Background Component Installation

Source: https://github.com/ibelick/motion-primitives/blob/main/app/docs/animated-background/page.mdx

Copy and paste this code into your project to install the Animated Background component. Update import paths as needed.

```tsx
import { motion } from 'framer-motion';
import { useState, Children, cloneElement } from 'react';

interface AnimatedBackgroundProps {
  children: React.ReactNode;
  defaultValue?: string;
  onValueChange?: (newActiveId: string | null) => void;
  className?: string;
  transition?: object;
  enableHover?: boolean;
}

export function AnimatedBackground({
  children,
  defaultValue,
  onValueChange,
  className,
  transition,
  enableHover,
}: AnimatedBackgroundProps) {
  const [activeId, setActiveId] = useState<string | null>(defaultValue || null);

  const handleItemClick = (id: string) => {
    setActiveId(id);
    onValueChange?.(id);
  };

  const handleItemHoverStart = (id: string) => {
    if (enableHover) {
      setActiveId(id);
    }
  };

  const handleItemHoverEnd = () => {
    if (enableHover && defaultValue) {
      setActiveId(defaultValue);
    } else if (enableHover) {
      setActiveId(null);
    }
  };

  const items = Children.map(children, (child) => {
    if (React.isValidElement(child)) {
      const id = child.props?.['data-id'];
      if (!id) {
        console.warn('Each child must have a unique `data-id` attribute.');
        return child;
      }

      return cloneElement(child, {
        onClick: () => handleItemClick(id),
        onHoverStart: () => handleItemHoverStart(id),
        onHoverEnd: handleItemHoverEnd,
        'data-active': activeId === id,
      });
    }
    return child;
  });

  return (
    <div className={`relative ${className}`}>
      <motion.div
        className="absolute inset-0 -z-10 rounded-lg"
        style={{
          background: 'linear-gradient(135deg, #854dff, #ff4d4d)',
        }}
        animate={{
          opacity: activeId ? 1 : 0,
          top: activeId ? `var(--${activeId}-top)` : 0,
          left: activeId ? `var(--${activeId}-left)` : 0,
          width: activeId ? `var(--${activeId}-width)` : 0,
          height: activeId ? `var(--${activeId}-height)` : 0,
        }}
        transition={transition || {
          type: 'spring',
          mass: 3,
          stiffness: 300,
          damping: 30,
        }}
      />
      {items}
    </div>
  );
}

```

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

### Install Disclosure Manually

Source: https://github.com/ibelick/motion-primitives/blob/main/app/docs/disclosure/page.mdx

Provides the code snippet for manual installation of the Disclosure component.

```tsx
import { Steps, Step } from '@motion-primitives/core';
import CodeBlock from '@/components/website/code-block';

// ...

<Steps>
  <Step>Copy and paste the following code into your project.</Step>
  <CodeBlock filePath='components/core/disclosure.tsx' />
  <Step>Update the import paths to match your project setup.</Step>
</Steps>
```

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

### Manual Installation of Text Effect Component

Source: https://github.com/ibelick/motion-primitives/blob/main/app/docs/text-effect/page.mdx

Copy this code into your project for manual installation. Remember to update import paths as needed.

```typescript
import { TextEffect } from "@/components/core/text-effect";

export default function Page() {
  return (
    <TextEffect preset="fade-in-blur" delay={100} speedReveal={0.5} speedSegment={0.5}>
      This is a text effect.
    </TextEffect>
  );
}
```

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

### Magnetic Component Installation

Source: https://github.com/ibelick/motion-primitives/blob/main/app/docs/magnetic/page.mdx

Install the Magnetic component using the CLI or manually by copying the provided code. Ensure import paths are updated.

```tsx
import { Magnetic } from '@motion-primitives/core/magnetic';

function MyComponent() {
  return (
    <Magnetic>
      <div>Hover over me</div>
    </Magnetic>
  );
}
```

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

### Progressive Blur Basic Example

Source: https://github.com/ibelick/motion-primitives/blob/main/app/docs/progressive-blur/page.mdx

Demonstrates the basic implementation of the Progressive Blur component.

```tsx
import { ProgressiveBlurBasic } from './progressive-blur-basic';

function App() {
  return (
    <ProgressiveBlurBasic />
  );
}
```

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

### Manual Installation of Image Comparison Component

Source: https://github.com/ibelick/motion-primitives/blob/main/app/docs/image-comparison/page.mdx

Provides the code snippet for manual installation of the image comparison component. Copy this code into your project and adjust import paths as needed.

```tsx
import { Steps, Step, CodeBlock } from '@components/documentation';

// ...

<Steps>
  <Step>Copy and paste the following code into your project.</Step>
  <CodeBlock filePath='components/core/image-comparison.tsx' />
  <Step>Update the import paths to match your project setup.</Step>
</Steps>
```

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

### Install Morphing Popover via CLI

Source: https://github.com/ibelick/motion-primitives/blob/main/app/docs/morphing-popover/page.mdx

Installs the morphing-popover component using the command-line interface. This is a quick way to add the component to your project.

```bash
npx --yes motion-primitives@latest install morphing-popover
```

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

### Install Infinite Slider via CLI

Source: https://github.com/ibelick/motion-primitives/blob/main/app/docs/infinite-slider/page.mdx

Provides the command to install the infinite-slider package using the CLI. Ensure you have the CLI tool set up in your project.

```bash
npm install infinite-slider
```

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

### Progressive Blur Component Installation

Source: https://github.com/ibelick/motion-primitives/blob/main/app/docs/progressive-blur/page.mdx

Provides the code to install the Progressive Blur component manually by copying and pasting into your project.

```tsx
import { ProgressiveBlur } from '@/components/core/progressive-blur';

function App() {
  return (
    <ProgressiveBlur />
  );
}
```

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

### Manual Installation of Spotlight Component

Source: https://github.com/ibelick/motion-primitives/blob/main/app/docs/spotlight/page.mdx

Provides the code to manually integrate the spotlight component into your project. Ensure to update import paths as needed.

```tsx
import { Spotlight } from './components/core/spotlight';

function App() {
  return <Spotlight />;
}
```

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

### Scroll Progress Navigation Example

Source: https://github.com/ibelick/motion-primitives/blob/main/app/docs/scroll-progress/page.mdx

An example demonstrating scroll progress used for navigation. This snippet likely integrates scroll progress with navigation elements.

```tsx
import { ScrollProgress } from '@/components/core/scroll-progress';

export function ScrollProgressBasic2() {
  return (
    <ScrollProgress />
  );
}
```

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

### Install Scroll Progress Manually

Source: https://github.com/ibelick/motion-primitives/blob/main/app/docs/scroll-progress/page.mdx

Manual installation steps for the scroll-progress component. This involves copying and pasting the component code directly into your project.

```tsx
import { ScrollProgress } from '@/components/core/scroll-progress';

export function YourComponent() {
  return (
    <ScrollProgress />
  );
}
```

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

### Basic Dialog Example

Source: https://github.com/ibelick/motion-primitives/blob/main/app/docs/dialog/page.mdx

Demonstrates the basic usage of the Dialog component. This snippet shows how to render a simple dialog.

```typescript
import {
  Dialog, DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter,
  DialogClose,
} from '@/components/ui/dialog';

export function DialogBasic() {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button variant="outline">Edit Profile</Button>
      </DialogTrigger>
      <DialogContent className="sm:max-w-[425px]">
        <DialogHeader>
          <DialogTitle>Edit profile</DialogTitle>
          <DialogDescription>
            Make changes to your profile here. Click save, when you're done.
          </DialogDescription>
        </DialogHeader>
        <div className="grid gap-4 py-4">
          <div className="grid grid-cols-4 items-center gap-4">
            <Label htmlFor="name" className="text-right">
              Name
            </Label>
            <Input id="name" defaultValue="Pedro Duarte" className="col-span-3" />
          </div>
          <div className="grid grid-cols-4 items-center gap-4">
            <Label htmlFor="username" className="text-right">
              Username
            </Label>
            <Input id="username" defaultValue="@peduarte" className="col-span-3" />
          </div>
        </div>
        <DialogFooter>
          <DialogClose asChild>
            <Button type="button" variant="secondary">
              Close
            </Button>
          </DialogClose>
          <Button type="submit">Save changes</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}
```

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

### Basic Carousel Example

Source: https://github.com/ibelick/motion-primitives/blob/main/app/docs/carousel/page.mdx

Demonstrates the basic implementation of the carousel component.

```typescript
import { CarouselBasic } from './carousel-basic';

// Usage:
<CarouselBasic />
```

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

### Accordion Basic Example

Source: https://github.com/ibelick/motion-primitives/blob/main/app/docs/accordion/page.mdx

Demonstrates the basic usage of the Accordion component.

```tsx
import { AccordionBasic } from './accordion-basic';

<AccordionBasic />
```

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

### Install Text Scramble Manually

Source: https://github.com/ibelick/motion-primitives/blob/main/app/docs/text-scramble/page.mdx

Shows the manual installation process by copying and pasting the core text scramble component code into your project. Remember to update import paths as needed.

```typescript
import { TextScramble } from '@/components/core/text-scramble';

// ...

<TextScramble>
  Hello World
</TextScramble>
```

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

### Manual Installation of Cursor Component

Source: https://github.com/ibelick/motion-primitives/blob/main/app/docs/cursor/page.mdx

Provides the code to manually install the cursor component. Copy this code into your project and update import paths as needed.

```tsx
import { Cursor } from '@/components/core/cursor';

function App() {
  return (
    <Cursor>
      {/* Your page content */}
    </Cursor>
  );
}
```

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

### Border Trail Component Installation

Source: https://github.com/ibelick/motion-primitives/blob/main/app/docs/border-trail/page.mdx

Copy and paste this code into your project to install the Border Trail component manually. Update import paths as needed.

```typescript
import { motion } from 'framer-motion';

interface BorderTrailProps {
  className?: string;
  size?: number;
  transition?: any;
  onAnimationComplete?: () => void;
}

export const BorderTrail = ({
  className,
  size = 60,
  transition,
  onAnimationComplete,
}: BorderTrailProps) => {
  return (
    <motion.div
      className={`absolute inset-0 -z-10 overflow-hidden ${className}`}
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      transition={transition}
      onAnimationComplete={onAnimationComplete}
    >
      <div
        className='absolute -top-[1px] -left-[1px] -right-[1px] -bottom-[1px] -z-10'
        style={{
          background: `linear-gradient(90deg, #00f2ff, #0094ff, #0094ff, #00f2ff)`,
          backgroundSize: `${size * 2}px ${size * 2}px`,
        }}
      >
        <div className='absolute inset-[-100%] animate-[ping_2s_ease-in-out_infinite] opacity-75'></div>
        <div className='absolute inset-[-100%] animate-[ping_2s_ease-in-out_infinite_0.5s] opacity-75'></div>
        <div className='absolute inset-[-100%] animate-[ping_2s_ease-in-out_infinite_1s] opacity-75'></div>
        <div className='absolute inset-[-100%] animate-[ping_2s_ease-in-out_infinite_1.5s] opacity-75'></div>
      </div>
    </motion.div>
  );
};

```

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

### Manual Installation of Text Loop Component

Source: https://github.com/ibelick/motion-primitives/blob/main/app/docs/text-loop/page.mdx

Includes the core code for the Text Loop component that can be manually copied and pasted into a project.

```typescript
import React from 'react';
import { motion, AnimatePresence } from 'framer-motion';

interface Variants {
  [key: string]: React.CSSProperties;
}

interface Transition {
  duration: number;
  ease: string;
}

interface TextLoopProps {
  children: React.ReactNode[];
  className?: string;
  interval?: number;
  transition?: Transition;
  variants?: Variants;
  onIndexChange?: (index: number) => void;
  trigger?: boolean;
  mode?: 'wait' | 'sync' | 'pop' | 'waitChildren' | 'syncChild('/');
}

export const TextLoop: React.FC<TextLoopProps> = ({
  children,
  className,
  interval = 2,
  transition = { duration: 0.5, ease: 'easeInOut' },
  variants,
  onIndexChange,
  trigger = true,
  mode = 'popLayout',
}) => {
  const [index, setIndex] = React.useState(0);

  React.useEffect(() => {
    if (trigger) {
      const timer = setInterval(() => {
        setIndex((prevIndex) => {
          const nextIndex = (prevIndex + 1) % children.length;
          if (onIndexChange) {
            onIndexChange(nextIndex);
          }
          return nextIndex;
        });
      }, interval * 1000);
      return () => clearInterval(timer);
    }
  }, [interval, trigger, children.length, onIndexChange]);

  const currentChild = children[index];

  return (
    <div className={`relative overflow-hidden ${className}`}>
      <AnimatePresence initial={false} custom={index} mode={mode}>
        <motion.div
          key={index}
          variants={variants}
          initial="initial"
          animate="enter"
          exit="exit"
          custom={index}
          style={{ position: 'absolute', width: '100%' }}
        >
          {currentChild}
        </motion.div>
      </AnimatePresence>
    </div>
  );
};

```

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

### Cursor with Image and Spring (Alternative)

Source: https://github.com/ibelick/motion-primitives/blob/main/app/docs/cursor/page.mdx

Another example showcasing a cursor with an image and spring animations, using the Cursor3 component.

```tsx
import { Cursor3 } from './cursor-3';

// ...

<ComponentCodePreview
  component={<Cursor3 />}
  filePath='app/docs/cursor/cursor-3.tsx'
/>
```

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

### Install Text Roll via CLI

Source: https://github.com/ibelick/motion-primitives/blob/main/app/docs/text-roll/page.mdx

Provides the command to install the Text Roll component using the command-line interface. This is the recommended method for quick integration.

```bash
npm install @motion-primitives/text-roll
# or
yarn add @motion-primitives/text-roll
```

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

### Text Shimmer Component Installation

Source: https://github.com/ibelick/motion-primitives/blob/main/app/docs/text-shimmer/page.mdx

Provides the code to be copied and pasted for manual installation of the Text Shimmer component. Ensure to update import paths according to your project structure.

```typescript
import { TextShimmer } from '@/components/core/text-shimmer';

export default function Page() {
  return (
    <TextShimmer duration={3} spread={4} className='text-lg'>
      Shimmer Text
    </TextShimmer>
  );
}
```

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

### Manual Installation of Text Shimmer Wave

Source: https://github.com/ibelick/motion-primitives/blob/main/app/docs/text-shimmer-wave/page.mdx

Manually install the text shimmer wave component by copying the provided code into your project. Ensure to update import paths as needed.

```tsx
import { Steps, Step } from 'react-joyride';
import { CodeBlock } from '@/components/code-block';

// ...

<Steps>
  <Step>Copy and paste the following code into your project.</Step>

  <CodeBlock filePath='components/core/text-shimmer-wave.tsx' />

  <Step>Update the import paths to match your project setup.</Step>
</Steps>
```

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

### Card with Transition Panel Example

Source: https://github.com/ibelick/motion-primitives/blob/main/app/docs/transition-panel/page.mdx

Illustrates the usage of the Transition Panel within a card component for animated content transitions.

```tsx
import { TransitionPanelCard } from './transition-panel-card';
import ComponentCodePreview from '@/components/website/component-code-preview';

// ... other imports and component logic

<ComponentCodePreview
  classNameComponentContainer='p-4'
  component={<TransitionPanelCard />}
  filePath='app/docs/transition-panel/transition-panel-card.tsx'
/>
```

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

### Text Morph Component Installation

Source: https://github.com/ibelick/motion-primitives/blob/main/app/docs/text-morph/page.mdx

Copy and paste this code to manually install the Text Morph component into your project. Ensure to update import paths as needed.

```typescript
import { motion } from 'framer-motion';

interface TextMorphProps {
  children: string;
  as?: keyof JSX.IntrinsicElements;
  className?: string;
  style?: React.CSSProperties;
}

export function TextMorph({ children, as, className, style }: TextMorphProps) {
  const Component = as || 'p';

  return (
    <Component className={className} style={style}>
      {children.split('').map((char, i) => (
        <motion.span
          key={i}
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.3, delay: i * 0.05 }}
          style={{ display: 'inline-block' }}
        >
          {char === ' ' ? '\u00A0' : char}
        </motion.span>
      ))}
    </Component>
  );
}
```

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

### Basic Text Loop Example

Source: https://github.com/ibelick/motion-primitives/blob/main/app/docs/text-loop/page.mdx

Demonstrates the fundamental usage of the Text Loop component for simple looping text animations.

```typescript
import { TextLoopBasic } from './text-loop-basic';

// ...
<TextLoopBasic />
```

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

### Manual Installation of Infinite Slider

Source: https://github.com/ibelick/motion-primitives/blob/main/app/docs/infinite-slider/page.mdx

Code snippet for manual installation of the Infinite Slider component. Copy this code into your project and adjust import paths as needed.

```tsx
import React from 'react';

interface InfiniteSliderProps {
  children: React.ReactNode;
  gap?: number;
  speed?: number;
  speedOnHover?: number;
  direction?: 'horizontal' | 'vertical';
  reverse?: boolean;
  className?: string;
}

const InfiniteSlider: React.FC<InfiniteSliderProps> = ({ children, gap = 16, speed = 100, speedOnHover, direction = 'horizontal', reverse = false, className }) => {
  // Component implementation details...
  return (
    <div className={`infinite-slider-container ${className || ''}`}>
      {/* Slider content will be rendered here */}
      {children}
    </div>
  );
};

export default InfiniteSlider;
```

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

### Morphing Dialog Basic Example 2

Source: https://github.com/ibelick/motion-primitives/blob/main/app/docs/morphing-dialog/page.mdx

Renders a second variation of the basic morphing dialog. Verify import paths.

```tsx
import { MorphingDialogBasicTwo } from './morphing-dialog-basic-2';
import ComponentCodePreview from '@/components/website/component-code-preview';

// ...

<ComponentCodePreview
  component={<MorphingDialogBasicTwo />}
  filePath='app/docs/morphing-dialog/morphing-dialog-basic-2.tsx'
/>
```

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

### Run Motion Primitives CLI with npx

Source: https://github.com/ibelick/motion-primitives/blob/main/cli/README.md

Execute the CLI commands directly using npx without global installation.

```bash
npx motion-primitives <command>
```

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

### Morphing Dialog Basic Example

Source: https://github.com/ibelick/motion-primitives/blob/main/app/docs/morphing-dialog/page.mdx

Renders a basic morphing dialog. Ensure the component is correctly imported.

```tsx
import { MorphingDialogBasicOne } from './morphing-dialog-basic-1';
import ComponentCodePreview from '@/components/website/component-code-preview';

// ...

<ComponentCodePreview
  component={<MorphingDialogBasicOne />}
  filePath='app/docs/morphing-dialog/morphing-dialog-basic-1.tsx'
/>
```

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

### Animated Number Counter Example

Source: https://github.com/ibelick/motion-primitives/blob/main/app/docs/animated-number/page.mdx

Shows how to use the Animated Number component as a counter. This example likely involves passing dynamic values to the component to trigger the counting animation.

```tsx
import { AnimatedNumberCounter } from './animated-number-counter';

function App() {
  return <AnimatedNumberCounter />;
}
```

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

### Morphing Popover Basic Example

Source: https://github.com/ibelick/motion-primitives/blob/main/app/docs/morphing-popover/page.mdx

Demonstrates the basic usage of the Morphing Popover component. This snippet shows how to implement a simple popover with default animations.

```jsx
import { MorphingPopoverBasic } from './morphing-popover-basic';

function App() {
  return <MorphingPopoverBasic />;
}
```

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

### Scroll Progress Gradient Example

Source: https://github.com/ibelick/motion-primitives/blob/main/app/docs/scroll-progress/page.mdx

An example showcasing a scroll progress indicator with a gradient effect. This snippet likely utilizes custom styling for the progress bar.

```tsx
import { ScrollProgress } from '@/components/core/scroll-progress';

export function ScrollProgressBasic3() {
  return (
    <ScrollProgress />
  );
}
```

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

### Manual Installation of Text Roll Component

Source: https://github.com/ibelick/motion-primitives/blob/main/app/docs/text-roll/page.mdx

Details the manual installation process by providing the core component code. Ensure to update import paths according to your project structure.

```tsx
import React from 'react';
import { motion } from 'framer-motion';

interface TextRollProps {
  children: React.ReactNode;
  className?: string;
  duration?: number;
  getEnterDelay?: (i: number) => number;
  getExitDelay?: (i: number) => number;
  transition?: object;
  variants?: object;
  onAnimationComplete?: () => void;
}

const TextRoll: React.FC<TextRollProps> = ({
  children,
  className = '',
  duration = 0.5,
  getEnterDelay = (i) => i * 0.1,
  getExitDelay = (i) => i * 0.1 + 0.2,
  transition = { ease: 'easeIn' },
  variants,
  onAnimationComplete,
}) => {
  const characters = React.Children.toArray(children);

  return (
    <div className={`relative overflow-hidden ${className}`}>
      {characters.map((char, i) => (
        <motion.span
          key={i}
          custom={{ enterDelay: getEnterDelay(i), exitDelay: getExitDelay(i) }}
          variants={variants}
          initial="initial"
          animate="animate"
          exit="exit"
          transition={transition}
          onAnimationComplete={i === characters.length - 1 ? onAnimationComplete : undefined}
          style={{
            display: 'inline-block',
            position: 'absolute',
            whiteSpace: 'pre',
          }}
        >
          {char}
        </motion.span>
      ))}
    </div>
  );
};

export default TextRoll;

```

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

### Basic Disclosure Example

Source: https://github.com/ibelick/motion-primitives/blob/main/app/docs/disclosure/page.mdx

Demonstrates the fundamental usage of the Disclosure component for toggling content visibility.

```tsx
import { DisclosureBasic } from './disclosure-basic';
import ComponentCodePreview from '@/components/website/component-code-preview';

// ...

<ComponentCodePreview
  component={<DisclosureBasic />}
  filePath='app/docs/disclosure/disclosure-basic.tsx'
  classNameComponentContainer='min-h-0 py-24 lg:px-32 px-8'
/>
```

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

### Morphing Popover with Textarea Example

Source: https://github.com/ibelick/motion-primitives/blob/main/app/docs/morphing-popover/page.mdx

Illustrates using the Morphing Popover component in conjunction with a textarea element. This example is useful for popovers that interact with input fields.

```jsx
import { MorphingPopoverTextarea } from './morphing-popover-textarea';

function App() {
  return <MorphingPopoverTextarea />;
}
```

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

### Infinite Slider Basic Example

Source: https://github.com/ibelick/motion-primitives/blob/main/app/docs/infinite-slider/page.mdx

Demonstrates the basic usage of the Infinite Slider component. This snippet shows how to render a simple slider with its default settings.

```tsx
import { InfiniteSliderBasic } from './infinite-slider-basic';

function App() {
  return <InfiniteSliderBasic />;
}
```

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

### Morphing Dialog Image Example

Source: https://github.com/ibelick/motion-primitives/blob/main/app/docs/morphing-dialog/page.mdx

Displays a morphing dialog with image content. Check that the component and its path are correctly referenced.

```tsx
import { MorphingDialogBasicImage } from './morphing-dialog-image';
import ComponentCodePreview from '@/components/website/component-code-preview';

// ...

<ComponentCodePreview
  component={<MorphingDialogBasicImage />}
  filePath='app/docs/morphing-dialog/morphing-dialog-image.tsx'
/>
```

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

### Controlled Dialog Example

Source: https://github.com/ibelick/motion-primitives/blob/main/app/docs/dialog/page.mdx

Shows how to control the open state of the dialog using the `open` and `onOpenChange` props. This allows for programmatic control over the dialog's visibility.

```typescript
import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter,
  DialogClose,
} from '@/components/ui/dialog';
import {
  useState,
  useCallback,
  useMemo,
  useRef,
  useEffect,
} from 'react';

export function DialogControlled() {
  const [open, setOpen] = useState(false);

  const handleOpenChange = useCallback((isOpen: boolean) => {
    setOpen(isOpen);
  }, []);

  return (
    <Dialog open={open} onOpenChange={handleOpenChange}>
      <DialogTrigger asChild>
        <Button variant="outline">Share</Button>
      </DialogTrigger>
      <DialogContent className="sm:max-w-md">
        <DialogHeader>
          <DialogTitle>Share link</DialogTitle>
          <DialogDescription>
            Anyone who has this link will be able to view this.
          </DialogDescription>
        </DialogHeader>
        <div className="flex items-center space-x-2">
          <div className="grid flex-1 gap-2">
            <Label htmlFor="link" className="sr-only">
              Link
            </Label>
            <Input id="link" defaultValue="https://ui.shadcn.ui/docs/components/dialog" readOnly />
          </div>
          <Button type="submit" size="sm" className="px-3">
            <span className="sr-only">Copy</span>
            <CopyIcon className="h-4 w-4" />
          </Button>
        </div>
        <DialogFooter className="sm:justify-start">
          <DialogClose asChild>
            <Button type="button" variant="secondary">
              Close
            </Button>
          </DialogClose>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}
```

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

### Scroll Progress Basic Example

Source: https://github.com/ibelick/motion-primitives/blob/main/app/docs/scroll-progress/page.mdx

A basic implementation of the scroll progress indicator. This snippet shows the fundamental usage of the ScrollProgress component.

```tsx
import { ScrollProgress } from '@/components/core/scroll-progress';

export function ScrollProgressBasic1() {
  return (
    <ScrollProgress />
  );
}
```

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

### Cursor with Image and Spring Animation

Source: https://github.com/ibelick/motion-primitives/blob/main/app/docs/cursor/page.mdx

Demonstrates a cursor component with an image and spring-based animations. This example utilizes the Cursor1 component.

```tsx
import { Cursor1 } from './cursor-1';

// ...

<ComponentCodePreview
  component={<Cursor1 />}
  filePath='app/docs/cursor/cursor-1.tsx'
/>
```

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

### Manual Installation of Animated Number Component

Source: https://github.com/ibelick/motion-primitives/blob/main/app/docs/animated-number/page.mdx

Provides the code to be manually copied and pasted into your project for the Animated Number component. Remember to update import paths according to your project structure.

```tsx
import { motion } from 'framer-motion';
import { useRef } from 'react';
import { useInView } from 'react-intersection-observer';

interface AnimatedNumberProps {
  value: number;
  className?: string;
  springOptions?: object;
  as?: React.ElementType;
}

export function AnimatedNumber({
  value,
  className,
  springOptions,
  as: Component = 'span',
}: AnimatedNumberProps) {
  const ref = useRef<HTMLDivElement>(null);
  const [inViewRef, inView] = useInView({
    triggerOnce: true,
  });

  return (
    <div ref={inViewRef} className={className} style={{ position: 'relative' }}>
      <motion.span
        ref={ref}
        initial={{ opacity: 0 }}
        animate={inView ? { opacity: 1 } : { opacity: 0 }}
        transition={{
          ...springOptions,
        }}
      >
        {value}
      </motion.span>
    </div>
  );
}

```

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

### Animated Number Basic Usage

Source: https://github.com/ibelick/motion-primitives/blob/main/app/docs/animated-number/page.mdx

Demonstrates the basic implementation of the Animated Number component. No specific setup is required beyond importing the component.

```tsx
import { AnimatedNumberBasic } from './animated-number-basic';

function App() {
  return <AnimatedNumberBasic />;
}
```

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

### Text Scramble Basic Example

Source: https://github.com/ibelick/motion-primitives/blob/main/app/docs/text-scramble/page.mdx

Demonstrates the basic usage of the TextScramble component. This snippet shows how to apply the default text scrambling effect.

```typescript
import { TextScrambleBasic } from './text-scramble-basic';

// ...

<TextScrambleBasic />
```

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

### In View Component Code (Manual Installation)

Source: https://github.com/ibelick/motion-primitives/blob/main/app/docs/in-view/page.mdx

Presents the core code for the In View component, intended for manual integration into a project. Ensure import paths are updated to match your project structure.

```typescript
import { InView, useInView } from 'react-intersection-observer';
import { motion, AnimatePresence } from 'framer-motion';
import { cn } from '@/lib/utils';

const variants = {
  hidden: {
    opacity: 0,
  },
  visible: {
    opacity: 1,
  },
};

export function InView({
  children,
  className,
  variants: componentVariants,
  transition,
  viewOptions,
  as: Component = 'div',
  once,
  ...props
}) {
  const { inView, ref } = useInView({
    ...viewOptions,
    triggerOnce: once,
  });

  return (
    <AnimatePresence initial={false}>
      <motion.div
        ref={ref}
        initial='hidden'
        animate={inView ? 'visible' : 'hidden'}
        variants={componentVariants || variants}
        transition={transition}
        className={cn(
          'transition-opacity duration-500',
          className,
          inView ? 'opacity-100' : 'opacity-0'
        )}
        {...props}
        as={Component}
      >
        {typeof children === 'function' ? children({ inView }) : children}
      </motion.div>
    </AnimatePresence>
  );
}
```

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

### Add Text Effect Component via CLI

Source: https://github.com/ibelick/motion-primitives/blob/main/app/docs/installation/page.mdx

Use the provided command to add the Text Effect component to your project. This command automates the setup for this specific component.

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

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

### Add a Specific Motion Component

Source: https://github.com/ibelick/motion-primitives/blob/main/cli/README.md

Add a desired component to your React project. The CLI handles directory creation, file download, and dependency installation.

```bash
npx motion-primitives add <component-name>
```

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

### Toolbar Dynamic Component Preview

Source: https://github.com/ibelick/motion-primitives/blob/main/app/docs/toolbar-dynamic/page.mdx

Renders a preview of the ToolbarDynamic component. The component itself is designed to adjust its width dynamically based on the tools it contains, starting small and expanding as needed.

```javascript
import ToolbarDynamic from '@/components/core/toolbar-dynamic';
import ComponentCodePreview from '@/components/website/component-code-preview';

<ComponentCodePreview
  component={<ToolbarDynamic />}
  filePath='components/core/toolbar-dynamic.tsx'
/>
```

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

### Install Morphing Dialog Manually

Source: https://github.com/ibelick/motion-primitives/blob/main/app/docs/morphing-dialog/page.mdx

Provides the core code for the Morphing Dialog component to be manually integrated into a project. Ensure import paths are updated to match your project structure.

```tsx
import { useState, useRef, useEffect, useCallback } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { cn } from '@/lib/utils';

interface MorphingDialogProps {
  children: React.ReactNode;
  isOpen: boolean;
  onClose: () => void;
  className?: string;
  overlayClassName?: string;
  contentClassName?: string;
}

export function MorphingDialog({
  children,
  isOpen,
  onClose,
  className,
  overlayClassName,
  contentClassName,
}: MorphingDialogProps) {
  const overlayRef = useRef<HTMLDivElement>(null);

  const handleKeyDown = useCallback(
    (event: KeyboardEvent) => {
      if (event.key === 'Escape' && isOpen) {
        onClose();
      }
    },
    [isOpen, onClose]
  );

  useEffect(() => {
    document.addEventListener('keydown', handleKeyDown);
    return () => {
      document.removeEventListener('keydown', handleKeyDown);
    };
  }, [handleKeyDown]);

  const handleClickOutside = useCallback(
    (event: MouseEvent) => {
      if (
        overlayRef.current &&
        !overlayRef.current.contains(event.target as Node) &&
        isOpen
      ) {
        onClose();
      }
    },
    [isOpen, onClose]
  );

  useEffect(() => {
    document.addEventListener('mousedown', handleClickOutside);
    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
    };
  }, [handleClickOutside]);

  const overlayVariants = {
    hidden: {
      opacity: 0,
      transition: {
        when: 'afterChildren',
      },
    },
    visible: {
      opacity: 1,
      transition: {
        when: 'beforeChildren',
      },
    },
  };

  const contentVariants = {
    hidden: {
      opacity: 0,
      scale: 0.95,
    },
    visible: {
      opacity: 1,
      scale: 1,
      transition: {
        duration: 0.3,
      },
    },
  };

  return (
    <AnimatePresence>
      {isOpen && (
        <motion.div
          ref={overlayRef}
          key='overlay'
          className={cn(
            'fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50',
            overlayClassName
          )}
          variants={overlayVariants}
          initial='hidden'
          animate='visible'
          exit='hidden'
          onClick={(e) => e.stopPropagation()} // Prevent clicks inside from closing the dialog
        >
          <motion.div
            key='content'
            className={cn(
              'relative rounded-lg bg-white p-6 shadow-lg',
              contentClassName
            )}
            variants={contentVariants}
          >
            {children}
            <button
              onClick={onClose}
              className='absolute top-2 right-2 text-gray-500 hover:text-gray-700'
            >
              &times;
            </button>
          </motion.div>
        </motion.div>
      )}
    </AnimatePresence>
  );
}

```

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

### Navigate to Project Directory

Source: https://github.com/ibelick/motion-primitives/blob/main/CONTRIBUTING.md

Change your current directory to the cloned motion-primitives project folder.

```bash
cd motion-primitives
```

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

### List Available Motion Components

Source: https://github.com/ibelick/motion-primitives/blob/main/cli/README.md

Use this command to view all available animated components, their descriptions, and dependencies.

```bash
npx motion-primitives list
```

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

### Clock Component Example

Source: https://github.com/ibelick/motion-primitives/blob/main/app/docs/sliding-number/page.mdx

Displays a clock component. This is a visual example of the Sliding Number component in action.

```tsx
import {
  SlidingNumber,
  SlidingNumberProps,
} from './sliding-number';

export const Clock = () => {
  return (
    <div className='flex items-center justify-center gap-2'>
      <SlidingNumber value='10' />
      <SlidingNumber value='2' padStart />
      <SlidingNumber value='3' decimalSeparator=',' />
      <SlidingNumber value='4.5' />
    </div>
  );
};

```

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

### Basic Spotlight Usage

Source: https://github.com/ibelick/motion-primitives/blob/main/app/docs/spotlight/page.mdx

Demonstrates the basic implementation of the spotlight component. This is the default configuration.

```tsx
import { SpotlightBasic } from './spotlight-basic';

function App() {
  return <SpotlightBasic />;
}
```

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

### Basic Sliding Number Example

Source: https://github.com/ibelick/motion-primitives/blob/main/app/docs/sliding-number/page.mdx

A fundamental example of the SlidingNumber component. This snippet shows the basic usage without additional controls.

```tsx
import {
  SlidingNumber,
  SlidingNumberProps,
} from './sliding-number';

export const SlidingNumberBasic = () => {
  return (
    <div className='flex items-center justify-center gap-2'>
      <SlidingNumber value='10' />
      <SlidingNumber value='2' padStart />
      <SlidingNumber value='3' decimalSeparator=',' />
      <SlidingNumber value='4.5' />
    </div>
  );
};

```