Socket
Socket
Sign inDemoInstall

react-tilt

Package Overview
Dependencies
4
Maintainers
1
Versions
8
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-tilt

Tilt for React JS


Version published
Weekly downloads
7.1K
increased by1.86%
Maintainers
1
Install size
8.87 kB
Created
Weekly downloads
 

Readme

Source

react-tilt 🪄

A tiny requestAnimationFrame powered 60+fps lightweight parallax hover tilt effect for ReactJS.

react-tilt downloads react-tilt version Jonathan Dion Twitter

react-tilt demo gif

Demo

Install

pnpm add react-tilt react react-dom
# or
npm install react-tilt react react-dom
# or
yarn add react-tilt react react-dom

Usage

import { Tilt } from 'react-tilt'

const defaultOptions = {
	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.1,    // 2 = 200%, 1.5 = 150%, etc..
	speed:          1000,   // 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.
}

const App = () => {
  return (
    <Tilt options={defaultOptions} style={{ height: 250, width: 250 }}>
      <div>👽</div>
    </Tilt>
  )
}

Props

PropertySignature
onMouseEnter(event: React.SyntheticEvent) -> void
onMouseMove(event: React.SyntheticEvent) -> void
onMouseLeave(event: React.SyntheticEvent) -> void
optionsOptions

Alternatives

Check Also

  • Web Configs - Monorepo for all common configurations for building web apps.
  • My Neovim Config - Small Neovim configuration written in Lua that is specifically designed for web development.

Keywords

FAQs

Last updated on 27 Mar 2023

Did you know?

Socket

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.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc