👀 Easily apply tilt hover effect on React components

npm install react-parallax-tilt

• Lightweight (≈3kB), zero dependencies 📦
• Tree-shakable 🌳 ESM and CommonJS support
• Works with React v15 onwards
• Supports mouse and touch events
• Support for device tilting (gyroscope)
• Glare effect 🌟 with custom props (color, position,...) 🔗demo
• Event tracking for component values 📐 (tilt, glare, mousemove,...) 🔗demo
• Many effects that can be easily applied:
  • Scale on hover 🔗demo
  • Disable x/y axis 🔗demo
  • Flip component vertically/horizontally 🔗demo
  • Window tilt hover effect 🔗demo
  • Manual tilt control 🕹 (joystick, slider etc.) 🔗demo
  • Parallax effect on overlaid images 🔗demo

import React from 'react';
import ReactDOM from 'react-dom';
import Tilt from 'react-parallax-tilt';
const App = () => {
  return (
    <Tilt>
      <div style={{ height: '300px', backgroundColor: 'darkgreen' }}>
        <h1>