Fluid Cursor Code
Custom elastic lagging cursor reticle that snaps, morphs, and hugs button boundaries.
1 2
// Please sign in to view the code.
// Go back to the homepage or click Sign In at the top to login with Google or GitHub.⚙️ Setup & Integration Guide
How to install, import, and configure this animation in your project
Option A: Install via CLI (Recommended)
You can install this component directly into your project via the TweenLabs CLI. It automatically creates the file and configures dependencies:
Option B: Manual Installation
Follow these steps to integrate the component into your project manually:
Install Packages
First, install GSAP and its official React hook helper library (@gsap/react).
Add Required CSS Styles
Copy the styles from the Required CSS tab above, or open the styles.css file that was automatically downloaded with your component. Paste these classes into your global stylesheet (e.g. src/app/globals.css or similar).
Create Component File
Create a new file in your React or Next.js project (e.g. src/components/FluidCursor.tsx) and paste the code from the Standalone React Component tab above. If no standalone tab is available, copy the full page file code and adjust the routing logic for your needs.
Import & Render
Import and render the component in your page or view layout:
import FluidCursor from "@/components/FluidCursor";
export default function Page() {
return (
<main className="min-h-screen p-8 bg-[#f5f5f5] flex items-center justify-center">
<FluidCursor />
</main>
);
}