--- name: "@paceui-gsap" slug: "paceui-gsap" description: "Animated GSAP components crafted for smooth interaction and rich detail." category: "Animated components" tags: ["ai", "animation", "backgrounds", "buttons", "cards", "forms", "glassmorphism", "hooks", "loaders", "media", "overlays", "pro-available", "text-effects"] framework: "react" license: null author: "paceui" website: "https://gsap.paceui.com" github: "https://github.com/paceui/community" registry: "https://gsap.paceui.com/r/registry.json" pro: true pro_url: "https://gsap.paceui.com/pricing" github_stars: 11 component_count: 29 generated_at: "2026-09-05T09:50:59.044Z" --- # @paceui-gsap Animated GSAP components crafted for smooth interaction and rich detail. ## Links - Website: https://gsap.paceui.com - GitHub: https://github.com/paceui/community - Registry JSON: https://gsap.paceui.com/r/registry.json - Directory page: https://sh4dcn.vercel.app/registry/paceui-gsap - This file: https://sh4dcn.vercel.app/md/paceui-gsap.md - Pro / pricing: https://gsap.paceui.com/pricing ## Install ```sh # add the whole registry (shadcn CLI) npx shadcn@latest add https://gsap.paceui.com/r/registry.json pnpm dlx shadcn@latest add https://gsap.paceui.com/r/registry.json bunx shadcn@latest add https://gsap.paceui.com/r/registry.json # clone the source repo git clone https://github.com/paceui/community.git # fetch the raw registry index curl -s https://gsap.paceui.com/r/registry.json ``` ## Components (29) | name | type | description | install | | --- | --- | --- | --- | | index | registry:style | — | `npx shadcn@latest add https://gsap.paceui.com/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.paceui.com/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.paceui.com/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.paceui.com/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.paceui.com/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.paceui.com/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.paceui.com/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.paceui.com/r/scramble-text.json` | | squash-text | registry:ui | Characters bounce and squash into place with playful, dynamic energy. | `npx shadcn@latest add https://gsap.paceui.com/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.paceui.com/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.paceui.com/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.paceui.com/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.paceui.com/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.paceui.com/r/spring-button.json` | | fillable-button | registry:ui | A button that fills with color on hover. | `npx shadcn@latest add https://gsap.paceui.com/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.paceui.com/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.paceui.com/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.paceui.com/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.paceui.com/r/gradient-shadow.json` | | github-star-counter | registry:ui | Display live GitHub star count for any public repository | `npx shadcn@latest add https://gsap.paceui.com/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.paceui.com/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.paceui.com/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.paceui.com/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.paceui.com/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.paceui.com/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.paceui.com/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.paceui.com/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.paceui.com/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.paceui.com/r/dot-flow.json` | ## For AI agents ```text You are adding components from @paceui-gsap to a shadcn-compatible project. 1. Read this file (https://sh4dcn.vercel.app/md/paceui-gsap.md) for the component list. 2. Fetch the machine-readable index: https://gsap.paceui.com/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: paceui-gsap). ```