React Tilt: a 2.9kB tilt hover effect for React components

Two and a half kilobytes, no dependencies

React Tilt is described as easily applying tilt hover effects to React components, and the constraints it advertises are the selling point. It is lightweight at 2.9kB, it has zero dependencies, it is tree-shakable, and it supports both ES modules and CommonJS. It also works with React v15 onwards, which is a slightly surprising claim for a component library in 2026 and tells you that the component is written to survive React's rendering model changes rather than to depend on a recent hook. The installation is a single line:

npm install react-parallax-tilt

The usage is deliberately small, a Tilt component wrapped around whatever you want to tilt:

import Tilt from 'react-parallax-tilt';

const App = () => {
  return (
    <Tilt>
      <div style={{ height: '300px', backgroundColor: 'darkgreen' }}>
        <h1>React Parallax Tilt</h1>
      </div>
    </Tilt>
  );
};

There is no configuration required to get the effect, which is the design choice that makes it different from the transform libraries. The component ships with a live demo and a storybook of individual effects, and the effect people usually want is on by default.

The prop surface, and the defaults that do the work

Every prop is optional, and the readme lists them all with their default values, which is the documentation style that makes a component easy to adopt. The tilt itself is enabled by default, with tiltEnable defaulting to true and tiltReverse to false. The rotation is capped at 20 degrees on each axis by default, and the range for tiltMaxAngleX and tiltMaxAngleY is 0 to 90 degrees, so the default is deliberately restrained. There is a tiltAxis prop that restricts the effect to a single axis, and manual tilt angles for the x and y axes, both null by default, which is how the joystick and slider control mode works. The perspective prop defaults to 1000 and defines how far the component appears from the user, with lower values creating more extreme effects, and scale defaults to 1, so 1.5 means 150 percent. The transition is configurable too, with transitionSpeed at 400 and a transitionEasing of cubic-bezier(.03,.98,.52,.99) by default, and the reset prop, true by default, decides whether the effects reset on the onLeave event. trackOnWindow, false by default, extends the tracking of mouse and touch events across the entire window rather than the component.

Glare, parallax, scale, flip and the built-in effects

Several effects ship in the box, and they are the reason the prop list is long. The glare effect is off by default and turns on with glareEnable, with a maximum opacity of 0.7 where 0.5 means 50 percent and 1 means 100 percent, a colour of white, a position of bottom by default with top, right, left and all also available, a reverse option, and a glareBorderRadius that accepts any standard CSS border radius value. Then there is the scale on hover effect, the ability to disable one axis, the flip of the component vertically or horizontally, the window tilt hover effect that tracks across the whole window, the manual tilt control through a joystick or a slider, and the parallax effect for overlaid images, which is the one that makes the component more than a transform. The readme links each one to its own story in the demo, so you can see the effect before you write the prop. A card with a picture on top of a background is the case where the parallax mode earns its place, and a card that just scales up is the case where the whole thing is one prop.

Reading the values back out

The component is not a black box, and there are three callbacks for that. The onMove callback is triggered when the user moves on the component, and it receives the tilt angle on the x and y axes, the tilt angle percentages for each axis, the glare angle, the glare opacity and the event itself. The onEnter and onLeave callbacks fire when the user enters and leaves, each receiving the event. The percentages are the useful ones for a designer who wants the effect to track the pointer rather than to snap to a fixed number of degrees, and the glare angle and opacity let a custom implementation draw a highlight that matches the built-in one. The event tracking is listed in the readme as a feature in its own right, with the values tracked covering tilt, glare and mousemove, and the demo has a story for it. If you need to drive something else from the pointer, the callbacks are the extension point.

The gyroscope path is experimental, and the caveats are specific

Device tilting is the feature to be careful with, and the readme is unusually clear about why. Device orientation detection is currently experimental technology, and the instruction is to check the browser compatibility before using it in production. The first requirement is that you always use secure origins, such as https, because that is a platform requirement rather than a library preference. The second is that it may not work in all browsers when used within a cross-origin iframe element, which is the case that breaks a widget embedded on someone else's site. On iOS the story is longer. Apple disabled device motion and orientation by default starting with iOS 12.2, and iOS 13 and later provide a permission API for accessing device orientation events. When you enable the gyroscope feature, a permission dialog prompts the user to allow motion and orientation access at the domain level, and user interaction is required to display that dialog, since it cannot be triggered automatically on page load. In other words, the gyroscope mode needs a gesture to start, which is a design constraint rather than a bug.

Two builds, one source, and a release every few days

The packaging shows a project that takes distribution seriously. The package is an ES module with a sideEffects flag set to false, which is what makes tree-shaking work, and the exports map publishes two builds. The modern entry serves the import and require conditions with their own type declarations, while the legacy entry points at separate type, module and CommonJS files, so a project that has not finished its move to modern bundlers is not left behind. The files array ships only the dist directory and the readme, which keeps the package small. Releases are cut by semantic-release from the main branch, and the version in the source file is left at 0.0.0 because the tool replaces it at publish time. The release history shows the consequence, v1.7.347 on 2026-10-15, v1.7.346 on 2026-10-04 and v1.7.345 on 2026-09-25, which is a high cadence of patch releases for a component library, driven by the dependency and build updates that semantic-release turns into versions. The licence is MIT and the last push was on 2026-10-19.

The development setup, and what the props do not cover

Working on the component is a small setup. You clone the repository, run npm install and npm start, and Storybook comes up on port 9009, with a story for each effect and a demo of the glare effect. The alternative documented setup uses npm link to link the package into another project so you can see your changes in a real application. The tooling around it is thorough. The test scripts cover a watching unit run with Vitest, a coverage report, an end to end run with Playwright and a UI mode for both, ESLint runs with the report of unused disable directives and a maximum of zero warnings, Prettier handles formatting, Knip finds unused code, and husky with commitlint and a commitizen config enforces the commit message format. The one gap a consumer should note is in the props themselves. The documented list covers tilt, glare, scale, perspective, transitions, axis, flips and the callbacks, and it does not include a reduced-motion option, so a product that has to respect a user's motion preference has to switch the effect off rather than soften it, using tiltEnable false and glareEnable false.

Editorial conclusion

React Tilt is worth adding if you want a card that responds to the pointer and you would rather not write the transform maths yourself, since the prop surface is small, the defaults are sensible and the package costs nothing in bundle size beyond two and a half kilobytes. It is the wrong choice if you need a reduced-motion variant, because the documented props do not include one, and it is the wrong choice for the device-tilt effect on anything but a secure origin in a modern browser. Before you ship the gyroscope version, check the compatibility notes and remember that the permission prompt cannot appear without a user gesture.

Frequently asked questions

Official sources

1. License: MIT
2. mkosir/react-parallax-tilt on GitHub
3. Project website
4. README
5. Releases