react-parallax-tilt
A lightweight React component for adding interactive tilt hover effects with zero dependencies.
What is react-parallax-tilt?
React Tilt is a React component library that adds interactive tilt hover effects to UI elements. It creates a 3D-like parallax tilt that responds to mouse movement, touch, and device orientation, enhancing visual engagement. The library solves the need for lightweight, customizable hover animations without external dependencies.
Frontend React developers building interactive UIs, landing pages, product showcases, or portfolio sites that benefit from engaging visual feedback.
Developers choose React Tilt for its zero-dependency, lightweight design (2.9kB) and extensive customization options. It stands out with unique features like glare effects, gyroscope support, and multiple built-in animations, all wrapped in a simple React component API.
Overview
👀 Easily apply tilt hover effect to React components - lightweight/zero dependencies 2.9kB
Use Cases
Best For
- Adding interactive hover effects to product cards in e-commerce sites
- Enhancing portfolio or showcase websites with engaging visual feedback
- Creating dynamic UI elements that respond to device tilt (gyroscope)
- Building landing pages with parallax-like tilt animations
- Implementing custom tilt controls for interactive demos or games
- Adding lightweight visual effects without bloating bundle size
Not Ideal For
- Applications requiring high-performance, frame-perfect animations for gaming or interactive simulations
- Projects needing pre-styled, drop-in UI components without additional CSS integration
- Use cases where reliable gyroscope support is critical, especially on iOS without guaranteed user interaction
Pros & Cons
Pros
At only 2.9kB with zero dependencies and tree-shaking support, it minimizes bundle size, ideal for performance-focused React apps as highlighted in the features.
Supports mouse, touch, and device gyroscope for tilt detection, offering flexibility across devices, with demos showcasing each input method.
Includes a glare effect with adjustable color, position, and opacity, plus built-in effects like scale and flip, providing rich visual customization options.
Offers over 20 props for fine-tuning tilt angles, transitions, and behavior, allowing precise control without bloating the API.
Cons
Device orientation support is experimental, with browser compatibility issues and iOS requiring user interaction for permissions, limiting its reliability for motion-based apps.
Focuses solely on effects, leaving all styling and layout to developers, which can add extra CSS work for integrated designs.
Primarily designed for tilt hover effects, so it lacks versatility for broader UI needs and may require combining with other libraries for complete solutions.
Frequently Asked Questions
Related Projects
lobe-chatThe ultimate space for work and life — to find, build, and collaborate with agent teammates that grow with you. We are taking agent harness to the next level — enabling multi-agent collaboration, effortless agent team design, and introducing agents as the unit of work interaction.
nerd-fontsIconic font aggregator, collection, & patcher. 3,600+ icons, 50+ patched fonts: Hack, Source Code Pro, more. Glyph collections: Font Awesome, Material Design Icons, Octicons, & more
httpie🥧 HTTPie CLI — modern, user-friendly command-line HTTP client for the API era. JSON support, colors, sessions, downloads, plugins & more.
sniffnetComfortably monitor your Internet traffic 🕵️♂️
Found a gem we're missing?
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.