Animated UI Component Library With Framer Motion and Three.js – MeetUI

MeetUI is an animated UI component library built on Next.js 15+ (App Route), Tailwind CSS v4, React Three Fiber, and Framer Motion.

Each component lands in your project as editable source code. You own every file and can modify styling, animation timing, and layout at will.

Features

Use Cases

• Marketing Sites: Add scroll-triggered text animations and magnetic cursor effects to landing pages.
• Portfolio Showcases: Use the staggered testimonials and hover galleries to display work samples.
• Interactive Dashboards: Implement animated counters and glow cards for metric displays.
• Experimental Projects: Combine the orbit ecosystem with 3D elements for creative coding experiments.

How to Use It

1. Install core dependencies. You can swap npm for yarn, pnpm, or bun based on your preference.

npm install framer-motion clsx tailwind-merge lucide-react

2. Components that use Three.js rendering, such as fluid toggles or particle-based effects, need additional packages:

npm install @react-three/fiber @react-three/drei three

3. Browse the MeetUI component library and copy the source code for the component you want. Paste the file into your src/components/ui/ directory. For example, if you copy the GlowCard component, the file would go here:

src/
└── components/
    └── ui/
        └── glow-card.tsx

4. Once the file is in place, import it directly from your components path:

import { GlowCard } from "@/components/ui/glow-card"
export default function HomePage() {
  return (
    <main>
      <GlowCard>
        <h2>Project Title</h2>
        <p>Short description of this project.</p>
      </GlowCard>
    </main>
  )
}

5. MeetUI reads color and typography tokens from your globals.css. Open that file and add your @theme block:

@theme {
  --color-primary: oklch(0.637 0.237 311);
  --color-secondary: oklch(0.541 0.281 293);
  --color-accent: oklch(0.685 0.169 237);
  --font-heading: "Inter", sans-serif;
  --font-mono: "JetBrains Mono", monospace;
}

Change any token value and every component that references it updates automatically. You can define as many tokens as your design system needs.

Components Included

Text Animations

UI Components

Mouse Interactions

Buttons

Related Resources

• Framer Motion: The animation library that backs MeetUI’s motion effects,.
• React Three Fiber: The React renderer for Three.js used by MeetUI’s 3D components.

FAQs

Q: Do I need the full project repository to use MeetUI components?
A: No. You copy individual component files from the MeetUI site and paste them into your own project.

Q: Can I use MeetUI components in an existing Next.js project?
A: Yes. Copy the component file into your src/components/ui/ directory, install any listed peer dependencies, and import the component wherever you need it.

Q: What if I only need standard React without Next.js?
A: MeetUI components are React files. They work in any React setup as long as you install Framer Motion and the other required packages.

Q: How do I add a new component to the registry?
A: The docs/ADDING_COMPONENTS.md file in the repository covers this process. The registry stores component metadata and code strings inside src/lib/components-data/.