├── .commitlintrc.ts
├── .czrc
├── .github
    ├── ISSUE_TEMPLATE
    │   ├── bug_report.yml
    │   └── config.yml
    ├── pull_request_template.md
    └── workflows
    │   ├── actions
    │       └── setup_node-cache_dep-install_dep
    │       │   └── action.yml
    │   ├── build.yml
    │   ├── deploy-storybook.yml
    │   ├── lint.yml
    │   ├── npm-release.yml
    │   ├── test-e2e.yml
    │   ├── test.yml
    │   └── tsc.yml
├── .gitignore
├── .husky
    ├── commit-msg
    ├── pre-commit
    └── pre-push
├── .lintstagedrc
├── .prettierignore
├── .prettierrc
├── .storybook
    ├── main.ts
    ├── manager.ts
    ├── preview.tsx
    └── theme.ts
├── LICENSE
├── README.md
├── e2e
    ├── consts.ts
    ├── events.spec.ts
    ├── global.setup.ts
    └── on-move-params.spec.ts
├── eslint.config.mjs
├── knip.ts
├── misc
    ├── demo.gif
    └── device_orientation.jpg
├── package-lock.json
├── package.json
├── playwright.config.ts
├── scripts
    ├── rollup.config.ts
    ├── rollupConfigs.ts
    ├── setup-tests.ts
    ├── tsconfig.base.json
    ├── tsconfig.build.json
    └── tsconfig.dev.json
├── src
    ├── features
    │   ├── glare
    │   │   ├── Glare.ts
    │   │   ├── test
    │   │   │   ├── glare.test.tsx
    │   │   │   └── glareStyle.test.tsx
    │   │   └── types.public.ts
    │   └── tilt
    │   │   ├── Tilt.ts
    │   │   ├── test
    │   │       ├── tiltAxis.test.tsx
    │   │       ├── tiltDisable.test.tsx
    │   │       ├── tiltManualAngle.test.tsx
    │   │       ├── tiltMaxAngle.test.tsx
    │   │       ├── tiltOnEnter.test.tsx
    │   │       ├── tiltOnLeave.test.tsx
    │   │       ├── tiltOnPropChange.test.tsx
    │   │       ├── tiltOnTouchMove.test.tsx
    │   │       ├── tiltReset.test.tsx
    │   │       ├── tiltReverse.test.tsx
    │   │       ├── tiltStyle.test.tsx
    │   │       └── tiltTrackOnWindow.test.tsx
    │   │   └── types.public.ts
    ├── index.ts
    ├── react-parallax-tilt
    │   ├── ReactParallaxTilt.tsx
    │   ├── defaultProps.ts
    │   ├── types.public.ts
    │   └── types.ts
    └── utils
    │   ├── TiltTest.tsx
    │   ├── helperFns.ts
    │   └── types.ts
├── stories
    ├── Default
    │   ├── Default.demozap.tsx
    │   └── _Default.tsx
    ├── EventParams
    │   ├── EventParams.demozap.css
    │   ├── EventParams.demozap.tsx
    │   └── _EventParams.tsx
    ├── EventTiltAngle
    │   ├── EventTiltAngle.demozap.css
    │   ├── EventTiltAngle.demozap.tsx
    │   └── _EventTiltAngle.tsx
    ├── FlipPage
    │   ├── FlipPage.demozap.css
    │   ├── FlipPage.demozap.tsx
    │   ├── Page
    │   │   ├── Page.css
    │   │   ├── Page.tsx
    │   │   └── lorem-picsum.png
    │   └── _FlipPage.tsx
    ├── FlipVH
    │   ├── FlipVH.demozap.css
    │   ├── FlipVH.demozap.tsx
    │   └── _FlipVH.tsx
    ├── GlareEffect
    │   ├── GlareEffect.demozap.tsx
    │   └── _GlareEffect.tsx
    ├── GlareEffect360
    │   ├── GlareEffect360.demozap.tsx
    │   └── _GlareEffect360.tsx
    ├── GlareEffectNoTilt
    │   ├── GlareEffectNoTilt.demozap.tsx
    │   └── _GlareEffectNoTilt.tsx
    ├── InitialTilt
    │   ├── InitialTilt.demozap.tsx
    │   └── _InitialTilt.tsx
    ├── KeepFloating
    │   ├── KeepFloating.demozap.tsx
    │   └── _KeepFloating.tsx
    ├── MultipleTilt
    │   ├── MultipleTilt.demozap.css
    │   ├── MultipleTilt.demozap.tsx
    │   └── _MultipleTilt.tsx
    ├── MultipleTiltScroll
    │   ├── MultipleTiltScroll.demozap.css
    │   ├── MultipleTiltScroll.demozap.tsx
    │   └── _MultipleTiltScroll.tsx
    ├── ParallaxEffect
    │   ├── ParallaxEffect.demozap.css
    │   ├── ParallaxEffect.demozap.tsx
    │   └── _ParallaxEffect.tsx
    ├── ParallaxEffectGlareScale
    │   ├── ParallaxEffectGlareScale.demozap.css
    │   ├── ParallaxEffectGlareScale.demozap.tsx
    │   └── _ParallaxEffectGlareScale.tsx
    ├── ParallaxEffectImg
    │   ├── ParallaxEffectImg.demozap.css
    │   ├── ParallaxEffectImg.demozap.tsx
    │   ├── _ParallaxEffectImg.tsx
    │   └── img
    │   │   ├── background.jpg
    │   │   └── tree.png
    ├── ReactParallaxTilt.css
    ├── ReactParallaxTilt.stories.tsx
    ├── ReverseTilt
    │   ├── ReverseTilt.demozap.tsx
    │   └── _ReverseTilt.tsx
    ├── ScaleNoTilt
    │   ├── ScaleNoTilt.demozap.css
    │   ├── ScaleNoTilt.demozap.tsx
    │   └── _ScaleNoTilt.tsx
    ├── TiltDisableAxis
    │   ├── TiltDisableAxis.demozap.css
    │   ├── TiltDisableAxis.demozap.tsx
    │   └── _TiltDisableAxis.tsx
    ├── TiltImg
    │   ├── TiltImg.demozap.css
    │   ├── TiltImg.demozap.tsx
    │   ├── _TiltImg.tsx
    │   └── img
    │   │   └── nyc.jpg
    ├── TiltManualInput
    │   ├── TiltManualInput.demozap.css
    │   ├── TiltManualInput.demozap.tsx
    │   └── _TiltManualInput.tsx
    ├── TiltScale
    │   ├── TiltScale.demozap.css
    │   ├── TiltScale.demozap.tsx
    │   └── _TiltScale.tsx
    ├── TrackOnWindow
    │   ├── TrackOnWindow.demozap.css
    │   ├── TrackOnWindow.demozap.tsx
    │   └── _TrackOnWindow.tsx
    ├── _DefaultComponent
    │   ├── DefaultComponent.css
    │   └── DefaultComponent.tsx
    └── types
    │   └── images.d.ts
├── tsconfig.json
└── vitest.config.ts


/.commitlintrc.ts:
--------------------------------------------------------------------------------
1 | import type { UserConfig } from '@commitlint/types';
2 | 
3 | const commitlintConfig: UserConfig = {
4 |   extends: ['@commitlint/config-conventional'],
5 | };
6 | 
7 | // eslint-disable-next-line import-x/no-default-export
8 | export default commitlintConfig;
9 | 


--------------------------------------------------------------------------------
/.czrc:
--------------------------------------------------------------------------------
1 | {
2 |   "path": "node_modules/cz-conventional-changelog"
3 | }
4 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/bug_report.yml:
--------------------------------------------------------------------------------
 1 | name: 'Bug Report'
 2 | description: 'File a bug report'
 3 | body:
 4 |   - type: 'textarea'
 5 |     id: 'description'
 6 |     attributes:
 7 |       label: 'Description'
 8 |       description: 'A clear and concise description of what the bug is.'
 9 |       placeholder: |
10 |         Bug description
11 |     validations:
12 |       required: true
13 |   - type: 'input'
14 |     id: 'reproduction_link'
15 |     attributes:
16 |       label: 'Link to Reproduction - Please provide demo in online code editor [CodeSandbox](https://codesandbox.io/) or similar. - Issues without a reproduction link are likely to stall.'
17 |       description: |
18 |         Please provide demo in online code editor [CodeSandbox](https://codesandbox.io/) or similar.
19 |         Issues without a reproduction link are likely to stall.
20 |       placeholder: 'https://codesandbox.io/'
21 |     validations:
22 |       required: true
23 |   - type: 'textarea'
24 |     id: 'reproduction_steps'
25 |     attributes:
26 |       label: 'Steps to reproduce'
27 |       description: |
28 |         Steps to reproduce the behavior:
29 |       value: |
30 |         1. Go to '...'
31 |         2. Click on '...'
32 |         3. Scroll down to '...'
33 |         4. See error
34 |   - type: 'input'
35 |     id: 'expected_behavior'
36 |     attributes:
37 |       label: 'Expected behavior'
38 |       description: 'A clear and concise description of what you expected to happen.'
39 |     validations:
40 |       required: true
41 |   - type: 'textarea'
42 |     id: 'code_snippets'
43 |     attributes:
44 |       label: 'Code snippets'
45 |       description: |
46 |         If applicable, add code samples to help explain your problem.
47 |       value: |
48 |         ```jsx
49 |         <Tilt reset={false}>
50 |           <MyComponent />
51 |         </Tilt>
52 |         ```
53 |   - type: 'input'
54 |     id: 'lib-version'
55 |     attributes:
56 |       label: 'React Parallax Tilt Version'
57 |       description: 'The version of library you use.'
58 |       placeholder: '1.5.36'
59 |     validations:
60 |       required: true
61 |   - type: 'input'
62 |     id: 'browser'
63 |     attributes:
64 |       label: 'Browser'
65 |       description: 'The browser this issue occurred with.'
66 |       placeholder: 'Google Chrome 93'
67 |   - type: 'checkboxes'
68 |     id: 'operating-system'
69 |     attributes:
70 |       label: 'Operating System'
71 |       description: 'The operating system(s) this issue occurred with.'
72 |       options:
73 |         - label: 'macOS'
74 |         - label: 'Windows'
75 |         - label: 'Linux'
76 |   - type: 'textarea'
77 |     id: 'additional-information'
78 |     attributes:
79 |       label: 'Additional Information'
80 |       description: |
81 |         Add any other context about the problem here.
82 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/config.yml:
--------------------------------------------------------------------------------
1 | blank_issues_enabled: false
2 | contact_links:
3 |   - name: Ask a question
4 |     url: https://github.com/mkosir/react-parallax-tilt/discussions
5 |     about: Ask questions and discuss topics with other community members
6 | 


--------------------------------------------------------------------------------
/.github/pull_request_template.md:
--------------------------------------------------------------------------------
 1 | ### 🚀 Pull Request Template
 2 | 
 3 | **Description**
 4 | 
 5 | Feature Proposal ...
 6 | 
 7 | OR
 8 | 
 9 | Fixes a bug where '...' happened when '...'
10 | 
11 | **Checklist**
12 | 
13 | - [ ] Commit messages should follow [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/) as much as possible. After staging your changes please run `npm run commit`
14 | - [ ] Lint, TypeScript, Prettier and all tests passing - `npm run lint && npm run tsc && npm run test-report`
15 | - [ ] Extended the Storybook / README / documentation, if necessary
16 | 


--------------------------------------------------------------------------------
/.github/workflows/actions/setup_node-cache_dep-install_dep/action.yml:
--------------------------------------------------------------------------------
 1 | name: 'setup_node-cache_dep-install_dep'
 2 | description: 'Setup Node.js ⚙️ - Cache dependencies ⚡ - Install dependencies 🔧'
 3 | runs:
 4 |   using: 'composite'
 5 |   steps:
 6 |     - name: Setup Node.js ⚙️
 7 |       uses: actions/setup-node@v4
 8 |       with:
 9 |         node-version: '24.x'
10 | 
11 |     - name: Cache dependencies ⚡
12 |       id: cache_dependencies
13 |       uses: actions/cache@v4
14 |       with:
15 |         path: node_modules
16 |         key: node-modules-${{ hashFiles('package-lock.json') }}
17 | 
18 |     - name: Install dependencies 🔧
19 |       shell: bash
20 |       if: steps.cache_dependencies.outputs.cache-hit != 'true'
21 |       run: npm ci
22 | 


--------------------------------------------------------------------------------
/.github/workflows/build.yml:
--------------------------------------------------------------------------------
 1 | name: build
 2 | 
 3 | on: push
 4 | 
 5 | jobs:
 6 |   build:
 7 |     runs-on: ubuntu-latest
 8 | 
 9 |     steps:
10 |       - name: Checkout 🛎️
11 |         uses: actions/checkout@v4
12 | 
13 |       - name: Setup Node.js ⚙️ - Cache dependencies ⚡ - Install dependencies 🔧
14 |         uses: ./.github/workflows/actions/setup_node-cache_dep-install_dep
15 | 
16 |       - name: Build 🏗️
17 |         run: npm run build
18 | 


--------------------------------------------------------------------------------
/.github/workflows/deploy-storybook.yml:
--------------------------------------------------------------------------------
 1 | name: deploy-storybook
 2 | 
 3 | on:
 4 |   workflow_run:
 5 |     workflows: [test]
 6 |     types: [completed]
 7 |     branches: [main]
 8 | 
 9 | env:
10 |   FOLDER_PATH_STORYBOOK_BUILD: ./build-storybook-static
11 | 
12 | jobs:
13 |   deploy-storybook:
14 |     runs-on: ubuntu-latest
15 |     if: ${{ github.event.workflow_run.conclusion == 'success' }}
16 | 
17 |     environment:
18 |       name: storybook-demos
19 |       url: https://mkosir.github.io/react-parallax-tilt/?path=/story/react-parallax-tilt--event-params
20 | 
21 |     steps:
22 |       - name: Checkout 🛎️
23 |         uses: actions/checkout@v4
24 | 
25 |       - name: Setup Node.js ⚙️ - Cache dependencies ⚡ - Install dependencies 🔧
26 |         uses: ./.github/workflows/actions/setup_node-cache_dep-install_dep
27 | 
28 |       - name: Build 🏗️
29 |         run: npm run storybook-build
30 | 
31 |       - name: Deploy 🚀
32 |         uses: JamesIves/github-pages-deploy-action@v4
33 |         with:
34 |           branch: gh-pages
35 |           folder: ${{ env.FOLDER_PATH_STORYBOOK_BUILD }}
36 |           clean: true
37 | 


--------------------------------------------------------------------------------
/.github/workflows/lint.yml:
--------------------------------------------------------------------------------
 1 | name: lint
 2 | 
 3 | on: push
 4 | 
 5 | jobs:
 6 |   lint:
 7 |     runs-on: ubuntu-latest
 8 | 
 9 |     steps:
10 |       - name: Checkout 🛎️
11 |         uses: actions/checkout@v4
12 | 
13 |       - name: Setup Node.js ⚙️ - Cache dependencies ⚡ - Install dependencies 🔧
14 |         uses: ./.github/workflows/actions/setup_node-cache_dep-install_dep
15 | 
16 |       - name: Lint ✅
17 |         run: npm run lint
18 | 


--------------------------------------------------------------------------------
/.github/workflows/npm-release.yml:
--------------------------------------------------------------------------------
 1 | name: npm-release
 2 | 
 3 | on:
 4 |   workflow_run:
 5 |     workflows: [test]
 6 |     types: [completed]
 7 |     branches: [main]
 8 | 
 9 | jobs:
10 |   npm-release:
11 |     runs-on: ubuntu-latest
12 |     if: ${{ github.event.workflow_run.conclusion == 'success' }}
13 |     env:
14 |       NODE_ENV: 'production'
15 | 
16 |     steps:
17 |       - name: Checkout 🛎️
18 |         uses: actions/checkout@v4
19 | 
20 |       - name: Setup Node.js ⚙️ - Cache dependencies ⚡ - Install dependencies 🔧
21 |         uses: ./.github/workflows/actions/setup_node-cache_dep-install_dep
22 | 
23 |       - name: Build 🏗️
24 |         run: npm run build
25 | 
26 |       - name: Release 🚀
27 |         env:
28 |           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
29 |           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
30 |         run: npm run release
31 | 


--------------------------------------------------------------------------------
/.github/workflows/test-e2e.yml:
--------------------------------------------------------------------------------
 1 | name: test-e2e
 2 | 
 3 | on: push
 4 | 
 5 | env:
 6 |   FOLDER_PATH_TEST_E2E_REPORT: ./test-e2e-report
 7 | 
 8 | jobs:
 9 |   test:
10 |     runs-on: ubuntu-latest
11 | 
12 |     steps:
13 |       - name: Checkout 🛎️
14 |         uses: actions/checkout@v4
15 | 
16 |       - name: Setup Node.js ⚙️ - Cache dependencies ⚡ - Install dependencies 🔧
17 |         uses: ./.github/workflows/actions/setup_node-cache_dep-install_dep
18 | 
19 |       - name: Install Playwright Browsers
20 |         run: npx playwright install --with-deps
21 | 
22 |       - name: Test E2E 🧪
23 |         run: npx playwright test
24 |         # run: npm run test-e2e
25 | 
26 |       - name: Upload report 📈
27 |         uses: nwtgck/actions-netlify@v3
28 |         # Upload test report also in case of test failure.
29 |         if: always()
30 |         with:
31 |           publish-dir: ${{ env.FOLDER_PATH_TEST_E2E_REPORT }}
32 |           production-deploy: true
33 |         env:
34 |           NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
35 |           NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID_TEST_E2E_REPORT }}
36 | 


--------------------------------------------------------------------------------
/.github/workflows/test.yml:
--------------------------------------------------------------------------------
 1 | name: test
 2 | 
 3 | on: push
 4 | 
 5 | env:
 6 |   FOLDER_PATH_TEST_UNIT_REPORT: ./test-unit-report
 7 | 
 8 | jobs:
 9 |   test:
10 |     runs-on: ubuntu-latest
11 | 
12 |     steps:
13 |       - name: Checkout 🛎️
14 |         uses: actions/checkout@v4
15 | 
16 |       - name: Setup Node.js ⚙️ - Cache dependencies ⚡ - Install dependencies 🔧
17 |         uses: ./.github/workflows/actions/setup_node-cache_dep-install_dep
18 | 
19 |       - name: Test 🧪
20 |         run: npm run test-report
21 | 
22 |       - name: Upload report 📈
23 |         uses: nwtgck/actions-netlify@v3
24 |         with:
25 |           publish-dir: ${{ env.FOLDER_PATH_TEST_UNIT_REPORT }}
26 |           production-deploy: true
27 |         env:
28 |           NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
29 |           NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID_TEST_UNIT_REPORT }}
30 | 
31 |       - name: Upload coverage to Codecov 📶
32 |         uses: codecov/codecov-action@v5
33 |         with:
34 |           token: ${{ secrets.CODECOV_TOKEN }}
35 |           fail_ci_if_error: true
36 |           verbose: true
37 | 


--------------------------------------------------------------------------------
/.github/workflows/tsc.yml:
--------------------------------------------------------------------------------
 1 | name: tsc
 2 | 
 3 | on: push
 4 | 
 5 | jobs:
 6 |   tsc:
 7 |     runs-on: ubuntu-latest
 8 | 
 9 |     steps:
10 |       - name: Checkout 🛎️
11 |         uses: actions/checkout@v4
12 | 
13 |       - name: Setup Node.js ⚙️ - Cache dependencies ⚡ - Install dependencies 🔧
14 |         uses: ./.github/workflows/actions/setup_node-cache_dep-install_dep
15 | 
16 |       - name: tsc 🔎
17 |         run: npm run tsc
18 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | node_modules
 2 | dist
 3 | compiled
 4 | build-storybook-static
 5 | 
 6 | bundle-analysis.html
 7 | 
 8 | .rpt2_cache
 9 | 
10 | npm-debug.log*
11 | 
12 | .DS_Store
13 | .env
14 | *.log
15 | .vscode
16 | .idea
17 | test-unit-report
18 | /test-e2e-results/
19 | /test-e2e-report/
20 | /blob-report/
21 | /playwright/.cache/
22 | 


--------------------------------------------------------------------------------
/.husky/commit-msg:
--------------------------------------------------------------------------------
1 | npx --no-install commitlint --edit "$1"


--------------------------------------------------------------------------------
/.husky/pre-commit:
--------------------------------------------------------------------------------
1 | npm run lint-staged-husky


--------------------------------------------------------------------------------
/.husky/pre-push:
--------------------------------------------------------------------------------
1 | npm run test-report


--------------------------------------------------------------------------------
/.lintstagedrc:
--------------------------------------------------------------------------------
1 | {
2 |   "*": ["prettier --write --ignore-unknown"],
3 |   "*.{js,jsx,ts,tsx}": ["eslint --max-warnings 0"]
4 | }
5 | 


--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
1 | test-unit-report
2 | dist


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "printWidth": 120,
3 |   "semi": true,
4 |   "singleQuote": true,
5 |   "trailingComma": "all"
6 | }
7 | 


--------------------------------------------------------------------------------
/.storybook/main.ts:
--------------------------------------------------------------------------------
 1 | import path from 'path';
 2 | 
 3 | import type { StorybookConfig } from '@storybook/react-webpack5';
 4 | 
 5 | const storybookConfig: StorybookConfig = {
 6 |   stories: ['../stories/**/*.stories.tsx'],
 7 |   framework: {
 8 |     name: '@storybook/react-webpack5',
 9 |     options: {},
10 |   },
11 | 
12 |   // JSX transform no longer requires importing React explicitly in every file.
13 |   swc: () => ({
14 |     jsc: {
15 |       transform: {
16 |         react: {
17 |           runtime: 'automatic',
18 |         },
19 |       },
20 |     },
21 |   }),
22 | 
23 |   webpackFinal: (config) => {
24 |     // Resolve absolute imports
25 |     config.resolve?.modules?.push(path.resolve(process.cwd(), 'src'));
26 | 
27 |     return config;
28 |   },
29 | 
30 |   addons: ['@storybook/addon-webpack5-compiler-swc'],
31 | };
32 | 
33 | // eslint-disable-next-line import-x/no-default-export
34 | export default storybookConfig;
35 | 


--------------------------------------------------------------------------------
/.storybook/manager.ts:
--------------------------------------------------------------------------------
 1 | import { addons } from 'storybook/manager-api';
 2 | 
 3 | import { theme } from './theme';
 4 | 
 5 | addons.setConfig({
 6 |   theme,
 7 |   toolbar: {
 8 |     title: { hidden: false },
 9 |     zoom: { hidden: false },
10 |     eject: { hidden: false },
11 |     copy: { hidden: false },
12 |     fullscreen: { hidden: false },
13 |   },
14 |   bottomPanelHeight: 0,
15 |   panelPosition: false,
16 | });
17 | 


--------------------------------------------------------------------------------
/.storybook/preview.tsx:
--------------------------------------------------------------------------------
 1 | import type { Preview } from '@storybook/react-webpack5';
 2 | 
 3 | const preview: Preview = {
 4 |   parameters: {
 5 |     actions: { argTypesRegex: '^on[A-Z].*' },
 6 |     controls: {
 7 |       // Description toggle
 8 |       // expanded: true,
 9 |       matchers: {
10 |         color: /(background|color)$/i,
11 |         date: /Date$/,
12 |       },
13 |     },
14 |   },
15 | };
16 | 
17 | // eslint-disable-next-line import-x/no-default-export
18 | export default preview;
19 | 


--------------------------------------------------------------------------------
/.storybook/theme.ts:
--------------------------------------------------------------------------------
1 | import { create } from 'storybook/theming';
2 | 
3 | export const theme = create({
4 |   base: 'light',
5 |   brandTitle: 'React Parallax Tilt 👀',
6 |   brandUrl: 'https://github.com/mkosir/react-parallax-tilt',
7 | });
8 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2019 Marko Kosir
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # React Tilt
  2 | 
  3 | [![npm version][npm-badge]][npm-url]
  4 | [![npm downloads][downloads-badge]][npm-url]
  5 | [![npm bundle size][size-badge]][size-url]
  6 | [![Open issues][issues-badge]][issues-url]
  7 | [![TypeScript][typescript-badge]][typescript-url]
  8 | [![semantic-release][semantic-badge]][semantic-url]
  9 | 
 10 | [![CI][lint-badge]][lint-url]
 11 | [![CI][tsc-badge]][tsc-url]
 12 | [![CI][build-badge]][build-url]
 13 | [![CI][test-badge]][test-url]
 14 | [![CI][test-e2e-badge]][test-e2e-url]
 15 | [![Codecov Coverage][coverage-badge]][coverage-url]
 16 | 
 17 | [![CI][deploy-storybook-badge]][deploy-storybook-url]
 18 | [![CI][npm-release-badge]][npm-release-url]
 19 | 
 20 | _👀 Easily apply tilt hover effects to React components_
 21 | 
 22 | [![](misc/demo.gif)](https://mkosir.github.io/react-parallax-tilt/?path=/story/react-parallax-tilt--glare-effect)
 23 | 
 24 | ## [Live Demo 💥](https://mkosir.github.io/react-parallax-tilt)
 25 | 
 26 | ## Install
 27 | 
 28 | ```bash
 29 | npm install react-parallax-tilt
 30 | ```
 31 | 
 32 | ## Features
 33 | 
 34 | - Lightweight 3kB, zero dependencies 📦
 35 | - Tree-shakable 🌳 ESM and CommonJS support
 36 | - Works with React v15 onwards
 37 | - Supports **mouse** and **touch** events
 38 | - Support for device tilting (**gyroscope**)
 39 | - **Glare** effect 🌟 with custom props (color, position, etc.) [🔗demo](https://mkosir.github.io/react-parallax-tilt/?path=/story/react-parallax-tilt--parallax-effect-glare-scale)
 40 | - **Event tracking** for component values 📐 (tilt, glare, mousemove, etc.) [🔗demo](https://mkosir.github.io/react-parallax-tilt/?path=/story/react-parallax-tilt--event-params)
 41 | - Multiple built-in effects:
 42 |   - **Scale** on hover [🔗demo](https://mkosir.github.io/react-parallax-tilt/?path=/story/react-parallax-tilt--scale)
 43 |   - **Disable** x/y axis [🔗demo](https://mkosir.github.io/react-parallax-tilt/?path=/story/react-parallax-tilt--tilt-disable-axis)
 44 |   - **Flip** component vertically/horizontally [🔗demo](https://mkosir.github.io/react-parallax-tilt/?path=/story/react-parallax-tilt--flip-vh)
 45 |   - **Window** tilt hover effect [🔗demo](https://mkosir.github.io/react-parallax-tilt/?path=/story/react-parallax-tilt--track-on-window)
 46 |   - **Manual tilt** control 🕹 (via joystick, slider, etc.) [🔗demo](https://mkosir.github.io/react-parallax-tilt/?path=/story/react-parallax-tilt--tilt-manual-input)
 47 |   - **Parallax** effect for overlaid images [🔗demo](https://mkosir.github.io/react-parallax-tilt/?path=/story/react-parallax-tilt--parallax-effect-img)
 48 | 
 49 | ## Example
 50 | 
 51 | ```jsx
 52 | import Tilt from 'react-parallax-tilt';
 53 | 
 54 | const App = () => {
 55 |   return (
 56 |     <Tilt>
 57 |       <div style={{ height: '300px', backgroundColor: 'darkgreen' }}>
 58 |         <h1>React Parallax Tilt 👀</h1>
 59 |       </div>
 60 |     </Tilt>
 61 |   );
 62 | };
 63 | ```
 64 | 
 65 | ## Props
 66 | 
 67 | All props are optional.  
 68 | Here's the complete list of available props and their default values:
 69 | 
 70 | > ▶︎ indicates the default value
 71 | 
 72 | **tiltEnable**: _boolean_ ▶︎ `true`  
 73 | Enables/disables the tilt effect.
 74 | 
 75 | **tiltReverse**: _boolean_ ▶︎ `false`  
 76 | Reverses the tilt direction.
 77 | 
 78 | **tiltAngleXInitial**: _number_ ▶︎ `0`  
 79 | Initial tilt angle (in degrees) on the x-axis.
 80 | 
 81 | **tiltAngleYInitial**: _number_ ▶︎ `0`  
 82 | Initial tilt angle (in degrees) on the y-axis.
 83 | 
 84 | **tiltMaxAngleX**: _number_ ▶︎ `20`  
 85 | Maximum tilt rotation (in degrees) on the x-axis. Range: `0°-90°`.
 86 | 
 87 | **tiltMaxAngleY**: _number_ ▶︎ `20`  
 88 | Maximum tilt rotation (in degrees) on the y-axis. Range: `0°-90°`.
 89 | 
 90 | **tiltAxis**: _'x' | 'y'_ ▶︎ `undefined`  
 91 | Enables tilt on a single axis only.
 92 | 
 93 | **tiltAngleXManual**: _number_ | null ▶︎ `null`  
 94 | Manual tilt rotation (in degrees) on the x-axis.
 95 | 
 96 | **tiltAngleYManual**: _number_ | null ▶︎ `null`  
 97 | Manual tilt rotation (in degrees) on the y-axis.
 98 | 
 99 | **glareEnable**: _boolean_ ▶︎ `false`  
100 | Enables/disables the glare effect.
101 | 
102 | **glareMaxOpacity**: _number_ ▶︎ `0.7`  
103 | Maximum glare opacity (`0.5 = 50%, 1 = 100%`). Range: `0-1`
104 | 
105 | **glareColor**: _string_ ▶︎ `#ffffff`  
106 | Sets the color of the glare effect.
107 | 
108 | **glarePosition**: _'top' | 'right' | 'bottom' | 'left' | 'all'_ ▶︎ `bottom`  
109 | Sets the position of the glare effect.
110 | 
111 | **glareReverse**: _boolean_ ▶︎ `false`  
112 | Reverses the glare direction.
113 | 
114 | **glareBorderRadius**: _string_ ▶︎ `0`  
115 | Sets the border radius of the glare. Accepts any standard CSS border radius value.
116 | 
117 | **scale**: _number_ ▶︎ `1`  
118 | Scale of the component (`1.5 = 150%, 2 = 200%`).
119 | 
120 | **perspective**: _number_ ▶︎ `1000`  
121 | Defines how far the tilt component appears from the user. Lower values create more extreme tilt effects.
122 | 
123 | **flipVertically**: _boolean_ ▶︎ `false`  
124 | Enables/disables vertical flipping of the component.
125 | 
126 | **flipHorizontally**: _boolean_ ▶︎ `false`  
127 | Enables/disables horizontal flipping of the component.
128 | 
129 | **reset**: _boolean_ ▶︎ `true`  
130 | Determines if effects should reset on `onLeave` event.
131 | 
132 | **transitionEasing**: _string_ ▶︎ `cubic-bezier(.03,.98,.52,.99)`  
133 | Easing function for the transition.
134 | 
135 | **transitionSpeed**: _number_ ▶︎ `400`  
136 | Speed of the transition.
137 | 
138 | **trackOnWindow**: _boolean_ ▶︎ `false`  
139 | Tracks mouse and touch events across the entire window.
140 | 
141 | **gyroscope**: _boolean_ ▶︎ `false`  
142 | Enables/disables device orientation detection.
143 | 
144 | **onMove**: ({ **tiltAngleX**: _number_, **tiltAngleY**: _number_, **tiltAngleXPercentage**: _number_, **tiltAngleYPercentage**: _number_, **glareAngle**: _number_, **glareOpacity**: _number_, **event**: _Event_ }) => _void_  
145 | Callback triggered when user moves on the component.
146 | 
147 | **onEnter**: (**event**: _Event_) => _void_  
148 | Callback triggered when user enters the component.
149 | 
150 | **onLeave**: (**event**: _Event_) => _void_  
151 | Callback triggered when user leaves the component.
152 | 
153 | ## Gyroscope - Device Orientation
154 | 
155 | Please note that device orientation detection is currently [experimental technology](https://developer.mozilla.org/en-US/docs/MDN/Contribute/Guidelines/Conventions_definitions#Experimental).  
156 | Check the [browser compatibility](https://caniuse.com/#search=DeviceOrientation) before using it in production.  
157 | Important considerations when using device orientation:
158 | 
159 | - Always use secure origins (such as `https`)
160 | - It may not work in all browsers when used within a cross-origin `<iframe>` element
161 | 
162 | <details>
163 | <summary>Device Orientation on iOS 13+</summary>
164 | 
165 | Apple disabled device motion and orientation by default starting with iOS 12.2.  
166 | iOS 13+ provides a permission API to access device orientation events.
167 | 
168 | When using the gyroscope feature:
169 | 
170 | ```jsx
171 | <Tilt gyroscope={true}>
172 |   <h1>React Parallax Tilt 👀</h1>
173 | </Tilt>
174 | ```
175 | 
176 | A permission dialog will prompt the user to allow motion and orientation access at the domain level:  
177 | ![](misc/device_orientation.jpg)
178 | 
179 | Note: User interaction (like tapping a button) is required to display the permission dialog - it cannot be triggered automatically on page load.
180 | 
181 | </details>
182 | 
183 | ## Development
184 | 
185 | _Easily set up a local development environment!_
186 | 
187 | Build project and start storybook on [localhost](http://localhost:9009):
188 | 
189 | - clone
190 | - `npm install`
191 | - `npm start`
192 | 
193 | **Start coding!** 🎉
194 | 
195 | <details>
196 | <summary>Alternative setup using npm link</summary>
197 | 
198 | 1. Clone this repository and navigate to its location
199 | 2. Run the following commands:
200 | 
201 |    ```bash
202 |    npm install
203 |    npm link # link your local repo to your global packages
204 |    npm run build:watch # build the files and watch for changes
205 |    ```
206 | 
207 | 3. Clone the project you want to test with react-parallax-tilt and run:
208 | 
209 |    ```bash
210 |    npm install
211 |    npm link react-parallax-tilt # link your local copy into this project's node_modules
212 |    npm start
213 |    ```
214 | 
215 | </details>
216 | 
217 | ## Contributing
218 | 
219 | All contributions are welcome!  
220 | Please review contribution guidelines: [Pull Requests](.github/pull_request_template.md) | [Issues](https://github.com/mkosir/react-parallax-tilt/issues/new/choose)
221 | 
222 | [npm-url]: https://www.npmjs.com/package/react-parallax-tilt
223 | [npm-badge]: https://img.shields.io/npm/v/react-parallax-tilt.svg
224 | [size-url]: https://bundlephobia.com/package/react-parallax-tilt
225 | [size-badge]: https://badgen.net/bundlephobia/minzip/react-parallax-tilt
226 | [downloads-badge]: https://img.shields.io/npm/dm/react-parallax-tilt.svg?color=blue
227 | [lint-badge]: https://github.com/mkosir/react-parallax-tilt/actions/workflows/lint.yml/badge.svg
228 | [lint-url]: https://github.com/mkosir/react-parallax-tilt/actions/workflows/lint.yml
229 | [tsc-badge]: https://github.com/mkosir/react-parallax-tilt/actions/workflows/tsc.yml/badge.svg
230 | [tsc-url]: https://github.com/mkosir/react-parallax-tilt/actions/workflows/tsc.yml
231 | [build-badge]: https://github.com/mkosir/react-parallax-tilt/actions/workflows/build.yml/badge.svg
232 | [build-url]: https://github.com/mkosir/react-parallax-tilt/actions/workflows/build.yml
233 | [test-badge]: https://github.com/mkosir/react-parallax-tilt/actions/workflows/test.yml/badge.svg
234 | [test-url]: https://react-parallax-tilt-test-unit-report.netlify.app/
235 | [test-e2e-badge]: https://github.com/mkosir/react-parallax-tilt/actions/workflows/test-e2e.yml/badge.svg
236 | [test-e2e-url]: https://react-parallax-tilt-test-e2e-report.netlify.app/
237 | [deploy-storybook-badge]: https://github.com/mkosir/react-parallax-tilt/actions/workflows/deploy-storybook.yml/badge.svg
238 | [deploy-storybook-url]: https://github.com/mkosir/react-parallax-tilt/actions/workflows/deploy-storybook.yml
239 | [npm-release-badge]: https://github.com/mkosir/react-parallax-tilt/actions/workflows/npm-release.yml/badge.svg
240 | [npm-release-url]: https://github.com/mkosir/react-parallax-tilt/actions/workflows/npm-release.yml
241 | [coverage-badge]: https://codecov.io/gh/mkosir/react-parallax-tilt/branch/main/graph/badge.svg
242 | [coverage-url]: https://app.codecov.io/github/mkosir/react-parallax-tilt/tree/main
243 | [issues-badge]: https://img.shields.io/github/issues/mkosir/react-parallax-tilt
244 | [issues-url]: https://github.com/mkosir/react-parallax-tilt/issues
245 | [semantic-badge]: https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg
246 | [semantic-url]: https://github.com/semantic-release/semantic-release
247 | [typescript-badge]: https://badges.frapsoft.com/typescript/code/typescript.svg?v=101
248 | [typescript-url]: https://github.com/microsoft/TypeScript
249 | 


--------------------------------------------------------------------------------
/e2e/consts.ts:
--------------------------------------------------------------------------------
1 | import type { FrameLocator, Page } from '@playwright/test';
2 | 
3 | const IFRAME_SELECTOR = 'iframe[title="storybook-preview-iframe"]';
4 | 
5 | export const getIframeContent = (page: Page): FrameLocator => {
6 |   const content = page.frameLocator(IFRAME_SELECTOR);
7 |   return content;
8 | };
9 | 


--------------------------------------------------------------------------------
/e2e/events.spec.ts:
--------------------------------------------------------------------------------
 1 | import { test, expect } from '@playwright/test';
 2 | 
 3 | import { getIframeContent } from './consts';
 4 | 
 5 | test.beforeEach(async ({ page }) => {
 6 |   await page.goto('/');
 7 |   await page.getByRole('link', { name: 'Event - Params' }).click();
 8 | });
 9 | 
10 | test("should trigger 'onMove' event with 'mousemove' event type when mouse hovers tilt element", async ({ page }) => {
11 |   const content = getIframeContent(page);
12 | 
13 |   await content.getByTestId('topMidLeft').hover({ position: { x: 10, y: 10 } });
14 |   await expect(content.getByTestId('evenDescription')).toHaveText(
15 |     "Event 'onMove' triggered by 'mousemove' event type.",
16 |   );
17 | });
18 | 
19 | test("should trigger 'onMove' event with 'autoreset' event type when mouse leaves tilt element", async ({ page }) => {
20 |   const content = getIframeContent(page);
21 | 
22 |   await content.getByTestId('topMidLeft').hover({ position: { x: 10, y: 10 } });
23 |   await content.getByText('Track events:').hover();
24 |   await expect(content.getByTestId('evenDescription')).toHaveText(
25 |     "Event 'onMove' triggered by 'autoreset' event type.",
26 |   );
27 | });
28 | 
29 | test("should trigger 'onEnter' event with 'mouseenter' event type when mouse enters tilt element", async ({ page }) => {
30 |   const content = getIframeContent(page);
31 | 
32 |   await content.getByLabel('onMove').uncheck();
33 |   await content.getByTestId('topMidLeft').hover({ position: { x: 10, y: 10 } });
34 |   await expect(content.getByTestId('evenDescription')).toHaveText(
35 |     "Event 'onEnter' triggered by 'mouseenter' event type.",
36 |   );
37 | });
38 | 
39 | test("should trigger 'onLeave' event with 'mouseleave' event type when mouse enters tilt element", async ({ page }) => {
40 |   const content = getIframeContent(page);
41 | 
42 |   await content.getByLabel('onMove').uncheck();
43 |   await content.getByTestId('topMidLeft').hover({ position: { x: 10, y: 10 } });
44 |   await content.getByText('Track events:').hover();
45 |   await expect(content.getByTestId('evenDescription')).toHaveText(
46 |     "Event 'onLeave' triggered by 'mouseleave' event type.",
47 |   );
48 | });
49 | 


--------------------------------------------------------------------------------
/e2e/global.setup.ts:
--------------------------------------------------------------------------------
 1 | import { test as setup } from '@playwright/test';
 2 | 
 3 | setup("remove Storybook 'what's new' popup", async ({ page }) => {
 4 |   await page.goto('/');
 5 | 
 6 |   // Wait for sidebar to load.
 7 |   await page.getByRole('link', { name: 'Keep floating' }).waitFor({
 8 |     state: 'visible',
 9 |     timeout: 5000,
10 |   });
11 | 
12 |   if (await page.isVisible("text='Learn what's new in Storybook'")) {
13 |     await page.getByRole('button', { name: 'Dismiss notification' }).click();
14 |   }
15 | });
16 | 


--------------------------------------------------------------------------------
/e2e/on-move-params.spec.ts:
--------------------------------------------------------------------------------
 1 | import { test, expect } from '@playwright/test';
 2 | 
 3 | import type { OnMoveParams } from 'index';
 4 | 
 5 | import { getIframeContent } from './consts';
 6 | 
 7 | test.beforeEach(async ({ page }) => {
 8 |   await page.goto('/');
 9 |   await page.getByRole('link', { name: 'Event - Params' }).click();
10 | });
11 | 
12 | test('should get move params max values calculated and rendered, when mouse is positioned at top left corner of tilt element', async ({
13 |   page,
14 | }) => {
15 |   const content = getIframeContent(page);
16 | 
17 |   await content.getByTestId('topLeft').hover({ position: { x: 10, y: 10 } });
18 |   await expect(content.getByTestId('tiltAngleX')).toHaveText('-20.00° / -100.00%');
19 |   await expect(content.getByTestId('tiltAngleY')).toHaveText('20.00° / 100.00%');
20 |   await expect(content.getByTestId('glareAngle')).toHaveText('-45.00°');
21 |   await expect(content.getByTestId('glareOpacity')).toHaveText('0.00');
22 | });
23 | 
24 | test('should get move params max values calculated within tolerance (to avoid test flakiness), when mouse is positioned at corners of tilt element', async ({
25 |   page,
26 | }) => {
27 |   const content = getIframeContent(page);
28 | 
29 |   await content.getByTestId('topLeft').hover({ position: { x: 10, y: 10 } });
30 | 
31 |   const topLeftParamsString = await content.getByTestId('params').innerText();
32 |   const topLeftParams = JSON.parse(topLeftParamsString) as OnMoveParams;
33 | 
34 |   expect(topLeftParams.tiltAngleX).toBeLessThanOrEqual(-20);
35 |   expect(topLeftParams.tiltAngleY).toBeGreaterThanOrEqual(20);
36 |   expect(topLeftParams.tiltAngleXPercentage).toBeLessThanOrEqual(-100);
37 |   expect(topLeftParams.tiltAngleYPercentage).toBeGreaterThanOrEqual(100);
38 |   expect(topLeftParams.glareAngle).toBeLessThanOrEqual(-45);
39 |   expect(topLeftParams.glareOpacity).toBe(0);
40 | 
41 |   await content.getByTestId('topRight').hover({ position: { x: 25, y: 10 } });
42 | 
43 |   const topRightParamsString = await content.getByTestId('params').innerText();
44 |   const topRightParams = JSON.parse(topRightParamsString) as OnMoveParams;
45 | 
46 |   expect(topRightParams.tiltAngleX).toBeLessThanOrEqual(-19);
47 |   expect(topRightParams.tiltAngleY).toBeLessThanOrEqual(-19);
48 |   expect(topRightParams.tiltAngleXPercentage).toBeLessThanOrEqual(-95);
49 |   expect(topRightParams.tiltAngleYPercentage).toBeLessThanOrEqual(-95);
50 |   expect(topRightParams.glareAngle).toBeGreaterThanOrEqual(40);
51 |   expect(topRightParams.glareOpacity).toBe(0);
52 | 
53 |   await content.getByTestId('bottomRight').hover({ position: { x: 25, y: 20 } });
54 | 
55 |   const bottomRightParamsString = await content.getByTestId('params').innerText();
56 |   const bottomRightParams = JSON.parse(bottomRightParamsString) as OnMoveParams;
57 | 
58 |   expect(bottomRightParams.tiltAngleX).toBeGreaterThanOrEqual(19);
59 |   expect(bottomRightParams.tiltAngleY).toBeLessThanOrEqual(-18);
60 |   expect(bottomRightParams.tiltAngleXPercentage).toBeGreaterThanOrEqual(95);
61 |   expect(bottomRightParams.tiltAngleYPercentage).toBeLessThanOrEqual(-90);
62 |   expect(bottomRightParams.glareAngle).toBeGreaterThanOrEqual(44);
63 |   expect(bottomRightParams.glareOpacity).toBeGreaterThanOrEqual(0.95);
64 | 
65 |   await content.getByTestId('bottomLeft').hover({ position: { x: 5, y: 20 } });
66 | 
67 |   const bottomLeftParamsString = await content.getByTestId('params').innerText();
68 |   const bottomLeftParams = JSON.parse(bottomLeftParamsString) as OnMoveParams;
69 | 
70 |   expect(bottomLeftParams.tiltAngleX).toBeLessThanOrEqual(20);
71 |   expect(bottomLeftParams.tiltAngleY).toBeLessThanOrEqual(20);
72 |   expect(bottomLeftParams.tiltAngleXPercentage).toBeLessThanOrEqual(100);
73 |   expect(bottomLeftParams.tiltAngleYPercentage).toBeLessThanOrEqual(100);
74 |   expect(bottomLeftParams.glareAngle).toBeLessThanOrEqual(130);
75 |   expect(bottomLeftParams.glareOpacity).toBeGreaterThanOrEqual(0.9);
76 | });
77 | 
78 | test('should get move params half max values calculated within tolerance (to avoid test flakiness), when mouse is positioned in the middle of tilt element', async ({
79 |   page,
80 | }) => {
81 |   const content = getIframeContent(page);
82 | 
83 |   await content.getByTestId('topMidLeft').hover({ position: { x: 10, y: 10 } });
84 | 
85 |   const topMidLeftParamsString = await content.getByTestId('params').innerText();
86 |   const topMidLeftParams = JSON.parse(topMidLeftParamsString) as OnMoveParams;
87 | 
88 |   expect(topMidLeftParams.tiltAngleX).toBeLessThanOrEqual(-10);
89 |   expect(topMidLeftParams.tiltAngleY).toBeGreaterThanOrEqual(10);
90 |   expect(topMidLeftParams.tiltAngleXPercentage).toBeLessThanOrEqual(-50);
91 |   expect(topMidLeftParams.tiltAngleYPercentage).toBeGreaterThanOrEqual(50);
92 |   expect(topMidLeftParams.glareAngle).toBeLessThanOrEqual(-40);
93 |   expect(topMidLeftParams.glareOpacity).toBe(0);
94 | });
95 | 


--------------------------------------------------------------------------------
/eslint.config.mjs:
--------------------------------------------------------------------------------
  1 | import eslint from '@eslint/js';
  2 | import eslintPluginVitest from '@vitest/eslint-plugin';
  3 | import eslintConfigPrettier from 'eslint-config-prettier';
  4 | import { createTypeScriptImportResolver } from 'eslint-import-resolver-typescript';
  5 | import * as eslintPluginImportX from 'eslint-plugin-import-x';
  6 | import eslintPluginJestDom from 'eslint-plugin-jest-dom';
  7 | import eslintPluginJsxA11y from 'eslint-plugin-jsx-a11y';
  8 | import eslintPluginPlaywright from 'eslint-plugin-playwright';
  9 | import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended';
 10 | import eslintPluginReact from 'eslint-plugin-react';
 11 | import * as eslintPluginReactHooks from 'eslint-plugin-react-hooks';
 12 | import eslintPluginTestingLibrary from 'eslint-plugin-testing-library';
 13 | import * as tseslint from 'typescript-eslint';
 14 | 
 15 | export default tseslint.config(
 16 |   eslint.configs.recommended,
 17 |   eslintPluginImportX.flatConfigs.recommended,
 18 |   eslintPluginImportX.flatConfigs.typescript,
 19 |   ...tseslint.configs.strictTypeChecked,
 20 |   ...tseslint.configs.stylisticTypeChecked,
 21 |   // eslint-disable-next-line @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-unsafe-member-access
 22 |   eslintPluginJsxA11y.flatConfigs.recommended,
 23 |   eslintPluginReact.configs.flat.recommended,
 24 |   eslintPluginTestingLibrary.configs['flat/react'],
 25 |   eslintPluginVitest.configs.recommended,
 26 |   eslintPluginJestDom.configs['flat/recommended'],
 27 |   eslintPluginPlaywright.configs['flat/recommended'],
 28 |   eslintPluginPrettierRecommended,
 29 |   eslintConfigPrettier,
 30 |   // https://eslint.org/docs/latest/use/configure/configuration-files#excluding-files-with-ignores
 31 |   // When in their own config block without files, it tells ESLint to ignore those files.
 32 |   // When in a config block with files, it stops that specific config block from affecting those ignored files.
 33 |   {
 34 |     ignores: ['!.*', '**/*.css', 'dist', 'node_modules', 'test-e2e-report', 'test-e2e-results', 'test-unit-report'],
 35 |   },
 36 |   {
 37 |     languageOptions: {
 38 |       parserOptions: {
 39 |         projectService: true,
 40 |         tsconfigRootDir: import.meta.dirname,
 41 |       },
 42 |     },
 43 |     settings: {
 44 |       'import-x/resolver-next': [createTypeScriptImportResolver()],
 45 |       react: { version: 'detect' },
 46 |     },
 47 |   },
 48 |   {
 49 |     files: ['**/*.{js,ts,tsx}'],
 50 | 
 51 |     plugins: {
 52 |       'react-hooks': eslintPluginReactHooks,
 53 |     },
 54 | 
 55 |     rules: {
 56 |       ...eslintPluginReactHooks.configs.recommended.rules,
 57 | 
 58 |       'react/react-in-jsx-scope': 'off',
 59 | 
 60 |       'prefer-template': 'error',
 61 |       'no-nested-ternary': 'error',
 62 |       'no-unneeded-ternary': 'error',
 63 |       'spaced-comment': 'error',
 64 |       'no-console': 'error',
 65 | 
 66 |       '@typescript-eslint/ban-ts-comment': ['error', { 'ts-expect-error': 'allow-with-description' }],
 67 |       '@typescript-eslint/consistent-type-definitions': ['error', 'type'],
 68 |       '@typescript-eslint/array-type': ['error', { default: 'generic' }],
 69 |       '@typescript-eslint/prefer-nullish-coalescing': 'error',
 70 |       '@typescript-eslint/no-unnecessary-condition': 'error',
 71 |       '@typescript-eslint/no-confusing-void-expression': ['error', { ignoreArrowShorthand: true }],
 72 |       '@typescript-eslint/restrict-plus-operands': 'off',
 73 |       '@typescript-eslint/restrict-template-expressions': 'off',
 74 |       '@typescript-eslint/consistent-type-imports': 'error',
 75 |       '@typescript-eslint/naming-convention': [
 76 |         'error',
 77 |         {
 78 |           selector: 'typeAlias',
 79 |           format: ['PascalCase'],
 80 |         },
 81 |         {
 82 |           // Generic type parameter must start with letter T, followed by any uppercase letter.
 83 |           selector: 'typeParameter',
 84 |           format: ['PascalCase'],
 85 |           custom: { regex: '^T[A-Z]', match: true },
 86 |         },
 87 |       ],
 88 | 
 89 |       'import-x/no-default-export': 'error',
 90 |       'import-x/order': [
 91 |         'error',
 92 |         {
 93 |           groups: ['builtin', 'external', 'internal', 'parent', 'sibling'],
 94 |           'newlines-between': 'always',
 95 |           alphabetize: {
 96 |             order: 'asc',
 97 |             caseInsensitive: true,
 98 |           },
 99 |         },
100 |       ],
101 | 
102 |       'vitest/valid-title': [
103 |         'error',
104 |         {
105 |           mustMatch: {
106 |             it: [/should.*when/u.source, "Test title must include 'should' and 'when'"],
107 |           },
108 |         },
109 |       ],
110 | 
111 |       'playwright/valid-title': [
112 |         'error',
113 |         {
114 |           mustMatch: {
115 |             test: [/should.*when/u.source, "Test title must include 'should' and 'when'"],
116 |           },
117 |         },
118 |       ],
119 |     },
120 |   },
121 |   {
122 |     files: ['stories/**/*.demozap.*', '**/*.stories.*'],
123 |     rules: {
124 |       'import-x/no-default-export': 'off',
125 |     },
126 |   },
127 |   {
128 |     files: ['**/*.spec.*', 'e2e/global.setup.ts'],
129 |     rules: {
130 |       // Turn off (ideally all the rules) from eslint-plugin-testing-library plugin, since it's not applicable for Playwright tests.
131 |       // 'testing-library/*': 'off',
132 |       'testing-library/prefer-screen-queries': 'off',
133 |     },
134 |   },
135 |   {
136 |     files: ['**/*.test.*'],
137 |     rules: {
138 |       // Turn off all the rules from eslint-plugin-playwright plugin, since it's not applicable for Vitest tests.
139 |       // 'playwright/*': 'off',
140 |       'playwright/missing-playwright-await': 'off',
141 |       'playwright/no-standalone-expect': 'off',
142 |     },
143 |   },
144 | );
145 | 


--------------------------------------------------------------------------------
/knip.ts:
--------------------------------------------------------------------------------
 1 | import type { KnipConfig } from 'knip';
 2 | 
 3 | const knipConfig: KnipConfig = {
 4 |   entry: ['src/index.ts'],
 5 |   ignore: [
 6 |     'dist/**',
 7 |     'compiled/**',
 8 |     'build-storybook-static/**',
 9 |     'test-unit-report/**',
10 |     'test-e2e-results/**',
11 |     'test-e2e-report/**',
12 |   ],
13 | };
14 | 
15 | // eslint-disable-next-line import-x/no-default-export
16 | export default knipConfig;
17 | 


--------------------------------------------------------------------------------
/misc/demo.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mkosir/react-parallax-tilt/1743dd8db516fe7a78a273cbbb41a87e77e5f9ce/misc/demo.gif


--------------------------------------------------------------------------------
/misc/device_orientation.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mkosir/react-parallax-tilt/1743dd8db516fe7a78a273cbbb41a87e77e5f9ce/misc/device_orientation.jpg


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "react-parallax-tilt",
  3 |   "description": "Easily apply tilt hover effect on React components - lightweight/zero dependencies",
  4 |   "version": "0.0.0",
  5 |   "type": "module",
  6 |   "types": "./dist/legacy/index.d.ts",
  7 |   "module": "./dist/legacy/index.js",
  8 |   "main": "./dist/legacy/index.cjs",
  9 |   "exports": {
 10 |     "import": {
 11 |       "types": "./dist/modern/index.d.ts",
 12 |       "default": "./dist/modern/index.js"
 13 |     },
 14 |     "require": {
 15 |       "types": "./dist/modern/index.d.cts",
 16 |       "default": "./dist/modern/index.cjs"
 17 |     }
 18 |   },
 19 |   "sideEffects": false,
 20 |   "files": [
 21 |     "dist",
 22 |     "README.md"
 23 |   ],
 24 |   "scripts": {
 25 |     "start": "npm run storybook",
 26 |     "prepare": "husky",
 27 |     "build": "rm -rf dist && rollup --config scripts/rollup.config.ts --configPlugin typescript --configImportAttributesKey with",
 28 |     "lint": "eslint --report-unused-disable-directives --max-warnings 0 .",
 29 |     "lint-fix": "eslint --fix .",
 30 |     "lint-staged-husky": "lint-staged",
 31 |     "tsc": "tsc -p scripts/tsconfig.dev.json",
 32 |     "format-lint": "prettier --config .prettierrc --check --ignore-unknown .",
 33 |     "format-fix": "prettier --config .prettierrc --write --ignore-unknown -l .",
 34 |     "commit": "git-cz",
 35 |     "test": "vitest watch",
 36 |     "test-ui": "vitest --ui",
 37 |     "test-report": "vitest run --coverage",
 38 |     "test-e2e": "playwright test",
 39 |     "test-e2e-ui": "playwright test --ui",
 40 |     "test-e2e-report": "playwright show-report test-e2e-report",
 41 |     "storybook": "TS_NODE_PROJECT=scripts/tsconfig.dev.json storybook dev -p 9009 --quiet",
 42 |     "storybook-build": "storybook build -o build-storybook-static",
 43 |     "release": "semantic-release --branches main",
 44 |     "demozap": "demozap generate --prefix=_ && npm run format-fix && npm run lint-fix",
 45 |     "knip": "knip",
 46 |     "clean": "rm -rf node_modules test-unit-report test-e2e-report test-e2e-results dist compiled build-storybook-static"
 47 |   },
 48 |   "devDependencies": {
 49 |     "@commitlint/cli": "19.8.1",
 50 |     "@commitlint/config-conventional": "19.8.1",
 51 |     "@eslint/js": "9.28.0",
 52 |     "@playwright/test": "1.52.0",
 53 |     "@rollup/plugin-commonjs": "28.0.3",
 54 |     "@rollup/plugin-terser": "0.4.4",
 55 |     "@rollup/plugin-typescript": "11.1.6",
 56 |     "@storybook/addon-webpack5-compiler-swc": "3.0.0",
 57 |     "@storybook/react-webpack5": "9.0.6",
 58 |     "@testing-library/dom": "10.4.0",
 59 |     "@testing-library/jest-dom": "6.6.3",
 60 |     "@testing-library/react": "16.3.0",
 61 |     "@testing-library/user-event": "14.6.1",
 62 |     "@types/eslint": "9.6.1",
 63 |     "@types/node": "22.15.30",
 64 |     "@types/react": "19.1.6",
 65 |     "@types/react-dom": "19.1.6",
 66 |     "@vitest/coverage-v8": "3.2.2",
 67 |     "@vitest/eslint-plugin": "1.2.1",
 68 |     "@vitest/ui": "3.2.2",
 69 |     "commitizen": "4.3.1",
 70 |     "demozap": "1.3.83",
 71 |     "eslint": "9.28.0",
 72 |     "eslint-config-prettier": "10.1.5",
 73 |     "eslint-import-resolver-typescript": "4.4.3",
 74 |     "eslint-plugin-import-x": "4.15.1",
 75 |     "eslint-plugin-jest-dom": "5.5.0",
 76 |     "eslint-plugin-jsx-a11y": "6.10.2",
 77 |     "eslint-plugin-no-array-reduce": "1.0.62",
 78 |     "eslint-plugin-playwright": "2.2.0",
 79 |     "eslint-plugin-prettier": "5.4.1",
 80 |     "eslint-plugin-react": "7.37.5",
 81 |     "eslint-plugin-react-hooks": "6.0.0",
 82 |     "eslint-plugin-testing-library": "7.4.0",
 83 |     "husky": "9.1.7",
 84 |     "jsdom": "26.1.0",
 85 |     "knip": "5.60.2",
 86 |     "lint-staged": "16.1.0",
 87 |     "prettier": "3.5.3",
 88 |     "react": "19.1.0",
 89 |     "react-demo-tab": "1.3.30",
 90 |     "react-dom": "19.1.0",
 91 |     "react-joystick-component": "6.2.1",
 92 |     "rollup": "4.42.0",
 93 |     "rollup-plugin-dts": "6.2.1",
 94 |     "semantic-release": "24.2.5",
 95 |     "storybook": "9.0.6",
 96 |     "typescript": "5.8.3",
 97 |     "typescript-eslint": "8.33.1",
 98 |     "vite-tsconfig-paths": "5.1.4",
 99 |     "vitest": "3.2.2"
100 |   },
101 |   "peerDependencies": {
102 |     "react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
103 |     "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
104 |   },
105 |   "license": "MIT",
106 |   "author": "Marko Kosir <kosir.mar@gmail.com>",
107 |   "homepage": "https://mkosir.github.io/react-parallax-tilt",
108 |   "repository": {
109 |     "type": "git",
110 |     "url": "git+https://github.com/mkosir/react-parallax-tilt.git"
111 |   },
112 |   "bugs": {
113 |     "url": "https://github.com/mkosir/react-parallax-tilt/issues"
114 |   },
115 |   "keywords": [
116 |     "react",
117 |     "react-component",
118 |     "react-tilt",
119 |     "react-parallax-tilt",
120 |     "parallax",
121 |     "tilt",
122 |     "glare",
123 |     "transform",
124 |     "rotate",
125 |     "scale",
126 |     "flip",
127 |     "effect",
128 |     "component",
129 |     "gyroscope",
130 |     "sensor",
131 |     "mirror"
132 |   ]
133 | }
134 | 


--------------------------------------------------------------------------------
/playwright.config.ts:
--------------------------------------------------------------------------------
 1 | import { defineConfig, devices } from '@playwright/test';
 2 | 
 3 | const IS_CI = process.env.CI === 'true';
 4 | const BASE_URL = 'http://localhost:9009';
 5 | const TIMEOUT_SECONDS = IS_CI ? 15 : 5;
 6 | 
 7 | // eslint-disable-next-line import-x/no-default-export
 8 | export default defineConfig({
 9 |   testDir: './e2e',
10 |   fullyParallel: true,
11 |   forbidOnly: IS_CI,
12 |   retries: IS_CI ? 2 : 0,
13 |   maxFailures: 1,
14 |   workers: IS_CI ? 1 : undefined,
15 |   outputDir: 'test-e2e-results',
16 |   reporter: [['list'], ['html', { outputFolder: 'test-e2e-report' }]],
17 |   timeout: TIMEOUT_SECONDS * 1000,
18 |   use: {
19 |     baseURL: BASE_URL,
20 |     trace: 'on',
21 |   },
22 | 
23 |   projects: [
24 |     {
25 |       name: 'setup',
26 |       testMatch: /global.setup\.ts/,
27 |     },
28 |     {
29 |       name: 'chromium',
30 |       use: { ...devices['Desktop Chrome'] },
31 |       dependencies: ['setup'],
32 |     },
33 | 
34 |     {
35 |       name: 'webkit',
36 |       use: { ...devices['Desktop Safari'] },
37 |       dependencies: ['setup'],
38 |     },
39 | 
40 |     // Disable Firefox
41 |     // {
42 |     //   name: 'firefox',
43 |     //   use: { ...devices['Desktop Firefox'] },
44 |     //   dependencies: ['setup'],
45 |     // },
46 | 
47 |     /* Test against mobile viewports. */
48 |     // {
49 |     //   name: 'Mobile Chrome',
50 |     //   use: { ...devices['Pixel 5'] },
51 |     //   dependencies: ['setup'],
52 |     // },
53 |     // {
54 |     //   name: 'Mobile Safari',
55 |     //   use: { ...devices['iPhone 12'] },
56 |     //   dependencies: ['setup'],
57 |     // },
58 | 
59 |     /* Test against branded browsers. */
60 |     // {
61 |     //   name: 'Microsoft Edge',
62 |     //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
63 |     //   dependencies: ['setup'],
64 |     // },
65 |     // {
66 |     //   name: 'Google Chrome',
67 |     //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
68 |     //   dependencies: ['setup'],
69 |     // },
70 |   ],
71 | 
72 |   /* Run dev server before starting the tests */
73 |   webServer: {
74 |     command: 'npm run start',
75 |     url: BASE_URL,
76 |     // reuseExistingServer: !IS_CI,
77 |   },
78 | });
79 | 


--------------------------------------------------------------------------------
/scripts/rollup.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'rollup';
2 | 
3 | import { LEGACY_CONFIG, MODERN_CONFIG } from './rollupConfigs';
4 | 
5 | const rollupConfig = defineConfig([...LEGACY_CONFIG, ...MODERN_CONFIG]);
6 | 
7 | // eslint-disable-next-line import-x/no-default-export
8 | export default rollupConfig;
9 | 


--------------------------------------------------------------------------------
/scripts/rollupConfigs.ts:
--------------------------------------------------------------------------------
  1 | import commonjs from '@rollup/plugin-commonjs';
  2 | import terser from '@rollup/plugin-terser';
  3 | import typescript from '@rollup/plugin-typescript';
  4 | import type { GlobalsOption, RollupOptions } from 'rollup';
  5 | import { dts } from 'rollup-plugin-dts';
  6 | 
  7 | import packageJson from '../package.json' with { type: 'json' };
  8 | 
  9 | import tsConfig from './tsconfig.base.json' with { type: 'json' };
 10 | 
 11 | const IS_PRODUCTION = process.env.NODE_ENV === 'production';
 12 | 
 13 | const PATH_INPUT_FILE = 'src/index.ts';
 14 | const PATH_TSCONFIG_BUILD = 'scripts/tsconfig.build.json';
 15 | 
 16 | const GLOBALS = {
 17 |   react: 'React',
 18 |   'react-dom': 'ReactDOM',
 19 | } as const satisfies GlobalsOption;
 20 | 
 21 | export const LEGACY_CONFIG = [
 22 |   {
 23 |     input: PATH_INPUT_FILE,
 24 |     output: [
 25 |       {
 26 |         file: packageJson.module,
 27 |         format: 'esm',
 28 |         sourcemap: !IS_PRODUCTION,
 29 |         globals: GLOBALS,
 30 |       },
 31 |       {
 32 |         file: packageJson.main,
 33 |         format: 'cjs',
 34 |         sourcemap: !IS_PRODUCTION,
 35 |         globals: GLOBALS,
 36 |       },
 37 |     ],
 38 |     plugins: [
 39 |       commonjs(),
 40 |       typescript({
 41 |         tsconfig: PATH_TSCONFIG_BUILD,
 42 |         sourceMap: !IS_PRODUCTION,
 43 |       }),
 44 |       terser({
 45 |         output: { comments: false },
 46 |         compress: {
 47 |           pure_getters: true,
 48 |         },
 49 |         toplevel: true,
 50 |       }),
 51 |     ],
 52 |     // Ensure dependencies are not bundled with the library
 53 |     external: [...Object.keys(packageJson.peerDependencies), 'react/jsx-runtime'],
 54 |   },
 55 |   {
 56 |     input: PATH_INPUT_FILE,
 57 |     output: { file: packageJson.types, format: 'esm' },
 58 |     plugins: [
 59 |       dts({
 60 |         compilerOptions: {
 61 |           baseUrl: './src',
 62 |           paths: tsConfig.compilerOptions.paths,
 63 |         },
 64 |       }),
 65 |     ],
 66 |   },
 67 | ] as const satisfies ReadonlyArray<RollupOptions>;
 68 | 
 69 | export const MODERN_CONFIG = [
 70 |   {
 71 |     input: PATH_INPUT_FILE,
 72 |     output: [
 73 |       {
 74 |         file: packageJson.exports.import.default,
 75 |         format: 'esm',
 76 |         sourcemap: !IS_PRODUCTION,
 77 |         globals: GLOBALS,
 78 |       },
 79 |       {
 80 |         file: packageJson.exports.require.default,
 81 |         format: 'cjs',
 82 |         sourcemap: !IS_PRODUCTION,
 83 |         globals: GLOBALS,
 84 |       },
 85 |     ],
 86 |     plugins: [
 87 |       commonjs(),
 88 |       typescript({
 89 |         tsconfig: PATH_TSCONFIG_BUILD,
 90 |         sourceMap: !IS_PRODUCTION,
 91 |       }),
 92 |       terser({
 93 |         output: { comments: false },
 94 |         compress: {
 95 |           pure_getters: true,
 96 |         },
 97 |         toplevel: true,
 98 |       }),
 99 |     ],
100 |     // Ensure dependencies are not bundled with the library
101 |     external: [...Object.keys(packageJson.peerDependencies), 'react/jsx-runtime'],
102 |   },
103 |   {
104 |     input: PATH_INPUT_FILE,
105 |     output: [
106 |       { file: packageJson.exports.import.types, format: 'esm' },
107 |       { file: packageJson.exports.require.types, format: 'cjs' },
108 |     ],
109 |     plugins: [
110 |       dts({
111 |         compilerOptions: {
112 |           baseUrl: './src',
113 |           paths: tsConfig.compilerOptions.paths,
114 |         },
115 |       }),
116 |     ],
117 |   },
118 | ] as const satisfies ReadonlyArray<RollupOptions>;
119 | 


--------------------------------------------------------------------------------
/scripts/setup-tests.ts:
--------------------------------------------------------------------------------
1 | import '@testing-library/jest-dom';
2 | 


--------------------------------------------------------------------------------
/scripts/tsconfig.base.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "noEmit": true,
 4 |     "outDir": "../compiled",
 5 |     "baseUrl": "../src",
 6 |     "paths": {
 7 |       ".": ["."]
 8 |     },
 9 |     "importHelpers": true,
10 |     "jsx": "react-jsx",
11 |     "lib": ["ESNext", "DOM"],
12 |     "module": "ESNext",
13 |     "moduleResolution": "Bundler",
14 |     "target": "ES2020",
15 |     "allowSyntheticDefaultImports": true,
16 |     "noUnusedLocals": true,
17 |     "noUnusedParameters": true,
18 |     "resolveJsonModule": true,
19 |     "pretty": true,
20 |     "sourceMap": false,
21 |     "strict": true,
22 |     "stripInternal": true,
23 |     "forceConsistentCasingInFileNames": true,
24 |     "skipLibCheck": true,
25 |     "esModuleInterop": true,
26 |     "types": ["vitest/globals"],
27 |     "allowJs": true
28 |   }
29 | }
30 | 


--------------------------------------------------------------------------------
/scripts/tsconfig.build.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "./tsconfig.base.json",
 3 |   "include": ["../src/**/*"],
 4 |   "exclude": [
 5 |     "../src/**/*.test.ts",
 6 |     "../src/**/*.test.tsx",
 7 |     "../src/**/TiltTest.tsx",
 8 |     "../src/**/*.spec.ts",
 9 |     "../src/**/*.spec.tsx"
10 |   ]
11 | }
12 | 


--------------------------------------------------------------------------------
/scripts/tsconfig.dev.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "./tsconfig.base.json",
3 |   // Type check and lint all files and folders.
4 |   // Explicitly include those starting with a dot (.) as they are ignored by default in glob patterns.
5 |   "include": ["../.", "../.storybook/**/*", "../.commitlintrc.ts"],
6 |   "exclude": ["../dist", "../node_modules"]
7 | }
8 | 


--------------------------------------------------------------------------------
/src/features/glare/Glare.ts:
--------------------------------------------------------------------------------
  1 | import type { CSSProperties } from 'react';
  2 | 
  3 | import { constrainToRange } from 'utils/helperFns';
  4 | import type { ElementSizePosition, ClientPosition } from 'utils/types';
  5 | 
  6 | import type { GlareProps } from './types.public';
  7 | 
  8 | // All props are initialized by default with non-null values
  9 | /* eslint-disable @typescript-eslint/no-non-null-assertion */
 10 | 
 11 | type GlareSize = {
 12 |   width: number;
 13 |   height: number;
 14 | };
 15 | 
 16 | export class Glare {
 17 |   public glareWrapperEl: HTMLDivElement;
 18 |   public glareEl: HTMLDivElement;
 19 | 
 20 |   public glareAngle = 0;
 21 |   public glareOpacity = 0;
 22 | 
 23 |   constructor(wrapperElSize: ElementSizePosition, glareBorderRadius: string) {
 24 |     this.glareWrapperEl = document.createElement('div');
 25 |     this.glareEl = document.createElement('div');
 26 |     this.glareWrapperEl.appendChild(this.glareEl);
 27 |     this.glareWrapperEl.className = 'glare-wrapper';
 28 |     this.glareEl.className = 'glare';
 29 | 
 30 |     const styleGlareWrapper: CSSProperties = {
 31 |       position: 'absolute',
 32 |       top: '0',
 33 |       left: '0',
 34 |       width: '100%',
 35 |       height: '100%',
 36 |       overflow: 'hidden',
 37 |       borderRadius: glareBorderRadius,
 38 |       // Safari border-radius https://github.com/mkosir/react-parallax-tilt/issues/27#issuecomment-809884059
 39 |       WebkitMaskImage: '-webkit-radial-gradient(white, black)',
 40 |       pointerEvents: 'none',
 41 |     };
 42 | 
 43 |     const glareSize = this.calculateGlareSize(wrapperElSize);
 44 |     const styleGlare: CSSProperties = {
 45 |       position: 'absolute',
 46 |       top: '50%',
 47 |       left: '50%',
 48 |       transformOrigin: '0% 0%',
 49 |       pointerEvents: 'none',
 50 |       width: `${glareSize.width}px`,
 51 |       height: `${glareSize.height}px`,
 52 |     };
 53 | 
 54 |     Object.assign(this.glareWrapperEl.style, styleGlareWrapper);
 55 |     Object.assign(this.glareEl.style, styleGlare);
 56 |   }
 57 | 
 58 |   private calculateGlareSize = (wrapperElSize: ElementSizePosition): GlareSize => {
 59 |     const { width, height } = wrapperElSize;
 60 |     const wrapperElDiagonal = Math.sqrt(width! ** 2 + height! ** 2);
 61 |     return {
 62 |       width: wrapperElDiagonal,
 63 |       height: wrapperElDiagonal,
 64 |     };
 65 |   };
 66 | 
 67 |   public setSize = (wrapperElSize: ElementSizePosition): void => {
 68 |     const glareSize = this.calculateGlareSize(wrapperElSize);
 69 |     this.glareEl.style.width = `${glareSize.width}px`;
 70 |     this.glareEl.style.height = `${glareSize.height}px`;
 71 |   };
 72 | 
 73 |   public update = (
 74 |     wrapperElClientPosition: ClientPosition,
 75 |     props: GlareProps,
 76 |     flipVertically: boolean,
 77 |     flipHorizontally: boolean,
 78 |   ): void => {
 79 |     this.updateAngle(wrapperElClientPosition, props.glareReverse!);
 80 |     this.updateOpacity(wrapperElClientPosition, props, flipVertically, flipHorizontally);
 81 |   };
 82 | 
 83 |   private updateAngle = (wrapperElClientPosition: ClientPosition, glareReverse: boolean): void => {
 84 |     const { xPercentage, yPercentage } = wrapperElClientPosition;
 85 | 
 86 |     const rad2Deg = 180 / Math.PI;
 87 |     // top 0°, right +90°, bottom -+180°, left -90°
 88 |     const glareAngle = xPercentage ? Math.atan2(yPercentage, -xPercentage) * rad2Deg : 0;
 89 | 
 90 |     const addGlareAngle = glareReverse ? 180 : 0;
 91 |     this.glareAngle = glareAngle - addGlareAngle;
 92 |   };
 93 | 
 94 |   private updateOpacity = (
 95 |     wrapperElClientPosition: ClientPosition,
 96 |     props: GlareProps,
 97 |     flipVertically: boolean,
 98 |     flipHorizontally: boolean,
 99 |   ): void => {
100 |     const { xPercentage, yPercentage } = wrapperElClientPosition;
101 |     const { glarePosition, glareReverse, glareMaxOpacity } = props;
102 | 
103 |     const flipVerticallyFactor = flipVertically ? -1 : 1;
104 |     const flipHorizontallyFactor = flipHorizontally ? -1 : 1;
105 |     const glareReverseFactor = glareReverse ? -1 : 1;
106 | 
107 |     let glareOpacityFactor = 0;
108 |     switch (glarePosition) {
109 |       case 'top':
110 |         glareOpacityFactor = -xPercentage * flipVerticallyFactor * glareReverseFactor;
111 |         break;
112 |       case 'right':
113 |         glareOpacityFactor = yPercentage * flipHorizontallyFactor * glareReverseFactor;
114 |         break;
115 |       case 'bottom':
116 |       case undefined:
117 |         glareOpacityFactor = xPercentage * flipVerticallyFactor * glareReverseFactor;
118 |         break;
119 |       case 'left':
120 |         glareOpacityFactor = -yPercentage * flipHorizontallyFactor * glareReverseFactor;
121 |         break;
122 |       case 'all':
123 |         glareOpacityFactor = Math.hypot(xPercentage, yPercentage);
124 |         break;
125 |     }
126 | 
127 |     const glareOpacityFactorRemoveNegative = constrainToRange(glareOpacityFactor, 0, 100);
128 |     this.glareOpacity = (glareOpacityFactorRemoveNegative * glareMaxOpacity!) / 100;
129 |   };
130 | 
131 |   public render = (props: GlareProps): void => {
132 |     const { glareColor } = props;
133 |     this.glareEl.style.transform = `rotate(${this.glareAngle}deg) translate(-50%, -50%)`;
134 |     this.glareEl.style.opacity = this.glareOpacity.toString();
135 |     this.glareEl.style.background = `linear-gradient(0deg, rgba(255,255,255,0) 0%, ${glareColor!} 100%)`;
136 |   };
137 | }
138 | 


--------------------------------------------------------------------------------
/src/features/glare/test/glare.test.tsx:
--------------------------------------------------------------------------------
  1 | import { screen, render } from '@testing-library/react';
  2 | import userEvent from '@testing-library/user-event';
  3 | 
  4 | import type { OnMove, OnMoveParams } from 'index';
  5 | import { TiltTest } from 'utils/TiltTest';
  6 | 
  7 | describe('Glare', () => {
  8 |   it('should calculate glare with top position when top position prop value is provided', async () => {
  9 |     const onMove = vi.fn<OnMove>();
 10 | 
 11 |     render(
 12 |       <TiltTest
 13 |         tiltMaxAngleX={60}
 14 |         tiltMaxAngleY={60}
 15 |         tiltAngleXManual={-60}
 16 |         tiltAngleYManual={60}
 17 |         glareEnable={true}
 18 |         glareMaxOpacity={1}
 19 |         glarePosition="top"
 20 |         onMove={onMove}
 21 |       />,
 22 |     );
 23 | 
 24 |     await userEvent.hover(screen.getByText('test'));
 25 | 
 26 |     expect(onMove).toHaveBeenCalledWith<[OnMoveParams]>({
 27 |       tiltAngleX: -60,
 28 |       tiltAngleY: 60,
 29 |       tiltAngleXPercentage: -100,
 30 |       tiltAngleYPercentage: 100,
 31 |       glareAngle: 45,
 32 |       glareOpacity: 1,
 33 |       // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
 34 |       event: expect.objectContaining({
 35 |         type: 'initial',
 36 |       }),
 37 |     });
 38 |   });
 39 | 
 40 |   it('should calculate glare with right position when right position prop value is provided', async () => {
 41 |     const onMove = vi.fn<OnMove>();
 42 | 
 43 |     render(
 44 |       <TiltTest
 45 |         tiltMaxAngleX={60}
 46 |         tiltMaxAngleY={60}
 47 |         tiltAngleXManual={0}
 48 |         tiltAngleYManual={60}
 49 |         glareEnable={true}
 50 |         glareMaxOpacity={1}
 51 |         glarePosition="right"
 52 |         onMove={onMove}
 53 |       />,
 54 |     );
 55 | 
 56 |     await userEvent.hover(screen.getByText('test'));
 57 | 
 58 |     expect(onMove).toHaveBeenCalledWith<[OnMoveParams]>({
 59 |       tiltAngleX: 0,
 60 |       tiltAngleY: 60,
 61 |       tiltAngleXPercentage: 0,
 62 |       tiltAngleYPercentage: 100,
 63 |       glareAngle: 0,
 64 |       glareOpacity: 1,
 65 |       // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
 66 |       event: expect.objectContaining({
 67 |         type: 'initial',
 68 |       }),
 69 |     });
 70 |   });
 71 | 
 72 |   it('should calculate glare with bottom position when bottom position prop value is provided', async () => {
 73 |     const onMove = vi.fn<OnMove>();
 74 | 
 75 |     render(
 76 |       <TiltTest
 77 |         tiltMaxAngleX={60}
 78 |         tiltMaxAngleY={60}
 79 |         tiltAngleXManual={60}
 80 |         tiltAngleYManual={60}
 81 |         glareEnable={true}
 82 |         glareMaxOpacity={0.5}
 83 |         glarePosition="bottom"
 84 |         onMove={onMove}
 85 |       />,
 86 |     );
 87 | 
 88 |     await userEvent.hover(screen.getByText('test'));
 89 | 
 90 |     expect(onMove).toHaveBeenCalledWith<[OnMoveParams]>({
 91 |       tiltAngleX: 60,
 92 |       tiltAngleY: 60,
 93 |       tiltAngleXPercentage: 100,
 94 |       tiltAngleYPercentage: 100,
 95 |       glareAngle: 135,
 96 |       glareOpacity: 0.5,
 97 |       // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
 98 |       event: expect.objectContaining({
 99 |         type: 'initial',
100 |       }),
101 |     });
102 |   });
103 | 
104 |   it('should calculate glare with left position when left position prop value is provided', async () => {
105 |     const onMove = vi.fn<OnMove>();
106 | 
107 |     render(
108 |       <TiltTest
109 |         tiltMaxAngleX={60}
110 |         tiltMaxAngleY={60}
111 |         tiltAngleXManual={-60}
112 |         tiltAngleYManual={60}
113 |         glareEnable={true}
114 |         glareMaxOpacity={1}
115 |         glarePosition="left"
116 |         glareReverse={true}
117 |         onMove={onMove}
118 |       />,
119 |     );
120 | 
121 |     await userEvent.hover(screen.getByText('test'));
122 | 
123 |     expect(onMove).toHaveBeenCalledWith<[OnMoveParams]>({
124 |       tiltAngleX: -60,
125 |       tiltAngleY: 60,
126 |       tiltAngleXPercentage: -100,
127 |       tiltAngleYPercentage: 100,
128 |       glareAngle: -135,
129 |       glareOpacity: 1,
130 |       // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
131 |       event: expect.objectContaining({
132 |         type: 'initial',
133 |       }),
134 |     });
135 |   });
136 | 
137 |   it('should calculate glare with all positions when all position prop value is provided', async () => {
138 |     const onMove = vi.fn<OnMove>();
139 | 
140 |     render(
141 |       <TiltTest
142 |         tiltMaxAngleX={60}
143 |         tiltMaxAngleY={60}
144 |         tiltAngleXManual={-60}
145 |         tiltAngleYManual={-60}
146 |         glareEnable={true}
147 |         glareMaxOpacity={1}
148 |         glarePosition="all"
149 |         onMove={onMove}
150 |       />,
151 |     );
152 | 
153 |     await userEvent.hover(screen.getByText('test'));
154 | 
155 |     expect(onMove).toHaveBeenCalledWith<[OnMoveParams]>({
156 |       tiltAngleX: -60,
157 |       tiltAngleY: -60,
158 |       tiltAngleXPercentage: -100,
159 |       tiltAngleYPercentage: -100,
160 |       glareAngle: -45,
161 |       glareOpacity: 1,
162 |       // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
163 |       event: expect.objectContaining({
164 |         type: 'initial',
165 |       }),
166 |     });
167 |   });
168 | 
169 |   it('should calculate glare with default position when glare position prop is not provided', async () => {
170 |     const onMove = vi.fn<OnMove>();
171 | 
172 |     render(
173 |       <TiltTest
174 |         tiltMaxAngleX={60}
175 |         tiltMaxAngleY={60}
176 |         tiltAngleXManual={-60}
177 |         tiltAngleYManual={60}
178 |         glareEnable={true}
179 |         glareMaxOpacity={1}
180 |         onMove={onMove}
181 |       />,
182 |     );
183 | 
184 |     await userEvent.hover(screen.getByText('test'));
185 | 
186 |     expect(onMove).toHaveBeenCalledWith<[OnMoveParams]>({
187 |       tiltAngleX: -60,
188 |       tiltAngleY: 60,
189 |       tiltAngleXPercentage: -100,
190 |       tiltAngleYPercentage: 100,
191 |       glareAngle: 45,
192 |       glareOpacity: 0,
193 |       // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
194 |       event: expect.objectContaining({
195 |         type: 'initial',
196 |       }),
197 |     });
198 |   });
199 | 
200 |   it('should calculate flipped glare when flip vertically/horizontally props are enabled', async () => {
201 |     const onMove = vi.fn<OnMove>();
202 | 
203 |     render(
204 |       <TiltTest
205 |         tiltMaxAngleX={60}
206 |         tiltMaxAngleY={60}
207 |         tiltAngleXManual={-60}
208 |         tiltAngleYManual={60}
209 |         glareEnable={true}
210 |         glareMaxOpacity={1}
211 |         glarePosition="top"
212 |         onMove={onMove}
213 |         flipVertically={true}
214 |         flipHorizontally={true}
215 |       />,
216 |     );
217 | 
218 |     await userEvent.hover(screen.getByText('test'));
219 | 
220 |     expect(onMove).toHaveBeenCalledWith<[OnMoveParams]>({
221 |       tiltAngleX: 120,
222 |       tiltAngleY: 120,
223 |       tiltAngleXPercentage: 200,
224 |       tiltAngleYPercentage: 200,
225 |       glareAngle: 45,
226 |       glareOpacity: 0,
227 |       // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
228 |       event: expect.objectContaining({
229 |         type: 'initial',
230 |       }),
231 |     });
232 |   });
233 | });
234 | 


--------------------------------------------------------------------------------
/src/features/glare/test/glareStyle.test.tsx:
--------------------------------------------------------------------------------
 1 | import { screen, render, fireEvent } from '@testing-library/react';
 2 | 
 3 | import type { OnMove } from 'index';
 4 | import { TiltTest } from 'utils/TiltTest';
 5 | 
 6 | describe('Glare - Style', () => {
 7 |   it('should update glare style when hover on element', () => {
 8 |     vi.useFakeTimers();
 9 | 
10 |     const onMove = vi.fn<OnMove>();
11 | 
12 |     const { container } = render(<TiltTest onMove={onMove} glareEnable={true} tiltEnable={false} />);
13 | 
14 |     const positionStart = [{ pageX: 50, pageY: 50 }];
15 |     const positionEnd = [{ pageX: 100, pageY: 100 }];
16 | 
17 |     const testElement = screen.getByText('test');
18 |     fireEvent.touchStart(testElement, { touches: positionStart });
19 |     fireEvent.touchMove(testElement, { touches: positionEnd });
20 | 
21 |     vi.runAllTimers();
22 | 
23 |     // eslint-disable-next-line
24 |     const tiltElement = container.firstElementChild as Element;
25 | 
26 |     // eslint-disable-next-line
27 |     const glareWrapperElement = tiltElement.lastElementChild as Element;
28 |     expect(glareWrapperElement).toHaveStyle({
29 |       position: 'absolute',
30 |       top: '0px',
31 |       left: '0px',
32 |       width: '100%',
33 |       height: '100%',
34 |       overflow: 'hidden',
35 |       'border-radius': 0,
36 |       'pointer-events': 'none',
37 |     });
38 |     expect(glareWrapperElement).toHaveClass('glare-wrapper');
39 | 
40 |     // eslint-disable-next-line
41 |     const glareElement = glareWrapperElement.firstElementChild;
42 |     expect(glareElement).toHaveStyle({
43 |       position: 'absolute',
44 |       top: '50%',
45 |       left: '50%',
46 |       'transform-origin': '0% 0%',
47 |       'pointer-events': 'none',
48 |       width: '0px',
49 |       height: '0px',
50 |       transition: 'opacity 400ms cubic-bezier(.03,.98,.52,.99)',
51 |       transform: 'rotate(135deg) translate(-50%, -50%)',
52 |       opacity: 0.7,
53 |     });
54 |     expect(glareElement).toHaveClass('glare');
55 |   });
56 | });
57 | 


--------------------------------------------------------------------------------
/src/features/glare/types.public.ts:
--------------------------------------------------------------------------------
 1 | export type GlareProps = {
 2 |   /**
 3 |    * Enables/disables the glare effect.
 4 |    */
 5 |   glareEnable?: boolean;
 6 |   /**
 7 |    * Maximum glare opacity (`0.5 = 50%, 1 = 100%`). Range: `0-1`
 8 |    */
 9 |   glareMaxOpacity?: number;
10 |   /**
11 |    * Sets the color of the glare effect.
12 |    */
13 |   glareColor?: string;
14 |   /**
15 |    * Sets the position of the glare effect.
16 |    */
17 |   glarePosition?: GlarePosition;
18 |   /**
19 |    * Reverses the glare direction.
20 |    */
21 |   glareReverse?: boolean;
22 |   /**
23 |    * Sets the border radius of the glare. Accepts any standard CSS border radius value.
24 |    */
25 |   glareBorderRadius?: string;
26 | };
27 | 
28 | export type GlarePosition = 'top' | 'right' | 'bottom' | 'left' | 'all';
29 | 


--------------------------------------------------------------------------------
/src/features/tilt/Tilt.ts:
--------------------------------------------------------------------------------
 1 | import { constrainToRange } from 'utils/helperFns';
 2 | import type { ClientPosition } from 'utils/types';
 3 | 
 4 | import type { TiltProps } from './types.public';
 5 | 
 6 | const TILT_ANGLE_CONSTRAINT = 90;
 7 | 
 8 | // All props are initialized by default with non-null values
 9 | /* eslint-disable @typescript-eslint/no-non-null-assertion */
10 | 
11 | export class Tilt {
12 |   public glareAngle = 0;
13 |   public glareOpacity = 0;
14 | 
15 |   public tiltAngleX = 0;
16 |   public tiltAngleY = 0;
17 |   public tiltAngleXPercentage = 0;
18 |   public tiltAngleYPercentage = 0;
19 | 
20 |   public update = (wrapperElClientPosition: ClientPosition, props: TiltProps): void => {
21 |     this.updateTilt(wrapperElClientPosition, props);
22 |     this.updateTiltManualInput(wrapperElClientPosition, props);
23 |     this.updateTiltReverse(props);
24 |     this.updateTiltLimits(props);
25 |   };
26 | 
27 |   private updateTilt = (wrapperElClientPosition: ClientPosition, props: TiltProps): void => {
28 |     const { xPercentage, yPercentage } = wrapperElClientPosition;
29 |     const { tiltMaxAngleX, tiltMaxAngleY } = props;
30 | 
31 |     const tiltTowardMouse = -1;
32 |     this.tiltAngleX = (xPercentage * tiltMaxAngleX!) / 100;
33 |     this.tiltAngleY = ((yPercentage * tiltMaxAngleY!) / 100) * tiltTowardMouse;
34 |   };
35 | 
36 |   private updateTiltManualInput = (wrapperElClientPosition: ClientPosition, props: TiltProps): void => {
37 |     const { tiltAngleXManual, tiltAngleYManual, tiltMaxAngleX, tiltMaxAngleY } = props;
38 | 
39 |     const isManualInputIgnoreOtherInputs = tiltAngleXManual !== null || tiltAngleYManual !== null;
40 |     if (isManualInputIgnoreOtherInputs) {
41 |       this.tiltAngleX = tiltAngleXManual !== null ? tiltAngleXManual! : 0;
42 |       this.tiltAngleY = tiltAngleYManual !== null ? tiltAngleYManual! : 0;
43 |       wrapperElClientPosition.xPercentage = (100 * this.tiltAngleX) / tiltMaxAngleX!;
44 |       wrapperElClientPosition.yPercentage = (100 * this.tiltAngleY) / tiltMaxAngleY!;
45 |     }
46 |   };
47 | 
48 |   private updateTiltReverse = (props: TiltProps): void => {
49 |     const tiltReverse = props.tiltReverse ? -1 : 1;
50 |     this.tiltAngleX = tiltReverse * this.tiltAngleX;
51 |     this.tiltAngleY = tiltReverse * this.tiltAngleY;
52 |   };
53 | 
54 |   private updateTiltLimits = (props: TiltProps): void => {
55 |     const { tiltAxis } = props;
56 | 
57 |     this.tiltAngleX = constrainToRange(this.tiltAngleX, -TILT_ANGLE_CONSTRAINT, TILT_ANGLE_CONSTRAINT);
58 |     this.tiltAngleY = constrainToRange(this.tiltAngleY, -TILT_ANGLE_CONSTRAINT, TILT_ANGLE_CONSTRAINT);
59 | 
60 |     const isOnlyOneAxisEnabledForTilting = tiltAxis;
61 |     if (isOnlyOneAxisEnabledForTilting) {
62 |       this.tiltAngleX = tiltAxis === 'x' ? this.tiltAngleX : 0;
63 |       this.tiltAngleY = tiltAxis === 'y' ? this.tiltAngleY : 0;
64 |     }
65 |   };
66 | 
67 |   public updateTiltAnglesPercentage = (props: TiltProps): void => {
68 |     const { tiltMaxAngleX, tiltMaxAngleY } = props;
69 | 
70 |     this.tiltAngleXPercentage = (this.tiltAngleX / tiltMaxAngleX!) * 100;
71 |     this.tiltAngleYPercentage = (this.tiltAngleY / tiltMaxAngleY!) * 100;
72 |   };
73 | 
74 |   public render = (element: HTMLDivElement): void => {
75 |     element.style.transform += `rotateX(${this.tiltAngleX}deg) rotateY(${this.tiltAngleY}deg) `;
76 |   };
77 | }
78 | 


--------------------------------------------------------------------------------
/src/features/tilt/test/tiltAxis.test.tsx:
--------------------------------------------------------------------------------
 1 | import { screen, render } from '@testing-library/react';
 2 | import userEvent from '@testing-library/user-event';
 3 | 
 4 | import type { OnMove, OnMoveParams } from 'index';
 5 | import { TiltTest } from 'utils/TiltTest';
 6 | 
 7 | describe('Tilt - Axis', () => {
 8 |   it('should disable y axis when only x tilt axis prop is enabled', async () => {
 9 |     const onMove = vi.fn<OnMove>();
10 | 
11 |     render(
12 |       <TiltTest
13 |         tiltAxis="x"
14 |         tiltMaxAngleX={60}
15 |         tiltMaxAngleY={60}
16 |         tiltAngleXManual={60}
17 |         tiltAngleYManual={45}
18 |         onMove={onMove}
19 |       />,
20 |     );
21 | 
22 |     await userEvent.hover(screen.getByText('test'));
23 | 
24 |     expect(onMove).toHaveBeenCalledWith<[OnMoveParams]>({
25 |       tiltAngleX: 60,
26 |       tiltAngleY: 0,
27 |       tiltAngleXPercentage: 100,
28 |       tiltAngleYPercentage: 0,
29 |       glareAngle: 0,
30 |       glareOpacity: 0,
31 |       // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
32 |       event: expect.objectContaining({
33 |         type: 'initial',
34 |       }),
35 |     });
36 |   });
37 | 
38 |   it('should disable x axis when only y tilt axis prop is enabled', async () => {
39 |     const onMove = vi.fn<OnMove>();
40 | 
41 |     render(
42 |       <TiltTest
43 |         tiltAxis="y"
44 |         tiltMaxAngleX={60}
45 |         tiltMaxAngleY={60}
46 |         tiltAngleXManual={60}
47 |         tiltAngleYManual={45}
48 |         onMove={onMove}
49 |       />,
50 |     );
51 | 
52 |     await userEvent.hover(screen.getByText('test'));
53 | 
54 |     expect(onMove).toHaveBeenCalledWith<[OnMoveParams]>({
55 |       tiltAngleX: 0,
56 |       tiltAngleY: 45,
57 |       tiltAngleXPercentage: 0,
58 |       tiltAngleYPercentage: 75,
59 |       glareAngle: 0,
60 |       glareOpacity: 0,
61 |       // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
62 |       event: expect.objectContaining({
63 |         type: 'initial',
64 |       }),
65 |     });
66 |   });
67 | });
68 | 


--------------------------------------------------------------------------------
/src/features/tilt/test/tiltDisable.test.tsx:
--------------------------------------------------------------------------------
 1 | import { screen, render, fireEvent } from '@testing-library/react';
 2 | 
 3 | import type { OnMove, OnMoveParams } from 'index';
 4 | import { TiltTest } from 'utils/TiltTest';
 5 | 
 6 | describe('Tilt - Disable', () => {
 7 |   it('should not calculate tilt when disabled', () => {
 8 |     const onMove = vi.fn<OnMove>();
 9 | 
10 |     render(<TiltTest tiltEnable={false} onMove={onMove} />);
11 | 
12 |     fireEvent.touchMove(screen.getByText('test'), { touches: [{ pageX: 100, pageY: 50 }] });
13 | 
14 |     expect(onMove).toHaveBeenLastCalledWith<[OnMoveParams]>({
15 |       tiltAngleX: 0,
16 |       tiltAngleY: 0,
17 |       tiltAngleXPercentage: 0,
18 |       tiltAngleYPercentage: 0,
19 |       glareAngle: 0,
20 |       glareOpacity: 0,
21 |       // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
22 |       event: expect.objectContaining({
23 |         type: 'touchmove',
24 |       }),
25 |     });
26 |   });
27 | });
28 | 


--------------------------------------------------------------------------------
/src/features/tilt/test/tiltManualAngle.test.tsx:
--------------------------------------------------------------------------------
 1 | import { screen, render } from '@testing-library/react';
 2 | import userEvent from '@testing-library/user-event';
 3 | 
 4 | import type { OnMove, OnMoveParams } from 'index';
 5 | import { TiltTest } from 'utils/TiltTest';
 6 | 
 7 | describe('Tilt - Manual Angle', () => {
 8 |   it('should calculate tilt when manual input is provided', async () => {
 9 |     const onMove = vi.fn<OnMove>();
10 | 
11 |     render(
12 |       <TiltTest tiltMaxAngleX={60} tiltMaxAngleY={60} tiltAngleXManual={60} tiltAngleYManual={45} onMove={onMove} />,
13 |     );
14 | 
15 |     await userEvent.hover(screen.getByText('test'));
16 | 
17 |     expect(onMove).toHaveBeenCalledWith<[OnMoveParams]>({
18 |       tiltAngleX: 60,
19 |       tiltAngleY: 45,
20 |       tiltAngleXPercentage: 100,
21 |       tiltAngleYPercentage: 75,
22 |       glareAngle: 0,
23 |       glareOpacity: 0,
24 |       // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
25 |       event: expect.objectContaining({
26 |         type: 'initial',
27 |       }),
28 |     });
29 |   });
30 | 
31 |   it('should calculate tilt when only X manual input is provided', async () => {
32 |     const onMove = vi.fn<OnMove>();
33 | 
34 |     render(
35 |       <TiltTest
36 |         tiltMaxAngleX={60}
37 |         tiltMaxAngleY={60}
38 |         tiltAngleXManual={60}
39 |         glareEnable={true}
40 |         glareMaxOpacity={1}
41 |         glarePosition="bottom"
42 |         onMove={onMove}
43 |       />,
44 |     );
45 | 
46 |     await userEvent.hover(screen.getByText('test'));
47 | 
48 |     expect(onMove).toHaveBeenCalledWith<[OnMoveParams]>({
49 |       tiltAngleX: 60,
50 |       tiltAngleY: 0,
51 |       tiltAngleXPercentage: 100,
52 |       tiltAngleYPercentage: 0,
53 |       glareAngle: 180,
54 |       glareOpacity: 1,
55 |       // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
56 |       event: expect.objectContaining({
57 |         type: 'initial',
58 |       }),
59 |     });
60 |   });
61 | 
62 |   it('should calculate tilt when only Y manual input is provided', async () => {
63 |     const onMove = vi.fn<OnMove>();
64 | 
65 |     render(<TiltTest tiltMaxAngleX={60} tiltMaxAngleY={60} tiltAngleYManual={45} onMove={onMove} />);
66 | 
67 |     await userEvent.hover(screen.getByText('test'));
68 | 
69 |     expect(onMove).toHaveBeenCalledWith<[OnMoveParams]>({
70 |       tiltAngleX: 0,
71 |       tiltAngleY: 45,
72 |       tiltAngleXPercentage: 0,
73 |       tiltAngleYPercentage: 75,
74 |       glareAngle: 0,
75 |       glareOpacity: 0,
76 |       // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
77 |       event: expect.objectContaining({
78 |         type: 'initial',
79 |       }),
80 |     });
81 |   });
82 | });
83 | 


--------------------------------------------------------------------------------
/src/features/tilt/test/tiltMaxAngle.test.tsx:
--------------------------------------------------------------------------------
 1 | import { screen, render } from '@testing-library/react';
 2 | import userEvent from '@testing-library/user-event';
 3 | 
 4 | import type { OnMove, OnMoveParams } from 'index';
 5 | import { TiltTest } from 'utils/TiltTest';
 6 | 
 7 | describe('Tilt - Max Angle', () => {
 8 |   it('should constrain tilt angles to default constant when hover on element', async () => {
 9 |     const onMove = vi.fn<OnMove>();
10 | 
11 |     render(
12 |       <TiltTest
13 |         tiltMaxAngleX={300}
14 |         tiltMaxAngleY={300}
15 |         tiltAngleXManual={120}
16 |         tiltAngleYManual={260}
17 |         onMove={onMove}
18 |       />,
19 |     );
20 | 
21 |     await userEvent.hover(screen.getByText('test'));
22 | 
23 |     expect(onMove).toHaveBeenCalledWith<[OnMoveParams]>({
24 |       tiltAngleX: 90,
25 |       tiltAngleY: 90,
26 |       tiltAngleXPercentage: 30,
27 |       tiltAngleYPercentage: 30,
28 |       glareAngle: 0,
29 |       glareOpacity: 0,
30 |       // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
31 |       event: expect.objectContaining({
32 |         type: 'initial',
33 |       }),
34 |     });
35 |   });
36 | });
37 | 


--------------------------------------------------------------------------------
/src/features/tilt/test/tiltOnEnter.test.tsx:
--------------------------------------------------------------------------------
 1 | import { screen, render, fireEvent } from '@testing-library/react';
 2 | 
 3 | import type { OnEnter } from 'index';
 4 | import { TiltTest } from 'utils/TiltTest';
 5 | 
 6 | describe('Tilt - onEnter', () => {
 7 |   it('should trigger onEnter event when mouse enters an element', () => {
 8 |     const onEnter = vi.fn<OnEnter>();
 9 | 
10 |     render(<TiltTest onEnter={onEnter} />);
11 | 
12 |     fireEvent.mouseEnter(screen.getByText('test'));
13 | 
14 |     const onEnterParams = onEnter.mock.calls[0][0];
15 |     expect(onEnterParams.event.type).toBe('mouseenter');
16 |   });
17 | });
18 | 


--------------------------------------------------------------------------------
/src/features/tilt/test/tiltOnLeave.test.tsx:
--------------------------------------------------------------------------------
 1 | import { screen, render, fireEvent } from '@testing-library/react';
 2 | 
 3 | import type { OnLeave } from 'index';
 4 | import { TiltTest } from 'utils/TiltTest';
 5 | 
 6 | describe('Tilt - onLeave', () => {
 7 |   it('should trigger onLeave event when mouse leaves an element', () => {
 8 |     const onLeave = vi.fn<OnLeave>();
 9 | 
10 |     render(<TiltTest onLeave={onLeave} />);
11 | 
12 |     fireEvent.mouseLeave(screen.getByText('test'));
13 | 
14 |     const onLeaveParams = onLeave.mock.calls[0][0];
15 |     expect(onLeaveParams.event.type).toBe('mouseleave');
16 |   });
17 | });
18 | 


--------------------------------------------------------------------------------
/src/features/tilt/test/tiltOnPropChange.test.tsx:
--------------------------------------------------------------------------------
 1 | import { screen, render } from '@testing-library/react';
 2 | import userEvent from '@testing-library/user-event';
 3 | 
 4 | import type { OnMove, OnMoveParams } from 'index';
 5 | import { TiltTest } from 'utils/TiltTest';
 6 | 
 7 | describe('Tilt - Prop change', () => {
 8 |   it('should re-calculate tilt when manual tilt angle y prop changes', async () => {
 9 |     const onMove = vi.fn<OnMove>();
10 | 
11 |     const { rerender } = render(
12 |       <TiltTest tiltMaxAngleX={60} tiltMaxAngleY={60} tiltAngleXManual={60} tiltAngleYManual={45} onMove={onMove} />,
13 |     );
14 | 
15 |     await userEvent.hover(screen.getByText('test'));
16 | 
17 |     expect(onMove).toHaveBeenCalledWith<[OnMoveParams]>({
18 |       tiltAngleX: 60,
19 |       tiltAngleY: 45,
20 |       tiltAngleXPercentage: 100,
21 |       tiltAngleYPercentage: 75,
22 |       glareAngle: 0,
23 |       glareOpacity: 0,
24 |       // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
25 |       event: expect.objectContaining({
26 |         type: 'initial',
27 |       }),
28 |     });
29 | 
30 |     const onMoveRerender = vi.fn();
31 | 
32 |     rerender(
33 |       <TiltTest
34 |         tiltMaxAngleX={60}
35 |         tiltMaxAngleY={60}
36 |         tiltAngleXManual={60}
37 |         tiltAngleYManual={30}
38 |         onMove={onMoveRerender}
39 |       />,
40 |     );
41 | 
42 |     expect(onMoveRerender).toHaveBeenCalledWith<[OnMoveParams]>({
43 |       tiltAngleX: 60,
44 |       tiltAngleY: 30,
45 |       tiltAngleXPercentage: 100,
46 |       tiltAngleYPercentage: 50,
47 |       glareAngle: 0,
48 |       glareOpacity: 0,
49 |       // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
50 |       event: expect.objectContaining({
51 |         type: 'propChange',
52 |       }),
53 |     });
54 |   });
55 | });
56 | 


--------------------------------------------------------------------------------
/src/features/tilt/test/tiltOnTouchMove.test.tsx:
--------------------------------------------------------------------------------
 1 | import { screen, render, fireEvent } from '@testing-library/react';
 2 | 
 3 | import type { OnMove, OnMoveParams } from 'index';
 4 | import { TiltTest } from 'utils/TiltTest';
 5 | 
 6 | describe('Tilt - onTouchMove', () => {
 7 |   it('should call onMove prop when onTouchMove event is triggered', () => {
 8 |     const onMove = vi.fn<OnMove>();
 9 | 
10 |     render(<TiltTest onMove={onMove} />);
11 | 
12 |     fireEvent.touchMove(screen.getByText('test'), { touches: [{ pageX: 100, pageY: 50 }] });
13 | 
14 |     expect(onMove).toHaveBeenLastCalledWith<[OnMoveParams]>({
15 |       tiltAngleX: 20,
16 |       tiltAngleY: -20,
17 |       tiltAngleXPercentage: 100,
18 |       tiltAngleYPercentage: -100,
19 |       glareAngle: 0,
20 |       glareOpacity: 0,
21 |       // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
22 |       event: expect.objectContaining({
23 |         type: 'touchmove',
24 |       }),
25 |     });
26 |   });
27 | });
28 | 


--------------------------------------------------------------------------------
/src/features/tilt/test/tiltReset.test.tsx:
--------------------------------------------------------------------------------
 1 | import { screen, render, fireEvent } from '@testing-library/react';
 2 | 
 3 | import type { OnEnter, OnLeave, OnMove, OnMoveParams } from 'index';
 4 | import { TiltTest } from 'utils/TiltTest';
 5 | 
 6 | describe('Tilt - Reset', () => {
 7 |   it('should not reset tilt when mouse leave an element', () => {
 8 |     const onEnter = vi.fn<OnEnter>();
 9 |     const onMove = vi.fn<OnMove>();
10 |     const onLeave = vi.fn<OnLeave>();
11 | 
12 |     render(<TiltTest onEnter={onEnter} onMove={onMove} onLeave={onLeave} reset={false} />);
13 | 
14 |     fireEvent.mouseEnter(screen.getByText('test'));
15 |     const onEnterParams = onEnter.mock.calls[0][0];
16 |     expect(onEnterParams.event.type).toBe('mouseenter');
17 | 
18 |     expect(onMove).toHaveBeenCalledWith<[OnMoveParams]>({
19 |       tiltAngleX: 0,
20 |       tiltAngleY: -0,
21 |       tiltAngleXPercentage: 0,
22 |       tiltAngleYPercentage: -0,
23 |       glareAngle: 0,
24 |       glareOpacity: 0,
25 |       // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
26 |       event: expect.objectContaining({
27 |         type: 'initial',
28 |       }),
29 |     });
30 | 
31 |     fireEvent.mouseLeave(screen.getByText('test'));
32 |     const onLeaveParams = onLeave.mock.calls[0][0];
33 |     expect(onLeaveParams.event.type).toBe('mouseleave');
34 |   });
35 | });
36 | 


--------------------------------------------------------------------------------
/src/features/tilt/test/tiltReverse.test.tsx:
--------------------------------------------------------------------------------
 1 | import { screen, render } from '@testing-library/react';
 2 | import userEvent from '@testing-library/user-event';
 3 | 
 4 | import type { OnMove, OnMoveParams } from 'index';
 5 | import { TiltTest } from 'utils/TiltTest';
 6 | 
 7 | describe('Tilt - Reverse', () => {
 8 |   it('should calculate reverse tilt when hover on element', async () => {
 9 |     const onMove = vi.fn<OnMove>();
10 | 
11 |     render(
12 |       <TiltTest
13 |         tiltReverse={true}
14 |         tiltMaxAngleX={60}
15 |         tiltMaxAngleY={60}
16 |         tiltAngleXManual={60}
17 |         tiltAngleYManual={45}
18 |         onMove={onMove}
19 |       />,
20 |     );
21 | 
22 |     await userEvent.hover(screen.getByText('test'));
23 | 
24 |     expect(onMove).toHaveBeenCalledWith<[OnMoveParams]>({
25 |       tiltAngleX: -60,
26 |       tiltAngleY: -45,
27 |       tiltAngleXPercentage: -100,
28 |       tiltAngleYPercentage: -75,
29 |       glareAngle: 0,
30 |       glareOpacity: 0,
31 |       // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
32 |       event: expect.objectContaining({
33 |         type: 'initial',
34 |       }),
35 |     });
36 |   });
37 | });
38 | 


--------------------------------------------------------------------------------
/src/features/tilt/test/tiltStyle.test.tsx:
--------------------------------------------------------------------------------
 1 | import { screen, render, fireEvent } from '@testing-library/react';
 2 | 
 3 | import type { OnMove } from 'index';
 4 | import { TiltTest } from 'utils/TiltTest';
 5 | 
 6 | describe('Tilt - Style', () => {
 7 |   it('should update tilt style when hover on element', () => {
 8 |     vi.useFakeTimers();
 9 | 
10 |     const onMove = vi.fn<OnMove>();
11 | 
12 |     const { container } = render(<TiltTest onMove={onMove} />);
13 | 
14 |     const positionStart = [{ pageX: 50, pageY: 50 }];
15 |     const positionEnd = [{ pageX: 100, pageY: 100 }];
16 | 
17 |     const testElement = screen.getByText('test');
18 |     fireEvent.touchStart(testElement, { touches: positionStart });
19 |     fireEvent.touchMove(testElement, { touches: positionEnd });
20 | 
21 |     vi.runAllTimers();
22 | 
23 |     // eslint-disable-next-line testing-library/no-node-access
24 |     const tiltElement = container.firstElementChild;
25 |     expect(tiltElement).toHaveStyle({
26 |       'will-change': 'transform',
27 |       transition: 'all 400ms cubic-bezier(.03,.98,.52,.99)',
28 |       transform: 'perspective(1000px) rotateX(20deg) rotateY(-20deg) scale3d(1,1,1)',
29 |     });
30 |   });
31 | });
32 | 


--------------------------------------------------------------------------------
/src/features/tilt/test/tiltTrackOnWindow.test.tsx:
--------------------------------------------------------------------------------
 1 | import { screen, render } from '@testing-library/react';
 2 | import userEvent from '@testing-library/user-event';
 3 | 
 4 | import type { OnMove, OnMoveParams } from 'index';
 5 | import { TiltTest } from 'utils/TiltTest';
 6 | 
 7 | describe('Tilt - Track On Window', () => {
 8 |   it('should calculate tilt when hover on window', async () => {
 9 |     const onMove = vi.fn<OnMove>();
10 | 
11 |     render(<TiltTest trackOnWindow={true} tiltAngleXManual={20} tiltAngleYManual={15} onMove={onMove} />);
12 | 
13 |     await userEvent.hover(screen.getByText('test'));
14 | 
15 |     expect(onMove).toHaveBeenCalledWith<[OnMoveParams]>({
16 |       tiltAngleX: 20,
17 |       tiltAngleY: 15,
18 |       tiltAngleXPercentage: 100,
19 |       tiltAngleYPercentage: 75,
20 |       glareAngle: 0,
21 |       glareOpacity: 0,
22 |       // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
23 |       event: expect.objectContaining({
24 |         type: 'initial',
25 |       }),
26 |     });
27 |   });
28 | });
29 | 


--------------------------------------------------------------------------------
/src/features/tilt/types.public.ts:
--------------------------------------------------------------------------------
 1 | export type TiltProps = {
 2 |   /**
 3 |    * Enables/disables the tilt effect.
 4 |    */
 5 |   tiltEnable?: boolean;
 6 |   /**
 7 |    * Reverses the tilt direction.
 8 |    */
 9 |   tiltReverse?: boolean;
10 |   /**
11 |    * Initial tilt angle (in degrees) on the x-axis.
12 |    */
13 |   tiltAngleXInitial?: number;
14 |   /**
15 |    * Initial tilt angle (in degrees) on the y-axis.
16 |    */
17 |   tiltAngleYInitial?: number;
18 |   /**
19 |    * Maximum tilt rotation (in degrees) on the x-axis (range: `0°-90°`).
20 |    */
21 |   tiltMaxAngleX?: number;
22 |   /**
23 |    * Maximum tilt rotation (in degrees) on the y-axis (range: `0°-90°`).
24 |    */
25 |   tiltMaxAngleY?: number;
26 |   /**
27 |    * Enables tilt on a single axis only.
28 |    */
29 |   tiltAxis?: Axis;
30 |   /**
31 |    * Manual tilt rotation (in degrees) on the x-axis.
32 |    */
33 |   tiltAngleXManual?: number | null;
34 |   /**
35 |    * Manual tilt rotation (in degrees) on the y-axis.
36 |    */
37 |   tiltAngleYManual?: number | null;
38 | };
39 | 
40 | export type Axis = 'x' | 'y';
41 | 


--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
1 | // eslint-disable-next-line import-x/no-default-export
2 | export { ReactParallaxTilt as default } from './react-parallax-tilt/ReactParallaxTilt';
3 | 
4 | // Public exposed library types
5 | export * from './features/glare/types.public';
6 | export * from './features/tilt/types.public';
7 | export * from './react-parallax-tilt/types.public';
8 | 


--------------------------------------------------------------------------------
/src/react-parallax-tilt/ReactParallaxTilt.tsx:
--------------------------------------------------------------------------------
  1 | import { PureComponent } from 'react';
  2 | 
  3 | import { Glare } from 'features/glare/Glare';
  4 | import { Tilt } from 'features/tilt/Tilt';
  5 | import { setTransition, constrainToRange } from 'utils/helperFns';
  6 | 
  7 | import { defaultProps } from './defaultProps';
  8 | import type { SupportedEvent, EventType, CustomEventType, WrapperElement, DeviceOrientationEventiOS } from './types';
  9 | import type { OnEnterParams, OnLeaveParams, ReactParallaxTiltProps } from './types.public';
 10 | 
 11 | // All props are initialized by default with non-null values
 12 | /* eslint-disable @typescript-eslint/no-non-null-assertion */
 13 | 
 14 | export class ReactParallaxTilt extends PureComponent<ReactParallaxTiltProps> {
 15 |   public static defaultProps = defaultProps;
 16 |   private wrapperEl: WrapperElement = {
 17 |     node: null,
 18 |     size: {
 19 |       width: 0,
 20 |       height: 0,
 21 |       left: 0,
 22 |       top: 0,
 23 |     },
 24 |     clientPosition: {
 25 |       x: null,
 26 |       y: null,
 27 |       xPercentage: 0,
 28 |       yPercentage: 0,
 29 |     },
 30 |     updateAnimationId: null,
 31 |     scale: 1,
 32 |   };
 33 |   private tilt: Tilt | null = null;
 34 |   private glare: Glare | null = null;
 35 | 
 36 |   public componentDidMount() {
 37 |     this.tilt = new Tilt();
 38 |     this.initGlare();
 39 |     this.setSize();
 40 |     this.addEventListeners();
 41 |     if (typeof CustomEvent === 'undefined') return;
 42 |     const autoreset = new CustomEvent<CustomEventType>('autoreset' as CustomEventType);
 43 |     this.mainLoop(autoreset);
 44 |     const initialEvent = new CustomEvent<CustomEventType>('initial' as CustomEventType);
 45 |     this.emitOnMove(initialEvent);
 46 |   }
 47 | 
 48 |   public componentWillUnmount() {
 49 |     if (this.wrapperEl.updateAnimationId !== null) {
 50 |       cancelAnimationFrame(this.wrapperEl.updateAnimationId);
 51 |     }
 52 |     this.removeEventListeners();
 53 |   }
 54 | 
 55 |   public componentDidUpdate() {
 56 |     const eventType = new CustomEvent<CustomEventType>('propChange' as CustomEventType);
 57 |     this.mainLoop(eventType);
 58 |     this.emitOnMove(eventType);
 59 |   }
 60 | 
 61 |   private addEventListeners() {
 62 |     const { trackOnWindow, gyroscope } = this.props;
 63 | 
 64 |     window.addEventListener('resize', this.setSize);
 65 | 
 66 |     if (trackOnWindow) {
 67 |       window.addEventListener('mouseenter', this.onEnter);
 68 |       window.addEventListener('mousemove', this.onMove);
 69 |       window.addEventListener('mouseout', this.onLeave);
 70 |       window.addEventListener('touchstart', this.onEnter);
 71 |       window.addEventListener('touchmove', this.onMove);
 72 |       window.addEventListener('touchend', this.onLeave);
 73 |     }
 74 | 
 75 |     /* v8 ignore next 3 */
 76 |     if (gyroscope) {
 77 |       void this.addDeviceOrientationEventListener();
 78 |     }
 79 |   }
 80 | 
 81 |   /* v8 ignore next 19 */
 82 |   private addDeviceOrientationEventListener = async () => {
 83 |     // Browser doesn't support Device Orientation.
 84 |     // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
 85 |     if (!window.DeviceOrientationEvent) {
 86 |       return;
 87 |     }
 88 | 
 89 |     const requestPermission = (DeviceOrientationEvent as unknown as DeviceOrientationEventiOS).requestPermission;
 90 |     const iOS = typeof requestPermission === 'function';
 91 |     if (iOS) {
 92 |       const response = await requestPermission();
 93 |       if (response === 'granted') {
 94 |         window.addEventListener('deviceorientation', this.onMove);
 95 |       }
 96 |       return;
 97 |     }
 98 | 
 99 |     window.addEventListener('deviceorientation', this.onMove);
100 |   };
101 | 
102 |   private removeEventListeners() {
103 |     const { trackOnWindow, gyroscope } = this.props;
104 | 
105 |     window.removeEventListener('resize', this.setSize);
106 | 
107 |     if (trackOnWindow) {
108 |       window.removeEventListener('mouseenter', this.onEnter);
109 |       window.removeEventListener('mousemove', this.onMove);
110 |       window.removeEventListener('mouseout', this.onLeave);
111 |       window.removeEventListener('touchstart', this.onEnter);
112 |       window.removeEventListener('touchmove', this.onMove);
113 |       window.removeEventListener('touchend', this.onLeave);
114 |     }
115 | 
116 |     // Instance of DeviceOrientationEvent not possible.
117 |     /* v8 ignore next 4 */
118 |     // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
119 |     if (gyroscope && window.DeviceOrientationEvent) {
120 |       window.removeEventListener('deviceorientation', this.onMove);
121 |     }
122 |   }
123 | 
124 |   public setSize = () => {
125 |     this.setWrapperElSize();
126 |     if (this.glare) {
127 |       this.glare.setSize(this.wrapperEl.size);
128 |     }
129 |   };
130 | 
131 |   private setWrapperElSize() {
132 |     const rect = this.wrapperEl.node!.getBoundingClientRect();
133 |     this.wrapperEl.size.width = this.wrapperEl.node!.offsetWidth;
134 |     this.wrapperEl.size.height = this.wrapperEl.node!.offsetHeight;
135 |     this.wrapperEl.size.left = rect.left + window.scrollX;
136 |     this.wrapperEl.size.top = rect.top + window.scrollY;
137 |   }
138 | 
139 |   private initGlare() {
140 |     const { glareEnable, glareBorderRadius } = this.props;
141 | 
142 |     if (!glareEnable) {
143 |       return;
144 |     }
145 | 
146 |     this.glare = new Glare(this.wrapperEl.size, glareBorderRadius!);
147 |     this.wrapperEl.node!.appendChild(this.glare.glareWrapperEl);
148 |   }
149 | 
150 |   public mainLoop = (event: SupportedEvent) => {
151 |     if (this.wrapperEl.updateAnimationId !== null) {
152 |       cancelAnimationFrame(this.wrapperEl.updateAnimationId);
153 |     }
154 |     this.processInput(event);
155 |     this.update(event.type);
156 |     this.wrapperEl.updateAnimationId = requestAnimationFrame(this.renderFrame);
157 |   };
158 | 
159 |   private onEnter = (event: OnEnterParams['event']) => {
160 |     const { onEnter } = this.props;
161 | 
162 |     // Update wrapped tilt component params in case
163 |     // - it's being manipulated (position, size, etc.) in consumed application
164 |     // - initial (delayed) images/children load
165 |     this.setSize();
166 | 
167 |     // increase performance by notifying browser 'transform' property is just about to get changed
168 |     this.wrapperEl.node!.style.willChange = 'transform';
169 |     this.setTransitions();
170 | 
171 |     if (onEnter) {
172 |       onEnter({ event });
173 |     }
174 |   };
175 | 
176 |   private onMove = (event: SupportedEvent): void => {
177 |     this.mainLoop(event);
178 |     this.emitOnMove(event);
179 |   };
180 | 
181 |   private emitOnMove(event: SupportedEvent) {
182 |     const { onMove } = this.props;
183 |     if (!onMove) {
184 |       return;
185 |     }
186 |     let glareAngle = 0;
187 |     let glareOpacity = 0;
188 |     if (this.glare) {
189 |       glareAngle = this.glare.glareAngle;
190 |       glareOpacity = this.glare.glareOpacity;
191 |     }
192 | 
193 |     onMove({
194 |       tiltAngleX: this.tilt!.tiltAngleX,
195 |       tiltAngleY: this.tilt!.tiltAngleY,
196 |       tiltAngleXPercentage: this.tilt!.tiltAngleXPercentage,
197 |       tiltAngleYPercentage: this.tilt!.tiltAngleYPercentage,
198 |       glareAngle,
199 |       glareOpacity,
200 |       event,
201 |     });
202 |   }
203 | 
204 |   private onLeave = (event: OnLeaveParams['event']) => {
205 |     const { onLeave } = this.props;
206 |     this.setTransitions();
207 | 
208 |     if (onLeave) {
209 |       onLeave({ event });
210 |     }
211 | 
212 |     if (this.props.reset) {
213 |       const autoResetEvent = new CustomEvent<CustomEventType>('autoreset' as CustomEventType);
214 |       this.onMove(autoResetEvent);
215 |     }
216 |   };
217 | 
218 |   private processInput = (event: SupportedEvent): void => {
219 |     const { scale } = this.props;
220 | 
221 |     switch (event.type as EventType) {
222 |       case 'mousemove':
223 |         this.wrapperEl.clientPosition.x = (event as MouseEvent).pageX;
224 |         this.wrapperEl.clientPosition.y = (event as MouseEvent).pageY;
225 |         this.wrapperEl.scale = scale!;
226 |         break;
227 |       case 'touchmove':
228 |         this.wrapperEl.clientPosition.x = (event as TouchEvent).touches[0].pageX;
229 |         this.wrapperEl.clientPosition.y = (event as TouchEvent).touches[0].pageY;
230 |         this.wrapperEl.scale = scale!;
231 |         break;
232 |       // Instance of DeviceOrientationEvent not possible.
233 |       /* v8 ignore next 4 */
234 |       case 'deviceorientation':
235 |         this.processInputDeviceOrientation(event as DeviceOrientationEvent);
236 |         this.wrapperEl.scale = scale!;
237 |         break;
238 |       case 'autoreset': {
239 |         const { tiltAngleXInitial, tiltAngleYInitial, tiltMaxAngleX, tiltMaxAngleY } = this.props;
240 |         const xPercentage = (tiltAngleXInitial! / tiltMaxAngleX!) * 100;
241 |         const yPercentage = (tiltAngleYInitial! / tiltMaxAngleY!) * 100;
242 |         this.wrapperEl.clientPosition.xPercentage = constrainToRange(xPercentage, -100, 100);
243 |         this.wrapperEl.clientPosition.yPercentage = constrainToRange(yPercentage, -100, 100);
244 |         this.wrapperEl.scale = 1;
245 |         break;
246 |       }
247 |     }
248 |   };
249 | 
250 |   /* v8 ignore next 16 */
251 |   private processInputDeviceOrientation = (event: DeviceOrientationEvent): void => {
252 |     if (!event.gamma || !event.beta || !this.props.gyroscope) {
253 |       return;
254 |     }
255 | 
256 |     const { tiltMaxAngleX, tiltMaxAngleY } = this.props;
257 | 
258 |     const angleX = event.beta; // motion of the device around the x axis in degree in the range:[-180,180]
259 |     const angleY = event.gamma; // motion of the device around the y axis in degree in the range:[-90,90]
260 | 
261 |     this.wrapperEl.clientPosition.xPercentage = (angleX / tiltMaxAngleX!) * 100;
262 |     this.wrapperEl.clientPosition.yPercentage = (angleY / tiltMaxAngleY!) * 100;
263 | 
264 |     this.wrapperEl.clientPosition.xPercentage = constrainToRange(this.wrapperEl.clientPosition.xPercentage, -100, 100);
265 |     this.wrapperEl.clientPosition.yPercentage = constrainToRange(this.wrapperEl.clientPosition.yPercentage, -100, 100);
266 |   };
267 | 
268 |   private update = (eventType: string): void => {
269 |     const { tiltEnable, flipVertically, flipHorizontally } = this.props;
270 | 
271 |     const isAngleSetToDefaultAlready = eventType !== ('autoreset' satisfies EventType);
272 |     const isAngleRetrievedFromGyroscope = eventType !== ('deviceorientation' satisfies EventType);
273 |     const isPropChanged = eventType !== ('propChange' satisfies EventType);
274 |     const isUpdateCalculationNeeded = isAngleSetToDefaultAlready && isAngleRetrievedFromGyroscope && isPropChanged;
275 |     if (isUpdateCalculationNeeded) {
276 |       this.updateClientInput();
277 |     }
278 | 
279 |     if (tiltEnable) {
280 |       this.tilt!.update(this.wrapperEl.clientPosition, this.props);
281 |     }
282 | 
283 |     this.updateFlip();
284 | 
285 |     this.tilt!.updateTiltAnglesPercentage(this.props);
286 | 
287 |     if (this.glare) {
288 |       this.glare.update(this.wrapperEl.clientPosition, this.props, flipVertically!, flipHorizontally!);
289 |     }
290 |   };
291 | 
292 |   private updateClientInput = (): void => {
293 |     const { trackOnWindow } = this.props;
294 | 
295 |     let xTemp;
296 |     let yTemp;
297 |     if (trackOnWindow) {
298 |       const { x, y } = this.wrapperEl.clientPosition;
299 | 
300 |       xTemp = (y! / window.innerHeight) * 200 - 100;
301 |       yTemp = (x! / window.innerWidth) * 200 - 100;
302 |     } else {
303 |       const {
304 |         size: { width, height, left, top },
305 |         clientPosition: { x, y },
306 |       } = this.wrapperEl;
307 | 
308 |       xTemp = ((y! - top!) / height!) * 200 - 100;
309 |       yTemp = ((x! - left!) / width!) * 200 - 100;
310 |     }
311 | 
312 |     this.wrapperEl.clientPosition.xPercentage = constrainToRange(xTemp, -100, 100);
313 |     this.wrapperEl.clientPosition.yPercentage = constrainToRange(yTemp, -100, 100);
314 |   };
315 | 
316 |   private updateFlip = (): void => {
317 |     const { flipVertically, flipHorizontally } = this.props;
318 | 
319 |     if (flipVertically) {
320 |       this.tilt!.tiltAngleX += 180;
321 |       this.tilt!.tiltAngleY *= -1;
322 |     }
323 |     if (flipHorizontally) {
324 |       this.tilt!.tiltAngleY += 180;
325 |     }
326 |   };
327 | 
328 |   public renderFrame = (): void => {
329 |     this.resetWrapperElTransform();
330 | 
331 |     this.renderPerspective();
332 |     this.tilt!.render(this.wrapperEl.node!);
333 |     this.renderScale();
334 |     if (this.glare) {
335 |       this.glare.render(this.props);
336 |     }
337 |   };
338 | 
339 |   private resetWrapperElTransform(): void {
340 |     this.wrapperEl.node!.style.transform = '';
341 |   }
342 | 
343 |   private renderPerspective(): void {
344 |     const { perspective } = this.props;
345 | 
346 |     this.wrapperEl.node!.style.transform += `perspective(${perspective!}px) `;
347 |   }
348 | 
349 |   private renderScale(): void {
350 |     const { scale } = this.wrapperEl;
351 | 
352 |     this.wrapperEl.node!.style.transform += `scale3d(${scale},${scale},${scale})`;
353 |   }
354 | 
355 |   private setTransitions() {
356 |     const { transitionSpeed, transitionEasing } = this.props;
357 |     setTransition(this.wrapperEl.node!, 'all', transitionSpeed!, transitionEasing!);
358 | 
359 |     if (this.glare) {
360 |       setTransition(this.glare.glareEl, 'opacity', transitionSpeed!, transitionEasing!);
361 |     }
362 |   }
363 | 
364 |   public render() {
365 |     const { children, className, style } = this.props;
366 |     return (
367 |       <div
368 |         ref={(el) => {
369 |           this.wrapperEl.node = el;
370 |         }}
371 |         onMouseEnter={this.onEnter}
372 |         onMouseMove={this.onMove}
373 |         onMouseLeave={this.onLeave}
374 |         onTouchStart={this.onEnter}
375 |         onTouchMove={this.onMove}
376 |         onTouchEnd={this.onLeave}
377 |         className={className}
378 |         style={style}
379 |       >
380 |         {children}
381 |       </div>
382 |     );
383 |   }
384 | }
385 | 


--------------------------------------------------------------------------------
/src/react-parallax-tilt/defaultProps.ts:
--------------------------------------------------------------------------------
 1 | import type { GlareProps } from 'features/glare/types.public';
 2 | import type { TiltProps } from 'features/tilt/types.public';
 3 | 
 4 | import type { ReactParallaxTiltProps } from './types.public';
 5 | 
 6 | const defaultGlareProps: GlareProps = {
 7 |   glareEnable: false,
 8 |   glareMaxOpacity: 0.7,
 9 |   glareColor: '#ffffff',
10 |   glarePosition: 'bottom',
11 |   glareReverse: false,
12 |   glareBorderRadius: '0',
13 | };
14 | 
15 | const defaultTiltProps: TiltProps = {
16 |   tiltEnable: true,
17 |   tiltReverse: false,
18 |   tiltAngleXInitial: 0,
19 |   tiltAngleYInitial: 0,
20 |   tiltMaxAngleX: 20,
21 |   tiltMaxAngleY: 20,
22 |   tiltAxis: undefined,
23 |   tiltAngleXManual: null,
24 |   tiltAngleYManual: null,
25 | };
26 | 
27 | export const defaultProps: ReactParallaxTiltProps = {
28 |   scale: 1,
29 |   perspective: 1000,
30 |   flipVertically: false,
31 |   flipHorizontally: false,
32 |   reset: true,
33 |   transitionEasing: 'cubic-bezier(.03,.98,.52,.99)',
34 |   transitionSpeed: 400,
35 |   trackOnWindow: false,
36 |   gyroscope: false,
37 |   ...defaultTiltProps,
38 |   ...defaultGlareProps,
39 | };
40 | 


--------------------------------------------------------------------------------
/src/react-parallax-tilt/types.public.ts:
--------------------------------------------------------------------------------
 1 | import type { GlareProps } from 'features/glare/types.public';
 2 | import type { TiltProps } from 'features/tilt/types.public';
 3 | 
 4 | import type { SupportedEvent } from './types';
 5 | 
 6 | export type OnMoveParams = {
 7 |   tiltAngleX: number;
 8 |   tiltAngleY: number;
 9 |   tiltAngleXPercentage: number;
10 |   tiltAngleYPercentage: number;
11 |   glareAngle: number;
12 |   glareOpacity: number;
13 |   event: SupportedEvent;
14 | };
15 | 
16 | export type OnMove = (onMoveParams: OnMoveParams) => void;
17 | 
18 | export type OnEnterParams = {
19 |   event: MouseEvent | React.MouseEvent | TouchEvent | React.TouchEvent;
20 | };
21 | 
22 | export type OnEnter = (onEnterParams: OnEnterParams) => void;
23 | 
24 | export type OnLeaveParams = {
25 |   event: MouseEvent | React.MouseEvent | TouchEvent | React.TouchEvent;
26 | };
27 | 
28 | export type OnLeave = (onLeaveParams: OnLeaveParams) => void;
29 | 
30 | type HtmlDivTilt = Pick<React.HTMLAttributes<HTMLDivElement>, 'className' | 'style'>;
31 | 
32 | export type ReactParallaxTiltProps = TiltProps &
33 |   GlareProps &
34 |   HtmlDivTilt & {
35 |     /**
36 |      * Tilt children component
37 |      */
38 |     children?: React.ReactNode;
39 |     /**
40 |      * Scale of the component (`1.5 = 150%, 2 = 200%`).
41 |      */
42 |     scale?: number;
43 |     /**
44 |      * Defines how far the tilt component appears from the user. Lower values create more extreme tilt effects.
45 |      */
46 |     perspective?: number;
47 |     /**
48 |      * Enables/disables vertical flipping of the component.
49 |      */
50 |     flipVertically?: boolean;
51 |     /**
52 |      * Enables/disables horizontal flipping of the component.
53 |      */
54 |     flipHorizontally?: boolean;
55 |     /**
56 |      * Determines if effects should reset on `onLeave` event.
57 |      */
58 |     reset?: boolean;
59 |     /**
60 |      * Easing function for the transition.
61 |      */
62 |     transitionEasing?: string;
63 |     /**
64 |      * Speed of the transition.
65 |      */
66 |     transitionSpeed?: number;
67 |     /**
68 |      * Tracks mouse and touch events across the entire window.
69 |      */
70 |     trackOnWindow?: boolean;
71 |     /**
72 |      * Enables/disables device orientation detection.
73 |      */
74 |     gyroscope?: boolean;
75 |     /**
76 |      * Callback triggered when user moves on the component.
77 |      */
78 |     onMove?: OnMove;
79 |     /**
80 |      * Callback triggered when user enters the component.
81 |      */
82 |     onEnter?: OnEnter;
83 |     /**
84 |      * Callback triggered when user leaves the component.
85 |      */
86 |     onLeave?: OnLeave;
87 |   };
88 | 


--------------------------------------------------------------------------------
/src/react-parallax-tilt/types.ts:
--------------------------------------------------------------------------------
 1 | import type { ElementSizePosition, ClientPosition } from 'utils/types';
 2 | 
 3 | export type WrapperElement = {
 4 |   node: HTMLDivElement | null;
 5 |   size: ElementSizePosition;
 6 |   clientPosition: ClientPosition;
 7 |   updateAnimationId: number | null;
 8 |   scale: number;
 9 | };
10 | 
11 | type DOMSupportedEvent = MouseEvent | React.MouseEvent | TouchEvent | React.TouchEvent | DeviceOrientationEvent;
12 | export type SupportedEvent = DOMSupportedEvent | CustomEvent<CustomEventType>;
13 | 
14 | type DOMEventType = 'touchmove' | 'mousemove' | 'deviceorientation';
15 | export type CustomEventType = 'autoreset' | 'initial' | 'propChange';
16 | export type EventType = DOMEventType | CustomEventType;
17 | 
18 | // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
19 | export interface DeviceOrientationEventiOS extends DeviceOrientationEvent {
20 |   requestPermission?: () => Promise<'granted' | 'denied'>;
21 | }
22 | 


--------------------------------------------------------------------------------
/src/utils/TiltTest.tsx:
--------------------------------------------------------------------------------
1 | import type { ReactParallaxTiltProps } from 'index';
2 | import Tilt from 'index';
3 | 
4 | export const TiltTest = (reactParallaxTiltProps: ReactParallaxTiltProps) => (
5 |   <Tilt {...reactParallaxTiltProps}>
6 |     <div style={{ height: '300px', width: '300px', backgroundColor: 'darkgreen' }}>test</div>
7 |   </Tilt>
8 | );
9 | 


--------------------------------------------------------------------------------
/src/utils/helperFns.ts:
--------------------------------------------------------------------------------
 1 | export const setTransition = (
 2 |   element: HTMLElement,
 3 |   property: 'all' | 'opacity',
 4 |   duration: number,
 5 |   timing: string,
 6 | ): void => {
 7 |   element.style.transition = `${property} ${duration}ms ${timing}`;
 8 | };
 9 | 
10 | export const constrainToRange = (value: number, rangeMin: number, rangeMax: number): number =>
11 |   Math.min(Math.max(value, rangeMin), rangeMax);
12 | 


--------------------------------------------------------------------------------
/src/utils/types.ts:
--------------------------------------------------------------------------------
 1 | export type ElementSizePosition = {
 2 |   width: number | null;
 3 |   height: number | null;
 4 |   left: number | null;
 5 |   top: number | null;
 6 | };
 7 | 
 8 | export type ClientPosition = {
 9 |   x: number | null;
10 |   y: number | null;
11 |   xPercentage: number;
12 |   yPercentage: number;
13 | };
14 | 


--------------------------------------------------------------------------------
/stories/Default/Default.demozap.tsx:
--------------------------------------------------------------------------------
 1 | import Tilt from 'index';
 2 | 
 3 | import { DefaultComponent } from '../_DefaultComponent/DefaultComponent';
 4 | 
 5 | const Default = () => (
 6 |   <Tilt>
 7 |     <DefaultComponent />
 8 |   </Tilt>
 9 | );
10 | 
11 | export default Default;
12 | 


--------------------------------------------------------------------------------
/stories/Default/_Default.tsx:
--------------------------------------------------------------------------------
 1 | import { DemoTab } from 'react-demo-tab';
 2 | 
 3 | import Demo from './Default.demozap';
 4 | 
 5 | const code = `import Tilt from 'index';
 6 | 
 7 | import { DefaultComponent } from '../_DefaultComponent/DefaultComponent';
 8 | 
 9 | const Default = () => (
10 |   <Tilt>
11 |     <DefaultComponent />
12 |   </Tilt>
13 | );
14 | 
15 | export default Default;
16 | `;
17 | 
18 | export const _Default = () => (
19 |   <DemoTab code={code} codeExt="tsx">
20 |     <Demo />
21 |   </DemoTab>
22 | );
23 | 


--------------------------------------------------------------------------------
/stories/EventParams/EventParams.demozap.css:
--------------------------------------------------------------------------------
 1 | @import '../ReactParallaxTilt.css';
 2 | 
 3 | .event-params {
 4 |   display: flex;
 5 |   flex-direction: column;
 6 |   justify-content: center;
 7 |   align-items: center;
 8 |   font-size: 20px;
 9 | 
10 |   .tilt-content {
11 |     display: flex;
12 |     flex-direction: column;
13 |     justify-content: center;
14 |     align-items: center;
15 |     width: 350px;
16 |     height: 350px;
17 |     font-size: 28px;
18 |     font-style: italic;
19 |     background-color: darkgreen;
20 |     color: white;
21 |     border: 5px solid black;
22 |     border-radius: 20px;
23 |     text-align: center;
24 | 
25 |     .param {
26 |       margin-top: 12px;
27 |       border-top: 2px solid white;
28 |       min-width: 220px;
29 | 
30 |       .header {
31 |         font-size: 35px;
32 |       }
33 |     }
34 | 
35 |     .test-params {
36 |       display: none;
37 |     }
38 | 
39 |     .test-ref {
40 |       position: absolute;
41 |       width: 30px;
42 |       height: 30px;
43 |       background-color: transparent;
44 |     }
45 |     .top-left {
46 |       top: -10px;
47 |       left: -10px;
48 |     }
49 |     .top-mid-left {
50 |       top: 80px;
51 |       left: 80px;
52 |     }
53 |     .top-right {
54 |       top: -10px;
55 |       right: -10px;
56 |     }
57 |     .bottom-right {
58 |       bottom: -10px;
59 |       right: -10px;
60 |     }
61 |     .bottom-left {
62 |       bottom: -11px;
63 |       left: -11px;
64 |     }
65 |   }
66 | 
67 |   .event-type {
68 |     display: flex;
69 |     margin-top: 20px;
70 |     margin-bottom: 10px;
71 |   }
72 | }
73 | 


--------------------------------------------------------------------------------
/stories/EventParams/EventParams.demozap.tsx:
--------------------------------------------------------------------------------
  1 | import type { ChangeEvent } from 'react';
  2 | import { useState } from 'react';
  3 | 
  4 | import type { OnEnterParams, OnLeaveParams, OnMoveParams } from 'index';
  5 | import Tilt from 'index';
  6 | 
  7 | import './EventParams.demozap.css';
  8 | 
  9 | type SelectedEvents = {
 10 |   trackOnMove: boolean;
 11 |   trackOnEnter: boolean;
 12 |   trackOnLeave: boolean;
 13 | };
 14 | 
 15 | const EventParams = () => {
 16 |   const [eventParams, setEventParams] = useState<Omit<OnMoveParams, 'event'>>({
 17 |     tiltAngleX: 0,
 18 |     tiltAngleY: 0,
 19 |     tiltAngleXPercentage: 0,
 20 |     tiltAngleYPercentage: 0,
 21 |     glareAngle: 0,
 22 |     glareOpacity: 0,
 23 |   });
 24 |   const [evenDescription, setEvenDescription] = useState<string | null>(null);
 25 | 
 26 |   const [selectedEvents, setSelectedEvents] = useState<SelectedEvents>({
 27 |     trackOnMove: true,
 28 |     trackOnEnter: true,
 29 |     trackOnLeave: true,
 30 |   });
 31 | 
 32 |   const onMove = ({ event, ...restEventParams }: OnMoveParams) => {
 33 |     if (JSON.stringify(restEventParams) === JSON.stringify(eventParams)) {
 34 |       return;
 35 |     }
 36 | 
 37 |     if (selectedEvents.trackOnMove) {
 38 |       setEvenDescription(`Event 'onMove' triggered by '${event.type}' event type.`);
 39 |     }
 40 | 
 41 |     setEventParams(restEventParams);
 42 |   };
 43 | 
 44 |   const onEnter = ({ event }: OnEnterParams) => {
 45 |     if (selectedEvents.trackOnEnter) {
 46 |       setEvenDescription(`Event 'onEnter' triggered by '${event.type}' event type.`);
 47 |     }
 48 |   };
 49 | 
 50 |   const onLeave = ({ event }: OnLeaveParams) => {
 51 |     if (selectedEvents.trackOnLeave) {
 52 |       setEvenDescription(`Event 'onLeave' triggered by '${event.type}' event type.`);
 53 |     }
 54 |   };
 55 | 
 56 |   const toggleCheck = (event: ChangeEvent<HTMLInputElement>) => {
 57 |     const { name, checked } = event.target;
 58 | 
 59 |     setEvenDescription(null);
 60 |     setSelectedEvents((selectedEvents) => ({
 61 |       ...selectedEvents,
 62 |       [name]: checked,
 63 |     }));
 64 |   };
 65 | 
 66 |   return (
 67 |     <div className="event-params">
 68 |       <Tilt
 69 |         onMove={onMove}
 70 |         onEnter={onEnter}
 71 |         onLeave={onLeave}
 72 |         glareEnable={true}
 73 |         glareMaxOpacity={1.0}
 74 |         glareColor="white"
 75 |         gyroscope={true}
 76 |       >
 77 |         <div className="background-stripes tilt-content">
 78 |           <div data-testid="topLeft" className="test-ref top-left" />
 79 |           <div data-testid="topMidLeft" className="test-ref top-mid-left" />
 80 |           <div data-testid="topRight" className="test-ref top-right" />
 81 |           <div data-testid="bottomRight" className="test-ref bottom-right" />
 82 |           <div data-testid="bottomLeft" className="test-ref bottom-left" />
 83 |           <pre data-testid="params" className="test-params">
 84 |             {JSON.stringify(eventParams)}
 85 |           </pre>
 86 |           <div className="param">
 87 |             <div className="header">Axis x</div>
 88 |             <div data-testid="tiltAngleX">
 89 |               {eventParams.tiltAngleX.toFixed(2)}° / {eventParams.tiltAngleXPercentage.toFixed(2)}%
 90 |             </div>
 91 |           </div>
 92 |           <div className="param">
 93 |             <div className="header">Axis y</div>
 94 |             <div data-testid="tiltAngleY">
 95 |               {eventParams.tiltAngleY.toFixed(2)}° / {eventParams.tiltAngleYPercentage.toFixed(2)}%
 96 |             </div>
 97 |           </div>
 98 |           <div className="param">
 99 |             <div className="header">Glare angle</div>
100 |             <div data-testid="glareAngle">{eventParams.glareAngle.toFixed(2)}°</div>
101 |           </div>
102 |           <div className="param">
103 |             <div className="header">Glare opacity</div>
104 |             <div data-testid="glareOpacity">{eventParams.glareOpacity.toFixed(2)}</div>
105 |           </div>
106 |         </div>
107 |       </Tilt>
108 |       <div className="event-type">
109 |         Track events:
110 |         <div>
111 |           <input
112 |             id="onMove"
113 |             onChange={toggleCheck}
114 |             checked={selectedEvents.trackOnMove}
115 |             name={'trackOnMove'}
116 |             type="checkbox"
117 |           />
118 |           <label htmlFor="onMove">onMove</label>
119 |         </div>
120 |         <div>
121 |           <input
122 |             id="onEnter"
123 |             onChange={toggleCheck}
124 |             checked={selectedEvents.trackOnEnter}
125 |             name={'trackOnEnter'}
126 |             type="checkbox"
127 |           />
128 |           <label htmlFor="onEnter">onEnter</label>
129 |         </div>
130 |         <div>
131 |           <input
132 |             id="onLeave"
133 |             onChange={toggleCheck}
134 |             checked={selectedEvents.trackOnLeave}
135 |             name={'trackOnLeave'}
136 |             type="checkbox"
137 |           />
138 |           <label htmlFor="onLeave">onLeave</label>
139 |         </div>
140 |       </div>
141 |       {evenDescription && <div data-testid="evenDescription">{evenDescription}</div>}
142 |     </div>
143 |   );
144 | };
145 | 
146 | export default EventParams;
147 | 


--------------------------------------------------------------------------------
/stories/EventParams/_EventParams.tsx:
--------------------------------------------------------------------------------
  1 | import { DemoTab } from 'react-demo-tab';
  2 | 
  3 | import Demo from './EventParams.demozap';
  4 | 
  5 | const code = `import type { ChangeEvent } from 'react';
  6 | import { useState } from 'react';
  7 | 
  8 | import type { OnEnterParams, OnLeaveParams, OnMoveParams } from 'index';
  9 | import Tilt from 'index';
 10 | 
 11 | import './EventParams.demozap.css';
 12 | 
 13 | type SelectedEvents = {
 14 |   trackOnMove: boolean;
 15 |   trackOnEnter: boolean;
 16 |   trackOnLeave: boolean;
 17 | };
 18 | 
 19 | const EventParams = () => {
 20 |   const [eventParams, setEventParams] = useState<Omit<OnMoveParams, 'event'>>({
 21 |     tiltAngleX: 0,
 22 |     tiltAngleY: 0,
 23 |     tiltAngleXPercentage: 0,
 24 |     tiltAngleYPercentage: 0,
 25 |     glareAngle: 0,
 26 |     glareOpacity: 0,
 27 |   });
 28 |   const [evenDescription, setEvenDescription] = useState<string | null>(null);
 29 | 
 30 |   const [selectedEvents, setSelectedEvents] = useState<SelectedEvents>({
 31 |     trackOnMove: true,
 32 |     trackOnEnter: true,
 33 |     trackOnLeave: true,
 34 |   });
 35 | 
 36 |   const onMove = ({ event, ...restEventParams }: OnMoveParams) => {
 37 |     if (JSON.stringify(restEventParams) === JSON.stringify(eventParams)) {
 38 |       return;
 39 |     }
 40 | 
 41 |     if (selectedEvents.trackOnMove) {
 42 |       setEvenDescription(\`Event 'onMove' triggered by '\${event.type}' event type.\`);
 43 |     }
 44 | 
 45 |     setEventParams(restEventParams);
 46 |   };
 47 | 
 48 |   const onEnter = ({ event }: OnEnterParams) => {
 49 |     if (selectedEvents.trackOnEnter) {
 50 |       setEvenDescription(\`Event 'onEnter' triggered by '\${event.type}' event type.\`);
 51 |     }
 52 |   };
 53 | 
 54 |   const onLeave = ({ event }: OnLeaveParams) => {
 55 |     if (selectedEvents.trackOnLeave) {
 56 |       setEvenDescription(\`Event 'onLeave' triggered by '\${event.type}' event type.\`);
 57 |     }
 58 |   };
 59 | 
 60 |   const toggleCheck = (event: ChangeEvent<HTMLInputElement>) => {
 61 |     const { name, checked } = event.target;
 62 | 
 63 |     setEvenDescription(null);
 64 |     setSelectedEvents((selectedEvents) => ({
 65 |       ...selectedEvents,
 66 |       [name]: checked,
 67 |     }));
 68 |   };
 69 | 
 70 |   return (
 71 |     <div className="event-params">
 72 |       <Tilt
 73 |         onMove={onMove}
 74 |         onEnter={onEnter}
 75 |         onLeave={onLeave}
 76 |         glareEnable={true}
 77 |         glareMaxOpacity={1.0}
 78 |         glareColor="white"
 79 |         gyroscope={true}
 80 |       >
 81 |         <div className="background-stripes tilt-content">
 82 |           <div data-testid="topLeft" className="test-ref top-left" />
 83 |           <div data-testid="topMidLeft" className="test-ref top-mid-left" />
 84 |           <div data-testid="topRight" className="test-ref top-right" />
 85 |           <div data-testid="bottomRight" className="test-ref bottom-right" />
 86 |           <div data-testid="bottomLeft" className="test-ref bottom-left" />
 87 |           <pre data-testid="params" className="test-params">
 88 |             {JSON.stringify(eventParams)}
 89 |           </pre>
 90 |           <div className="param">
 91 |             <div className="header">Axis x</div>
 92 |             <div data-testid="tiltAngleX">
 93 |               {eventParams.tiltAngleX.toFixed(2)}° / {eventParams.tiltAngleXPercentage.toFixed(2)}%
 94 |             </div>
 95 |           </div>
 96 |           <div className="param">
 97 |             <div className="header">Axis y</div>
 98 |             <div data-testid="tiltAngleY">
 99 |               {eventParams.tiltAngleY.toFixed(2)}° / {eventParams.tiltAngleYPercentage.toFixed(2)}%
100 |             </div>
101 |           </div>
102 |           <div className="param">
103 |             <div className="header">Glare angle</div>
104 |             <div data-testid="glareAngle">{eventParams.glareAngle.toFixed(2)}°</div>
105 |           </div>
106 |           <div className="param">
107 |             <div className="header">Glare opacity</div>
108 |             <div data-testid="glareOpacity">{eventParams.glareOpacity.toFixed(2)}</div>
109 |           </div>
110 |         </div>
111 |       </Tilt>
112 |       <div className="event-type">
113 |         Track events:
114 |         <div>
115 |           <input
116 |             id="onMove"
117 |             onChange={toggleCheck}
118 |             checked={selectedEvents.trackOnMove}
119 |             name={'trackOnMove'}
120 |             type="checkbox"
121 |           />
122 |           <label htmlFor="onMove">onMove</label>
123 |         </div>
124 |         <div>
125 |           <input
126 |             id="onEnter"
127 |             onChange={toggleCheck}
128 |             checked={selectedEvents.trackOnEnter}
129 |             name={'trackOnEnter'}
130 |             type="checkbox"
131 |           />
132 |           <label htmlFor="onEnter">onEnter</label>
133 |         </div>
134 |         <div>
135 |           <input
136 |             id="onLeave"
137 |             onChange={toggleCheck}
138 |             checked={selectedEvents.trackOnLeave}
139 |             name={'trackOnLeave'}
140 |             type="checkbox"
141 |           />
142 |           <label htmlFor="onLeave">onLeave</label>
143 |         </div>
144 |       </div>
145 |       {evenDescription && <div data-testid="evenDescription">{evenDescription}</div>}
146 |     </div>
147 |   );
148 | };
149 | 
150 | export default EventParams;
151 | `;
152 | 
153 | const style = `@import '../ReactParallaxTilt.css';
154 | 
155 | .event-params {
156 |   display: flex;
157 |   flex-direction: column;
158 |   justify-content: center;
159 |   align-items: center;
160 |   font-size: 20px;
161 | 
162 |   .tilt-content {
163 |     display: flex;
164 |     flex-direction: column;
165 |     justify-content: center;
166 |     align-items: center;
167 |     width: 350px;
168 |     height: 350px;
169 |     font-size: 28px;
170 |     font-style: italic;
171 |     background-color: darkgreen;
172 |     color: white;
173 |     border: 5px solid black;
174 |     border-radius: 20px;
175 |     text-align: center;
176 | 
177 |     .param {
178 |       margin-top: 12px;
179 |       border-top: 2px solid white;
180 |       min-width: 220px;
181 | 
182 |       .header {
183 |         font-size: 35px;
184 |       }
185 |     }
186 | 
187 |     .test-params {
188 |       display: none;
189 |     }
190 | 
191 |     .test-ref {
192 |       position: absolute;
193 |       width: 30px;
194 |       height: 30px;
195 |       background-color: transparent;
196 |     }
197 |     .top-left {
198 |       top: -10px;
199 |       left: -10px;
200 |     }
201 |     .top-mid-left {
202 |       top: 80px;
203 |       left: 80px;
204 |     }
205 |     .top-right {
206 |       top: -10px;
207 |       right: -10px;
208 |     }
209 |     .bottom-right {
210 |       bottom: -10px;
211 |       right: -10px;
212 |     }
213 |     .bottom-left {
214 |       bottom: -11px;
215 |       left: -11px;
216 |     }
217 |   }
218 | 
219 |   .event-type {
220 |     display: flex;
221 |     margin-top: 20px;
222 |     margin-bottom: 10px;
223 |   }
224 | }
225 | `;
226 | 
227 | export const _EventParams = () => (
228 |   <DemoTab code={code} codeExt="tsx" style={style} styleExt="css">
229 |     <Demo />
230 |   </DemoTab>
231 | );
232 | 


--------------------------------------------------------------------------------
/stories/EventTiltAngle/EventTiltAngle.demozap.css:
--------------------------------------------------------------------------------
 1 | .event-tilt-angle {
 2 |   display: flex;
 3 |   flex-direction: column;
 4 |   justify-content: center;
 5 |   align-items: center;
 6 | 
 7 |   .component-tilt {
 8 |     font-style: italic;
 9 |     margin-top: 30px;
10 |     font-size: 24px;
11 |     text-align: center;
12 |     border: 2px solid black;
13 |     border-radius: 8px;
14 |     padding: 10px;
15 | 
16 |     .row {
17 |       display: flex;
18 |       flex-direction: row;
19 |       justify-content: space-between;
20 |       align-items: center;
21 |       margin-top: 10px;
22 |     }
23 |   }
24 | }
25 | 


--------------------------------------------------------------------------------
/stories/EventTiltAngle/EventTiltAngle.demozap.tsx:
--------------------------------------------------------------------------------
 1 | import { PureComponent } from 'react';
 2 | 
 3 | import type { OnMoveParams } from 'index';
 4 | import Tilt from 'index';
 5 | 
 6 | import { DefaultComponent } from '../_DefaultComponent/DefaultComponent';
 7 | import './EventTiltAngle.demozap.css';
 8 | 
 9 | class EventTiltAngle extends PureComponent {
10 |   state = {
11 |     tiltAngleX: 0,
12 |     tiltAngleY: 0,
13 |   };
14 | 
15 |   onMove = ({ tiltAngleX, tiltAngleY }: OnMoveParams) => {
16 |     this.setState({ tiltAngleX, tiltAngleY });
17 |   };
18 | 
19 |   render() {
20 |     const { tiltAngleX, tiltAngleY } = this.state;
21 | 
22 |     return (
23 |       <div className="event-tilt-angle">
24 |         <Tilt onMove={this.onMove}>
25 |           <DefaultComponent />
26 |         </Tilt>
27 |         <Tilt tiltAngleXManual={tiltAngleX} tiltAngleYManual={tiltAngleY}>
28 |           <div className="component-tilt">
29 |             Component tilt:
30 |             <div className="row">
31 |               x axis:<div>{tiltAngleX.toFixed(2)}°</div>
32 |             </div>
33 |             <div className="row">
34 |               y axis:<div>{tiltAngleY.toFixed(2)}°</div>
35 |             </div>
36 |           </div>
37 |         </Tilt>
38 |       </div>
39 |     );
40 |   }
41 | }
42 | 
43 | export default EventTiltAngle;
44 | 


--------------------------------------------------------------------------------
/stories/EventTiltAngle/_EventTiltAngle.tsx:
--------------------------------------------------------------------------------
 1 | import { DemoTab } from 'react-demo-tab';
 2 | 
 3 | import Demo from './EventTiltAngle.demozap';
 4 | 
 5 | const code = `import { PureComponent } from 'react';
 6 | 
 7 | import type { OnMoveParams } from 'index';
 8 | import Tilt from 'index';
 9 | 
10 | import { DefaultComponent } from '../_DefaultComponent/DefaultComponent';
11 | import './EventTiltAngle.demozap.css';
12 | 
13 | class EventTiltAngle extends PureComponent {
14 |   state = {
15 |     tiltAngleX: 0,
16 |     tiltAngleY: 0,
17 |   };
18 | 
19 |   onMove = ({ tiltAngleX, tiltAngleY }: OnMoveParams) => {
20 |     this.setState({ tiltAngleX, tiltAngleY });
21 |   };
22 | 
23 |   render() {
24 |     const { tiltAngleX, tiltAngleY } = this.state;
25 | 
26 |     return (
27 |       <div className="event-tilt-angle">
28 |         <Tilt onMove={this.onMove}>
29 |           <DefaultComponent />
30 |         </Tilt>
31 |         <Tilt tiltAngleXManual={tiltAngleX} tiltAngleYManual={tiltAngleY}>
32 |           <div className="component-tilt">
33 |             Component tilt:
34 |             <div className="row">
35 |               x axis:<div>{tiltAngleX.toFixed(2)}°</div>
36 |             </div>
37 |             <div className="row">
38 |               y axis:<div>{tiltAngleY.toFixed(2)}°</div>
39 |             </div>
40 |           </div>
41 |         </Tilt>
42 |       </div>
43 |     );
44 |   }
45 | }
46 | 
47 | export default EventTiltAngle;
48 | `;
49 | 
50 | const style = `.event-tilt-angle {
51 |   display: flex;
52 |   flex-direction: column;
53 |   justify-content: center;
54 |   align-items: center;
55 | 
56 |   .component-tilt {
57 |     font-style: italic;
58 |     margin-top: 30px;
59 |     font-size: 24px;
60 |     text-align: center;
61 |     border: 2px solid black;
62 |     border-radius: 8px;
63 |     padding: 10px;
64 | 
65 |     .row {
66 |       display: flex;
67 |       flex-direction: row;
68 |       justify-content: space-between;
69 |       align-items: center;
70 |       margin-top: 10px;
71 |     }
72 |   }
73 | }
74 | `;
75 | 
76 | export const _EventTiltAngle = () => (
77 |   <DemoTab code={code} codeExt="tsx" style={style} styleExt="css">
78 |     <Demo />
79 |   </DemoTab>
80 | );
81 | 


--------------------------------------------------------------------------------
/stories/FlipPage/FlipPage.demozap.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   overflow-x: hidden;
 3 | }
 4 | 
 5 | .flip-page {
 6 |   display: flex;
 7 |   flex-direction: column;
 8 |   justify-content: center;
 9 |   align-items: center;
10 | 
11 |   width: 80vw;
12 | }
13 | 


--------------------------------------------------------------------------------
/stories/FlipPage/FlipPage.demozap.tsx:
--------------------------------------------------------------------------------
 1 | import { useState } from 'react';
 2 | 
 3 | import Tilt from 'index';
 4 | 
 5 | import './FlipPage.demozap.css';
 6 | import { Page } from './Page/Page';
 7 | 
 8 | const FlipPage = () => {
 9 |   const [[flipVertically, flipHorizontally], toggleFlip] = useState([false, false]);
10 | 
11 |   return (
12 |     <div className="flip-page">
13 |       <Tilt flipVertically={flipVertically} flipHorizontally={flipHorizontally}>
14 |         <Page
15 |           flipVertically={flipVertically}
16 |           flipHorizontally={flipHorizontally}
17 |           toggleFlipVertically={(checked) => toggleFlip([checked, flipHorizontally])}
18 |           toggleFlipHorizontally={(checked) => toggleFlip([flipVertically, checked])}
19 |         />
20 |       </Tilt>
21 |     </div>
22 |   );
23 | };
24 | 
25 | export default FlipPage;
26 | 


--------------------------------------------------------------------------------
/stories/FlipPage/Page/Page.css:
--------------------------------------------------------------------------------
  1 | .page {
  2 |   font-size: 13px;
  3 | 
  4 |   ul {
  5 |     list-style-type: none;
  6 |     margin: 0;
  7 |     padding: 0;
  8 |     overflow: hidden;
  9 |     background-color: #333;
 10 |     font-size: 1.1em;
 11 | 
 12 |     li {
 13 |       float: left;
 14 |     }
 15 | 
 16 |     li {
 17 |       display: block;
 18 |       color: white;
 19 |       text-align: center;
 20 |       padding: 14px 16px;
 21 |       text-decoration: none;
 22 |     }
 23 | 
 24 |     li:hover {
 25 |       background-color: #111;
 26 |       cursor: pointer;
 27 |     }
 28 |   }
 29 | 
 30 |   .content {
 31 |     display: flex;
 32 |     flex-direction: column;
 33 |     justify-content: center;
 34 |     align-items: center;
 35 |     margin: 15px;
 36 |     text-align: justify;
 37 | 
 38 |     .controls {
 39 |       display: flex;
 40 |       flex-direction: column;
 41 |       justify-content: center;
 42 |       align-items: center;
 43 |       border: 2px solid black;
 44 |       border-radius: 10px;
 45 |       padding: 10px;
 46 |       margin-bottom: 30px;
 47 | 
 48 |       .title {
 49 |         font-size: 22px;
 50 |       }
 51 |       .form {
 52 |         display: flex;
 53 |         align-items: flex-start;
 54 |         input {
 55 |           transform: scale(1.2);
 56 |           height: 13px;
 57 |           margin-right: 7px;
 58 |           margin-left: 20px;
 59 |         }
 60 |       }
 61 |     }
 62 | 
 63 |     img {
 64 |       width: 400px;
 65 |       margin: 10px;
 66 |     }
 67 |   }
 68 | 
 69 |   .contact-form {
 70 |     margin: 10px 15px;
 71 | 
 72 |     .field {
 73 |       margin-bottom: 10px;
 74 |     }
 75 | 
 76 |     input[type='text'],
 77 |     textarea {
 78 |       width: 50%;
 79 |       padding: 8px;
 80 |       border: 1px solid #ccc;
 81 |       resize: vertical;
 82 |     }
 83 | 
 84 |     input[type='submit'] {
 85 |       background-color: #333;
 86 |       color: white;
 87 |       padding: 12px 20px;
 88 |       border: none;
 89 |       cursor: pointer;
 90 |     }
 91 | 
 92 |     input[type='submit']:hover {
 93 |       background-color: #111;
 94 |     }
 95 |   }
 96 | 
 97 |   .footer {
 98 |     text-align: center;
 99 |   }
100 | }
101 | 


--------------------------------------------------------------------------------
/stories/FlipPage/Page/Page.tsx:
--------------------------------------------------------------------------------
 1 | import './Page.css';
 2 | import sampleImg from './lorem-picsum.png';
 3 | 
 4 | type PageProps = {
 5 |   flipVertically: boolean;
 6 |   flipHorizontally: boolean;
 7 |   toggleFlipVertically: (isEnabled: boolean) => void;
 8 |   toggleFlipHorizontally: (isEnabled: boolean) => void;
 9 | };
10 | 
11 | export const Page = ({ flipVertically, flipHorizontally, toggleFlipVertically, toggleFlipHorizontally }: PageProps) => (
12 |   <div className="page">
13 |     <ul>
14 |       <li>Home</li>
15 |       <li>News</li>
16 |       <li>Contact</li>
17 |       <li>About</li>
18 |     </ul>
19 |     <div className="content">
20 |       <div className="controls">
21 |         <div className="title">
22 |           <div>Flip Page 👆</div>
23 |         </div>
24 |         <div className="form">
25 |           <label>
26 |             <input
27 |               onChange={(ev) => toggleFlipVertically(ev.target.checked)}
28 |               checked={flipVertically}
29 |               type="checkbox"
30 |             />
31 |             Vertically
32 |           </label>
33 |           <label>
34 |             <input
35 |               onChange={(ev) => toggleFlipHorizontally(ev.target.checked)}
36 |               checked={flipHorizontally}
37 |               type="checkbox"
38 |             />
39 |             Horizontally
40 |           </label>
41 |         </div>
42 |       </div>
43 |       <div>
44 |         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
45 |         magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
46 |         const cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Ut enim ad minim
47 |         veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
48 |         in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
49 |       </div>
50 |       <img src={sampleImg} alt="pic" />
51 |       <div>
52 |         culpa qui officia deserunt mollit anim id est laborum.Ut enim ad minim veniam, quis nostrud exercitation ullamco
53 |         laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
54 |         cillum dolore eu fugiat nulla pariatur.
55 |       </div>
56 |       Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Ut
57 |       enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
58 |       irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
59 |       occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
60 |     </div>
61 | 
62 |     <div className="contact-form">
63 |       <div className="field">
64 |         <div>Your Name</div>
65 |         <input type="text" name="name" placeholder="Enter your name.." />
66 |       </div>
67 |       <div className="field">
68 |         <div>Country</div>
69 |         <label>
70 |           <input type="radio" name="country" defaultChecked />
71 |           Slovenia
72 |         </label>
73 |         <label>
74 |           <input type="radio" name="country" />
75 |           Canada
76 |         </label>
77 |         <label>
78 |           <input type="radio" name="country" />
79 |           USA
80 |         </label>
81 |       </div>
82 |       <div className="field">
83 |         <div>Subject</div>
84 |         <textarea id="subject" name="subject" placeholder="Write something.." />
85 |       </div>
86 |       <input className="field" type="submit" value="Submit" />
87 |     </div>
88 | 
89 |     <div className="footer">&copy; {new Date().getFullYear()} Footer.com</div>
90 |   </div>
91 | );
92 | 


--------------------------------------------------------------------------------
/stories/FlipPage/Page/lorem-picsum.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mkosir/react-parallax-tilt/1743dd8db516fe7a78a273cbbb41a87e77e5f9ce/stories/FlipPage/Page/lorem-picsum.png


--------------------------------------------------------------------------------
/stories/FlipPage/_FlipPage.tsx:
--------------------------------------------------------------------------------
 1 | import { DemoTab } from 'react-demo-tab';
 2 | 
 3 | import Demo from './FlipPage.demozap';
 4 | 
 5 | const code = `import { useState } from 'react';
 6 | 
 7 | import Tilt from 'index';
 8 | 
 9 | import './FlipPage.demozap.css';
10 | import { Page } from './Page/Page';
11 | 
12 | const FlipPage = () => {
13 |   const [[flipVertically, flipHorizontally], toggleFlip] = useState([false, false]);
14 | 
15 |   return (
16 |     <div className="flip-page">
17 |       <Tilt flipVertically={flipVertically} flipHorizontally={flipHorizontally}>
18 |         <Page
19 |           flipVertically={flipVertically}
20 |           flipHorizontally={flipHorizontally}
21 |           toggleFlipVertically={(checked) => toggleFlip([checked, flipHorizontally])}
22 |           toggleFlipHorizontally={(checked) => toggleFlip([flipVertically, checked])}
23 |         />
24 |       </Tilt>
25 |     </div>
26 |   );
27 | };
28 | 
29 | export default FlipPage;
30 | `;
31 | 
32 | const style = `body {
33 |   overflow-x: hidden;
34 | }
35 | 
36 | .flip-page {
37 |   display: flex;
38 |   flex-direction: column;
39 |   justify-content: center;
40 |   align-items: center;
41 | 
42 |   width: 80vw;
43 | }
44 | `;
45 | 
46 | export const _FlipPage = () => (
47 |   <DemoTab code={code} codeExt="tsx" style={style} styleExt="css">
48 |     <Demo />
49 |   </DemoTab>
50 | );
51 | 


--------------------------------------------------------------------------------
/stories/FlipVH/FlipVH.demozap.css:
--------------------------------------------------------------------------------
 1 | @import '../ReactParallaxTilt.css';
 2 | 
 3 | .flip-vh {
 4 |   display: flex;
 5 |   flex-direction: column;
 6 |   justify-content: center;
 7 |   align-items: center;
 8 |   width: 300px;
 9 |   height: 300px;
10 |   font-size: 30px;
11 |   font-style: italic;
12 |   background-color: darkgreen;
13 |   color: white;
14 |   border: 5px solid black;
15 |   border-radius: 20px;
16 |   .header {
17 |     font-size: 38px;
18 |   }
19 |   .form {
20 |     display: flex;
21 |     flex-direction: column;
22 |     align-items: flex-start;
23 |     input {
24 |       transform: scale(1.5);
25 |       height: 20px;
26 |       margin-right: 7px;
27 |     }
28 |   }
29 | }
30 | 


--------------------------------------------------------------------------------
/stories/FlipVH/FlipVH.demozap.tsx:
--------------------------------------------------------------------------------
 1 | import { useState } from 'react';
 2 | 
 3 | import Tilt from 'index';
 4 | import './FlipVH.demozap.css';
 5 | 
 6 | const FlipVH = () => {
 7 |   const [[flipVertically, flipHorizontally], toggleFlip] = useState([false, false]);
 8 | 
 9 |   return (
10 |     <Tilt flipVertically={flipVertically} flipHorizontally={flipHorizontally}>
11 |       <div className="background-stripes flip-vh">
12 |         <div className="header">
13 |           <div>Toggle Axis</div>
14 |           <hr />
15 |         </div>
16 |         <div className="form">
17 |           <label>
18 |             <input
19 |               onChange={(ev) => toggleFlip([ev.target.checked, flipHorizontally])}
20 |               checked={flipVertically}
21 |               type="checkbox"
22 |             />
23 |             Flip vertically
24 |           </label>
25 |           <label>
26 |             <input
27 |               onChange={(ev) => toggleFlip([flipVertically, ev.target.checked])}
28 |               checked={flipHorizontally}
29 |               type="checkbox"
30 |             />
31 |             Flip horizontally
32 |           </label>
33 |         </div>
34 |       </div>
35 |     </Tilt>
36 |   );
37 | };
38 | 
39 | export default FlipVH;
40 | 


--------------------------------------------------------------------------------
/stories/FlipVH/_FlipVH.tsx:
--------------------------------------------------------------------------------
 1 | import { DemoTab } from 'react-demo-tab';
 2 | 
 3 | import Demo from './FlipVH.demozap';
 4 | 
 5 | const code = `import { useState } from 'react';
 6 | 
 7 | import Tilt from 'index';
 8 | import './FlipVH.demozap.css';
 9 | 
10 | const FlipVH = () => {
11 |   const [[flipVertically, flipHorizontally], toggleFlip] = useState([false, false]);
12 | 
13 |   return (
14 |     <Tilt flipVertically={flipVertically} flipHorizontally={flipHorizontally}>
15 |       <div className="background-stripes flip-vh">
16 |         <div className="header">
17 |           <div>Toggle Axis</div>
18 |           <hr />
19 |         </div>
20 |         <div className="form">
21 |           <label>
22 |             <input
23 |               onChange={(ev) => toggleFlip([ev.target.checked, flipHorizontally])}
24 |               checked={flipVertically}
25 |               type="checkbox"
26 |             />
27 |             Flip vertically
28 |           </label>
29 |           <label>
30 |             <input
31 |               onChange={(ev) => toggleFlip([flipVertically, ev.target.checked])}
32 |               checked={flipHorizontally}
33 |               type="checkbox"
34 |             />
35 |             Flip horizontally
36 |           </label>
37 |         </div>
38 |       </div>
39 |     </Tilt>
40 |   );
41 | };
42 | 
43 | export default FlipVH;
44 | `;
45 | 
46 | const style = `@import '../ReactParallaxTilt.css';
47 | 
48 | .flip-vh {
49 |   display: flex;
50 |   flex-direction: column;
51 |   justify-content: center;
52 |   align-items: center;
53 |   width: 300px;
54 |   height: 300px;
55 |   font-size: 30px;
56 |   font-style: italic;
57 |   background-color: darkgreen;
58 |   color: white;
59 |   border: 5px solid black;
60 |   border-radius: 20px;
61 |   .header {
62 |     font-size: 38px;
63 |   }
64 |   .form {
65 |     display: flex;
66 |     flex-direction: column;
67 |     align-items: flex-start;
68 |     input {
69 |       transform: scale(1.5);
70 |       height: 20px;
71 |       margin-right: 7px;
72 |     }
73 |   }
74 | }
75 | `;
76 | 
77 | export const _FlipVH = () => (
78 |   <DemoTab code={code} codeExt="tsx" style={style} styleExt="css">
79 |     <Demo />
80 |   </DemoTab>
81 | );
82 | 


--------------------------------------------------------------------------------
/stories/GlareEffect/GlareEffect.demozap.tsx:
--------------------------------------------------------------------------------
 1 | import Tilt from 'index';
 2 | 
 3 | import { DefaultComponent } from '../_DefaultComponent/DefaultComponent';
 4 | 
 5 | const GlareEffect = () => (
 6 |   <Tilt glareEnable={true} glareMaxOpacity={0.8} glareColor="#ffffff" glarePosition="bottom" glareBorderRadius="20px">
 7 |     <DefaultComponent />
 8 |   </Tilt>
 9 | );
10 | 
11 | export default GlareEffect;
12 | 


--------------------------------------------------------------------------------
/stories/GlareEffect/_GlareEffect.tsx:
--------------------------------------------------------------------------------
 1 | import { DemoTab } from 'react-demo-tab';
 2 | 
 3 | import Demo from './GlareEffect.demozap';
 4 | 
 5 | const code = `import Tilt from 'index';
 6 | 
 7 | import { DefaultComponent } from '../_DefaultComponent/DefaultComponent';
 8 | 
 9 | const GlareEffect = () => (
10 |   <Tilt glareEnable={true} glareMaxOpacity={0.8} glareColor="#ffffff" glarePosition="bottom" glareBorderRadius="20px">
11 |     <DefaultComponent />
12 |   </Tilt>
13 | );
14 | 
15 | export default GlareEffect;
16 | `;
17 | 
18 | export const _GlareEffect = () => (
19 |   <DemoTab code={code} codeExt="tsx">
20 |     <Demo />
21 |   </DemoTab>
22 | );
23 | 


--------------------------------------------------------------------------------
/stories/GlareEffect360/GlareEffect360.demozap.tsx:
--------------------------------------------------------------------------------
 1 | import Tilt from 'index';
 2 | 
 3 | import { DefaultComponent } from '../_DefaultComponent/DefaultComponent';
 4 | 
 5 | const GlareEffect360 = () => (
 6 |   <Tilt glareEnable={true} glareMaxOpacity={0.9} glareColor="lightblue" glarePosition="all" glareBorderRadius="20px">
 7 |     <DefaultComponent />
 8 |   </Tilt>
 9 | );
10 | 
11 | export default GlareEffect360;
12 | 


--------------------------------------------------------------------------------
/stories/GlareEffect360/_GlareEffect360.tsx:
--------------------------------------------------------------------------------
 1 | import { DemoTab } from 'react-demo-tab';
 2 | 
 3 | import Demo from './GlareEffect360.demozap';
 4 | 
 5 | const code = `import Tilt from 'index';
 6 | 
 7 | import { DefaultComponent } from '../_DefaultComponent/DefaultComponent';
 8 | 
 9 | const GlareEffect360 = () => (
10 |   <Tilt glareEnable={true} glareMaxOpacity={0.9} glareColor="lightblue" glarePosition="all" glareBorderRadius="20px">
11 |     <DefaultComponent />
12 |   </Tilt>
13 | );
14 | 
15 | export default GlareEffect360;
16 | `;
17 | 
18 | export const _GlareEffect360 = () => (
19 |   <DemoTab code={code} codeExt="tsx">
20 |     <Demo />
21 |   </DemoTab>
22 | );
23 | 


--------------------------------------------------------------------------------
/stories/GlareEffectNoTilt/GlareEffectNoTilt.demozap.tsx:
--------------------------------------------------------------------------------
 1 | import Tilt from 'index';
 2 | 
 3 | import { DefaultComponent } from '../_DefaultComponent/DefaultComponent';
 4 | 
 5 | const GlareEffectNoTilt = () => (
 6 |   <Tilt
 7 |     tiltEnable={false}
 8 |     glareEnable={true}
 9 |     glareMaxOpacity={0.8}
10 |     glareColor="white"
11 |     glarePosition="bottom"
12 |     glareBorderRadius="20px"
13 |   >
14 |     <DefaultComponent />
15 |   </Tilt>
16 | );
17 | 
18 | export default GlareEffectNoTilt;
19 | 


--------------------------------------------------------------------------------
/stories/GlareEffectNoTilt/_GlareEffectNoTilt.tsx:
--------------------------------------------------------------------------------
 1 | import { DemoTab } from 'react-demo-tab';
 2 | 
 3 | import Demo from './GlareEffectNoTilt.demozap';
 4 | 
 5 | const code = `import Tilt from 'index';
 6 | 
 7 | import { DefaultComponent } from '../_DefaultComponent/DefaultComponent';
 8 | 
 9 | const GlareEffectNoTilt = () => (
10 |   <Tilt
11 |     tiltEnable={false}
12 |     glareEnable={true}
13 |     glareMaxOpacity={0.8}
14 |     glareColor="white"
15 |     glarePosition="bottom"
16 |     glareBorderRadius="20px"
17 |   >
18 |     <DefaultComponent />
19 |   </Tilt>
20 | );
21 | 
22 | export default GlareEffectNoTilt;
23 | `;
24 | 
25 | export const _GlareEffectNoTilt = () => (
26 |   <DemoTab code={code} codeExt="tsx">
27 |     <Demo />
28 |   </DemoTab>
29 | );
30 | 


--------------------------------------------------------------------------------
/stories/InitialTilt/InitialTilt.demozap.tsx:
--------------------------------------------------------------------------------
 1 | import Tilt from 'index';
 2 | 
 3 | import { DefaultComponent } from '../_DefaultComponent/DefaultComponent';
 4 | 
 5 | const Default = () => (
 6 |   <Tilt tiltAngleXInitial={20} tiltAngleYInitial={20}>
 7 |     <DefaultComponent />
 8 |   </Tilt>
 9 | );
10 | 
11 | export default Default;
12 | 


--------------------------------------------------------------------------------
/stories/InitialTilt/_InitialTilt.tsx:
--------------------------------------------------------------------------------
 1 | import { DemoTab } from 'react-demo-tab';
 2 | 
 3 | import Demo from './InitialTilt.demozap';
 4 | 
 5 | const code = `import Tilt from 'index';
 6 | 
 7 | import { DefaultComponent } from '../_DefaultComponent/DefaultComponent';
 8 | 
 9 | const Default = () => (
10 |   <Tilt tiltAngleXInitial={20} tiltAngleYInitial={20}>
11 |     <DefaultComponent />
12 |   </Tilt>
13 | );
14 | 
15 | export default Default;
16 | `;
17 | 
18 | export const _InitialTilt = () => (
19 |   <DemoTab code={code} codeExt="tsx">
20 |     <Demo />
21 |   </DemoTab>
22 | );
23 | 


--------------------------------------------------------------------------------
/stories/KeepFloating/KeepFloating.demozap.tsx:
--------------------------------------------------------------------------------
 1 | import Tilt from 'index';
 2 | 
 3 | import { DefaultComponent } from '../_DefaultComponent/DefaultComponent';
 4 | 
 5 | const KeepFloating = () => (
 6 |   <Tilt reset={false}>
 7 |     <DefaultComponent />
 8 |   </Tilt>
 9 | );
10 | 
11 | export default KeepFloating;
12 | 


--------------------------------------------------------------------------------
/stories/KeepFloating/_KeepFloating.tsx:
--------------------------------------------------------------------------------
 1 | import { DemoTab } from 'react-demo-tab';
 2 | 
 3 | import Demo from './KeepFloating.demozap';
 4 | 
 5 | const code = `import Tilt from 'index';
 6 | 
 7 | import { DefaultComponent } from '../_DefaultComponent/DefaultComponent';
 8 | 
 9 | const KeepFloating = () => (
10 |   <Tilt reset={false}>
11 |     <DefaultComponent />
12 |   </Tilt>
13 | );
14 | 
15 | export default KeepFloating;
16 | `;
17 | 
18 | export const _KeepFloating = () => (
19 |   <DemoTab code={code} codeExt="tsx">
20 |     <Demo />
21 |   </DemoTab>
22 | );
23 | 


--------------------------------------------------------------------------------
/stories/MultipleTilt/MultipleTilt.demozap.css:
--------------------------------------------------------------------------------
 1 | .multiple-tilt {
 2 |   display: flex;
 3 |   flex-direction: row;
 4 | 
 5 |   .col {
 6 |     margin-right: 20px;
 7 | 
 8 |     :first-child {
 9 |       margin-bottom: 20px;
10 |     }
11 |   }
12 | }
13 | 


--------------------------------------------------------------------------------
/stories/MultipleTilt/MultipleTilt.demozap.tsx:
--------------------------------------------------------------------------------
 1 | import Tilt from 'index';
 2 | 
 3 | import './MultipleTilt.demozap.css';
 4 | import { DefaultComponent } from '../_DefaultComponent/DefaultComponent';
 5 | 
 6 | const MultipleTilt = () => (
 7 |   <div className="multiple-tilt">
 8 |     <div className="col">
 9 |       <Tilt>
10 |         <DefaultComponent />
11 |       </Tilt>
12 |       <Tilt>
13 |         <DefaultComponent />
14 |       </Tilt>
15 |     </div>
16 |     <div className="col">
17 |       <Tilt>
18 |         <DefaultComponent />
19 |       </Tilt>
20 |       <Tilt>
21 |         <DefaultComponent />
22 |       </Tilt>
23 |     </div>
24 |   </div>
25 | );
26 | 
27 | export default MultipleTilt;
28 | 


--------------------------------------------------------------------------------
/stories/MultipleTilt/_MultipleTilt.tsx:
--------------------------------------------------------------------------------
 1 | import { DemoTab } from 'react-demo-tab';
 2 | 
 3 | import Demo from './MultipleTilt.demozap';
 4 | 
 5 | const code = `import Tilt from 'index';
 6 | 
 7 | import './MultipleTilt.demozap.css';
 8 | import { DefaultComponent } from '../_DefaultComponent/DefaultComponent';
 9 | 
10 | const MultipleTilt = () => (
11 |   <div className="multiple-tilt">
12 |     <div className="col">
13 |       <Tilt>
14 |         <DefaultComponent />
15 |       </Tilt>
16 |       <Tilt>
17 |         <DefaultComponent />
18 |       </Tilt>
19 |     </div>
20 |     <div className="col">
21 |       <Tilt>
22 |         <DefaultComponent />
23 |       </Tilt>
24 |       <Tilt>
25 |         <DefaultComponent />
26 |       </Tilt>
27 |     </div>
28 |   </div>
29 | );
30 | 
31 | export default MultipleTilt;
32 | `;
33 | 
34 | const style = `.multiple-tilt {
35 |   display: flex;
36 |   flex-direction: row;
37 | 
38 |   .col {
39 |     margin-right: 20px;
40 | 
41 |     :first-child {
42 |       margin-bottom: 20px;
43 |     }
44 |   }
45 | }
46 | `;
47 | 
48 | export const _MultipleTilt = () => (
49 |   <DemoTab code={code} codeExt="tsx" style={style} styleExt="css">
50 |     <Demo />
51 |   </DemoTab>
52 | );
53 | 


--------------------------------------------------------------------------------
/stories/MultipleTiltScroll/MultipleTiltScroll.demozap.css:
--------------------------------------------------------------------------------
1 | .multiple-tilt-scroll > * {
2 |   margin-bottom: 200px;
3 | }
4 | 


--------------------------------------------------------------------------------
/stories/MultipleTiltScroll/MultipleTiltScroll.demozap.tsx:
--------------------------------------------------------------------------------
 1 | import Tilt from 'index';
 2 | 
 3 | import './MultipleTiltScroll.demozap.css';
 4 | import { DefaultComponent } from '../_DefaultComponent/DefaultComponent';
 5 | 
 6 | const MultipleTiltScroll = () => (
 7 |   <div className="multiple-tilt-scroll">
 8 |     <Tilt>
 9 |       <DefaultComponent />
10 |     </Tilt>
11 |     <Tilt>
12 |       <DefaultComponent />
13 |     </Tilt>
14 |     <Tilt>
15 |       <DefaultComponent />
16 |     </Tilt>
17 |     <Tilt>
18 |       <DefaultComponent />
19 |     </Tilt>
20 |   </div>
21 | );
22 | 
23 | export default MultipleTiltScroll;
24 | 


--------------------------------------------------------------------------------
/stories/MultipleTiltScroll/_MultipleTiltScroll.tsx:
--------------------------------------------------------------------------------
 1 | import { DemoTab } from 'react-demo-tab';
 2 | 
 3 | import Demo from './MultipleTiltScroll.demozap';
 4 | 
 5 | const code = `import Tilt from 'index';
 6 | 
 7 | import './MultipleTiltScroll.demozap.css';
 8 | import { DefaultComponent } from '../_DefaultComponent/DefaultComponent';
 9 | 
10 | const MultipleTiltScroll = () => (
11 |   <div className="multiple-tilt-scroll">
12 |     <Tilt>
13 |       <DefaultComponent />
14 |     </Tilt>
15 |     <Tilt>
16 |       <DefaultComponent />
17 |     </Tilt>
18 |     <Tilt>
19 |       <DefaultComponent />
20 |     </Tilt>
21 |     <Tilt>
22 |       <DefaultComponent />
23 |     </Tilt>
24 |   </div>
25 | );
26 | 
27 | export default MultipleTiltScroll;
28 | `;
29 | 
30 | const style = `.multiple-tilt-scroll > * {
31 |   margin-bottom: 200px;
32 | }
33 | `;
34 | 
35 | export const _MultipleTiltScroll = () => (
36 |   <DemoTab code={code} codeExt="tsx" style={style} styleExt="css">
37 |     <Demo />
38 |   </DemoTab>
39 | );
40 | 


--------------------------------------------------------------------------------
/stories/ParallaxEffect/ParallaxEffect.demozap.css:
--------------------------------------------------------------------------------
 1 | @import '../ReactParallaxTilt.css';
 2 | 
 3 | .parallax-effect {
 4 |   display: flex;
 5 |   flex-direction: column;
 6 |   justify-content: center;
 7 |   align-items: center;
 8 |   width: 300px;
 9 |   height: 300px;
10 |   background-color: darkgreen;
11 |   color: white;
12 |   border: 5px solid black;
13 |   border-radius: 20px;
14 | 
15 |   transform-style: preserve-3d;
16 | 
17 |   .inner-element {
18 |     display: flex;
19 |     flex-direction: column;
20 |     justify-content: center;
21 |     align-items: center;
22 |     font-size: 35px;
23 |     font-style: italic;
24 |     color: white;
25 |     transform: translateZ(60px);
26 |   }
27 | }
28 | 


--------------------------------------------------------------------------------
/stories/ParallaxEffect/ParallaxEffect.demozap.tsx:
--------------------------------------------------------------------------------
 1 | import Tilt from 'index';
 2 | import './ParallaxEffect.demozap.css';
 3 | 
 4 | const ParallaxEffect = () => (
 5 |   <Tilt className="background-stripes parallax-effect" perspective={500}>
 6 |     <div className="inner-element">
 7 |       <div>React</div>
 8 |       <div>Parallax Tilt</div>
 9 |       <div>👀</div>
10 |     </div>
11 |   </Tilt>
12 | );
13 | 
14 | export default ParallaxEffect;
15 | 


--------------------------------------------------------------------------------
/stories/ParallaxEffect/_ParallaxEffect.tsx:
--------------------------------------------------------------------------------
 1 | import { DemoTab } from 'react-demo-tab';
 2 | 
 3 | import Demo from './ParallaxEffect.demozap';
 4 | 
 5 | const code = `import Tilt from 'index';
 6 | import './ParallaxEffect.demozap.css';
 7 | 
 8 | const ParallaxEffect = () => (
 9 |   <Tilt className="background-stripes parallax-effect" perspective={500}>
10 |     <div className="inner-element">
11 |       <div>React</div>
12 |       <div>Parallax Tilt</div>
13 |       <div>👀</div>
14 |     </div>
15 |   </Tilt>
16 | );
17 | 
18 | export default ParallaxEffect;
19 | `;
20 | 
21 | const style = `@import '../ReactParallaxTilt.css';
22 | 
23 | .parallax-effect {
24 |   display: flex;
25 |   flex-direction: column;
26 |   justify-content: center;
27 |   align-items: center;
28 |   width: 300px;
29 |   height: 300px;
30 |   background-color: darkgreen;
31 |   color: white;
32 |   border: 5px solid black;
33 |   border-radius: 20px;
34 | 
35 |   transform-style: preserve-3d;
36 | 
37 |   .inner-element {
38 |     display: flex;
39 |     flex-direction: column;
40 |     justify-content: center;
41 |     align-items: center;
42 |     font-size: 35px;
43 |     font-style: italic;
44 |     color: white;
45 |     transform: translateZ(60px);
46 |   }
47 | }
48 | `;
49 | 
50 | export const _ParallaxEffect = () => (
51 |   <DemoTab code={code} codeExt="tsx" style={style} styleExt="css">
52 |     <Demo />
53 |   </DemoTab>
54 | );
55 | 


--------------------------------------------------------------------------------
/stories/ParallaxEffectGlareScale/ParallaxEffectGlareScale.demozap.css:
--------------------------------------------------------------------------------
 1 | @import '../ReactParallaxTilt.css';
 2 | 
 3 | .parallax-effect-glare-scale {
 4 |   display: flex;
 5 |   flex-direction: column;
 6 |   justify-content: center;
 7 |   align-items: center;
 8 |   width: 300px;
 9 |   height: 300px;
10 |   background-color: darkgreen;
11 |   color: white;
12 |   border: 5px solid black;
13 |   border-radius: 20px;
14 | 
15 |   transform-style: preserve-3d;
16 | 
17 |   .inner-element {
18 |     display: flex;
19 |     flex-direction: column;
20 |     justify-content: center;
21 |     align-items: center;
22 |     font-size: 35px;
23 |     font-style: italic;
24 |     color: white;
25 |     transform: translateZ(60px);
26 |   }
27 | }
28 | 


--------------------------------------------------------------------------------
/stories/ParallaxEffectGlareScale/ParallaxEffectGlareScale.demozap.tsx:
--------------------------------------------------------------------------------
 1 | import Tilt from 'index';
 2 | import './ParallaxEffectGlareScale.demozap.css';
 3 | 
 4 | const ParallaxEffectGlareScale = () => (
 5 |   <Tilt
 6 |     className="background-stripes parallax-effect-glare-scale"
 7 |     perspective={500}
 8 |     glareEnable={true}
 9 |     glareMaxOpacity={0.45}
10 |     scale={1.02}
11 |   >
12 |     <div className="inner-element">
13 |       <div>React</div>
14 |       <div>Parallax Tilt</div>
15 |       <div>👀</div>
16 |     </div>
17 |   </Tilt>
18 | );
19 | 
20 | export default ParallaxEffectGlareScale;
21 | 


--------------------------------------------------------------------------------
/stories/ParallaxEffectGlareScale/_ParallaxEffectGlareScale.tsx:
--------------------------------------------------------------------------------
 1 | import { DemoTab } from 'react-demo-tab';
 2 | 
 3 | import Demo from './ParallaxEffectGlareScale.demozap';
 4 | 
 5 | const code = `import Tilt from 'index';
 6 | import './ParallaxEffectGlareScale.demozap.css';
 7 | 
 8 | const ParallaxEffectGlareScale = () => (
 9 |   <Tilt
10 |     className="background-stripes parallax-effect-glare-scale"
11 |     perspective={500}
12 |     glareEnable={true}
13 |     glareMaxOpacity={0.45}
14 |     scale={1.02}
15 |   >
16 |     <div className="inner-element">
17 |       <div>React</div>
18 |       <div>Parallax Tilt</div>
19 |       <div>👀</div>
20 |     </div>
21 |   </Tilt>
22 | );
23 | 
24 | export default ParallaxEffectGlareScale;
25 | `;
26 | 
27 | const style = `@import '../ReactParallaxTilt.css';
28 | 
29 | .parallax-effect-glare-scale {
30 |   display: flex;
31 |   flex-direction: column;
32 |   justify-content: center;
33 |   align-items: center;
34 |   width: 300px;
35 |   height: 300px;
36 |   background-color: darkgreen;
37 |   color: white;
38 |   border: 5px solid black;
39 |   border-radius: 20px;
40 | 
41 |   transform-style: preserve-3d;
42 | 
43 |   .inner-element {
44 |     display: flex;
45 |     flex-direction: column;
46 |     justify-content: center;
47 |     align-items: center;
48 |     font-size: 35px;
49 |     font-style: italic;
50 |     color: white;
51 |     transform: translateZ(60px);
52 |   }
53 | }
54 | `;
55 | 
56 | export const _ParallaxEffectGlareScale = () => (
57 |   <DemoTab code={code} codeExt="tsx" style={style} styleExt="css">
58 |     <Demo />
59 |   </DemoTab>
60 | );
61 | 


--------------------------------------------------------------------------------
/stories/ParallaxEffectImg/ParallaxEffectImg.demozap.css:
--------------------------------------------------------------------------------
 1 | .parallax-effect-img {
 2 |   transform-style: preserve-3d;
 3 |   transform: perspective(1000px);
 4 |   background-image: url('./img/background.jpg');
 5 |   background-size: contain;
 6 |   background-repeat: no-repeat;
 7 | 
 8 |   .inner-element {
 9 |     transform: translateZ(40px) scale(0.8);
10 |     width: 70%;
11 |     margin-left: 25%;
12 |   }
13 | }
14 | 


--------------------------------------------------------------------------------
/stories/ParallaxEffectImg/ParallaxEffectImg.demozap.tsx:
--------------------------------------------------------------------------------
 1 | import Tilt from 'index';
 2 | 
 3 | import './ParallaxEffectImg.demozap.css';
 4 | import imgTree from './img/tree.png';
 5 | 
 6 | const ParallaxEffectImg = () => (
 7 |   <Tilt
 8 |     className="parallax-effect-img"
 9 |     tiltMaxAngleX={40}
10 |     tiltMaxAngleY={40}
11 |     perspective={800}
12 |     transitionSpeed={1500}
13 |     scale={1.1}
14 |     gyroscope={true}
15 |   >
16 |     <img src={imgTree} className="inner-element" alt="pic" />
17 |   </Tilt>
18 | );
19 | 
20 | export default ParallaxEffectImg;
21 | 


--------------------------------------------------------------------------------
/stories/ParallaxEffectImg/_ParallaxEffectImg.tsx:
--------------------------------------------------------------------------------
 1 | import { DemoTab } from 'react-demo-tab';
 2 | 
 3 | import Demo from './ParallaxEffectImg.demozap';
 4 | 
 5 | const code = `import Tilt from 'index';
 6 | 
 7 | import './ParallaxEffectImg.demozap.css';
 8 | import imgTree from './img/tree.png';
 9 | 
10 | const ParallaxEffectImg = () => (
11 |   <Tilt
12 |     className="parallax-effect-img"
13 |     tiltMaxAngleX={40}
14 |     tiltMaxAngleY={40}
15 |     perspective={800}
16 |     transitionSpeed={1500}
17 |     scale={1.1}
18 |     gyroscope={true}
19 |   >
20 |     <img src={imgTree} className="inner-element" alt="pic" />
21 |   </Tilt>
22 | );
23 | 
24 | export default ParallaxEffectImg;
25 | `;
26 | 
27 | const style = `.parallax-effect-img {
28 |   transform-style: preserve-3d;
29 |   transform: perspective(1000px);
30 |   background-image: url('./img/background.jpg');
31 |   background-size: contain;
32 |   background-repeat: no-repeat;
33 | 
34 |   .inner-element {
35 |     transform: translateZ(40px) scale(0.8);
36 |     width: 70%;
37 |     margin-left: 25%;
38 |   }
39 | }
40 | `;
41 | 
42 | export const _ParallaxEffectImg = () => (
43 |   <DemoTab code={code} codeExt="tsx" style={style} styleExt="css">
44 |     <Demo />
45 |   </DemoTab>
46 | );
47 | 


--------------------------------------------------------------------------------
/stories/ParallaxEffectImg/img/background.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mkosir/react-parallax-tilt/1743dd8db516fe7a78a273cbbb41a87e77e5f9ce/stories/ParallaxEffectImg/img/background.jpg


--------------------------------------------------------------------------------
/stories/ParallaxEffectImg/img/tree.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mkosir/react-parallax-tilt/1743dd8db516fe7a78a273cbbb41a87e77e5f9ce/stories/ParallaxEffectImg/img/tree.png


--------------------------------------------------------------------------------
/stories/ReactParallaxTilt.css:
--------------------------------------------------------------------------------
 1 | .root-story {
 2 |   font-family: Arial, sans-serif;
 3 | 
 4 |   .tab-demo.react-tabs__tab-panel--selected {
 5 |     margin-top: 10vh;
 6 |     display: flex;
 7 |     flex-direction: column;
 8 |     justify-content: center;
 9 |     align-items: center;
10 |   }
11 | }
12 | 
13 | :root {
14 |   --default-stripe-bg-color: #077407;
15 |   --default-stripe-color: #015f01;
16 | }
17 | 
18 | .background-stripes {
19 |   background: repeating-linear-gradient(
20 |     45deg,
21 |     var(--default-stripe-color),
22 |     var(--default-stripe-color) 35px,
23 |     var(--default-stripe-bg-color) 35px,
24 |     var(--default-stripe-bg-color) 70px
25 |   );
26 | }
27 | 


--------------------------------------------------------------------------------
/stories/ReactParallaxTilt.stories.tsx:
--------------------------------------------------------------------------------
  1 | import type { Meta, StoryObj } from '@storybook/react-webpack5';
  2 | 
  3 | import { _Default } from './Default/_Default';
  4 | import { _EventParams } from './EventParams/_EventParams';
  5 | import { _EventTiltAngle } from './EventTiltAngle/_EventTiltAngle';
  6 | import { _FlipPage } from './FlipPage/_FlipPage';
  7 | import { _FlipVH } from './FlipVH/_FlipVH';
  8 | import { _GlareEffect } from './GlareEffect/_GlareEffect';
  9 | import { _GlareEffect360 } from './GlareEffect360/_GlareEffect360';
 10 | import { _GlareEffectNoTilt } from './GlareEffectNoTilt/_GlareEffectNoTilt';
 11 | import { _InitialTilt } from './InitialTilt/_InitialTilt';
 12 | import { _KeepFloating } from './KeepFloating/_KeepFloating';
 13 | import { _MultipleTilt } from './MultipleTilt/_MultipleTilt';
 14 | import { _MultipleTiltScroll } from './MultipleTiltScroll/_MultipleTiltScroll';
 15 | import { _ParallaxEffect } from './ParallaxEffect/_ParallaxEffect';
 16 | import { _ParallaxEffectGlareScale } from './ParallaxEffectGlareScale/_ParallaxEffectGlareScale';
 17 | import { _ParallaxEffectImg } from './ParallaxEffectImg/_ParallaxEffectImg';
 18 | import { _ReverseTilt } from './ReverseTilt/_ReverseTilt';
 19 | import { _ScaleNoTilt } from './ScaleNoTilt/_ScaleNoTilt';
 20 | import { _TiltDisableAxis } from './TiltDisableAxis/_TiltDisableAxis';
 21 | import { _TiltImg } from './TiltImg/_TiltImg';
 22 | import { _TiltManualInput } from './TiltManualInput/_TiltManualInput';
 23 | import { _TiltScale } from './TiltScale/_TiltScale';
 24 | import { _TrackOnWindow } from './TrackOnWindow/_TrackOnWindow';
 25 | 
 26 | import './ReactParallaxTilt.css';
 27 | 
 28 | export default {
 29 |   title: 'React Parallax Tilt',
 30 |   decorators: [
 31 |     (Story) => (
 32 |       <div className="root-story">
 33 |         <Story />
 34 |       </div>
 35 |     ),
 36 |   ],
 37 | } satisfies Meta;
 38 | 
 39 | export const Default: StoryObj = {
 40 |   render: () => <_Default />,
 41 | };
 42 | 
 43 | export const KeepFloating: StoryObj = {
 44 |   render: () => <_KeepFloating />,
 45 |   name: 'Keep floating',
 46 | };
 47 | 
 48 | export const ReverseTilt: StoryObj = {
 49 |   render: () => <_ReverseTilt />,
 50 |   name: 'Reverse tilt',
 51 | };
 52 | 
 53 | export const Scale: StoryObj = {
 54 |   render: () => <_TiltScale />,
 55 | };
 56 | 
 57 | export const ScaleNoTilt: StoryObj = {
 58 |   render: () => <_ScaleNoTilt />,
 59 |   name: 'Scale - No tilt',
 60 | };
 61 | 
 62 | export const TiltDisableAxis: StoryObj = {
 63 |   render: () => <_TiltDisableAxis />,
 64 |   name: 'Disable x/y axis',
 65 | };
 66 | 
 67 | export const InitialTilt: StoryObj = {
 68 |   render: () => <_InitialTilt />,
 69 |   name: 'Initial tilt',
 70 | };
 71 | 
 72 | export const FlipVH: StoryObj = {
 73 |   render: () => <_FlipVH />,
 74 |   name: 'Flip vertically/horizontally',
 75 | };
 76 | 
 77 | export const FlipPage: StoryObj = {
 78 |   render: () => <_FlipPage />,
 79 |   name: 'Flip page',
 80 | };
 81 | 
 82 | export const ParallaxEffect: StoryObj = {
 83 |   render: () => <_ParallaxEffect />,
 84 |   name: 'Parallax effect',
 85 | };
 86 | 
 87 | export const ParallaxEffectGlareScale: StoryObj = {
 88 |   render: () => <_ParallaxEffectGlareScale />,
 89 |   name: 'Parallax effect - Glare & Scale',
 90 | };
 91 | 
 92 | export const ParallaxEffectImg: StoryObj = {
 93 |   render: () => <_ParallaxEffectImg />,
 94 |   name: 'Parallax effect image',
 95 | };
 96 | 
 97 | export const TiltImg: StoryObj = {
 98 |   render: () => <_TiltImg />,
 99 |   name: 'Tilt image',
100 | };
101 | 
102 | export const GlareEffect: StoryObj = {
103 |   render: () => <_GlareEffect />,
104 |   name: 'Glare effect',
105 | };
106 | 
107 | export const GlareEffectNoTilt: StoryObj = {
108 |   render: () => <_GlareEffectNoTilt />,
109 |   name: 'Glare effect - No tilt',
110 | };
111 | 
112 | export const GlareEffect360: StoryObj = {
113 |   render: () => <_GlareEffect360 />,
114 |   name: 'Glare effect - 360',
115 | };
116 | 
117 | export const TrackOnWindow: StoryObj = {
118 |   render: () => <_TrackOnWindow />,
119 |   name: 'Track on window',
120 | };
121 | 
122 | export const TiltManualInput: StoryObj = {
123 |   render: () => <_TiltManualInput />,
124 |   name: 'Tilt manual input',
125 | };
126 | 
127 | export const MultipleTilt: StoryObj = {
128 |   render: () => <_MultipleTilt />,
129 |   name: 'Multiple tilt',
130 | };
131 | 
132 | export const MultipleTiltScroll: StoryObj = {
133 |   render: () => <_MultipleTiltScroll />,
134 |   name: 'Multiple tilt - Scroll',
135 | };
136 | 
137 | export const EventTiltAngle: StoryObj = {
138 |   render: () => <_EventTiltAngle />,
139 |   name: 'Event - Tilt angle',
140 | };
141 | 
142 | export const EventParams: StoryObj = {
143 |   render: () => <_EventParams />,
144 |   name: 'Event - Params',
145 | };
146 | 


--------------------------------------------------------------------------------
/stories/ReverseTilt/ReverseTilt.demozap.tsx:
--------------------------------------------------------------------------------
 1 | import Tilt from 'index';
 2 | 
 3 | import { DefaultComponent } from '../_DefaultComponent/DefaultComponent';
 4 | 
 5 | const ReverseTilt = () => (
 6 |   <Tilt tiltReverse={true}>
 7 |     <DefaultComponent />
 8 |   </Tilt>
 9 | );
10 | 
11 | export default ReverseTilt;
12 | 


--------------------------------------------------------------------------------
/stories/ReverseTilt/_ReverseTilt.tsx:
--------------------------------------------------------------------------------
 1 | import { DemoTab } from 'react-demo-tab';
 2 | 
 3 | import Demo from './ReverseTilt.demozap';
 4 | 
 5 | const code = `import Tilt from 'index';
 6 | 
 7 | import { DefaultComponent } from '../_DefaultComponent/DefaultComponent';
 8 | 
 9 | const ReverseTilt = () => (
10 |   <Tilt tiltReverse={true}>
11 |     <DefaultComponent />
12 |   </Tilt>
13 | );
14 | 
15 | export default ReverseTilt;
16 | `;
17 | 
18 | export const _ReverseTilt = () => (
19 |   <DemoTab code={code} codeExt="tsx">
20 |     <Demo />
21 |   </DemoTab>
22 | );
23 | 


--------------------------------------------------------------------------------
/stories/ScaleNoTilt/ScaleNoTilt.demozap.css:
--------------------------------------------------------------------------------
 1 | @import '../ReactParallaxTilt.css';
 2 | 
 3 | .scale-no-tilt {
 4 |   display: flex;
 5 |   flex-direction: column;
 6 |   justify-content: center;
 7 |   align-items: center;
 8 |   width: 300px;
 9 |   height: 300px;
10 |   font-size: 30px;
11 |   font-style: italic;
12 |   background-color: darkgreen;
13 |   color: white;
14 |   border: 5px solid black;
15 |   border-radius: 20px;
16 |   .header {
17 |     font-size: 38px;
18 |   }
19 |   .form {
20 |     display: flex;
21 |     flex-direction: column;
22 |     align-items: flex-start;
23 |     input {
24 |       transform: scale(1.5);
25 |       height: 20px;
26 |       margin-right: 7px;
27 |     }
28 |   }
29 | }
30 | 


--------------------------------------------------------------------------------
/stories/ScaleNoTilt/ScaleNoTilt.demozap.tsx:
--------------------------------------------------------------------------------
 1 | import { useState } from 'react';
 2 | 
 3 | import Tilt from 'index';
 4 | import './ScaleNoTilt.demozap.css';
 5 | 
 6 | const ScaleNoTilt = () => {
 7 |   const [scale, setScale] = useState(1.3);
 8 | 
 9 |   return (
10 |     <Tilt tiltEnable={false} scale={scale} transitionSpeed={2500}>
11 |       <div className="background-stripes scale-no-tilt">
12 |         <div className="header">
13 |           <div>Scale x{scale}</div>
14 |           <hr />
15 |         </div>
16 |         <div className="form">
17 |           <input
18 |             type="range"
19 |             min="0.7"
20 |             max="1.5"
21 |             step="0.01"
22 |             value={scale}
23 |             onChange={(ev) => setScale(parseFloat(ev.target.value))}
24 |           />
25 |         </div>
26 |       </div>
27 |     </Tilt>
28 |   );
29 | };
30 | 
31 | export default ScaleNoTilt;
32 | 


--------------------------------------------------------------------------------
/stories/ScaleNoTilt/_ScaleNoTilt.tsx:
--------------------------------------------------------------------------------
 1 | import { DemoTab } from 'react-demo-tab';
 2 | 
 3 | import Demo from './ScaleNoTilt.demozap';
 4 | 
 5 | const code = `import { useState } from 'react';
 6 | 
 7 | import Tilt from 'index';
 8 | import './ScaleNoTilt.demozap.css';
 9 | 
10 | const ScaleNoTilt = () => {
11 |   const [scale, setScale] = useState(1.3);
12 | 
13 |   return (
14 |     <Tilt tiltEnable={false} scale={scale} transitionSpeed={2500}>
15 |       <div className="background-stripes scale-no-tilt">
16 |         <div className="header">
17 |           <div>Scale x{scale}</div>
18 |           <hr />
19 |         </div>
20 |         <div className="form">
21 |           <input
22 |             type="range"
23 |             min="0.7"
24 |             max="1.5"
25 |             step="0.01"
26 |             value={scale}
27 |             onChange={(ev) => setScale(parseFloat(ev.target.value))}
28 |           />
29 |         </div>
30 |       </div>
31 |     </Tilt>
32 |   );
33 | };
34 | 
35 | export default ScaleNoTilt;
36 | `;
37 | 
38 | const style = `@import '../ReactParallaxTilt.css';
39 | 
40 | .scale-no-tilt {
41 |   display: flex;
42 |   flex-direction: column;
43 |   justify-content: center;
44 |   align-items: center;
45 |   width: 300px;
46 |   height: 300px;
47 |   font-size: 30px;
48 |   font-style: italic;
49 |   background-color: darkgreen;
50 |   color: white;
51 |   border: 5px solid black;
52 |   border-radius: 20px;
53 |   .header {
54 |     font-size: 38px;
55 |   }
56 |   .form {
57 |     display: flex;
58 |     flex-direction: column;
59 |     align-items: flex-start;
60 |     input {
61 |       transform: scale(1.5);
62 |       height: 20px;
63 |       margin-right: 7px;
64 |     }
65 |   }
66 | }
67 | `;
68 | 
69 | export const _ScaleNoTilt = () => (
70 |   <DemoTab code={code} codeExt="tsx" style={style} styleExt="css">
71 |     <Demo />
72 |   </DemoTab>
73 | );
74 | 


--------------------------------------------------------------------------------
/stories/TiltDisableAxis/TiltDisableAxis.demozap.css:
--------------------------------------------------------------------------------
 1 | @import '../ReactParallaxTilt.css';
 2 | 
 3 | .tilt-disable-axis {
 4 |   display: flex;
 5 |   flex-direction: column;
 6 |   justify-content: center;
 7 |   align-items: center;
 8 |   width: 300px;
 9 |   height: 300px;
10 |   font-size: 30px;
11 |   font-style: italic;
12 |   background-color: darkgreen;
13 |   color: white;
14 |   border: 5px solid black;
15 |   border-radius: 20px;
16 |   .header {
17 |     font-size: 38px;
18 |   }
19 |   .form {
20 |     display: flex;
21 |     flex-direction: column;
22 |     align-items: flex-start;
23 |     input {
24 |       transform: scale(1.5);
25 |       height: 20px;
26 |       margin-right: 7px;
27 |     }
28 |   }
29 | }
30 | 


--------------------------------------------------------------------------------
/stories/TiltDisableAxis/TiltDisableAxis.demozap.tsx:
--------------------------------------------------------------------------------
 1 | import { useState } from 'react';
 2 | 
 3 | import type { Axis } from 'index';
 4 | import Tilt from 'index';
 5 | 
 6 | import './TiltDisableAxis.demozap.css';
 7 | 
 8 | const TiltDisableAxis = () => {
 9 |   const [axisEnabled, toggleAxis] = useState<Axis>('x');
10 | 
11 |   return (
12 |     <Tilt tiltAxis={axisEnabled}>
13 |       <div className="background-stripes tilt-disable-axis">
14 |         <div className="header">
15 |           <div>Toggle Axis</div>
16 |           <hr />
17 |         </div>
18 |         <div className="form">
19 |           <label>
20 |             <input
21 |               onChange={(ev) => toggleAxis(ev.target.value as Axis)}
22 |               value={'x'}
23 |               checked={axisEnabled === 'x'}
24 |               type="radio"
25 |             />
26 |             Enable x axis
27 |           </label>
28 |           <label>
29 |             <input
30 |               onChange={(ev) => toggleAxis(ev.target.value as Axis)}
31 |               value={'y'}
32 |               checked={axisEnabled === 'y'}
33 |               type="radio"
34 |             />
35 |             Enable y axis
36 |           </label>
37 |         </div>
38 |       </div>
39 |     </Tilt>
40 |   );
41 | };
42 | 
43 | export default TiltDisableAxis;
44 | 


--------------------------------------------------------------------------------
/stories/TiltDisableAxis/_TiltDisableAxis.tsx:
--------------------------------------------------------------------------------
 1 | import { DemoTab } from 'react-demo-tab';
 2 | 
 3 | import Demo from './TiltDisableAxis.demozap';
 4 | 
 5 | const code = `import { useState } from 'react';
 6 | 
 7 | import type { Axis } from 'index';
 8 | import Tilt from 'index';
 9 | 
10 | import './TiltDisableAxis.demozap.css';
11 | 
12 | const TiltDisableAxis = () => {
13 |   const [axisEnabled, toggleAxis] = useState<Axis>('x');
14 | 
15 |   return (
16 |     <Tilt tiltAxis={axisEnabled}>
17 |       <div className="background-stripes tilt-disable-axis">
18 |         <div className="header">
19 |           <div>Toggle Axis</div>
20 |           <hr />
21 |         </div>
22 |         <div className="form">
23 |           <label>
24 |             <input
25 |               onChange={(ev) => toggleAxis(ev.target.value as Axis)}
26 |               value={'x'}
27 |               checked={axisEnabled === 'x'}
28 |               type="radio"
29 |             />
30 |             Enable x axis
31 |           </label>
32 |           <label>
33 |             <input
34 |               onChange={(ev) => toggleAxis(ev.target.value as Axis)}
35 |               value={'y'}
36 |               checked={axisEnabled === 'y'}
37 |               type="radio"
38 |             />
39 |             Enable y axis
40 |           </label>
41 |         </div>
42 |       </div>
43 |     </Tilt>
44 |   );
45 | };
46 | 
47 | export default TiltDisableAxis;
48 | `;
49 | 
50 | const style = `@import '../ReactParallaxTilt.css';
51 | 
52 | .tilt-disable-axis {
53 |   display: flex;
54 |   flex-direction: column;
55 |   justify-content: center;
56 |   align-items: center;
57 |   width: 300px;
58 |   height: 300px;
59 |   font-size: 30px;
60 |   font-style: italic;
61 |   background-color: darkgreen;
62 |   color: white;
63 |   border: 5px solid black;
64 |   border-radius: 20px;
65 |   .header {
66 |     font-size: 38px;
67 |   }
68 |   .form {
69 |     display: flex;
70 |     flex-direction: column;
71 |     align-items: flex-start;
72 |     input {
73 |       transform: scale(1.5);
74 |       height: 20px;
75 |       margin-right: 7px;
76 |     }
77 |   }
78 | }
79 | `;
80 | 
81 | export const _TiltDisableAxis = () => (
82 |   <DemoTab code={code} codeExt="tsx" style={style} styleExt="css">
83 |     <Demo />
84 |   </DemoTab>
85 | );
86 | 


--------------------------------------------------------------------------------
/stories/TiltImg/TiltImg.demozap.css:
--------------------------------------------------------------------------------
1 | .tilt-img {
2 |   .inner-element {
3 |     width: 70vw;
4 |   }
5 | }
6 | 


--------------------------------------------------------------------------------
/stories/TiltImg/TiltImg.demozap.tsx:
--------------------------------------------------------------------------------
 1 | import Tilt from 'index';
 2 | 
 3 | import './TiltImg.demozap.css';
 4 | import imgNyc from './img/nyc.jpg';
 5 | 
 6 | const TiltImg = () => (
 7 |   <Tilt
 8 |     className="tilt-img"
 9 |     tiltMaxAngleX={35}
10 |     tiltMaxAngleY={35}
11 |     perspective={900}
12 |     scale={1.1}
13 |     transitionSpeed={2000}
14 |     gyroscope={true}
15 |   >
16 |     <img src={imgNyc} className="inner-element" alt="pic" />
17 |   </Tilt>
18 | );
19 | 
20 | export default TiltImg;
21 | 


--------------------------------------------------------------------------------
/stories/TiltImg/_TiltImg.tsx:
--------------------------------------------------------------------------------
 1 | import { DemoTab } from 'react-demo-tab';
 2 | 
 3 | import Demo from './TiltImg.demozap';
 4 | 
 5 | const code = `import Tilt from 'index';
 6 | 
 7 | import './TiltImg.demozap.css';
 8 | import imgNyc from './img/nyc.jpg';
 9 | 
10 | const TiltImg = () => (
11 |   <Tilt
12 |     className="tilt-img"
13 |     tiltMaxAngleX={35}
14 |     tiltMaxAngleY={35}
15 |     perspective={900}
16 |     scale={1.1}
17 |     transitionSpeed={2000}
18 |     gyroscope={true}
19 |   >
20 |     <img src={imgNyc} className="inner-element" alt="pic" />
21 |   </Tilt>
22 | );
23 | 
24 | export default TiltImg;
25 | `;
26 | 
27 | const style = `.tilt-img {
28 |   .inner-element {
29 |     width: 70vw;
30 |   }
31 | }
32 | `;
33 | 
34 | export const _TiltImg = () => (
35 |   <DemoTab code={code} codeExt="tsx" style={style} styleExt="css">
36 |     <Demo />
37 |   </DemoTab>
38 | );
39 | 


--------------------------------------------------------------------------------
/stories/TiltImg/img/nyc.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mkosir/react-parallax-tilt/1743dd8db516fe7a78a273cbbb41a87e77e5f9ce/stories/TiltImg/img/nyc.jpg


--------------------------------------------------------------------------------
/stories/TiltManualInput/TiltManualInput.demozap.css:
--------------------------------------------------------------------------------
 1 | @import '../ReactParallaxTilt.css';
 2 | 
 3 | .tilt-manual-input {
 4 |   display: flex;
 5 |   flex-direction: column;
 6 |   justify-content: center;
 7 |   align-items: center;
 8 | 
 9 |   .react-parallax-tilt {
10 |     display: flex;
11 |     flex-direction: column;
12 |     justify-content: center;
13 |     align-items: center;
14 |     width: 300px;
15 |     height: 300px;
16 |     font-size: 35px;
17 |     font-style: italic;
18 |     background-color: darkgreen;
19 |     color: white;
20 |     border: 5px solid black;
21 |     border-radius: 20px;
22 |   }
23 | 
24 |   .manual-input {
25 |     display: flex;
26 |     flex-direction: column;
27 |     align-items: flex-start;
28 |     margin-top: 20px;
29 |   }
30 | }
31 | 


--------------------------------------------------------------------------------
/stories/TiltManualInput/TiltManualInput.demozap.tsx:
--------------------------------------------------------------------------------
 1 | import { useState } from 'react';
 2 | import { Joystick } from 'react-joystick-component';
 3 | import type { IJoystickUpdateEvent } from 'react-joystick-component/build/lib/Joystick';
 4 | 
 5 | import Tilt from 'index';
 6 | import './TiltManualInput.demozap.css';
 7 | 
 8 | const TiltManualInput = () => {
 9 |   const [[manualTiltAngleX, manualTiltAngleY], setManualTiltAngle] = useState([0, 0]);
10 | 
11 |   const onMove = (stick: IJoystickUpdateEvent) => {
12 |     setManualTiltAngle([stick.y ? stick.y * 100 : 0, stick.x ? stick.x * 100 : 0]);
13 |   };
14 | 
15 |   const onStop = () => {
16 |     setManualTiltAngle([0, 0]);
17 |   };
18 | 
19 |   return (
20 |     <div className="tilt-manual-input">
21 |       <Tilt tiltAngleXManual={manualTiltAngleX} tiltAngleYManual={manualTiltAngleY} glareEnable={true}>
22 |         <div className="background-stripes react-parallax-tilt">
23 |           <div>Axis x: {manualTiltAngleX.toFixed(0)}°</div>
24 |           <div>Axis y: {manualTiltAngleY.toFixed(0)}°</div>
25 |         </div>
26 |       </Tilt>
27 |       <div className="manual-input">
28 |         <Joystick baseColor="darkgreen" stickColor="black" move={onMove} stop={onStop} />
29 |       </div>
30 |     </div>
31 |   );
32 | };
33 | 
34 | export default TiltManualInput;
35 | 


--------------------------------------------------------------------------------
/stories/TiltManualInput/_TiltManualInput.tsx:
--------------------------------------------------------------------------------
 1 | import { DemoTab } from 'react-demo-tab';
 2 | 
 3 | import Demo from './TiltManualInput.demozap';
 4 | 
 5 | const code = `import { useState } from 'react';
 6 | import { Joystick } from 'react-joystick-component';
 7 | import type { IJoystickUpdateEvent } from 'react-joystick-component/build/lib/Joystick';
 8 | 
 9 | import Tilt from 'index';
10 | import './TiltManualInput.demozap.css';
11 | 
12 | const TiltManualInput = () => {
13 |   const [[manualTiltAngleX, manualTiltAngleY], setManualTiltAngle] = useState([0, 0]);
14 | 
15 |   const onMove = (stick: IJoystickUpdateEvent) => {
16 |     setManualTiltAngle([stick.y ? stick.y * 100 : 0, stick.x ? stick.x * 100 : 0]);
17 |   };
18 | 
19 |   const onStop = () => {
20 |     setManualTiltAngle([0, 0]);
21 |   };
22 | 
23 |   return (
24 |     <div className="tilt-manual-input">
25 |       <Tilt tiltAngleXManual={manualTiltAngleX} tiltAngleYManual={manualTiltAngleY} glareEnable={true}>
26 |         <div className="background-stripes react-parallax-tilt">
27 |           <div>Axis x: {manualTiltAngleX.toFixed(0)}°</div>
28 |           <div>Axis y: {manualTiltAngleY.toFixed(0)}°</div>
29 |         </div>
30 |       </Tilt>
31 |       <div className="manual-input">
32 |         <Joystick baseColor="darkgreen" stickColor="black" move={onMove} stop={onStop} />
33 |       </div>
34 |     </div>
35 |   );
36 | };
37 | 
38 | export default TiltManualInput;
39 | `;
40 | 
41 | const style = `@import '../ReactParallaxTilt.css';
42 | 
43 | .tilt-manual-input {
44 |   display: flex;
45 |   flex-direction: column;
46 |   justify-content: center;
47 |   align-items: center;
48 | 
49 |   .react-parallax-tilt {
50 |     display: flex;
51 |     flex-direction: column;
52 |     justify-content: center;
53 |     align-items: center;
54 |     width: 300px;
55 |     height: 300px;
56 |     font-size: 35px;
57 |     font-style: italic;
58 |     background-color: darkgreen;
59 |     color: white;
60 |     border: 5px solid black;
61 |     border-radius: 20px;
62 |   }
63 | 
64 |   .manual-input {
65 |     display: flex;
66 |     flex-direction: column;
67 |     align-items: flex-start;
68 |     margin-top: 20px;
69 |   }
70 | }
71 | `;
72 | 
73 | export const _TiltManualInput = () => (
74 |   <DemoTab code={code} codeExt="tsx" style={style} styleExt="css">
75 |     <Demo />
76 |   </DemoTab>
77 | );
78 | 


--------------------------------------------------------------------------------
/stories/TiltScale/TiltScale.demozap.css:
--------------------------------------------------------------------------------
 1 | @import '../ReactParallaxTilt.css';
 2 | 
 3 | .tilt-scale {
 4 |   display: flex;
 5 |   flex-direction: column;
 6 |   justify-content: center;
 7 |   align-items: center;
 8 |   width: 300px;
 9 |   height: 300px;
10 |   font-size: 30px;
11 |   font-style: italic;
12 |   background-color: darkgreen;
13 |   color: white;
14 |   border: 5px solid black;
15 |   border-radius: 20px;
16 | 
17 |   .header {
18 |     font-size: 38px;
19 |   }
20 | 
21 |   .form {
22 |     display: flex;
23 |     flex-direction: column;
24 |     align-items: flex-start;
25 | 
26 |     input {
27 |       transform: scale(1.5);
28 |       height: 20px;
29 |       margin-right: 7px;
30 |     }
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/stories/TiltScale/TiltScale.demozap.tsx:
--------------------------------------------------------------------------------
 1 | import { useState } from 'react';
 2 | 
 3 | import Tilt from 'index';
 4 | import './TiltScale.demozap.css';
 5 | 
 6 | const TiltScale = () => {
 7 |   const [scale, setScale] = useState(1.15);
 8 | 
 9 |   return (
10 |     <Tilt scale={scale} transitionSpeed={2500}>
11 |       <div className="background-stripes tilt-scale">
12 |         <div className="header">
13 |           <div>Scale x{scale}</div>
14 |           <hr />
15 |         </div>
16 |         <div className="form">
17 |           <input
18 |             type="range"
19 |             min="0.7"
20 |             max="1.5"
21 |             step="0.01"
22 |             value={scale}
23 |             onChange={(ev) => setScale(parseFloat(ev.target.value))}
24 |           />
25 |         </div>
26 |       </div>
27 |     </Tilt>
28 |   );
29 | };
30 | 
31 | export default TiltScale;
32 | 


--------------------------------------------------------------------------------
/stories/TiltScale/_TiltScale.tsx:
--------------------------------------------------------------------------------
 1 | import { DemoTab } from 'react-demo-tab';
 2 | 
 3 | import Demo from './TiltScale.demozap';
 4 | 
 5 | const code = `import { useState } from 'react';
 6 | 
 7 | import Tilt from 'index';
 8 | import './TiltScale.demozap.css';
 9 | 
10 | const TiltScale = () => {
11 |   const [scale, setScale] = useState(1.15);
12 | 
13 |   return (
14 |     <Tilt scale={scale} transitionSpeed={2500}>
15 |       <div className="background-stripes tilt-scale">
16 |         <div className="header">
17 |           <div>Scale x{scale}</div>
18 |           <hr />
19 |         </div>
20 |         <div className="form">
21 |           <input
22 |             type="range"
23 |             min="0.7"
24 |             max="1.5"
25 |             step="0.01"
26 |             value={scale}
27 |             onChange={(ev) => setScale(parseFloat(ev.target.value))}
28 |           />
29 |         </div>
30 |       </div>
31 |     </Tilt>
32 |   );
33 | };
34 | 
35 | export default TiltScale;
36 | `;
37 | 
38 | const style = `@import '../ReactParallaxTilt.css';
39 | 
40 | .tilt-scale {
41 |   display: flex;
42 |   flex-direction: column;
43 |   justify-content: center;
44 |   align-items: center;
45 |   width: 300px;
46 |   height: 300px;
47 |   font-size: 30px;
48 |   font-style: italic;
49 |   background-color: darkgreen;
50 |   color: white;
51 |   border: 5px solid black;
52 |   border-radius: 20px;
53 | 
54 |   .header {
55 |     font-size: 38px;
56 |   }
57 | 
58 |   .form {
59 |     display: flex;
60 |     flex-direction: column;
61 |     align-items: flex-start;
62 | 
63 |     input {
64 |       transform: scale(1.5);
65 |       height: 20px;
66 |       margin-right: 7px;
67 |     }
68 |   }
69 | }
70 | `;
71 | 
72 | export const _TiltScale = () => (
73 |   <DemoTab code={code} codeExt="tsx" style={style} styleExt="css">
74 |     <Demo />
75 |   </DemoTab>
76 | );
77 | 


--------------------------------------------------------------------------------
/stories/TrackOnWindow/TrackOnWindow.demozap.css:
--------------------------------------------------------------------------------
 1 | @import '../ReactParallaxTilt.css';
 2 | 
 3 | .track-on-window {
 4 |   display: flex;
 5 |   flex-direction: column;
 6 |   justify-content: center;
 7 |   align-items: center;
 8 |   width: 300px;
 9 |   height: 300px;
10 |   background-color: darkgreen;
11 |   color: white;
12 |   border: 5px solid black;
13 |   border-radius: 20px;
14 | 
15 |   transform-style: preserve-3d;
16 | 
17 |   .inner-element {
18 |     display: flex;
19 |     flex-direction: column;
20 |     justify-content: center;
21 |     align-items: center;
22 |     font-size: 35px;
23 |     font-style: italic;
24 |     color: white;
25 |     transform: translateZ(60px);
26 |   }
27 | }
28 | 


--------------------------------------------------------------------------------
/stories/TrackOnWindow/TrackOnWindow.demozap.tsx:
--------------------------------------------------------------------------------
 1 | import Tilt from 'index';
 2 | import './TrackOnWindow.demozap.css';
 3 | 
 4 | const TrackOnWindow = () => (
 5 |   <Tilt
 6 |     className="background-stripes track-on-window"
 7 |     perspective={500}
 8 |     glareEnable={true}
 9 |     glareMaxOpacity={0.75}
10 |     glarePosition="all"
11 |     scale={1.02}
12 |     trackOnWindow={true}
13 |     glareBorderRadius="20px"
14 |   >
15 |     <div className="inner-element">
16 |       <div>React</div>
17 |       <div>Parallax Tilt</div>
18 |       <div>👀</div>
19 |     </div>
20 |   </Tilt>
21 | );
22 | 
23 | export default TrackOnWindow;
24 | 


--------------------------------------------------------------------------------
/stories/TrackOnWindow/_TrackOnWindow.tsx:
--------------------------------------------------------------------------------
 1 | import { DemoTab } from 'react-demo-tab';
 2 | 
 3 | import Demo from './TrackOnWindow.demozap';
 4 | 
 5 | const code = `import Tilt from 'index';
 6 | import './TrackOnWindow.demozap.css';
 7 | 
 8 | const TrackOnWindow = () => (
 9 |   <Tilt
10 |     className="background-stripes track-on-window"
11 |     perspective={500}
12 |     glareEnable={true}
13 |     glareMaxOpacity={0.75}
14 |     glarePosition="all"
15 |     scale={1.02}
16 |     trackOnWindow={true}
17 |     glareBorderRadius="20px"
18 |   >
19 |     <div className="inner-element">
20 |       <div>React</div>
21 |       <div>Parallax Tilt</div>
22 |       <div>👀</div>
23 |     </div>
24 |   </Tilt>
25 | );
26 | 
27 | export default TrackOnWindow;
28 | `;
29 | 
30 | const style = `@import '../ReactParallaxTilt.css';
31 | 
32 | .track-on-window {
33 |   display: flex;
34 |   flex-direction: column;
35 |   justify-content: center;
36 |   align-items: center;
37 |   width: 300px;
38 |   height: 300px;
39 |   background-color: darkgreen;
40 |   color: white;
41 |   border: 5px solid black;
42 |   border-radius: 20px;
43 | 
44 |   transform-style: preserve-3d;
45 | 
46 |   .inner-element {
47 |     display: flex;
48 |     flex-direction: column;
49 |     justify-content: center;
50 |     align-items: center;
51 |     font-size: 35px;
52 |     font-style: italic;
53 |     color: white;
54 |     transform: translateZ(60px);
55 |   }
56 | }
57 | `;
58 | 
59 | export const _TrackOnWindow = () => (
60 |   <DemoTab code={code} codeExt="tsx" style={style} styleExt="css">
61 |     <Demo />
62 |   </DemoTab>
63 | );
64 | 


--------------------------------------------------------------------------------
/stories/_DefaultComponent/DefaultComponent.css:
--------------------------------------------------------------------------------
 1 | @import '../ReactParallaxTilt.css';
 2 | 
 3 | .default-component {
 4 |   display: flex;
 5 |   flex-direction: column;
 6 |   justify-content: center;
 7 |   align-items: center;
 8 |   width: 300px;
 9 |   height: 300px;
10 |   font-size: 40px;
11 |   font-style: italic;
12 |   color: white;
13 |   border: 5px solid black;
14 |   border-radius: 20px;
15 | }
16 | 


--------------------------------------------------------------------------------
/stories/_DefaultComponent/DefaultComponent.tsx:
--------------------------------------------------------------------------------
 1 | import './DefaultComponent.css';
 2 | 
 3 | export const DefaultComponent = () => (
 4 |   <div className="background-stripes default-component">
 5 |     <div>React</div>
 6 |     <div>Parallax Tilt</div>
 7 |     <div>👀</div>
 8 |   </div>
 9 | );
10 | 


--------------------------------------------------------------------------------
/stories/types/images.d.ts:
--------------------------------------------------------------------------------
1 | declare module '*.png' {
2 |   const value: string;
3 |   export = value;
4 | }
5 | declare module '*.jpg' {
6 |   const value: string;
7 |   export = value;
8 | }
9 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "./scripts/tsconfig.dev.json"
3 | }
4 | 


--------------------------------------------------------------------------------
/vitest.config.ts:
--------------------------------------------------------------------------------
 1 | import tsconfigPaths from 'vite-tsconfig-paths';
 2 | import { defineConfig } from 'vitest/config';
 3 | 
 4 | // eslint-disable-next-line import-x/no-default-export
 5 | export default defineConfig({
 6 |   plugins: [tsconfigPaths()],
 7 |   test: {
 8 |     environment: 'jsdom',
 9 |     globals: true,
10 |     setupFiles: './scripts/setup-tests.ts',
11 |     include: ['src/**/*.test.{ts,tsx}'],
12 |     coverage: {
13 |       include: ['src/**/*'],
14 |       reportsDirectory: 'test-unit-report',
15 |       provider: 'v8',
16 |       reporter: ['text', 'text-summary', 'html', 'lcov'],
17 |       thresholds: {
18 |         branches: 90,
19 |         functions: 90,
20 |         lines: 90,
21 |         statements: 90,
22 |       },
23 |     },
24 |   },
25 | });
26 | 


--------------------------------------------------------------------------------