DEV Community

jQueryScript
jQueryScript

Posted on

tiltEffect - Pure JavaScript 3D Card Tilt Animation Library

tiltEffect: Pure JavaScript library for 3D perspective card animations with mouse tracking

Key features:

⚡ Vanilla JavaScript with zero dependencies

🎨 Dynamic shine and shadow effects based on cursor position

⚙️ Configurable via HTML data attributes or JS objects

🚀 Hardware-accelerated transforms for 60fps performance

📱 Auto-updates on window resize

🎯 Clean API with updateElementPosition(), reset(), and destroy() methods

🔄 Custom tiltChange events for synchronized animations

Perfect for interactive product cards, portfolio projects, or teaching students web animation fundamentals. The entire implementation spans 200 lines with clear documentation.

👉 Blog Post

👉 GitHub Repo

👉 Live Demo

Top comments (0)