The animation library that gets out of your way.

   

---

The problem

// ❌ before — every project, every time
const ref = useRef(null);
const [visible, setVisible] = useState(false);
const [animated, setAnimated] = useState(false);

useEffect(() => {
  const observer = new IntersectionObserver(([entry]) => {
    if (entry.isIntersecting && !animated) {
      setVisible(true);
      setAnimated(true);
    }
  });
  if (ref.current) observer.observe(ref.current);
  return () => observer.disconnect();
  // ... 40 more lines of keyframe misery
}, [animated]);

// ✅ with Oi Orbuz — drop it in, move on
import { BlurText } from "@oi-orbuz/BlurText-TS-TW";

<BlurText text="Ship faster." delay={150} />

---

What's inside

110+ components across 4 categories. Every one production-tested, documented, and ready to own.

	Category	What you get
💬	Text Motion	Blur, split, wave, typewriter, scramble, and 30+ more. Each a drop-in.
🌀	Dynamic FX	Particle fields, magnetic hover, gravity pulls, ripple clicks. Real physics.
🧩	Smart UI	Animated buttons, cards, modals, loaders. Alive out of the box.
🖼️	Backgrounds	Aurora, mesh gradient, noise canvas, grid pulse. Set it and forget it.

---

Every component ships in 4 variants

╔══════════════════════════════════════════════════════════╗
║                                                          ║
║    JS  ──────────────────────────────────  TS            ║
║    │                                        │            ║
║    ├── JS-CSS   ←  plain CSS                │            ║
║    └── JS-TW    ←  tailwind                 │            ║
║                                             ├── TS-CSS   ║
║                                             └── TS-TW    ║
║                                                          ║
║    Pick your stack. Every component. No compromises.     ║
╚══════════════════════════════════════════════════════════╝

---

Installation

Works with shadcn and jsrepo. One command per component.

# pick a component, pick a variant
npx shadcn@latest add @oi-orbuz/Antigravity-TS-TW
npx shadcn@latest add @oi-orbuz/BlurText-JS-CSS
npx shadcn@latest add @oi-orbuz/MagneticButton-TS-TW

Prefer copy-paste? Every component has a Copy Source button on the docs. No install needed.

---

Pro Tools

Stop building one-off solutions. Use ours.

Tool	What it does
🎨 Background Studio	Visual editor for animated backgrounds. Tweak physics, export as React component or video.
✦ Shape Magic	Organic SVG shape generator with inner rounded corners. Drag sliders, copy the path.
🔬 Texture Lab	Noise, Dithering, and ASCII filters on any image. Instant aesthetic, zero Figma.

→ Open the tools

---

By the numbers

---

Contributing

This is open source. The whole thing. If you see something that could be better — it probably can be.

git clone https://github.com/Shuvo-code-dev/Oi-Orbuz.git
cd Oi-Orbuz && npm install && npm run dev

• 🐛 Bug? → Open an issue
• 💡 Idea? → Start a discussion
• 🔧 New component? → Read CONTRIBUTING.md, then open a PR

---

People building with it

---

Repo analytics

---

_{Built by Shuvo  ·  GPL-3.0  ·  oi-orbuz.vercel.app}

_{If this saved you time — drop a ★}