I Built a 8.7KB React Animation Library (120+ FPS) on top of GSAP

Yousef Zedan — Tue, 12 May 2026 11:14:16 +0000

After weeks of development, I'm excited to share ZProximity Engine - a React library for creating proximity-based animations.

🎯 The Problem

Creating magnetic cursors, hover effects, and scroll animations in React usually requires:

Manual event listeners
Complex trigonometry
Performance optimization headaches

✨ The Solution

ZProximity Engine abstracts all of this into a simple API:

import { Proximity } from 'z-proximity-engine';

<Proximity preset="scale-magnetic" reach={2}>
  <div className="prox-item">Hover me!</div>
</Proximity>

🏗️ Technical Highlights

1. Zero Re-renders

Uses GSAP's ticker system instead of React's render cycle.

2. Smart Batching

Pre-caches quickTo functions on mount - no property lookups per frame.

3. Spatial Grid

150px spatial hash grid - only checks nearby elements, not all 100+.

4. Minimal Bundle

Tree-shakeable, only 8KB core.

🎮 Interactive Demo

Try it live: https://z-proximity-engine.vercel.app/

🚀 Get Started

npm install z-proximity-engine gsap @gsap/react

Full docs: https://z-proximity-engine.vercel.app/#implementation

🤝 What's Next?

I'd love your feedback! What features would you add?

GitHub: https://github.com/YoussefZidan-1/ZProximityEngine

If you found this useful, please ⭐ star the repo!

DEV Community: Yousef Zedan