strtus/Vercel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Switch masked scroll to color-based transitions

Browse Source
This commit is contained in:
Sam Becker 2025-04-30 18:07:12 -05:00
parent 1cdeea0346
commit 5f9a340a25
3 changed files with 16 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/cmdk/CommandKClient.tsx
View File

@ -167,6 +167,7 @@ export default function CommandKClient({
const { maskStyle, updateMask } = useMaskedScroll({ const { maskStyle, updateMask } = useMaskedScroll({
ref: refScroll, ref: refScroll,
updateMaskOnEvents: false, updateMaskOnEvents: false,
fadeSize: 50,
}); });
// Manage action/path waiting state // Manage action/path waiting state

24
src/components/useMaskedScroll.ts
View File

@ -39,10 +39,14 @@ export default function useMaskedScroll({
const end = isVertical const end = isVertical
? (ref.scrollHeight - ref.scrollTop) - ref.clientHeight < 1 ? (ref.scrollHeight - ref.scrollTop) - ref.clientHeight < 1
: (ref.scrollWidth - ref.scrollLeft) - ref.clientWidth < 1; : (ref.scrollWidth - ref.scrollLeft) - ref.clientWidth < 1;
ref.style.setProperty(CSS_VAR_START, `${!start ? fadeSize : 0}px`); ref.style.setProperty(CSS_VAR_START, !start
ref.style.setProperty(CSS_VAR_END, `${!end ? fadeSize : 0}px`); ? 'rgba(0, 0, 0, 0)'
: 'rgba(0, 0, 0, 1)');
ref.style.setProperty(CSS_VAR_END, !end
? 'rgba(0, 0, 0, 0)'
: 'rgba(0, 0, 0, 1)');
} }
}, [containerRef, fadeSize, isVertical]); }, [containerRef, isVertical]);
useEffect(() => { useEffect(() => {
const ref = containerRef?.current; const ref = containerRef?.current;
@ -73,14 +77,14 @@ export default function useMaskedScroll({
try { try {
window.CSS.registerProperty({ window.CSS.registerProperty({
name: CSS_VAR_START, name: CSS_VAR_START,
syntax: '<length>', syntax: '<color>',
initialValue: '0px', initialValue: 'rgba(0, 0, 0, 0)',
inherits: false, inherits: false,
}); });
window.CSS.registerProperty({ window.CSS.registerProperty({
name: CSS_VAR_END, name: CSS_VAR_END,
syntax: '<length>', syntax: '<color>',
initialValue: '0px', initialValue: 'rgba(0, 0, 0, 0)',
inherits: false, inherits: false,
}); });
} catch {} } catch {}
@ -88,9 +92,9 @@ export default function useMaskedScroll({
const maskStyle: CSSProperties = useMemo(() => { const maskStyle: CSSProperties = useMemo(() => {
// eslint-disable-next-line max-len // eslint-disable-next-line max-len
const gradientStart = `linear-gradient(to ${isVertical ? 'bottom' : 'right'}, transparent, black var(${CSS_VAR_START}))`; const gradientStart = `linear-gradient(to ${isVertical ? 'bottom' : 'right'}, var(${CSS_VAR_START}), black ${fadeSize}px)`;
// eslint-disable-next-line max-len // eslint-disable-next-line max-len
const gradientEnd = `linear-gradient(to ${isVertical ? 'top' : 'left'}, transparent, black var(${CSS_VAR_END}))`; const gradientEnd = `linear-gradient(to ${isVertical ? 'top' : 'left'}, var(${CSS_VAR_END}), black ${fadeSize}px)`;
const maskImage = [gradientStart, gradientEnd].join(', '); const maskImage = [gradientStart, gradientEnd].join(', ');
const transition = [ const transition = [
`${CSS_VAR_START} ${animationDuration}s ease-in-out`, `${CSS_VAR_START} ${animationDuration}s ease-in-out`,
@ -102,7 +106,7 @@ export default function useMaskedScroll({
maskRepeat: 'no-repeat', maskRepeat: 'no-repeat',
transition, transition,
}; };
}, [isVertical, animationDuration]); }, [isVertical, fadeSize, animationDuration]);
return { maskStyle, updateMask }; return { maskStyle, updateMask };
} }

2
src/photo/PhotoGridPageClient.tsx
View File

@ -40,7 +40,7 @@ export default function PhotoGridPageClient({
'sticky top-0 -mb-5 -mt-5', 'sticky top-0 -mb-5 -mt-5',
'max-h-screen py-4', 'max-h-screen py-4',
)} )}
fadeSize={36} fadeSize={100}
hideScrollbar hideScrollbar
> >
<PhotoGridSidebar {...{ <PhotoGridSidebar {...{