{"_id":"3dtilt","_rev":"4-492cae1eafcbfaeebed4f1d07ff167a0","name":"3dtilt","dist-tags":{"latest":"1.0.4"},"versions":{"1.0.1":{"name":"3dtilt","version":"1.0.1","keywords":["react","3d-tilt","tilt","effect","animation","component","typescript"],"author":{"name":"Sivamani-18"},"license":"MIT","_id":"3dtilt@1.0.1","maintainers":[{"name":"sivamani18","email":"sivasubramaniyam09+git18@gmail.com"}],"homepage":"https://github.com/Sivamani-18/3dtilt","bugs":{"url":"https://github.com/Sivamani-18/3dtilt/issues"},"dist":{"shasum":"883830942cf8b00a48b8de9d6a45210c52e3e4ec","tarball":"https://registry.npmjs.org/3dtilt/-/3dtilt-1.0.1.tgz","fileCount":6,"integrity":"sha512-fnNs1IlfmGsM+wgfcVpbnyi1gY6s+PFInFdalsmXhA5OTr2YfpSF0Rrm5lKUMGTOJ3mFtOMk5+iOEjKcX3Pctw==","signatures":[{"sig":"MEUCICjpaoQRTYMU6X6axRTCYlhwjD8fEChWMW/mpQkEzM1OAiEA9BoDHY/AVyV9TOAMRY9ryearGhexDKYDPEao0okJI7k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13139},"main":"dist/bundle.js","types":"dist/index.d.ts","module":"dist/bundle.js","gitHead":"bb71cc0e7444dd723fbb61a90c3edc96c2ab06dd","private":false,"scripts":{"build":"rollup -c","prepublishOnly":"npm run build"},"_npmUser":{"name":"sivamani18","email":"sivasubramaniyam09+git18@gmail.com"},"repository":{"url":"git+https://github.com/Sivamani-18/3dtilt.git","type":"git"},"_npmVersion":"10.8.2","description":"A lightweight React component for creating a 3D tilt effect with customizable options.","directories":{},"_nodeVersion":"18.17.0","dependencies":{"react":"^18.2.0","react-dom":"^18.2.0","prop-types":"^15.8.1","@types/react":"^18.2.14","@types/react-dom":"^18.2.6","@types/prop-types":"^15.7.5"},"_hasShrinkwrap":false,"devDependencies":{"tslib":"^2.6.0","rollup":"^2.0.0","@rollup/plugin-babel":"^6.0.3","rollup-plugin-terser":"^7.0.2","@rollup/plugin-commonjs":"^25.0.2","rollup-plugin-typescript2":"^0.35.0","@rollup/plugin-node-resolve":"^15.1.0"},"_npmOperationalInternal":{"tmp":"tmp/3dtilt_1.0.1_1723280838832_0.08097705589374282","host":"s3://npm-registry-packages"}},"1.0.2":{"name":"3dtilt","version":"1.0.2","keywords":["react","3d-tilt","tilt","effect","animation","component","typescript"],"author":{"name":"Sivamani-18"},"license":"MIT","_id":"3dtilt@1.0.2","maintainers":[{"name":"sivamani18","email":"sivasubramaniyam09+git18@gmail.com"}],"homepage":"https://github.com/Sivamani-18/3dtilt","bugs":{"url":"https://github.com/Sivamani-18/3dtilt/issues"},"dist":{"shasum":"42297a926112d3b7366c94ead276d9d5c64363c8","tarball":"https://registry.npmjs.org/3dtilt/-/3dtilt-1.0.2.tgz","fileCount":6,"integrity":"sha512-IVkhrlaAVhlcT2f33mBaz8ZTIQtLjRpE9N9WXLzt4YgiDuQCaxKAnKbMhUVvAP4JtFO0Sd1Xz452Oh/ut+y6mA==","signatures":[{"sig":"MEQCIDJFzcUZXTqI2ajw2hH/EQO21DogW237BturcGn85nByAiA3HTSf+AMTIWTax/dna6dRKH9ddMZ6AP0St9F/45qa5A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":15234},"main":"dist/bundle.js","types":"dist/index.d.ts","module":"dist/bundle.js","gitHead":"ce66d01f3a1e80b9e14528d9fb8d36b3892d72de","private":false,"scripts":{"build":"rollup -c","prepublishOnly":"npm run build"},"_npmUser":{"name":"sivamani18","email":"sivasubramaniyam09+git18@gmail.com"},"repository":{"url":"git+https://github.com/Sivamani-18/3dtilt.git","type":"git"},"_npmVersion":"10.8.2","description":"A lightweight React component for creating a 3D tilt effect with customizable options.","directories":{},"_nodeVersion":"18.17.0","dependencies":{"react":"^18.2.0","react-dom":"^18.2.0","prop-types":"^15.8.1","@types/react":"^18.2.14","@types/react-dom":"^18.2.6","@types/prop-types":"^15.7.5"},"_hasShrinkwrap":false,"devDependencies":{"tslib":"^2.6.0","rollup":"^2.0.0","@rollup/plugin-babel":"^6.0.3","rollup-plugin-terser":"^7.0.2","@rollup/plugin-commonjs":"^25.0.2","rollup-plugin-typescript2":"^0.35.0","@rollup/plugin-node-resolve":"^15.1.0"},"_npmOperationalInternal":{"tmp":"tmp/3dtilt_1.0.2_1723281056872_0.041907064786513626","host":"s3://npm-registry-packages"}},"1.0.0":{"name":"3dtilt","version":"1.0.0","keywords":["react","3d-tilt","tilt","effect","animation","component","typescript"],"author":{"name":"Sivamani-18"},"license":"MIT","_id":"3dtilt@1.0.0","maintainers":[{"name":"sivamani18","email":"sivasubramaniyam09+git18@gmail.com"}],"homepage":"https://github.com/Sivamani-18/3dtilt","bugs":{"url":"https://github.com/Sivamani-18/3dtilt/issues"},"dist":{"shasum":"154aa63686ca24897439d32c36560ae65f7a0c61","tarball":"https://registry.npmjs.org/3dtilt/-/3dtilt-1.0.0.tgz","fileCount":6,"integrity":"sha512-Z3WaDRB4EMqLq00QjzmMmCdZu0GtyiFKvEOcIotB8z/1aanphR4UiWAEtzgviQTdVxDP2UxlQf68b+gL9rFnpg==","signatures":[{"sig":"MEUCIQDMPpSkY0mtdYXmWj1hCphafAgtIcfztuHpMXxUyrwS8AIgDYJjA0WeStDr8xsdMcoMqYeIC8sTWWpT79iR4cj9dLY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":15234},"main":"dist/bundle.js","types":"dist/index.d.ts","module":"dist/bundle.js","gitHead":"082ea95a7ca6acc5484d17ab5b340e27e7715acf","private":false,"scripts":{"build":"rollup -c","prepublishOnly":"npm run build"},"_npmUser":{"name":"sivamani18","email":"sivasubramaniyam09+git18@gmail.com"},"repository":{"url":"git+https://github.com/Sivamani-18/3dtilt.git","type":"git"},"_npmVersion":"10.8.2","description":"A lightweight React component for creating a 3D tilt effect with customizable options.","directories":{},"_nodeVersion":"18.17.0","dependencies":{"react":"^18.2.0","react-dom":"^18.2.0","prop-types":"^15.8.1","@types/react":"^18.2.14","@types/react-dom":"^18.2.6","@types/prop-types":"^15.7.5"},"_hasShrinkwrap":false,"devDependencies":{"tslib":"^2.6.0","rollup":"^2.0.0","@rollup/plugin-babel":"^6.0.3","rollup-plugin-terser":"^7.0.2","@rollup/plugin-commonjs":"^25.0.2","rollup-plugin-typescript2":"^0.35.0","@rollup/plugin-node-resolve":"^15.1.0"},"_npmOperationalInternal":{"tmp":"tmp/3dtilt_1.0.0_1723282895697_0.4832789883925994","host":"s3://npm-registry-packages"}},"1.0.3":{"name":"3dtilt","version":"1.0.3","keywords":["react","3d-tilt","tilt","effect","animation","component","typescript"],"author":{"name":"Sivamani-18"},"license":"MIT","_id":"3dtilt@1.0.3","maintainers":[{"name":"sivamani18","email":"sivasubramaniyam09+git18@gmail.com"}],"homepage":"https://github.com/Sivamani-18/3dtilt","bugs":{"url":"https://github.com/Sivamani-18/3dtilt/issues"},"dist":{"shasum":"6122079a601955322091a5d1aa70e17e8fd981bf","tarball":"https://registry.npmjs.org/3dtilt/-/3dtilt-1.0.3.tgz","fileCount":6,"integrity":"sha512-XaQa+v1ycetbO81QE6WkAMxqKm2TsD+0In+DYIlwSXzgsBXsRAHBG8gec5LQZyEzLCuAeHHNYLSFN5Cz8ym0zA==","signatures":[{"sig":"MEUCIDhWkr4GWxmoVZ8gL+w6xazy4rq7wPlz07t8RqOyLFtYAiEAxDykijj+IJZ/1a/KUSzXPUD7paDOLV0UXeNbju+iNZM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":15026},"main":"dist/bundle.js","types":"dist/index.d.ts","module":"dist/bundle.js","gitHead":"9ccf97a9aa74a54078ec363bab879cfe12ccc2cb","private":false,"scripts":{"build":"rollup -c","prepublishOnly":"npm run build"},"_npmUser":{"name":"sivamani18","email":"sivasubramaniyam09+git18@gmail.com"},"repository":{"url":"git+https://github.com/Sivamani-18/3dtilt.git","type":"git"},"_npmVersion":"10.8.2","description":"A lightweight React component for creating a 3D tilt effect with customizable options.","directories":{},"_nodeVersion":"18.17.0","dependencies":{"react":"^18.2.0","react-dom":"^18.2.0","prop-types":"^15.8.1","@types/react":"^18.2.14","@types/react-dom":"^18.2.6","@types/prop-types":"^15.7.5"},"_hasShrinkwrap":false,"devDependencies":{"tslib":"^2.6.0","rollup":"^2.0.0","@rollup/plugin-babel":"^6.0.3","rollup-plugin-terser":"^7.0.2","@rollup/plugin-commonjs":"^25.0.2","rollup-plugin-typescript2":"^0.35.0","@rollup/plugin-node-resolve":"^15.1.0"},"_npmOperationalInternal":{"tmp":"tmp/3dtilt_1.0.3_1723283728633_0.5804824431998714","host":"s3://npm-registry-packages"}},"1.0.4":{"name":"3dtilt","version":"1.0.4","private":false,"description":"A lightweight React component for creating a 3D tilt effect with customizable options.","main":"dist/bundle.js","module":"dist/bundle.js","types":"dist/index.d.ts","scripts":{"build":"rollup -c","prepublishOnly":"npm run build"},"keywords":["react","3d-tilt","tilt","effect","animation","component","typescript"],"author":{"name":"Sivamani-18"},"license":"MIT","homepage":"https://github.com/Sivamani-18/3dtilt","repository":{"type":"git","url":"git+https://github.com/Sivamani-18/3dtilt.git"},"dependencies":{"@types/prop-types":"^15.7.5","@types/react":"^18.2.14","@types/react-dom":"^18.2.6","prop-types":"^15.8.1","react":"^18.2.0","react-dom":"^18.2.0"},"devDependencies":{"rollup":"^2.0.0","rollup-plugin-terser":"^7.0.2","rollup-plugin-typescript2":"^0.35.0","@rollup/plugin-babel":"^6.0.3","@rollup/plugin-commonjs":"^25.0.2","@rollup/plugin-node-resolve":"^15.1.0","tslib":"^2.6.0"},"_id":"3dtilt@1.0.4","gitHead":"6c64460a4c4ca481f575623059616861fd88d00e","bugs":{"url":"https://github.com/Sivamani-18/3dtilt/issues"},"_nodeVersion":"18.17.0","_npmVersion":"10.8.2","dist":{"integrity":"sha512-OxIrAZ48mbJiMDGDXxOqyoT++FReip9C8XoywKWbQOkQtKcVYjxRyUW6nL/VrhJJcoiRBKX8vmrq1tsTQSvzhQ==","shasum":"9fd0b5bf481c2517580da75a7a885984e4fb1ea6","tarball":"https://registry.npmjs.org/3dtilt/-/3dtilt-1.0.4.tgz","fileCount":6,"unpackedSize":15110,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDFMkgLjlemr/AkV1UnvKGcDAuKQPE6LAeTcGcFMOpM5AIhAPGDkJ7Lid4keVlWgkxD/pkvuVMyNPaCHeTvDivRY/JG"}]},"_npmUser":{"name":"sivamani18","email":"sivasubramaniyam09+git18@gmail.com"},"directories":{},"maintainers":[{"name":"sivamani18","email":"sivasubramaniyam09+git18@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/3dtilt_1.0.4_1723286136861_0.6846247436028434"},"_hasShrinkwrap":false}},"time":{"created":"2024-08-10T09:07:18.832Z","modified":"2024-08-10T10:35:37.266Z","1.0.1":"2024-08-10T09:07:18.978Z","1.0.2":"2024-08-10T09:10:57.012Z","1.0.0":"2024-08-10T09:41:35.858Z","1.0.3":"2024-08-10T09:55:28.811Z","1.0.4":"2024-08-10T10:35:37.062Z"},"bugs":{"url":"https://github.com/Sivamani-18/3dtilt/issues"},"author":{"name":"Sivamani-18"},"license":"MIT","homepage":"https://github.com/Sivamani-18/3dtilt","keywords":["react","3d-tilt","tilt","effect","animation","component","typescript"],"repository":{"type":"git","url":"git+https://github.com/Sivamani-18/3dtilt.git"},"description":"A lightweight React component for creating a 3D tilt effect with customizable options.","maintainers":[{"name":"sivamani18","email":"sivasubramaniyam09+git18@gmail.com"}],"readme":"# 3DTilt\n\n`3DTilt` is a React component that adds a 3D tilt effect to any element. It offers various customization options to fine-tune the effect, including tilt angles, perspective, transition speed, and optional glare effects.\n\n## Installation\n\nYou can install the `3DTilt` package using npm or Yarn.\n\n### npm\n\n```bash\nnpm install 3DTilt\n```\n\n### yarn\n\n```bash\nyarn add 3DTilt\n```\n\n## Usage\n\n### Basic Example\n\n```tsx\nimport React from 'react';\nimport ThreeDTilt from '3dtilt';\n\nconst BasicExample = () => {\n return (\n \n
\n

Basic 3D Tilt

\n
\n \n );\n};\n\nexport default BasicExample;\n```\n\n## Options\n\n| Option Name | Type | Default Value | Description |\n|------------------|---------------|--------------------------------------------|-----------------------------------------------------------------------------|\n| `maxTilt` | `number` | `20` | The maximum tilt angle in degrees. |\n| `perspective` | `number` | `300` | The perspective distance in pixels. |\n| `easing` | `string` | `'cubic-bezier(.03,.98,.52,.99)'` | The CSS easing function for transitions. |\n| `scale` | `number` | `1` | The scaling factor applied to the element when tilted. |\n| `speed` | `number` | `400` | The speed of the transition in milliseconds. |\n| `transition` | `boolean` | `true` | Determines whether transitions should be used. |\n| `disableAxis` | `'x' | 'y' | null` | `null` | Disables tilting along the specified axis. |\n| `reset` | `boolean` | `true` | Resets the tilt effect when the mouse leaves the element. |\n| `glare` | `boolean` | `false` | Adds a glare effect to the element. |\n| `maxGlare` | `number` | `1` | The maximum opacity of the glare effect. |\n| `glarePrerender` | `boolean` | `false` | Determines whether the glare effect is prerendered. |\n\n\n## Options and Separate Examples\n\n### 1. `maxTilt` (number)\n\nThe maximum tilt angle in degrees.\n\n**Default**: `20`\n\n```tsx\nimport React from 'react';\nimport ThreeDTilt from '3dtilt';\n\nconst MaxTiltExample = () => {\n return (\n \n
\n

Max Tilt: 40°

\n
\n \n );\n};\n\nexport default MaxTiltExample;\n```\n\n### 2. `perspective` (number)\n\nThe distance from the viewer to the element, which affects the depth of the 3D effect.\n\n**Default**: `300`\n\n```tsx\nimport React from 'react';\nimport ThreeDTilt from '3dtilt';\n\nconst PerspectiveExample = () => {\n return (\n \n
\n

Perspective: 1000px

\n
\n \n );\n};\n\nexport default PerspectiveExample;\n```\n\n### 3. `easing` (string)\n\nThe CSS easing function for the transition effect.\n\n**Default**: `'cubic-bezier(.03,.98,.52,.99)'`\n\n```tsx\nimport React from 'react';\nimport ThreeDTilt from '3dtilt';\n\nconst EasingExample = () => {\n return (\n \n
\n

Easing: Linear

\n
\n \n );\n};\n\nexport default EasingExample;\n```\n\n### 4. `scale` (number)\n\nThe scaling factor applied to the element when it is tilted.\n\n**Default**: `1`\n\n```tsx\nimport React from 'react';\nimport ThreeDTilt from '3dtilt';\n\nconst ScaleExample = () => {\n return (\n \n
\n

Scale: 1.2

\n
\n \n );\n};\n\nexport default ScaleExample;\n```\n\n### 5. `speed` (number)\n\nThe speed of the transition in milliseconds.\n\n**Default**: `400`\n\n```tsx\nimport React from 'react';\nimport ThreeDTilt from '3dtilt';\n\nconst SpeedExample = () => {\n return (\n \n
\n

Speed: 1000ms

\n
\n \n );\n};\n\nexport default SpeedExample;\n```\n\n### 6. `transition` (boolean)\n\nDetermines whether transitions should be used.\n\n**Default**: `true`\n\n```tsx\nimport React from 'react';\nimport ThreeDTilt from '3dtilt';\n\nconst TransitionExample = () => {\n return (\n \n
\n

Transition: Disabled

\n
\n \n );\n};\n\nexport default TransitionExample;\n```\n\n### 7. `disableAxis` (string or null)\n\nDisables tilt on the `'x'` or `'y'` axis.\n\n**Default**: `null`\n\n```tsx\nimport React from 'react';\nimport ThreeDTilt from '3dtilt';\n\nconst DisableAxisExample = () => {\n return (\n \n
\n

Disable Axis: X

\n
\n \n );\n};\n\nexport default DisableAxisExample;\n```\n\n### 8. `reset` (boolean)\n\nResets the tilt effect when the mouse leaves the element.\n\n**Default**: `true`\n\n```tsx\nimport React from 'react';\nimport ThreeDTilt from '3dtilt';\n\nconst ResetExample = () => {\n return (\n \n
\n

Reset: Disabled

\n
\n \n );\n};\n\nexport default ResetExample;\n```\n\n### 9. `glare` (boolean)\n\nAdds a glare effect to the element.\n\n**Default**: `false`\n\n```tsx\nimport React from 'react';\nimport ThreeDTilt from '3dtilt';\n\nconst GlareExample = () => {\n return (\n \n
\n

Glare: Enabled

\n
\n \n );\n};\n\nexport default GlareExample;\n```\n\n### 10. `maxGlare` (number)\n\nThe maximum opacity of the glare effect.\n\n**Default**: `1`\n\n```tsx\nimport React from 'react';\nimport ThreeDTilt from '3dtilt';\n\nconst MaxGlareExample = () => {\n return (\n \n
\n

Max Glare: 0.5

\n
\n \n );\n};\n\nexport default MaxGlareExample;\n```\n\n### 11. `glarePrerender` (boolean)\n\nDetermines whether the glare effect is prerendered.\n\n**Default**: `false`\n\n```tsx\nimport React from 'react';\nimport ThreeDTilt from '3dtilt';\n\nconst GlarePrerenderExample = () => {\n return (\n \n
\n

Glare Prerender: Enabled

\n
\n \n );\n};\n\nexport default GlarePrerenderExample;\n```\n\n## License\n\nThis project is open-source and available under the [MIT License](LICENSE).\n","readmeFilename":"README.md"}