DOCSEARCHbyAlgolia
Submit Docs

Pacekit GSAP Animation Components

repository·main·Indexed 43 days ago

https://github.com/pacekit/gsap

A library of animated GSAP components version 1.0.0 designed for smooth integration into applications. Features a variety of UI elements including AI-focused components like ResponseWriter, ModalSelector, and TokenCounter, as well as visual effects such as AnimatedStack, DrawLineText, and DotLoader.

Tokens
13.9K
Snippets
62
Records
93
Agent score
53%

What's inside Pacekit GSAP

  1. Introduction to PaceUI - GSAP

    main
    PaceUI - GSAP is a collection of animated components and design blocks designed for React projects. Unlike traditional component libraries, it follows a 'copy and paste' philosophy similar to Shadcn, providing reusable code that you drop directly into your project. It is built to provide smooth interactions and rich detail using GSAP for animations, Lucide for icons, and Shiki for code highlighting.

  2. Use the RevealOnScroll component

    main

    The RevealOnScroll component allows you to animate content into view as the user scrolls. It supports several entry effects including fading, sliding, zooming, and blurring. Use the type prop to select the desired animation style.

    <RevealOnScroll type="slideInRight">
  {/* Your content to animate */}
</RevealOnScroll>

  3. Use the LiquidGlass component

    main

    The LiquidGlass component provides a smooth glass effect with a subtle blur, suitable for UI highlights and overlays. You can customize the appearance using several props to control dimensions, corner rounding, color tint, and blur intensity.

    <LiquidGlass 
  width={200} 
  height={200} 
  borderRadius={16} 
  tintOpacity={0.2} 
  blur={10} 
/>

  7. Use the FlipReveal component

    main

    The FlipReveal component is an animated container that reveals or hides items using GSAP Flip transitions. It relies on specific keys to manage the transition state of its children.

    // Example usage pattern based on documentation structure
<FlipReveal keys={['item1', 'item2']}>
  <FlipRevealItem flipKey="item1">Content</FlipRevealItem>
</FlipReveal>

  8. Install @paceui-gsap components

    main

    The @paceui-gsap library follows the same installation pattern as shadcn/ui. To use it, you must first initialize your project with shadcn, then register the @paceui-gsap registry in your components.json file, and finally use the add command to pull in specific components.

    1. Initialize your project

    Run the init command to create a new Next.js project or configure an existing one:

    npx shadcn@latest init

    2. Register the @paceui-gsap registry

    Add the @paceui-gsap registry to the registries object in your components.json file. This allows the CLI to locate the component definitions.

    {
    "registries": {
        "@paceui-gsap": "https://gsap.paceui.com/r/{name}.json"
    }
}

    3. Add components

    Use the add command to install specific components from the registry. For example, to add the TextReveal component:

    npx shadcn@latest add @paceui-gsap/text-reveal
    npx shadcn@latest init
# Then update components.json
# Then add components:
npx shadcn@latest add @paceui-gsap/text-reveal

  9. Use the TextFallButton component

    main

    The TextFallButton is a button component featuring dynamic text that performs a smooth, elastic falling motion. By default, the animation triggers both when the component loads and when the user hovers over it. You can control these behaviors using the effectOnHover and effectOnLoad props.

    <TextFallButton 
  effectOnHover={true} 
  effectOnLoad={true} 
>
  Button Text
</TextFallButton>

  10. Install the Overlay Effect component

    main

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

    Using CLI

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

    npx shadcn@latest add @paceui-ui/overlay-effect

    Manual Installation

    1. Install the required dependencies:
    npm install gsap @gsap/react
    1. Copy the component source code into your project.
    2. Update the import paths within the component to match your project's directory structure.

  11. Use the DotLoader component

    main

    The DotLoader is a compact 7x7 dot grid loader designed to visualize frame sequences or loading states using smooth animations. It accepts configuration via props to control the animation sequence, styling, and playback behavior.

    <DotLoader 
  frames={[[0,0], [0,1], [1,1]]} 
  duration={100} 
  play={true} 
  repeatCount={-1} 
/>

  12. Add icons or spinners to FillableButton

    main

    When adding an icon or a <Spinner /> component inside a FillableButton, you must add the data-icon attribute to ensure correct spacing:

    • Use data-icon="inline-start" to place the icon/spinner at the beginning.
    • Use data-icon="inline-end" to place the icon/spinner at the end.
    // Example for a loading state
<FillableButton>
  <Spinner data-icon="inline-start" />
  Loading...
</FillableButton>