System-End/site
1
0
Fork 0
mirror of https://github.com/System-End/site.git synced 2026-04-19 19:45:07 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Disable tilt effect on mobile devices

Browse source
This commit is contained in:
Caleb Denio 2024-04-03 12:35:12 -04:00
parent eff96b203e
commit 7a62ece572
No known key found for this signature in database
3 changed files with 25 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
components/tilt.js
View file

@ -1,21 +1,29 @@
import React, { useEffect, useRef } from 'react'
import VanillaTilt from 'vanilla-tilt'
import { useResponsiveValue } from '@theme-ui/match-media'
// NOTE(@lachlanjc): only pass one child!
const Tilt = ({ options = {}, children, ...props }) => {
const root = useRef(null)
const enabled = useResponsiveValue([false, true])
useEffect(() => {
VanillaTilt.init(root.current, {
max: 7.5,
scale: 1.05,
speed: 400,
glare: true,
'max-glare': 0.25,
gyroscope: false,
...options
})
}, [options])
if (enabled) {
VanillaTilt.init(root.current, {
max: 7.5,
scale: 1.05,
speed: 400,
glare: true,
'max-glare': 0.25,
gyroscope: false,
...options
})
}
// eslint-disable-next-line react-hooks/exhaustive-deps
return () => root.current?.vanillaTilt?.destroy()
}, [options, enabled])
return React.cloneElement(children, { ref: root })
}

3
package.json
View file

@ -25,13 +25,14 @@
"@octokit/auth-app": "^6.0.1",
"@octokit/core": "^5.1.0",
"@octokit/rest": "^20.0.2",
"@sendgrid/mail": "^8.1.1",
"@theme-ui/match-media": "^0.16.2",
"@tracespace/core": "^5.0.0-alpha.0",
"@tracespace/identify-layers": "^5.0.0-alpha.0",
"@tracespace/parser": "^5.0.0-next.0",
"@tracespace/plotter": "^5.0.0-alpha.0",
"@tracespace/renderer": "^5.0.0-alpha.0",
"@tracespace/xml-id": "^4.2.7",
"@sendgrid/mail": "^8.1.1",
"add": "^2.0.6",
"airtable-plus": "^1.0.4",
"animated-value": "^0.2.4",

5
yarn.lock
View file

@ -2237,6 +2237,11 @@
dependencies:
csstype "^3.0.10"
"@theme-ui/match-media@^0.16.2":
version "0.16.2"
resolved "https://registry.yarnpkg.com/@theme-ui/match-media/-/match-media-0.16.2.tgz#1c35a66137061557f81ad1e21c1dc5eb73dc6845"
integrity sha512-7B7jw56e1srcWh70r61QxePdFampOWAlnC+QPPiioMgXu/d+blBBb8X/J7Byomj/BTcsQAZ/HqwgeZ3Tyrwuyg==
"@theme-ui/mdx@0.14.7":
version "0.14.7"
resolved "https://registry.npmjs.org/@theme-ui/mdx/-/mdx-0.14.7.tgz"