Motion-Primitives

Motion-Primitives provides a collection of beautifully designed, easy-to-integrate motion components. The library is built using motion and Tailwind CSS.

Note: This project is currently in beta. You should expect regular new component releases and significant updates to the codebase.

Motion-Primitives components are built using the following technology stack:

• Motion: Used as the primary animation engine to ensure high-quality, smooth motion.
• Tailwind CSS: Used for styling and layout, allowing for easy customization within existing Tailwind-based projects.

To use Motion-Primitives, you must ensure your project has Tailwind CSS, Motion, and Lucide React installed. Follow these steps:

1. Install Tailwind CSS: Components are styled with Tailwind. Follow the official Tailwind installation guide.
2. Install Motion: Components use motion for animations.
3. Install Lucide React: Components use lucide-react for icons.

npm install motion
npm install lucide-react

You can install the ProgressiveBlur component using the CLI or by manual installation.

CLI Installation: Run the following command to add the component to your project:

Manual Installation:

1. Copy the source code from components/core/progressive-blur.tsx into your project.
2. Update the import paths within the file to match your project's directory structure.

You can install the Cursor component using the CLI or by manual installation.

CLI Installation: Run the installation command for the cursor component.

Manual Installation:

1. Copy the source code from components/core/cursor.tsx into your project.
2. Update the import paths within the file to match your project's directory structure.

You can install the InfiniteSlider component using the CLI or by manual installation.

Via CLI

Run the following command to add the component to your project:

# Use the CLI to add the infinite-slider component
# (Note: exact command depends on your CLI setup, typically follows the pattern below)
# npx motion-primitives add infinite-slider

Manual Installation

1. Copy the source code from components/core/infinite-slider.tsx into your project.
2. Update the import paths within the file to match your project's directory structure.

You can install the Glow Effect component using the CLI or by manual installation.

CLI Installation: Run the following command to add the component to your project: npx motion-primitives add glow-effect

Manual Installation:

1. Copy the source code from components/core/glow-effect.tsx into your project.
2. Update the import paths within the file to match your project's directory structure.

You can install the text-loop component using the CLI or by manual installation.

CLI Installation: Run the following command to add the component to your project:

Manual Installation:

1. Copy the source code from components/core/text-loop.tsx into your project.
2. Update the import paths within the file to match your project's directory structure.

You can customize the color of the shimmer effect by using the following CSS variables in your project or via the className prop:

• --base-color
• --base-gradient-color

To install the component manually:

1. Copy the source code from components/core/text-shimmer-wave.tsx into your project.
2. Update the import paths within the file to match your project's directory structure.