---
name: "@pacekit-gsap"
slug: "pacekit-gsap"
description: "A companion GSAP-powered animation component library from PaceKit, providing React components with smooth GSAP-driven interactions for production apps. The docs nav lists an AI Toolkit category (Modal Selector, Modal Ability Selector, AI Suggestions, Response Writer, Token Counter) alongside Text Effects (Reveal Text, Scramble Text, Squash Text, Bouncing Text, Draw Line Text, Mouse Wave Text, Dot Animation) and additional animated Blocks. Uses GSAP (GreenSock) rather than CSS transitions or Framer Motion. Tailwind CSS, TypeScript, shadcn CLI compatible. Free, MIT-licensed. Use for: adding high-quality GSAP-driven text animations and interactive UI effects to Next.js or React apps without building animation logic from scratch."
category: "Animated components"
tags: ["aesthetic", "ai", "animation", "backgrounds", "blocks", "buttons", "cards", "design-system", "forms", "glassmorphism", "hooks", "loaders", "media", "overlays", "text-effects"]
framework: "react"
license: "MIT"
author: "pacekit"
website: "https://gsap.pacekit.dev"
github: "https://github.com/pacekit/gsap"
registry: "https://gsap.pacekit.dev/r/registry.json"
pro: false
pro_url: null
github_stars: 269
component_count: 29
generated_at: "2026-07-28T08:59:05.895Z"
---

# @pacekit-gsap

A companion GSAP-powered animation component library from PaceKit, providing React components with smooth GSAP-driven interactions for production apps. The docs nav lists an AI Toolkit category (Modal Selector, Modal Ability Selector, AI Suggestions, Response Writer, Token Counter) alongside Text Effects (Reveal Text, Scramble Text, Squash Text, Bouncing Text, Draw Line Text, Mouse Wave Text, Dot Animation) and additional animated Blocks. Uses GSAP (GreenSock) rather than CSS transitions or Framer Motion. Tailwind CSS, TypeScript, shadcn CLI compatible. Free, MIT-licensed. Use for: adding high-quality GSAP-driven text animations and interactive UI effects to Next.js or React apps without building animation logic from scratch.

## Links

- Website: https://gsap.pacekit.dev
- GitHub: https://github.com/pacekit/gsap
- Registry JSON: https://gsap.pacekit.dev/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/pacekit-gsap
- This file: https://sh4dcn.vercel.app/md/pacekit-gsap.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://gsap.pacekit.dev/r/registry.json
pnpm dlx shadcn@latest add https://gsap.pacekit.dev/r/registry.json
bunx shadcn@latest add https://gsap.pacekit.dev/r/registry.json
# clone the source repo
git clone https://github.com/pacekit/gsap.git
# fetch the raw registry index
curl -s https://gsap.pacekit.dev/r/registry.json
```

## Components (29)

| name | type | description | install |
| --- | --- | --- | --- |
| index | registry:style | — | `npx shadcn@latest add https://gsap.pacekit.dev/r/index.json` |
| ai-suggestions | registry:ui | Get smart, real-time AI recommendations to refine and improve your work | `npx shadcn@latest add https://gsap.pacekit.dev/r/ai-suggestions.json` |
| ai-modal-selector | registry:ui | AI-focused model selector with preview, tooltips, and capability indicators built-in | `npx shadcn@latest add https://gsap.pacekit.dev/r/ai-modal-selector.json` |
| ai-modal-ability-selector | registry:ui | Compact selector for toggling abilities with icons and custom styles | `npx shadcn@latest add https://gsap.pacekit.dev/r/ai-modal-ability-selector.json` |
| ai-response-writer | registry:ui | An auto-scrolling text display that smoothly keeps the latest response always visible | `npx shadcn@latest add https://gsap.pacekit.dev/r/ai-response-writer.json` |
| ai-token-counter | registry:ui | Compact selector for toggling abilities with icons and custom styles | `npx shadcn@latest add https://gsap.pacekit.dev/r/ai-token-counter.json` |
| reveal-text | registry:ui | A smooth text reveals animation where each heading reveals related content on interaction. | `npx shadcn@latest add https://gsap.pacekit.dev/r/reveal-text.json` |
| scramble-text | registry:ui | A hover-triggered text effect that scrambles and restores characters with smooth motion | `npx shadcn@latest add https://gsap.pacekit.dev/r/scramble-text.json` |
| squash-text | registry:ui | Characters bounce and squash into place with playful, dynamic energy. | `npx shadcn@latest add https://gsap.pacekit.dev/r/squash-text.json` |
| bouncing-text | registry:ui | A playful animation where characters bounce in sequence across the text. | `npx shadcn@latest add https://gsap.pacekit.dev/r/bouncing-text.json` |
| draw-line-text | registry:ui | A smooth text effect that draws characters as strokes and fills them in—perfect for headers and highlights. | `npx shadcn@latest add https://gsap.pacekit.dev/r/draw-line-text.json` |
| mouse-wave-text | registry:ui | Creates a wave-like bounce effect on text as the mouse moves across | `npx shadcn@latest add https://gsap.pacekit.dev/r/mouse-wave-text.json` |
| text-fall-button | registry:ui | A button with dynamic text that falls into place with a smooth, elastic motion on hover or click. | `npx shadcn@latest add https://gsap.pacekit.dev/r/text-fall-button.json` |
| spring-button | registry:ui | A button that shrinks on press and springs back with bounce. | `npx shadcn@latest add https://gsap.pacekit.dev/r/spring-button.json` |
| fillable-button | registry:ui | A button that fills with color on hover. | `npx shadcn@latest add https://gsap.pacekit.dev/r/fillable-button.json` |
| swap | registry:ui | A flexible swap component that animates content changes with smooth customizable transition effects. | `npx shadcn@latest add https://gsap.pacekit.dev/r/swap.json` |
| animated-stack | registry:ui | A smooth stacked card component that expands on hover and collapses with animation. | `npx shadcn@latest add https://gsap.pacekit.dev/r/animated-stack.json` |
| layered-stack | registry:ui | An interactive component that dynamically layers elements, creating a visually engaging stacked animation effect. | `npx shadcn@latest add https://gsap.pacekit.dev/r/layered-stack.json` |
| gradient-shadow | registry:ui | Smooth horizontal gradient flow, creating a subtle glowing hover shadow effect. | `npx shadcn@latest add https://gsap.pacekit.dev/r/gradient-shadow.json` |
| github-star-counter | registry:ui | Display live GitHub star count for any public repository | `npx shadcn@latest add https://gsap.pacekit.dev/r/github-star-counter.json` |
| profile-peek | registry:ui | Hover to peek profile with smooth reveal, right from the image. | `npx shadcn@latest add https://gsap.pacekit.dev/r/profile-peek.json` |
| flip-reveal | registry:ui | Animated container that reveals or hides items using GSAP Flip transitions and keys. | `npx shadcn@latest add https://gsap.pacekit.dev/r/flip-reveal.json` |
| reveal-on-scroll | registry:ui | Animate content into view on scroll with effects like fade, slide, zoom, and blur. | `npx shadcn@latest add https://gsap.pacekit.dev/r/reveal-on-scroll.json` |
| stagger-on-scroll | registry:ui | Stagger elements into view with scroll-triggered fade, slide, zoom, or blur effects. | `npx shadcn@latest add https://gsap.pacekit.dev/r/stagger-on-scroll.json` |
| liquid-cursor | registry:ui | A smooth, fluid cursor that follows your mouse with gentle stretch and bounce effects. | `npx shadcn@latest add https://gsap.pacekit.dev/r/liquid-cursor.json` |
| liquid-glass | registry:ui | A smooth glass effect with subtle blur, ideal for UI highlights and overlays. | `npx shadcn@latest add https://gsap.pacekit.dev/r/liquid-glass.json` |
| tilt-card | registry:ui | Interactive 3D tilt card that responds to cursor, adds depth and motion | `npx shadcn@latest add https://gsap.pacekit.dev/r/tilt-card.json` |
| dot-loader | registry:ui | A compact 7x7 dot grid loader with smooth animation to visualize frame sequences or loading states in your app. | `npx shadcn@latest add https://gsap.pacekit.dev/r/dot-loader.json` |
| dot-flow | registry:ui | Visually expressive status updates with animated dots and smooth sliding text transitions. | `npx shadcn@latest add https://gsap.pacekit.dev/r/dot-flow.json` |

## For AI agents

```text
You are adding components from @pacekit-gsap to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/pacekit-gsap.md) for the component list.
2. Fetch the machine-readable index: https://gsap.pacekit.dev/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: pacekit-gsap).
```