Documentation
GSAP animations with shadcn-simple APIs.
Getting started
- Installation
Use the shadcn CLI to copy components into your project, or install the npm package.
- Agent skill
Install the void skill for Cursor and other agents so they know GSAP, MotionProvider, presets, and @void registry workflows.
API
- Animate
Universal wrapper with preset, trigger, and asChild support.
- data-animate
Zero-config attributes — MotionProvider auto-detects and animates.
- Animation presets
50+ built-in presets for Animate, FadeIn, StaggerGroup, RevealOnScroll, and data-animate.
Scroll
- FadeIn
Fade in on mount or scroll.
- SlideIn
Slide in from a direction.
- StaggerGroup
Stagger children with a shared preset.
- RevealOnScroll
Reveal when element enters the viewport.
- PolygonClipReveal
Polygon clip-path reveal on scroll. Source: PointC — https://codepen.io/PointC/pen/XWgdmro
- CircleRevealScrub
Circular clip-path reveal scrubbed to scroll. Source: njonj0 — https://codepen.io/njonj0/pen/wvyJRea
- ScrollProgressBar
Fixed reading progress bar (scaleX). Source: GSAP Vault FREE — https://gsapvault.com/effects/scroll-progress
- StaggerScrollBatch
ScrollTrigger.batch stagger on enter/leave. Source: GSAP docs — https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.batch()
- ParallaxScroll
Y parallax scrubbed to scroll. Source: https://gsap.com/docs/v3/Plugins/ScrollTrigger/
- ScaleOnScroll
Scale + fade scrub. Source: https://demos.gsap.com/demo/stagger-items-in-on-scroll/
- InsetRevealScrub
Inset clip-path scrub. Source: https://codepen.io/GreenSock/pen/KKrpmap
- ScrollCounter
Scroll % counter (quickTo). Source: https://gsapvault.com/effects/scroll-progress
- RotateOnScroll
Rotation scrub while scrolling.
- HorizontalScrub
Pinned horizontal track scrub. Source: https://gsap.com/docs/v3/Plugins/ScrollTrigger/
Text
- TextReveal
Reveal text by word, character, or line.
- BlurInText
Text fades in from blur.
- TypewriterText
Typewriter effect with optional cursor.
- TextGradientSweep
Animated gradient sweep across text.
- TextScramble
Cipher-style decode — characters scramble into the final text.
- TextWaveReveal
Elastic wave reveal from center with rotation.
- TextGlitch
Digital glitch bursts with RGB chromatic offset.
- TextSplitBlur
Split text reveal with blur and scale (GSAP Vault–style).
Card
- GlowCard
Lami-style conic gradient glow on selection (ported from Lami theme cards).
Background
- AuroraBackground
Soft aurora blobs with slow motion.
- BeamBackground
Vertical light beams (Aceternity-style).
- GridFadeBackground
Grid pattern with center fade mask.