### Install Utility Dependencies Source: https://www.animbits.dev/docs/installation Install `clsx` and `tailwind-merge` if they were not included during the initial dependency installation. ```bash npm install clsx tailwind-merge ``` ```bash pnpm add clsx tailwind-merge ``` ```bash yarn add clsx tailwind-merge ``` ```bash bun add clsx tailwind-merge ``` -------------------------------- ### Install Shake Icon with bun Source: https://www.animbits.dev/docs/animations/icons/shake Install the shake icon component using bun. ```bash bunx shadcn@latest add @animbits/icons-shake ``` -------------------------------- ### Install Dependencies for Spotlight Card Source: https://www.animbits.dev/docs/animations/specials/spotlight-card Install the necessary dependencies for the Spotlight Card component. ```bash npm install motion lucide-react clsx tailwind-merge ``` -------------------------------- ### Install Dependencies Source: https://www.animbits.dev/docs/animations/specials/image-text Install the necessary dependencies for the Image Text component. ```bash npm install motion clsx tailwind-merge ``` -------------------------------- ### Install Shake Icon with yarn Source: https://www.animbits.dev/docs/animations/icons/shake Install the shake icon component using yarn. ```bash yarn dlx shadcn@latest add @animbits/icons-shake ``` -------------------------------- ### Install Dependencies for Manual Installation Source: https://www.animbits.dev/docs/installation Install framer-motion, clsx, and tailwind-merge for manual integration into other React frameworks. ```bash npm install framer-motion clsx tailwind-merge ``` ```bash pnpm add framer-motion clsx tailwind-merge ``` ```bash yarn add framer-motion clsx tailwind-merge ``` ```bash bun add framer-motion clsx tailwind-merge ``` -------------------------------- ### Install Shake Icon with pnpm Source: https://www.animbits.dev/docs/animations/icons/shake Install the shake icon component using pnpm. ```bash pnpm dlx shadcn@latest add @animbits/icons-shake ``` -------------------------------- ### Dramatic Entrance Example Source: https://www.animbits.dev/docs/hooks/scale-in An example of `useScaleIn` configured for a dramatic entrance effect with a scale starting from 0 and a longer duration. ```APIDOC ## Dramatic Entrance with useScaleIn ### Description This example configures `useScaleIn` for a dramatic entrance, starting from a scale of 0 and with a duration of 0.6 seconds. ### Usage ```jsx const scaleProps = useScaleIn({ from: 0, duration: 0.6, }) ``` ``` -------------------------------- ### Install Tab Switcher with bun Source: https://www.animbits.dev/docs/transitions/tab-switcher Use this command to install the Tab Switcher component using bun. ```bash bunx shadcn@latest add @animbits/tab-switcher ``` -------------------------------- ### Install useFadeIn Hook Source: https://www.animbits.dev/docs/hooks/fade-in Install the useFadeIn hook using npm, pnpm, yarn, or bun. ```bash npx shadcn@latest add @animbits/hooks-use-fade-in ``` ```bash pnpm dlx shadcn@latest add @animbits/hooks-use-fade-in ``` ```bash yarn dlx shadcn@latest add @animbits/hooks-use-fade-in ``` ```bash bunx shadcn@latest add @animbits/hooks-use-fade-in ``` -------------------------------- ### Install Shake Icon with npm Source: https://www.animbits.dev/docs/animations/icons/shake Install the shake icon component using npm. ```bash npx shadcn@latest add @animbits/icons-shake ``` -------------------------------- ### Install Parallax Tilt Card (bun) Source: https://www.animbits.dev/docs/animations/cards/parallax-tilt Install the Parallax Tilt Card component using bun. ```bash bunx shadcn@latest add @animbits/cards-parallax-tilt ``` -------------------------------- ### Install useBounce Hook Source: https://www.animbits.dev/docs/hooks/bounce Install the useBounce hook using npm, pnpm, yarn, or bun. ```bash npx shadcn@latest add @animbits/hooks-use-bounce ``` ```bash pnpm dlx shadcn@latest add @animbits/hooks-use-bounce ``` ```bash yarn dlx shadcn@latest add @animbits/hooks-use-bounce ``` ```bash bunx shadcn@latest add @animbits/hooks-use-bounce ``` -------------------------------- ### Install Tab Switcher with npm Source: https://www.animbits.dev/docs/transitions/tab-switcher Use this command to install the Tab Switcher component using npm. ```bash npx shadcn@latest add @animbits/tab-switcher ``` -------------------------------- ### Install Expanding Card with bun Source: https://www.animbits.dev/docs/transitions/expanding-card Use this command to install the expanding card component using bun. ```bash bunx shadcn@latest add @animbits/expanding-card ``` -------------------------------- ### Install usePress Hook Source: https://www.animbits.dev/docs/hooks/press Install the usePress hook using npm, pnpm, yarn, or bun. ```bash npx shadcn@latest add @animbits/hooks-use-press ``` ```bash pnpm dlx shadcn@latest add @animbits/hooks-use-press ``` ```bash yarn dlx shadcn@latest add @animbits/hooks-use-press ``` ```bash bunx shadcn@latest add @animbits/hooks-use-press ``` -------------------------------- ### Install useHoverLift Hook Source: https://www.animbits.dev/docs/hooks/hover-lift Install the useHoverLift hook using npm, pnpm, yarn, or bun. ```bash npx shadcn@latest add @animbits/hooks-use-hover-lift ``` ```bash pnpm dlx shadcn@latest add @animbits/hooks-use-hover-lift ``` ```bash yarn dlx shadcn@latest add @animbits/hooks-use-hover-lift ``` ```bash bunx shadcn@latest add @animbits/hooks-use-hover-lift ``` -------------------------------- ### Install Parallax Tilt Card (yarn) Source: https://www.animbits.dev/docs/animations/cards/parallax-tilt Install the Parallax Tilt Card component using yarn. ```bash yarn dlx shadcn@latest add @animbits/cards-parallax-tilt ``` -------------------------------- ### Install useParallaxTilt Hook Source: https://www.animbits.dev/docs/hooks/parallax-tilt Install the useParallaxTilt hook using npm, pnpm, yarn, or bun. ```bash npx shadcn@latest add @animbits/hooks-use-parallax-tilt ``` ```bash pnpm dlx shadcn@latest add @animbits/hooks-use-parallax-tilt ``` ```bash yarn dlx shadcn@latest add @animbits/hooks-use-parallax-tilt ``` ```bash bunx shadcn@latest add @animbits/hooks-use-parallax-tilt ``` -------------------------------- ### Install Scale In Icon with bun Source: https://www.animbits.dev/docs/animations/icons/scale-in Use this command to install the scale-in icon animation using bun. ```bash bunx shadcn@latest add @animbits/icons-scale-in ``` -------------------------------- ### Install Tab Switcher with yarn Source: https://www.animbits.dev/docs/transitions/tab-switcher Use this command to install the Tab Switcher component using yarn. ```bash yarn dlx shadcn@latest add @animbits/tab-switcher ``` -------------------------------- ### Install Text Gradient Component Source: https://www.animbits.dev/docs/animations/text/gradient Install the TextGradient component using npm, pnpm, yarn, or bun. ```bash npx shadcn@latest add @animbits/text-gradient ``` ```bash pnpm dlx shadcn@latest add @animbits/text-gradient ``` ```bash yarn dlx shadcn@latest add @animbits/text-gradient ``` ```bash bunx shadcn@latest add @animbits/text-gradient ``` -------------------------------- ### Install Spinner Loader with bun Source: https://www.animbits.dev/docs/animations/loaders/spinner Use this command to install the Spinner Loader component using bun. ```bash bunx shadcn@latest add @animbits/loaders-spinner ``` -------------------------------- ### Install Parallax Tilt Card (npm) Source: https://www.animbits.dev/docs/animations/cards/parallax-tilt Install the Parallax Tilt Card component using npm. ```bash npx shadcn@latest add @animbits/cards-parallax-tilt ``` -------------------------------- ### Install Dependencies for Reaction Dock Source: https://www.animbits.dev/docs/animations/specials/reaction-dock Install the 'motion' and 'lucide-react' packages required for the Reaction Dock component. ```bash npm install motion lucide-react ``` -------------------------------- ### Install Tab Switcher with pnpm Source: https://www.animbits.dev/docs/transitions/tab-switcher Use this command to install the Tab Switcher component using pnpm. ```bash pnpm dlx shadcn@latest add @animbits/tab-switcher ``` -------------------------------- ### Install Expanding Card with yarn Source: https://www.animbits.dev/docs/transitions/expanding-card Use this command to install the expanding card component using yarn. ```bash yarn dlx shadcn@latest add @animbits/expanding-card ``` -------------------------------- ### Install Scale In Icon with pnpm Source: https://www.animbits.dev/docs/animations/icons/scale-in Use this command to install the scale-in icon animation using pnpm. ```bash pnpm dlx shadcn@latest add @animbits/icons-scale-in ``` -------------------------------- ### Install Expanding Card with npm Source: https://www.animbits.dev/docs/transitions/expanding-card Use this command to install the expanding card component using npm. ```bash npx shadcn@latest add @animbits/expanding-card ``` -------------------------------- ### Install Image Text Component Source: https://www.animbits.dev/docs/animations/specials/image-text Install the Image Text component using npm, yarn, or bun. ```bash npx shadcn@latest add @animbits/specials-image-text ``` ```bash pnpm dlx shadcn@latest add @animbits/specials-image-text ``` ```bash yarn dlx shadcn@latest add @animbits/specials-image-text ``` ```bash bunx shadcn@latest add @animbits/specials-image-text ``` -------------------------------- ### Install Text Fade In Component Source: https://www.animbits.dev/docs/animations/text/fade-in Install the TextFadeIn component using npm, pnpm, yarn, or bun. ```bash npx shadcn@latest add @animbits/text-fade-in ``` ```bash pnpm dlx shadcn@latest add @animbits/text-fade-in ``` ```bash yarn dlx shadcn@latest add @animbits/text-fade-in ``` ```bash bunx shadcn@latest add @animbits/text-fade-in ``` -------------------------------- ### Install Fade In Card Component Source: https://www.animbits.dev/docs/animations/cards/fade-in Install the Fade In Card component using your preferred package manager. ```bash npx shadcn@latest add @animbits/cards-fade-in ``` ```bash pnpm dlx shadcn@latest add @animbits/cards-fade-in ``` ```bash yarn dlx shadcn@latest add @animbits/cards-fade-in ``` ```bash bunx shadcn@latest add @animbits/cards-fade-in ``` -------------------------------- ### Install Spin Icon Component Source: https://www.animbits.dev/docs/animations/icons/spin Install the SpinIcon component using npm, pnpm, yarn, or bun. ```bash npx shadcn@latest add @animbits/icons-spin ``` ```bash pnpm dlx shadcn@latest add @animbits/icons-spin ``` ```bash yarn dlx shadcn@latest add @animbits/icons-spin ``` ```bash bunx shadcn@latest add @animbits/icons-spin ``` -------------------------------- ### Install Pop Icons with bun Source: https://www.animbits.dev/docs/animations/icons/pop Use this command to install the Pop icons package using bun. ```bash bunx shadcn@latest add @animbits/icons-pop ``` -------------------------------- ### Install Scale In Icon with yarn Source: https://www.animbits.dev/docs/animations/icons/scale-in Use this command to install the scale-in icon animation using yarn. ```bash yarn dlx shadcn@latest add @animbits/icons-scale-in ``` -------------------------------- ### Install Scale In Icon with npm Source: https://www.animbits.dev/docs/animations/icons/scale-in Use this command to install the scale-in icon animation using npm. ```bash npx shadcn@latest add @animbits/icons-scale-in ``` -------------------------------- ### Example Configurations Source: https://www.animbits.dev/docs/hooks/parallax-tilt Provides various examples demonstrating different configurations for tilt effects, including subtle, dramatic, smooth, and snappy responses. ```APIDOC ## Examples ### Subtle Tilt ```jsx const { tiltProps, ref } = useParallaxTilt({ maxTilt: 8, shadowIntensity: 0.2, }) ``` ### Dramatic Tilt ```jsx const { tiltProps, ref } = useParallaxTilt({ maxTilt: 30, shadowIntensity: 0.6, stiffness: 200, }) ``` ### Smooth & Slow ```jsx const { tiltProps, ref } = useParallaxTilt({ maxTilt: 15, stiffness: 150, damping: 40, }) ``` ### Snappy & Responsive ```jsx const { tiltProps, ref } = useParallaxTilt({ maxTilt: 20, stiffness: 500, damping: 20, }) ``` ``` -------------------------------- ### Install Parallax Tilt Card (pnpm) Source: https://www.animbits.dev/docs/animations/cards/parallax-tilt Install the Parallax Tilt Card component using pnpm. ```bash pnpm dlx shadcn@latest add @animbits/cards-parallax-tilt ``` -------------------------------- ### Staggered Grid Example Source: https://www.animbits.dev/docs/hooks/scale-in Shows how to implement staggered entrance animations in a grid layout using `useScaleIn` with calculated delays based on item index. ```APIDOC ## Staggered Grid with useScaleIn ### Description This example demonstrates creating a staggered entrance animation for a grid of items using `useScaleIn` by applying a delay based on the item's index. ### Usage ```jsx import { motion } from "motion/react" import { useScaleIn } from "@/lib/hooks/use-scale-in" export function ProductGrid({ products }) { return (
{products.map((product, index) => { const scaleProps = useScaleIn({ delay: index * 0.1 // Stagger effect }) return ( {product.name}

{product.name}

 ) })}
) } ``` ``` -------------------------------- ### Basic Example Source: https://www.animbits.dev/docs/hooks/scale-in A simple implementation of the `useScaleIn` hook for a card component, demonstrating a basic scale-in animation on view. ```APIDOC ## Basic useScaleIn Example ### Description This example shows how to use the `useScaleIn` hook to apply a scale-in animation to a `motion.div` element. ### Usage ```jsx import { motion } from "motion/react" import { useScaleIn } from "@/lib/hooks/use-scale-in" export function Card() { const scaleProps = useScaleIn() return (

Scales in on view

Content appears smoothly

 ) } ``` ``` -------------------------------- ### Create Folder Structure for Manual Installation Source: https://www.animbits.dev/docs/installation Create necessary folders for hooks and components when manually integrating AnimBits. ```bash mkdir -p lib/ mkdir -p components/ ``` -------------------------------- ### Basic usePress Example Source: https://www.animbits.dev/docs/hooks/press Demonstrates the basic usage of the usePress hook with default settings on a button. ```javascript import { motion } from "motion/react" import { usePress } from "@/lib/hooks/use-press" export function PressButton() { const pressProps = usePress() return ( Click me ) } ``` -------------------------------- ### Install Spotlight Card with bun Source: https://www.animbits.dev/docs/animations/specials/spotlight-card Use this command to add the Spotlight Card component to your project using bun. ```bash bunx shadcn@latest add @animbits/specials-spotlight-card ``` -------------------------------- ### Reaction Dock Usage Example Source: https://www.animbits.dev/docs/animations/specials/reaction-dock Demonstrates how to use the ReactionDock component with sample items, including icons from 'lucide-react' and click handlers. ```typescript import { ReactionDock } from "@/components/animations/specials/reaction-dock" import { Heart, ThumbsUp, Laugh } from "lucide-react" export function ReactionDockDemo() { const items = [ { icon: , label: "Like", onClick: () => console.log("Like"), }, { icon: , label: "Love", onClick: () => console.log("Love"), }, { icon: , label: "Haha", onClick: () => console.log("Haha"), }, ] return } ``` -------------------------------- ### Modal Entrance Example Source: https://www.animbits.dev/docs/hooks/scale-in Demonstrates using `useScaleIn` for a modal component, with custom `from` and `duration` values for a specific entrance effect. ```APIDOC ## Modal Entrance with useScaleIn ### Description This example illustrates how to use `useScaleIn` with custom options to create an entrance animation for a modal. ### Usage ```jsx import { motion } from "motion/react" import { useScaleIn } from "@/lib/hooks/use-scale-in" export function Modal({ isOpen }: { isOpen: boolean }) { const scaleProps = useScaleIn({ from: 0.5, duration: 0.3 }) if (!isOpen) return null return (

Modal Title

Modal content

 ) } ``` ``` -------------------------------- ### Install Framer Motion with bun Source: https://www.animbits.dev/docs/installation Install Framer Motion, a dependency for AnimBits, using bun. ```bash bun add framer-motion ``` -------------------------------- ### Quick Fade Configuration Source: https://www.animbits.dev/docs/hooks/fade-in A concise example showing how to configure the fade-in animation with a specific duration. ```javascript const fadeProps = useFadeIn({ duration: 0.3, }) ``` -------------------------------- ### Install Framer Motion with yarn Source: https://www.animbits.dev/docs/installation Install Framer Motion, a dependency for AnimBits, using yarn. ```bash yarn add framer-motion ``` -------------------------------- ### Install Framer Motion with pnpm Source: https://www.animbits.dev/docs/installation Install Framer Motion, a dependency for AnimBits, using pnpm. ```bash pnpm add framer-motion ``` -------------------------------- ### Fast Transition Example Source: https://www.animbits.dev/docs/transitions/theme-toggle-slide-bottom Demonstrates a fast theme transition by setting a lower speed prop. ```jsx ``` -------------------------------- ### Install useStrokeDraw Hook Source: https://www.animbits.dev/docs/hooks/stroke-draw Install the useStrokeDraw hook using npm, yarn, pnpm, or bun. ```bash npx shadcn@latest add @animbits/hooks-use-stroke-draw ``` ```bash pnpm dlx shadcn@latest add @animbits/hooks-use-stroke-draw ``` ```bash yarn dlx shadcn@latest add @animbits/hooks-use-stroke-draw ``` ```bash bunx shadcn@latest add @animbits/hooks-use-stroke-draw ``` -------------------------------- ### Install useWordCarousel Hook Source: https://www.animbits.dev/docs/hooks/word-carousel Install the useWordCarousel hook using npm, pnpm, yarn, or bun. ```bash npx shadcn@latest add @animbits/hooks-use-word-carousel ``` ```bash pnpm dlx shadcn@latest add @animbits/hooks-use-word-carousel ``` ```bash yarn dlx shadcn@latest add @animbits/hooks-use-word-carousel ``` ```bash bunx shadcn@latest add @animbits/hooks-use-word-carousel ``` -------------------------------- ### Install Text Highlight Component Source: https://www.animbits.dev/docs/animations/text/text-highlight Install the Text Highlight component using npm, pnpm, yarn, or bun. ```bash npx shadcn@latest add @animbits/text-highlight ``` ```bash pnpm dlx shadcn@latest add @animbits/text-highlight ``` ```bash yarn dlx shadcn@latest add @animbits/text-highlight ``` ```bash bunx shadcn@latest add @animbits/text-highlight ``` -------------------------------- ### Install Framer Motion Source: https://www.animbits.dev/docs Install Framer Motion as a dependency before using AnimBits components or hooks. ```bash npm install framer-motion ``` -------------------------------- ### Install usePulse Hook Source: https://www.animbits.dev/docs/hooks/pulse Install the usePulse hook using npm, pnpm, yarn, or bun. ```bash npx shadcn@latest add @animbits/hooks-use-pulse ``` ```bash pnpm dlx shadcn@latest add @animbits/hooks-use-pulse ``` ```bash yarn dlx shadcn@latest add @animbits/hooks-use-pulse ``` ```bash bunx shadcn@latest add @animbits/hooks-use-pulse ``` -------------------------------- ### Install useShimmer Hook Source: https://www.animbits.dev/docs/hooks/shimmer Install the useShimmer hook using npm, pnpm, yarn, or bun. ```bash npx shadcn@latest add @animbits/hooks-use-shimmer ``` ```bash pnpm dlx shadcn@latest add @animbits/hooks-use-shimmer ``` ```bash yarn dlx shadcn@latest add @animbits/hooks-use-shimmer ``` ```bash bunx shadcn@latest add @animbits/hooks-use-shimmer ``` -------------------------------- ### Install Reaction Dock with bun Source: https://www.animbits.dev/docs/animations/specials/reaction-dock Use this command to add the Reaction Dock component to your project using bun. ```bash bunx shadcn@latest add @animbits/specials-reaction-dock ``` -------------------------------- ### Install Tilt Card Component Source: https://www.animbits.dev/docs/animations/cards/tilt Install the Tilt Card component using npm, pnpm, yarn, or bun. ```bash npx shadcn@latest add @animbits/cards-tilt ``` ```bash pnpm dlx shadcn@latest add @animbits/cards-tilt ``` ```bash yarn dlx shadcn@latest add @animbits/cards-tilt ``` ```bash bunx shadcn@latest add @animbits/cards-tilt ``` -------------------------------- ### Install useMagnetic Hook Source: https://www.animbits.dev/docs/hooks/magnetic Install the useMagnetic hook using npm, pnpm, yarn, or bun. ```bash npx shadcn@latest add @animbits/hooks-use-magnetic ``` ```bash pnpm dlx shadcn@latest add @animbits/hooks-use-magnetic ``` ```bash yarn dlx shadcn@latest add @animbits/hooks-use-magnetic ``` ```bash bunx shadcn@latest add @animbits/hooks-use-magnetic ``` -------------------------------- ### Install useSlideIn Hook Source: https://www.animbits.dev/docs/hooks/slide-in Install the useSlideIn hook using npm, pnpm, yarn, or bun. ```bash npx shadcn@latest add @animbits/hooks-use-slide-in ``` ```bash pnpm dlx shadcn@latest add @animbits/hooks-use-slide-in ``` ```bash yarn dlx shadcn@latest add @animbits/hooks-use-slide-in ``` ```bash bunx shadcn@latest add @animbits/hooks-use-slide-in ``` -------------------------------- ### Install Spotlight Card with npm Source: https://www.animbits.dev/docs/animations/specials/spotlight-card Use this command to add the Spotlight Card component to your project using npm. ```bash npx shadcn@latest add @animbits/specials-spotlight-card ``` -------------------------------- ### Install useScaleIn Hook Source: https://www.animbits.dev/docs/hooks/scale-in Install the useScaleIn hook using npm, pnpm, yarn, or bun. ```bash npx shadcn@latest add @animbits/hooks-use-scale-in ``` ```bash pnpm dlx shadcn@latest add @animbits/hooks-use-scale-in ``` ```bash yarn dlx shadcn@latest add @animbits/hooks-use-scale-in ``` ```bash bunx shadcn@latest add @animbits/hooks-use-scale-in ``` -------------------------------- ### Create Directory Structure Source: https://www.animbits.dev/docs/installation Create the `lib` and `components` directories in your project root for organizing AnimBits hooks and components. ```bash mkdir -p lib mkdir -p components ``` -------------------------------- ### Install Reaction Dock with npm Source: https://www.animbits.dev/docs/animations/specials/reaction-dock Use this command to add the Reaction Dock component to your project using npm. ```bash npx shadcn@latest add @animbits/specials-reaction-dock ``` -------------------------------- ### Install Scramble Text Animation Source: https://www.animbits.dev/docs/animations/text/scramble Install the @animbits/text-scramble package using your preferred package manager. ```bash npx shadcn@latest add @animbits/text-scramble ``` ```bash pnpm dlx shadcn@latest add @animbits/text-scramble ``` ```bash yarn dlx shadcn@latest add @animbits/text-scramble ``` ```bash bunx shadcn@latest add @animbits/text-scramble ``` -------------------------------- ### Install Motion dependency Source: https://www.animbits.dev/docs/animations/specials/border-beam Install the 'motion' package, which is a required dependency for the Border Beam animation. ```bash npm install motion ``` -------------------------------- ### Install Ripple Button Source: https://www.animbits.dev/docs/animations/buttons/ripple Install the Ripple Button component using your preferred package manager. ```bash npx shadcn@latest add @animbits/buttons-ripple ``` ```bash pnpm dlx shadcn@latest add @animbits/buttons-ripple ``` ```bash yarn dlx shadcn@latest add @animbits/buttons-ripple ``` ```bash bunx shadcn@latest add @animbits/buttons-ripple ``` -------------------------------- ### Install Theme Toggle Slide Top with bun Source: https://www.animbits.dev/docs/transitions/theme-toggle-slide-top Install the Theme Toggle Slide Top component using bun. ```bash bunx shadcn@latest add @animbits/theme-toggle-slide-top ``` -------------------------------- ### Install Shared Modal with bun Source: https://www.animbits.dev/docs/transitions/shared-modal Use this command to install the shared modal package using bun. ```bash bunx shadcn@latest add @animbits/shared-modal ``` -------------------------------- ### Install Shared Modal with yarn Source: https://www.animbits.dev/docs/transitions/shared-modal Use this command to install the shared modal package using yarn. ```bash yarn dlx shadcn@latest add @animbits/shared-modal ``` -------------------------------- ### 30% Progress Example Source: https://www.animbits.dev/docs/animations/loaders/liquid-progress Demonstrates the Liquid Progress Loader at 30% completion. ```tsx import { LoaderLiquidProgress } from "@/components/animations/loaders/liquid-progress" export default function Example() { return } ``` -------------------------------- ### Install Shared Modal with pnpm Source: https://www.animbits.dev/docs/transitions/shared-modal Use this command to install the shared modal package using pnpm. ```bash pnpm dlx shadcn@latest add @animbits/shared-modal ``` -------------------------------- ### Install Shared Modal with npm Source: https://www.animbits.dev/docs/transitions/shared-modal Use this command to install the shared modal package using npm. ```bash npx shadcn@latest add @animbits/shared-modal ``` -------------------------------- ### Install Grayscale Card Component Source: https://www.animbits.dev/docs/animations/cards/grayscale Install the Grayscale Card component using npm, pnpm, yarn, or bun. ```bash npx shadcn@latest add @animbits/cards-grayscale ``` ```bash pnpm dlx shadcn@latest add @animbits/cards-grayscale ``` ```bash yarn dlx shadcn@latest add @animbits/cards-grayscale ``` ```bash bunx shadcn@latest add @animbits/cards-grayscale ``` -------------------------------- ### Install Expanding Card with pnpm Source: https://www.animbits.dev/docs/transitions/expanding-card Use this command to install the expanding card component using pnpm. ```bash pnpm dlx shadcn@latest add @animbits/expanding-card ``` -------------------------------- ### Install Spotlight Card with pnpm Source: https://www.animbits.dev/docs/animations/specials/spotlight-card Use this command to add the Spotlight Card component to your project using pnpm. ```bash pnpm dlx shadcn@latest add @animbits/specials-spotlight-card ``` -------------------------------- ### Basic Parallax Tilt Card Example Source: https://www.animbits.dev/docs/hooks/parallax-tilt A basic example demonstrating how to use the useParallaxTilt hook to create a 3D tilt effect on a card component. ```jsx import { motion } from "motion/react" import { useParallaxTilt } from "@/lib/hooks/use-parallax-tilt" export function TiltCard() { const { tiltProps, ref } = useParallaxTilt() return (

3D Tilt Card

Move your mouse over me!

 ) } ``` -------------------------------- ### Install Scale In Card Animation Source: https://www.animbits.dev/docs/animations/cards/scale-in Install the Scale In Card animation package using npm, pnpm, yarn, or bun. ```bash npx shadcn@latest add @animbits/cards-scale-in ``` ```bash pnpm dlx shadcn@latest add @animbits/cards-scale-in ``` ```bash yarn dlx shadcn@latest add @animbits/cards-scale-in ``` ```bash bunx shadcn@latest add @animbits/cards-scale-in ``` -------------------------------- ### Install Wiggle Icon Animation with bun Source: https://www.animbits.dev/docs/animations/icons/wiggle Use this command to install the wiggle icon animation package using bun. ```bash bunx shadcn@latest add @animbits/icons-wiggle ``` -------------------------------- ### Install Swipeable Stack Component Source: https://www.animbits.dev/docs/animations/specials/swipeable-stack Install the Swipeable Stack component using npm, yarn, or bun. ```bash npx shadcn@latest add @animbits/specials-swipeable-stack ``` ```bash pnpm dlx shadcn@latest add @animbits/specials-swipeable-stack ``` ```bash yarn dlx shadcn@latest add @animbits/specials-swipeable-stack ``` ```bash bunx shadcn@latest add @animbits/specials-swipeable-stack ``` -------------------------------- ### Install Project Dependencies Source: https://www.animbits.dev/docs/installation Install the project's core dependencies, including React Router for navigation, Framer Motion for animations, and utilities for class name management. ```bash pnpm install pnpm add react-router-dom framer-motion clsx tailwind-merge ``` ```bash npm install npm install react-router-dom framer-motion clsx tailwind-merge ``` ```bash yarn yarn add react-router-dom framer-motion clsx tailwind-merge ``` ```bash bun install bun add react-router-dom framer-motion clsx tailwind-merge ```