Gathering detailed insights and metrics for react-parallax-tilt
Gathering detailed insights and metrics for react-parallax-tilt
👀 Easily apply tilt hover effect to React components - lightweight/zero dependencies 3kB
Installations
npm install react-parallax-tiltDeveloper Guide
BETA
Typescript
Yes
Module System
ESM
Node Version
24.0.0
NPM Version
10.9.2
Score
91
Supply Chain
92.8
Quality
95.3
Maintenance
100
Vulnerability
100
License
Releases
487
Languages
3
TypeScript
CSS
JavaScript
TypeScript (88.91%)
CSS (7.12%)
JavaScript (3.97%)
Developer
Download Statistics
Total Downloads
3,327,228
Last Day
1,414
Last Week
28,745
Last Month
115,213
Last Year
1,290,502
GitHub Statistics
MIT License
1,013 Stars
2,397 Commits
123 Forks
20 Watchers
4 Branches
15 Contributors
Updated on May 11, 2025
Bundle Size
10.25 kB
Minified
2.97 kB
Minified + Gzipped
Maintainers
1
Package Meta Information
Latest Version
1.7.295
Package Id
react-parallax-tilt@1.7.295
Unpacked Size
70.58 kB
Size
10.86 kB
File Count
10
NPM Version
10.9.2
Node Version
24.0.0
Published on
May 07, 2025
Total Downloads
Cumulative downloads
Total Downloads
3,327,228
Last Day
-34.7%
1,414
Compared to previous day
Last Week
9.5%
28,745
Compared to previous week
Last Month
-12.2%
115,213
Compared to previous month
Last Year
11.1%
1,290,502
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dev Dependencies
54
@commitlint/cli@commitlint/config-conventional@eslint/js@playwright/test@rollup/plugin-commonjs@rollup/plugin-terser@rollup/plugin-typescript@storybook/addon-webpack5-compiler-swc@storybook/manager-api@storybook/react@storybook/react-webpack5@storybook/theming@testing-library/dom@testing-library/jest-dom@testing-library/react@testing-library/user-event@types/eslint@types/node@types/react@types/react-dom@vitest/coverage-v8@vitest/eslint-plugin@vitest/uicommitizendemozapeslinteslint-config-prettiereslint-import-resolver-typescripteslint-plugin-import-xeslint-plugin-jest-domeslint-plugin-jsx-a11yeslint-plugin-no-array-reduceeslint-plugin-playwrighteslint-plugin-prettiereslint-plugin-reacteslint-plugin-react-hookseslint-plugin-testing-libraryhuskyjsdomkniplint-stagedprettierreactreact-demo-tabreact-domreact-joystick-componentrolluprollup-plugin-dtssemantic-releasestorybooktypescripttypescript-eslintvite-tsconfig-pathsvitest
React Tilt
👀 Easily apply tilt hover effects to React components
Live Demo 💥
Install
1npm install react-parallax-tilt
Features
- 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, etc.) 🔗demo
- Event tracking for component values 📐 (tilt, glare, mousemove, etc.) 🔗demo
- Multiple built-in effects:
Example
1import Tilt from 'react-parallax-tilt'; 2 3const App = () => { 4 return ( 5 <Tilt> 6 <div style={{ height: '300px', backgroundColor: 'darkgreen' }}> 7 <h1>React Parallax Tilt 👀</h1> 8 </div> 9 </Tilt> 10 ); 11};
Props
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.
Gyroscope - Device Orientation
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:
- Always use secure origins (such as
https) - It may not work in all browsers when used within a cross-origin
<iframe>element
Device Orientation on iOS 13+
Apple 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:
1<Tilt gyroscope={true}> 2 <h1>React Parallax Tilt 👀</h1> 3</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.
Development
Easily set up a local development environment!
Build project and start storybook on localhost:
- clone
npm installnpm start
Start coding! 🎉
Alternative setup using npm link
-
Clone this repository and navigate to its location
-
Run the following commands:
1npm install 2npm link # link your local repo to your global packages 3npm run build:watch # build the files and watch for changes -
Clone the project you want to test with react-parallax-tilt and run:
1npm install 2npm link react-parallax-tilt # link your local copy into this project's node_modules 3npm start
Contributing
All contributions are welcome!
Please review contribution guidelines: Pull Requests | Issues
No vulnerabilities found.
Reason
30 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 10
Reason
no dangerous workflow patterns detected
Reason
no binaries found in the repo
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
1 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-x7hr-w5r2-h6wg
Reason
Found 2/28 approved changesets -- score normalized to 0
Reason
detected GitHub workflow tokens with excessive permissions
Details
- Warn: no topLevel permission defined: .github/workflows/build.yml:1
- Warn: no topLevel permission defined: .github/workflows/deploy-storybook.yml:1
- Warn: no topLevel permission defined: .github/workflows/lint.yml:1
- Warn: no topLevel permission defined: .github/workflows/npm-release.yml:1
- Warn: no topLevel permission defined: .github/workflows/test-e2e.yml:1
- Warn: no topLevel permission defined: .github/workflows/test.yml:1
- Warn: no topLevel permission defined: .github/workflows/tsc.yml:1
- Info: no jobLevel write permissions found
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build.yml:11: update your workflow using https://app.stepsecurity.io/secureworkflow/mkosir/react-parallax-tilt/build.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/deploy-storybook.yml:23: update your workflow using https://app.stepsecurity.io/secureworkflow/mkosir/react-parallax-tilt/deploy-storybook.yml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/deploy-storybook.yml:32: update your workflow using https://app.stepsecurity.io/secureworkflow/mkosir/react-parallax-tilt/deploy-storybook.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/lint.yml:11: update your workflow using https://app.stepsecurity.io/secureworkflow/mkosir/react-parallax-tilt/lint.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/npm-release.yml:18: update your workflow using https://app.stepsecurity.io/secureworkflow/mkosir/react-parallax-tilt/npm-release.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test-e2e.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/mkosir/react-parallax-tilt/test-e2e.yml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/test-e2e.yml:27: update your workflow using https://app.stepsecurity.io/secureworkflow/mkosir/react-parallax-tilt/test-e2e.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/mkosir/react-parallax-tilt/test.yml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/test.yml:23: update your workflow using https://app.stepsecurity.io/secureworkflow/mkosir/react-parallax-tilt/test.yml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/test.yml:32: update your workflow using https://app.stepsecurity.io/secureworkflow/mkosir/react-parallax-tilt/test.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/tsc.yml:11: update your workflow using https://app.stepsecurity.io/secureworkflow/mkosir/react-parallax-tilt/tsc.yml/main?enable=pin
- Info: 0 out of 7 GitHub-owned GitHubAction dependencies pinned
- Info: 0 out of 4 third-party GitHubAction dependencies pinned
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 4 are checked with a SAST tool
Score
4.7
/10
Last Scanned on 2025-05-05
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More