DOCSEARCHbyAlgolia
Submit Docs

Animata Documentation

repository·main·Indexed 25 days ago

https://github.com/codse/animata

A free, open-source collection of handcrafted interaction animations and visual effects for React and TailwindCSS. Animata uses a copy-and-paste workflow similar to shadcn/ui, allowing for easy customization. It features a variety of components including the SplitReveal preloader, Animated Beam backgrounds, and FAQ accordions, emphasizing compound component patterns and accessibility standards.

Tokens
57.8K
Snippets
230
Records
553
Agent score
80%

What's inside Animata

  1. Overview of Animata

    main

    Animata is a free and open-source collection of hand-crafted animations, effects, and interactions designed for seamless integration via copy-and-paste.

    Key characteristics:

    • Technology Stack: Built using TailwindCSS and ReactJS.
    • Customization: Uses TailwindCSS for layout, but leaves low-level design details (colors, font styles, etc.) to the developer for easy customization.
    • Integration: Designed to be used alongside existing UI libraries or design systems (e.g., Material-UI, Chakra-UI), provided that TailwindCSS is configured in your project.

  2. Overview of Animata Card components

    main

    Animata provides a variety of animated card layouts designed for features, notifications, integrations, and social proof. Available card components include:

    • Flip Card: A card with front and back sides.
    • Card Stack: A stack of cards with overlay triggers.
    • Card Spread: A card layout that spreads elements on click.
    • Collab Card: A multiplayer presence card featuring animated cursors.

  3. Explore Text Animation Presets

    main

    Animata provides a wide collection of drop-in text animation presets built on the Web Animations API. These include effects such as per-character reveals, per-word swaps, kinetic phrase builds, and editorial transitions.

    Available text components include:

    • Gradient & Shimmer: AnimatedGradientText, ShimmerSweep
    • Reveals & Transitions: BlurOutUp, BottomUpLetters, FadeThrough, FocusBlurResolve, LineByLineSlide, MaskRevealUp, PerCharacterRise, PerWordCrossfade, SoftBlurIn, TopDownLetters, WaveReveal
    • Text Manipulation: CircularText, CycleText, GibberishText, GlitchText, JitterText, MirrorText, RollText, SplitText, SwapText, TypingText
    • Stylized Effects: BoldCopy, DoubleUnderline, JumpingTextInstagram, TextBorderAnimation, TextExplodeImessage, TextFlip, UnderlineHoverText
    • Numerical & Kinetic: Counter, KineticCenterBuild, Ticker
    • Scaling & Movement: MicroScaleFade, ScaleDownFade, SpringScaleIn
    • Axis-based: SharedAxisY, SharedAxisZ

  4. Use Animata Widgets for Bento Grids

    main

    Animata provides a collection of pre-built React components designed for use in bento grids and other UI presentations. These widgets are categorized by their aspect ratio: Square and Tall.

    To use a widget, import the specific component from its corresponding path in the @/animata/widget/ directory.

  5. Understand the scope of Animata Graphs

    main

    Animata provides a collection of lightweight charts and graphs designed specifically for use in widgets, dashboards, and product presentations.

    Important Note: Animata is not a full-fledged chart library. It is intended for simple visual representations. If your project requires complex data visualization, high-level interactivity, or advanced statistical charting, you should use dedicated libraries such as Recharts or Chart.js instead.

  7. Use the Shooting Stars background component

    main

    The Shooting Stars component renders a dark sky with light streaks shooting across a twinkling starfield. To use it, wrap your content inside the component. The sky will render behind your content.

    Note on Motion: The component respects user accessibility settings. If prefers-reduced-motion is enabled, the streaks are removed, leaving only the static starfield.

    Styling Tip: It is recommended to set a height on the component via the className prop (e.g., h-screen or min-h-96) to ensure the background is visible.

  8. Install the Study Timer widget manually

    main

    If you prefer manual installation, follow these steps:

    1. Install the required dependency:
      npm install lucide-react
    2. Create the component directory and file:
   ```bash
mkdir -p components/animata/widget && touch components/animata/widget/study-timer.tsx
    1. Copy the component source code into components/animata/widget/study-timer.tsx.
    npm install lucide-react
mkdir -p components/animata/widget && touch components/animata/widget/study-timer.tsx

  10. Manual Installation of Shimmer Sweep

    main

    If you prefer manual installation, follow these steps to set up the Shimmer Sweep preset and its shared runtime.

    1. Install the shared runtime

    Every text preset in Animata shares a Web Animations API (WAAPI) loop. If you haven't installed the text runtime yet, create the directory and files:

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

    2. Paste the runtime code

    Copy the shared runtime logic into components/animata/text/text-animator.css and components/animata/text/text-animator.tsx.

    3. Create the preset file

    Create the specific file for the Shimmer Sweep component:

    mkdir -p components/animata/text && touch components/animata/text/shimmer-sweep.tsx

    4. Paste the component code

    Open components/animata/text/shimmer-sweep.tsx and paste the Shimmer Sweep component code provided in the documentation.

  11. Install the Card Stack component

    main

    You can install the card-stack component using the Animata CLI or via manual installation.

    CLI Installation

    Use the registry command to install card-stack.tsx and the required hooks/use-prefers-reduced-motion.ts hook.

    Manual Installation

    1. Install the motion dependency:
      npm install motion
    2. Copy the usePrefersReducedMotion hook to your project's hooks directory.
    3. Create the component file at components/animata/card/card-stack.tsx and add the component source code.
    npm install motion

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