Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

react-vanilla-tilt

1.0.0 • Public • Published



A smooth 3D tilt React component wrapped around vanilla-tilt.js

 

install

npm install react-vanilla-tilt

 

usage

import React from 'react'
import Title from 'react-vanilla-tilt'
 
<Tilt>
  <div>
    You can put whatever you want inside this
  </div>
</Tilt>

 

options

{
    reverse:           false,  // reverse the tilt direction
    max:               35,     // max tilt rotation (degrees)
    perspective:       1000,   // Transform perspective, the lower the more extreme the tilt gets.
    scale:             1,      // 2 = 200%, 1.5 = 150%, etc..
    speed:             300,    // Speed of the enter/exit transition
    transition:        true,   // Set a transition on enter/exit.
    axis:              null,   // What axis should be disabled. Can be X or Y.
    reset:             true    // If the tilt effect has to be reset on exit.
    easing:            "cubic-bezier(.03,.98,.52,.99)",    // Easing on enter/exit.
    glare:             false   // if it should have a "glare" effect
    "max-glare":       1,      // the maximum "glare" opacity (1 = 100%, 0.5 = 50%)
    "glare-prerender": false   // false = VanillaTilt creates the glare elements for you, otherwise
                               // you need to add .js-tilt-glare>.js-tilt-glare-inner by yourself
}
import React from 'react'
import Title from 'react-vanilla-tilt'
 
<Tilt options={{ scale: 2, max: 25 }}>
  <div>
    You can put whatever you want inside this
  </div>
</Tilt>

 

kudos to @micku7zu and @gijsroge

This is a React wrapper around vanilla-tilt by @micku7zu

 

like it?

⭐️ this repo

 

license

MIT © siddharthkp

Install

npm i react-vanilla-tilt

DownloadsWeekly Downloads

102

Version

1.0.0

License

MIT

Unpacked Size

12.1 kB

Total Files

4

Last publish

Collaborators

  • avatar