micku7zu/vanilla-tilt.js
Vanilla Tilt.js
vanilla-tilt.js is a JavaScript 3D tilt library used to animate web elements in 3D space. It functions as an interactive UI animation tool that drives element rotation and scale effects based on mouse movement or mobile device orientation.
The library distinguishes itself through the simulation of physical surfaces, utilizing a dynamic light glare effect to create glossy reflections that shift with the cursor. It also includes a parallax depth system that offsets inner elements relative to a parent container to simulate physical layering and three-dimensional space.
The toolkit covers a broad range of interaction and animation capabilities, including gyroscope-based rotation for mobile devices, configurable tilt behaviors, and rotation state monitoring. It provides custom callbacks and events that emit current rotation degrees and percentages to external listeners.
Features
- Interactive 3D UI Elements - Adds 3D rotation and movement to web elements to make them react to user mouse movements.
- Sensor-Based Rotations - Rotates components based on the physical orientation of a mobile device using device orientation sensors.
- Input-to-Rotation Mapping - Calculates 3D rotation angles by mapping cursor coordinates relative to the element center.
- JavaScript Animation Libraries - Provides a lightweight JavaScript library for implementing smooth 3D tilt and rotation animations.
- Surface Glare Effects - Simulates physical surface reflections with a dynamic light glare that shifts based on cursor position.
- Parallax Layering Offsets - Creates a sense of physical depth by offsetting inner elements relative to the parent container's movement.
- Mobile Motion Effects - Creates visual effects on mobile devices that shift based on the physical orientation of the phone.
- 3D Perspective Transforms - Implements 3D perspective and rotation on elements using CSS transforms to create a tilt effect.
- 3D Transform Animations - Animates elements in 3D space by adjusting CSS rotation axes based on mouse movement.
- Gyroscope-Driven Interfaces - Allows web elements to react to the physical tilt and rotation of a mobile device.
- Device Orientation Controllers - Processes gyroscope sensor data to tilt web elements according to the physical angle of a mobile device.
- Animated UI Components - Provides a toolset for adding depth and movement to web components through rotation and scale effects.
- Glossy Surface Reflections - Simulates surface reflections by shifting a semi-transparent glare overlay based on tilt and mouse position.
- UI Gloss Simulations - Adds a glossy light reflection to elements that shifts realistically as the object tilts.
- Glare Effects - Simulates glossy physical surfaces by reflecting light based on cursor position using a visual overlay.
- Parallax Effects - Layers elements within a container to create a sense of three dimensional space and physical depth.
