
Security News
Vite Releases Technical Preview of Rolldown-Vite, a Rust-Based Bundler
Vite releases Rolldown-Vite, a Rust-based bundler preview offering faster builds and lower memory usage as a drop-in replacement for Vite.
react-parallax-tilt
Advanced tools
Easily apply tilt hover effect on React components - lightweight/zero dependencies
👀 Easily apply tilt hover effects to React components
npm install react-parallax-tilt
import Tilt from 'react-parallax-tilt';
const App = () => {
return (
<Tilt>
<div style={{ height: '300px', backgroundColor: 'darkgreen' }}>
<h1>React Parallax Tilt 👀</h1>
</div>
</Tilt>
);
};
All props are optional.
Here's the complete list of available props and their default values:
▶︎ indicates the default value
tiltEnable: boolean ▶︎ true
Enables/disables the tilt effect.
tiltReverse: boolean ▶︎ false
Reverses the tilt direction.
tiltAngleXInitial: number ▶︎ 0
Initial tilt angle (in degrees) on the x-axis.
tiltAngleYInitial: number ▶︎ 0
Initial tilt angle (in degrees) on the y-axis.
tiltMaxAngleX: number ▶︎ 20
Maximum tilt rotation (in degrees) on the x-axis. Range: 0°-90°
.
tiltMaxAngleY: number ▶︎ 20
Maximum tilt rotation (in degrees) on the y-axis. Range: 0°-90°
.
tiltAxis: 'x' | 'y' ▶︎ undefined
Enables tilt on a single axis only.
tiltAngleXManual: number | null ▶︎ null
Manual tilt rotation (in degrees) on the x-axis.
tiltAngleYManual: number | null ▶︎ null
Manual tilt rotation (in degrees) on the y-axis.
glareEnable: boolean ▶︎ false
Enables/disables the glare effect.
glareMaxOpacity: number ▶︎ 0.7
Maximum glare opacity (0.5 = 50%, 1 = 100%
). Range: 0-1
glareColor: string ▶︎ #ffffff
Sets the color of the glare effect.
glarePosition: 'top' | 'right' | 'bottom' | 'left' | 'all' ▶︎ bottom
Sets the position of the glare effect.
glareReverse: boolean ▶︎ false
Reverses the glare direction.
glareBorderRadius: string ▶︎ 0
Sets the border radius of the glare. Accepts any standard CSS border radius value.
scale: number ▶︎ 1
Scale of the component (1.5 = 150%, 2 = 200%
).
perspective: number ▶︎ 1000
Defines how far the tilt component appears from the user. Lower values create more extreme tilt effects.
flipVertically: boolean ▶︎ false
Enables/disables vertical flipping of the component.
flipHorizontally: boolean ▶︎ false
Enables/disables horizontal flipping of the component.
reset: boolean ▶︎ true
Determines if effects should reset on onLeave
event.
transitionEasing: string ▶︎ cubic-bezier(.03,.98,.52,.99)
Easing function for the transition.
transitionSpeed: number ▶︎ 400
Speed of the transition.
trackOnWindow: boolean ▶︎ false
Tracks mouse and touch events across the entire window.
gyroscope: boolean ▶︎ false
Enables/disables device orientation detection.
onMove: ({ tiltAngleX: number, tiltAngleY: number, tiltAngleXPercentage: number, tiltAngleYPercentage: number, glareAngle: number, glareOpacity: number, event: Event }) => void
Callback triggered when user moves on the component.
onEnter: (event: Event) => void
Callback triggered when user enters the component.
onLeave: (event: Event) => void
Callback triggered when user leaves the component.
Please note that device orientation detection is currently experimental technology.
Check the browser compatibility before using it in production.
Important considerations when using device orientation:
https
)<iframe>
elementApple disabled device motion and orientation by default starting with iOS 12.2.
iOS 13+ provides a permission API to access device orientation events.
When using the gyroscope feature:
<Tilt gyroscope={true}>
<h1>React Parallax Tilt 👀</h1>
</Tilt>
A permission dialog will prompt the user to allow motion and orientation access at the domain level:
Note: User interaction (like tapping a button) is required to display the permission dialog - it cannot be triggered automatically on page load.
Easily set up a local development environment!
Build project and start storybook on localhost:
npm install
npm start
Start coding! 🎉
Clone this repository and navigate to its location
Run the following commands:
npm install
npm link # link your local repo to your global packages
npm run build:watch # build the files and watch for changes
Clone the project you want to test with react-parallax-tilt and run:
npm install
npm link react-parallax-tilt # link your local copy into this project's node_modules
npm start
All contributions are welcome!
Please review contribution guidelines: Pull Requests | Issues
FAQs
Easily apply tilt hover effect on React components - lightweight/zero dependencies
The npm package react-parallax-tilt receives a total of 22,933 weekly downloads. As such, react-parallax-tilt popularity was classified as popular.
We found that react-parallax-tilt demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Vite releases Rolldown-Vite, a Rust-based bundler preview offering faster builds and lower memory usage as a drop-in replacement for Vite.
Research
Security News
A malicious npm typosquat uses remote commands to silently delete entire project directories after a single mistyped install.
Research
Security News
Malicious PyPI package semantic-types steals Solana private keys via transitive dependency installs using monkey patching and blockchain exfiltration.