Skip to content

Commit f110331

Browse files
evanxdsouzaevanxdsouza
committed
Fix issues, add batching, remove custom cursor code
1 parent 0aa0705 commit f110331

5 files changed

Lines changed: 66 additions & 153 deletions

File tree

‎components/custom-cursor.js‎

Lines changed: 0 additions & 125 deletions
This file was deleted.

‎components/nav.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -236,7 +236,7 @@ function Header({ unfixed, color, bgColor, dark, fixed, ...props }) {
236236
p: 1,
237237
ml: 2,
238238
color: 'inherit',
239-
display: ['none', null, 'block'],
239+
display: 'block',
240240
':focus-visible': { outline: '2px solid currentColor', outlineOffset: '2px', borderRadius: '4px' }
241241
}}
242242
>

‎components/slack/header.js‎

Lines changed: 26 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -250,16 +250,24 @@ const Slack = ({ onJoinClick }) => {
250250
const coverRef = useRef(null)
251251
const headingRef = useRef(null)
252252
const btnRef = useRef(null)
253+
const scrollRafRef = useRef(null)
254+
const scrollYRef = useRef(0)
255+
const btnRafRef = useRef(null)
256+
const btnPendingRef = useRef(null)
253257

254258
useEffect(() => {
255259
if (!prefersMotion) return
256260
const onScroll = () => {
257-
const y = window.scrollY
258-
if (coverRef.current) {
259-
coverRef.current.style.transform = `translateY(${y * 0.25}px)`
260-
}
261-
if (headingRef.current) {
262-
headingRef.current.style.transform = `translateY(${y * -0.08}px)`
261+
scrollYRef.current = window.scrollY
262+
if (!scrollRafRef.current) {
263+
scrollRafRef.current = requestAnimationFrame(() => {
264+
const y = scrollYRef.current
265+
if (coverRef.current)
266+
coverRef.current.style.transform = `translateY(${y * 0.25}px)`
267+
if (headingRef.current)
268+
headingRef.current.style.transform = `translateY(${y * -0.08}px)`
269+
scrollRafRef.current = null
270+
})
263271
}
264272
}
265273
window.addEventListener('scroll', onScroll, { passive: true })
@@ -273,8 +281,18 @@ const Slack = ({ onJoinClick }) => {
273281
const rect = el.getBoundingClientRect()
274282
const dx = Math.max(-8, Math.min(8, (e.clientX - (rect.left + rect.width / 2)) * 0.4))
275283
const dy = Math.max(-8, Math.min(8, (e.clientY - (rect.top + rect.height / 2)) * 0.4))
276-
el.style.transition = 'transform 0.1s ease-out, box-shadow 0.125s ease-in-out'
277-
el.style.transform = `translate(${dx}px, ${dy}px) scale(1.05)`
284+
btnPendingRef.current = { dx, dy }
285+
if (!btnRafRef.current) {
286+
btnRafRef.current = requestAnimationFrame(() => {
287+
const pending = btnPendingRef.current
288+
const btn = btnRef.current
289+
if (btn && pending) {
290+
btn.style.transition = 'transform 0.1s ease-out, box-shadow 0.125s ease-in-out'
291+
btn.style.transform = `translate(${pending.dx}px, ${pending.dy}px) scale(1.05)`
292+
}
293+
btnRafRef.current = null
294+
})
295+
}
278296
}
279297
: undefined
280298

‎pages/_document.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import Document, { Html, Head, Main, NextScript } from 'next/document'
2+
import { InitializeColorMode } from 'theme-ui'
23

34
const org = {
45
'@context': 'http://schema.org',
@@ -39,6 +40,7 @@ class MyDocument extends Document {
3940
/>
4041
</Head>
4142
<body>
43+
<InitializeColorMode />
4244
<Main />
4345
<NextScript />
4446
</body>

‎pages/index.js‎

Lines changed: 37 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import Meta from '@hackclub/meta'
33
import Head from 'next/head'
44
import { Box, Heading, Text, Link as ThemeLink } from 'theme-ui'
55
import { useState, useRef, useCallback } from 'react'
6+
import usePrefersMotion from '../lib/use-prefers-motion'
67
import channels from '../channels.json'
78

89
import { thousands } from '../lib/members'
@@ -140,25 +141,42 @@ const GuideItem = ({ title, children, isOpen, onToggle }) => {
140141

141142
const Card = ({ children, sx, ...props }) => {
142143
const cardRef = useRef(null)
143-
144-
const handleMouseMove = (e) => {
145-
const el = cardRef.current
146-
if (!el) return
147-
const rect = el.getBoundingClientRect()
148-
const rotateY = ((e.clientX - rect.left) / rect.width - 0.5) * 16
149-
const rotateX = (0.5 - (e.clientY - rect.top) / rect.height) * 16
150-
el.style.transition = 'box-shadow 0.1s ease-out'
151-
el.style.transform = `perspective(800px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) translateY(-6px)`
152-
el.style.boxShadow = '0 20px 60px rgba(236,55,80,0.12)'
153-
}
154-
155-
const handleMouseLeave = () => {
156-
const el = cardRef.current
157-
if (!el) return
158-
el.style.transition = 'all 0.4s ease-in-out'
159-
el.style.transform = ''
160-
el.style.boxShadow = ''
161-
}
144+
const prefersMotion = usePrefersMotion()
145+
const rafRef = useRef(null)
146+
const pendingRef = useRef(null)
147+
148+
const handleMouseMove = prefersMotion
149+
? (e) => {
150+
const el = cardRef.current
151+
if (!el) return
152+
const rect = el.getBoundingClientRect()
153+
const rotateY = ((e.clientX - rect.left) / rect.width - 0.5) * 16
154+
const rotateX = (0.5 - (e.clientY - rect.top) / rect.height) * 16
155+
pendingRef.current = { rotateX, rotateY }
156+
if (!rafRef.current) {
157+
rafRef.current = requestAnimationFrame(() => {
158+
const p = pendingRef.current
159+
const el = cardRef.current
160+
if (el && p) {
161+
el.style.transition = 'box-shadow 0.1s ease-out'
162+
el.style.transform = `perspective(800px) rotateX(${p.rotateX}deg) rotateY(${p.rotateY}deg) translateY(-6px)`
163+
el.style.boxShadow = '0 20px 60px rgba(236,55,80,0.12)'
164+
}
165+
rafRef.current = null
166+
})
167+
}
168+
}
169+
: undefined
170+
171+
const handleMouseLeave = prefersMotion
172+
? () => {
173+
const el = cardRef.current
174+
if (!el) return
175+
el.style.transition = 'all 0.4s ease-in-out'
176+
el.style.transform = ''
177+
el.style.boxShadow = ''
178+
}
179+
: undefined
162180

163181
return (
164182
<Box

0 commit comments

Comments
 (0)