-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
28e6e2c
commit 50c9604
Showing
1 changed file
with
2 additions
and
65 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,66 +1,3 @@ | ||
| <h1 align="center"> | ||
| tilt-react 🪄 | ||
| </h1> | ||
| <h4 align="center"> | ||
| A tiny requestAnimationFrame powered 60+fps lightweight parallax hover tilt effect for React. | ||
| </h4> | ||
| <p align="center" style="text-align: center;"> | ||
| <a href="https://www.npmjs.com/package/react-tilt"><img src="https://img.shields.io/npm/dw/react-tilt" alt="react-tilt downloads"></a> | ||
| <a href="https://www.npmjs.com/package/react-tilt"><img src="https://img.shields.io/npm/v/react-tilt" alt="react-tilt version"></a> | ||
| <a href="https://twitter.com/@0xjdion"><img src="https://img.shields.io/twitter/url/https/twitter.com/blueaquilae.svg?style=social&label=Follow%20%400xjdion" alt="Jonathan Dion Twitter"></a> | ||
| </p> | ||
| # @jdion/tilt-react | ||
|
|
||
|  | ||
|
|
||
| ## Demo | ||
|
|
||
| - [Reddit NFTs](https://nft.reddit.com/) | ||
| - [VX Demo](https://vx-demo.now.sh/gallery) | ||
|
|
||
| ## Install | ||
|
|
||
| ```bash | ||
| npm install @jdion/tilt-react react react-dom | ||
| ``` | ||
|
|
||
| ## Usage | ||
|
|
||
| ```tsx | ||
| import { Tilt } from '@jdion/tilt-react' | ||
|
|
||
| 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 | ||
|
|
||
| | Property | Signature | | ||
| | ------------- |:-------------:| | ||
| | options | Options | | ||
|
|
||
| ## Alternatives | ||
|
|
||
| - **JQuery JS version:** https://github.com/gijsroge/tilt.js | ||
| - **Vanilla JS version:** https://github.com/micku7zu/vanilla-tilt.js | ||
|
|
||
| ### Check Also | ||
|
|
||
| - [Web Configs](https://github.com/jonathandion/web-configs) - Monorepo for all common configurations for building web apps. | ||
| - [My Neovim Config](https://github.com/jonathandion/web-dev.nvim) - Small Neovim configuration written in Lua that is specifically designed for web development. | ||
| For more information, please visit the [documentation](https://jdion.xyz/tilt). |