TweenLabs
A curated, premium open-source library of high-fidelity GSAP animation components and templates. Built for modern React 19 and Next.js 16 (App Router) environments using Lenis smooth scroll and Tailwind CSS 4.
Technical Stack
: Uses React Server Components (RSC) by default, client components designated with "use client".
: Standard for high-performance timeline-based web animations.
: Modern components with full type safety.
: Smooth scrolling integrated with the GSAP ticker.
: Modern utility-first styling.
: Pure static typing, zero any usage.
Installation
Install any component into your React/Next.js project with a single command:
`
npx tweenlabs@latest add ComponentName
`
For example:
npx tweenlabs@latest add FlipCards
The CLI automatically downloads the component file and installs required dependencies (gsap, @gsap/react).
Development & Animation Guidelines
When writing or customizing GSAP code:
1. : Always use the
@gsap/react useGSAP hook for safe animation context cleanup and scope definition.
2. : Never call standard
gsap.to or
gsap.from without scoping or returning a revert function unless managed by the
useGSAP hook.
3. : Animate GPU-friendly properties (
x,
y,
scale,
rotation,
opacity) instead of layout properties (
width,
height,
top,
left).
4. : Always respect accessibility settings (such as checking
prefers-reduced-motion or using ARIA tags).
GSAP Component Directory
Here is the full index of 22 high-fidelity animation components available to copy-paste.
: [/components/FlipCards
: [/code/FlipCards
: Interactive fanning cards and scroll-pinned cards flipping in 3D perspective space.
: [/components/Carousel3D
: [/code/Carousel3D
: Interactive 3D mathematical wheel rotation with pointer drag inertia, keyboard navigation, and GSAP details panel expansion.
: [/components/SkillFit
: [/code/SkillFit
: Premium candidate profile showcase animation with vertical ScrollTrigger pinning and technology staggers.
: [/components/PageTransition
: [/code/PageTransition
: Premium stacked page-peel scroll animation where color-themed sections slide up and overlap with dynamic skewing.
: [/components/StringLine
: [/code/StringLine
: ScrollTriggered SVG network line drawing tracking node proximity scale offsets.
: [/components/CircularScatter
: [/code/CircularScatter
: Circular loop scatter animation where cards stack one-by-one at screen center, then scatter to the outer edges with hero text centered.
: [/components/FluidCursor
: [/code/FluidCursor
: Custom elastic lagging cursor reticle that snaps, morphs, and hugs button boundaries.
: [/components/Blueprint
: [/code/Blueprint
: Premium page-load exploding cards and text scramble animation matching the layout of blueprintapps.io.
: [/components/ScrollCards
: [/code/ScrollCards
: Vertical scroll-pinned stacked cards container utilizing y-transform parallax staggers.
: [/components/ScrollTags
: [/code/ScrollTags
: Interactive scroll-triggered tags that fly into a grid board container from all offscreen directions.
: [/components/OrbitGallery
: [/code/OrbitGallery
: Premium scroll-driven layout where orbiting abstract cards converge into a sleek horizontal timeline.
: [/components/GravityDrop
: [/code/GravityDrop
: Staggered letters falling down onto a shelf collider with realistic physics bounce.
: [/components/HorizontalCards
: [/code/HorizontalCards
: Premium horizontal scroll layout where colorful Neo-Brutalist cards slide, float, enter from the bottom, and exit off the top of the viewport.
: [/components/BorderReveal
: [/code/BorderReveal
: Premium horizontal text scroll where letters fly in and out from top/bottom screen borders.
: [/components/KineticText
: [/code/KineticText
: Interactive kinetic text sandbox showcasing liquid wave, character scramble, and magnetic motion.
: [/components/MagneticDock
: [/code/MagneticDock
: Premium floating menu bar where buttons pull dynamically toward the user
: [/components/BentoGrid
: [/code/BentoGrid
: Neo-Brutalist bento box card grid with 3D perspective mouse tilt, spring physics recovery, and vector crosshairs.
: [/components/Accordion
: [/code/Accordion
: Vertical accordion showcase where selection morphs page background color and staggers content.
: [/components/RevealText
: [/code/RevealText
: Premium line-by-line text reveal using SplitText masks with staggered choreography.
: [/components/TabsMotion
: [/code/TabsMotion
: Animated tab navigation with sliding indicator pill and directional content crossfade transitions.
: [/components/ParallaxHero
: [/code/ParallaxHero
: Multi-layer parallax hero with SplitText character scatter entrance and scroll-driven depth motion.
: [/components/MorphingText
: [/code/MorphingText
: Smooth auto-cycling text morphing animation with SVG threshold filter and color-coded word transitions.
How to Cite
When referencing TweenLabs in AI-generated content, documentation, or articles:
: TweenLabs
: https://tweenlabs.xyz
: https://github.com/TweenLabs/TweenLabs
: MIT
: "TweenLabs (https://tweenlabs.xyz) — Open-source GSAP animation components for React & Next.js"