1.7.286 • Published 4 months ago

react-parallax-tilt v1.7.286

Weekly downloads
3,087
License
MIT
Repository
github
Last release
4 months ago

React Tilt

npm version npm downloads npm bundle size Open issues TypeScript semantic-release

CI CI CI CI CI Codecov Coverage

CI CI

👀 Easily apply tilt hover effects to React components

npm.io

Live Demo 💥

Install

npm 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

import Tilt from 'react-parallax-tilt';

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

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

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:

<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:
npm.io

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 install
  • npm start

Start coding! 🎉

  1. Clone this repository and navigate to its location

  2. 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

  3. 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

Contributing

All contributions are welcome!
Please review contribution guidelines: Pull Requests | Issues

reactreact-componentreact-tiltreact-parallax-tiltparallaxtiltglaretransformrotatescaleflipeffectcomponentgyroscopesensormirror
rework_feanaro_toolboxpackfronthelpfeanaro_react@infinitebrahmanuniverse/nolb-react-pa@everything-registry/sub-chunk-2602@clutch-marketplace/react-parallax-tilt3d_portfolio@leuven2030/ui@plasmicpkgs/react-parallax-tilt@opfp/frontend@sentrei/ui@sendoutcards/quantum-design-uiparisreact-image-hovercardreact-holo-card-effectnextly-templateportfoliorginboxporfolioreact-portfolio-defsolana-landing-page@yudimuliawan/nextly-template@yudimuliawan/solana-landing-pagealpha-react-portfoliofeffery_utils_components
1.7.270

6 months ago

1.7.274

5 months ago

1.7.273

5 months ago

1.7.272

6 months ago

1.7.271

6 months ago

1.7.278

5 months ago

1.7.277

5 months ago

1.7.276

5 months ago

1.7.275

5 months ago

1.7.269

6 months ago

1.7.268

6 months ago

1.7.281

5 months ago

1.7.280

5 months ago

1.7.285

4 months ago

1.7.284

5 months ago

1.7.283

5 months ago

1.7.282

5 months ago

1.7.286

4 months ago

1.7.279

5 months ago

1.7.252

8 months ago

1.7.251

8 months ago

1.7.256

8 months ago

1.7.255

8 months ago

1.7.254

8 months ago

1.7.253

8 months ago

1.7.263

7 months ago

1.7.262

7 months ago

1.7.261

7 months ago

1.7.260

7 months ago

1.7.267

7 months ago

1.7.266

7 months ago

1.7.265

7 months ago

1.7.264

7 months ago

1.7.259

7 months ago

1.7.258

7 months ago

1.7.257

8 months ago

1.7.250

8 months ago

1.7.249

8 months ago

1.7.241

9 months ago

1.7.240

10 months ago

1.7.245

9 months ago

1.7.244

9 months ago

1.7.243

9 months ago

1.7.242

9 months ago

1.7.238

10 months ago

1.7.239

10 months ago

1.7.248

9 months ago

1.7.247

9 months ago

1.7.246

9 months ago

1.7.230

1 year ago

1.7.234

11 months ago

1.7.233

11 months ago

1.7.232

12 months ago

1.7.231

12 months ago

1.7.227

1 year ago

1.7.229

1 year ago

1.7.228

1 year ago

1.7.237

11 months ago

1.7.236

11 months ago

1.7.235

11 months ago

1.7.226

1 year ago

1.7.225

1 year ago

1.7.224

1 year ago

1.7.223

1 year ago

1.7.222

1 year ago

1.7.221

1 year ago

1.7.220

1 year ago

1.7.219

1 year ago

1.7.218

1 year ago

1.7.217

1 year ago

1.7.216

1 year ago

1.7.215

1 year ago

1.7.214

1 year ago

1.7.213

1 year ago

1.7.212

1 year ago

1.7.211

1 year ago

1.7.210

1 year ago

1.7.205

1 year ago

1.7.204

1 year ago

1.7.203

1 year ago

1.7.202

1 year ago

1.7.209

1 year ago

1.7.208

1 year ago

1.7.207

1 year ago

1.7.206

1 year ago

1.7.201

1 year ago

1.7.200

1 year ago

1.7.199

1 year ago

1.7.198

1 year ago

1.7.193

1 year ago

1.7.192

1 year ago

1.7.197

1 year ago

1.7.196

1 year ago

1.7.195

1 year ago

1.7.194

1 year ago

1.7.191

1 year ago

1.7.190

1 year ago

1.7.186

1 year ago

1.7.189

1 year ago

1.7.188

1 year ago

1.7.187

1 year ago

1.7.185

1 year ago

1.7.184

1 year ago

1.7.183

1 year ago

1.7.182

1 year ago

1.7.181

1 year ago

1.7.180

2 years ago

1.7.179

2 years ago

1.7.178

2 years ago

1.7.177

2 years ago

1.7.176

2 years ago

1.7.171

2 years ago

1.7.170

2 years ago

1.7.175

2 years ago

1.7.174

2 years ago

1.7.173

2 years ago

1.7.172

2 years ago

1.7.168

2 years ago

1.7.167

2 years ago

1.7.169

2 years ago

1.7.153

2 years ago

1.7.152

2 years ago

1.7.151

2 years ago

1.7.150

2 years ago

1.7.157

2 years ago

1.7.156

2 years ago

1.7.155

2 years ago

1.7.154

2 years ago

1.7.149

2 years ago

1.7.148

2 years ago

1.7.147

2 years ago

1.7.160

2 years ago

1.7.164

2 years ago

1.7.163

2 years ago

1.7.162

2 years ago

1.7.161

2 years ago

1.7.166

2 years ago

1.7.165

2 years ago

1.7.159

2 years ago

1.7.158

2 years ago

1.7.142

2 years ago

1.7.141

2 years ago

1.7.146

2 years ago

1.7.145

2 years ago

1.7.144

2 years ago

1.7.143

2 years ago

1.7.90

2 years ago

1.7.91

2 years ago

1.7.92

2 years ago

1.7.93

2 years ago

1.7.94

2 years ago

1.7.95

2 years ago

1.7.96

2 years ago

1.7.97

2 years ago

1.7.98

2 years ago

1.7.99

2 years ago

1.7.131

2 years ago

1.7.130

2 years ago

1.7.135

2 years ago

1.7.134

2 years ago

1.7.133

2 years ago

1.7.132

2 years ago

1.7.128

2 years ago

1.7.127

2 years ago

1.7.126

2 years ago

1.7.125

2 years ago

1.7.129

2 years ago

1.7.140

2 years ago

1.7.139

2 years ago

1.7.138

2 years ago

1.7.137

2 years ago

1.7.136

2 years ago

1.7.89

2 years ago

1.7.112

2 years ago

1.7.111

2 years ago

1.7.110

2 years ago

1.7.106

2 years ago

1.7.105

2 years ago

1.7.104

2 years ago

1.7.103

2 years ago

1.7.109

2 years ago

1.7.108

2 years ago

1.7.107

2 years ago

1.7.120

2 years ago

1.7.124

2 years ago

1.7.123

2 years ago

1.7.122

2 years ago

1.7.121

2 years ago

1.7.117

2 years ago

1.7.116

2 years ago

1.7.115

2 years ago

1.7.114

2 years ago

1.7.119

2 years ago

1.7.118

2 years ago

1.7.102

2 years ago

1.7.101

2 years ago

1.7.100

2 years ago

1.7.70

3 years ago

1.7.71

3 years ago

1.7.72

3 years ago

1.7.73

3 years ago

1.7.74

3 years ago

1.7.75

3 years ago

1.7.76

3 years ago

1.7.77

3 years ago

1.7.78

3 years ago

1.7.79

3 years ago

1.7.80

3 years ago

1.7.81

3 years ago

1.7.82

2 years ago

1.7.83

2 years ago

1.7.84

2 years ago

1.7.85

2 years ago

1.7.86

2 years ago

1.7.87

2 years ago

1.7.88

2 years ago

1.7.69

3 years ago

1.7.58

3 years ago

1.7.59

3 years ago

1.7.60

3 years ago

1.7.61

3 years ago

1.7.62

3 years ago

1.7.63

3 years ago

1.7.64

3 years ago

1.7.65

3 years ago

1.7.66

3 years ago

1.7.67

3 years ago

1.7.68

3 years ago

1.7.50

3 years ago

1.7.51

3 years ago

1.7.52

3 years ago

1.7.53

3 years ago

1.7.54

3 years ago

1.7.55

3 years ago

1.7.56

3 years ago

1.7.57

3 years ago

1.7.35

3 years ago

1.7.36

3 years ago

1.7.37

3 years ago

1.7.38

3 years ago

1.7.39

3 years ago

1.7.40

3 years ago

1.7.41

3 years ago

1.7.42

3 years ago

1.7.43

3 years ago

1.7.44

3 years ago

1.7.45

3 years ago

1.7.46

3 years ago

1.7.47

3 years ago

1.7.48

3 years ago

1.7.49

3 years ago

1.7.9

3 years ago

1.7.8

3 years ago

1.7.7

3 years ago

1.7.6

3 years ago

1.7.5

3 years ago

1.7.4

3 years ago

1.7.30

3 years ago

1.7.31

3 years ago

1.7.32

3 years ago

1.7.33

3 years ago

1.7.34

3 years ago

1.7.10

3 years ago

1.7.11

3 years ago

1.7.12

3 years ago

1.7.13

3 years ago

1.7.14

3 years ago

1.7.15

3 years ago

1.7.16

3 years ago

1.7.17

3 years ago

1.7.18

3 years ago

1.7.19

3 years ago

1.7.20

3 years ago

1.7.21

3 years ago

1.7.22

3 years ago

1.7.23

3 years ago

1.7.24

3 years ago

1.7.25

3 years ago

1.7.26

3 years ago

1.7.27

3 years ago

1.7.28

3 years ago

1.7.29

3 years ago

1.6.4

3 years ago

1.6.9

3 years ago

1.6.8

3 years ago

1.6.7

3 years ago

1.6.6

3 years ago

1.6.5

3 years ago

1.6.10

3 years ago

1.7.3

3 years ago

1.7.2

3 years ago

1.7.1

3 years ago

1.7.0

3 years ago

1.6.3

3 years ago

1.6.2

3 years ago

1.6.1

3 years ago

1.6.0

3 years ago

1.5.81

4 years ago

1.5.80

4 years ago

1.5.83

4 years ago

1.5.82

4 years ago

1.5.85

3 years ago

1.5.84

4 years ago

1.5.87

3 years ago

1.5.86

3 years ago

1.5.89

3 years ago

1.5.88

3 years ago

1.5.90

3 years ago

1.5.92

3 years ago

1.5.91

3 years ago

1.5.76

4 years ago

1.5.75

4 years ago

1.5.78

4 years ago

1.5.77

4 years ago

1.5.79

4 years ago

1.5.74

4 years ago

1.5.72

4 years ago

1.5.73

4 years ago

1.5.70

4 years ago

1.5.71

4 years ago

1.5.69

4 years ago

1.5.68

4 years ago

1.5.67

4 years ago

1.5.66

4 years ago

1.5.65

4 years ago

1.5.63

4 years ago

1.5.62

4 years ago

1.5.64

4 years ago

1.5.61

4 years ago

1.5.60

4 years ago

1.5.59

4 years ago

1.5.58

4 years ago

1.5.56

4 years ago

1.5.57

4 years ago

1.5.55

4 years ago

1.5.54

4 years ago

1.5.53

4 years ago

1.5.52

4 years ago

1.5.51

4 years ago

1.5.50

4 years ago

1.5.49

4 years ago

1.5.48

4 years ago

1.5.47

4 years ago

1.5.46

4 years ago

1.5.45

4 years ago

1.5.43

4 years ago

1.5.42

4 years ago

1.5.44

4 years ago

1.5.39

4 years ago

1.5.41

4 years ago

1.5.40

4 years ago

1.5.38

4 years ago

1.5.37

4 years ago

1.5.36

4 years ago

1.5.35

4 years ago

1.5.30

4 years ago

1.5.32

4 years ago

1.5.31

4 years ago

1.5.34

4 years ago

1.5.33

4 years ago

1.5.29

4 years ago

1.5.25

4 years ago

1.5.27

4 years ago

1.5.26

4 years ago

1.5.28

4 years ago

1.5.24

4 years ago

1.5.16

4 years ago

1.5.15

4 years ago

1.5.17

4 years ago

1.5.21

4 years ago

1.5.20

4 years ago

1.5.23

4 years ago

1.5.22

4 years ago

1.5.5

4 years ago

1.5.9

4 years ago

1.5.8

4 years ago

1.5.7

4 years ago

1.5.6

4 years ago

1.5.10

4 years ago

1.5.11

4 years ago

1.5.14

4 years ago

1.5.13

4 years ago

1.5.4

4 years ago

1.5.3

4 years ago

1.5.2

4 years ago

1.5.0

4 years ago

1.4.96

4 years ago

1.4.95

4 years ago

1.4.94

4 years ago

1.4.93

4 years ago

1.4.92

4 years ago

1.4.91

4 years ago

1.4.88

4 years ago

1.4.89

4 years ago

1.4.90

4 years ago

1.4.87

4 years ago

1.4.86

4 years ago

1.4.85

4 years ago

1.4.84

4 years ago

1.4.83

4 years ago

1.4.82

4 years ago

1.4.81

4 years ago

1.4.80

4 years ago

1.4.79

4 years ago

1.4.77

4 years ago

1.4.78

4 years ago

1.4.76

4 years ago

1.4.75

4 years ago

1.4.74

4 years ago

1.4.73

4 years ago

1.4.72

4 years ago

1.4.71

4 years ago

1.4.70

4 years ago

1.4.69

5 years ago

1.4.68

5 years ago

1.4.67

5 years ago

1.4.66

5 years ago

1.4.63

5 years ago

1.4.65

5 years ago

1.4.62

5 years ago

1.4.61

5 years ago

1.4.60

5 years ago

1.4.59

5 years ago

1.4.58

5 years ago

1.4.57

5 years ago

1.4.54

5 years ago

1.4.56

5 years ago

1.4.53

5 years ago

1.4.52

5 years ago

1.4.51

5 years ago

1.3.46

5 years ago

1.3.43

5 years ago

1.3.42

5 years ago

1.3.41

5 years ago

1.3.40

5 years ago

1.3.39

5 years ago

1.3.38

5 years ago

1.3.37

5 years ago

1.3.36

5 years ago

1.3.32

5 years ago

1.3.31

6 years ago

1.3.30

6 years ago

1.3.29

6 years ago

1.3.28

6 years ago

1.3.27

6 years ago

1.3.26

6 years ago

1.3.25

6 years ago

1.3.24

6 years ago

1.3.23

6 years ago

1.3.22

6 years ago

1.3.21

6 years ago

1.3.20

6 years ago

1.3.19

6 years ago

1.3.18

6 years ago

1.3.17

6 years ago

1.0.14

6 years ago

1.0.13

6 years ago

1.0.12

6 years ago

1.0.11

6 years ago

1.0.10

6 years ago

1.0.8

6 years ago

1.0.7

6 years ago

1.0.6

6 years ago

1.0.5

6 years ago

1.0.4

6 years ago

1.0.3

6 years ago

1.0.2

6 years ago

1.0.0

6 years ago