gbanyan
d5ea352775
- MatrixRain: add delta time for consistent speed across 60/120/144Hz displays - ReadingProgress: use Scroll-Driven Animations API with JS fallback - Fallback to scroll events for unsupported browsers (Firefox) and prefers-reduced-motion Co-authored-by: Cursor <cursoragent@cursor.com>
86 lines
3.1 KiB
TypeScript
86 lines
3.1 KiB
TypeScript
'use client';
|
|
|
|
import { useEffect, useState } from 'react';
|
|
import { createPortal } from 'react-dom';
|
|
|
|
function supportsScrollDrivenAnimations(): boolean {
|
|
if (typeof CSS === 'undefined') return false;
|
|
return CSS.supports?.('animation-timeline', 'scroll()') ?? false;
|
|
}
|
|
|
|
export function ReadingProgress() {
|
|
const [mounted, setMounted] = useState(false);
|
|
const [progress, setProgress] = useState(0);
|
|
const [useScrollDriven, setUseScrollDriven] = useState(false);
|
|
|
|
useEffect(() => {
|
|
setMounted(true);
|
|
const updateMode = () => {
|
|
const prefersReducedMotion = window.matchMedia(
|
|
'(prefers-reduced-motion: reduce)'
|
|
).matches;
|
|
setUseScrollDriven(
|
|
supportsScrollDrivenAnimations() && !prefersReducedMotion
|
|
);
|
|
};
|
|
updateMode();
|
|
const mq = window.matchMedia('(prefers-reduced-motion: reduce)');
|
|
mq.addEventListener('change', updateMode);
|
|
return () => mq.removeEventListener('change', updateMode);
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (!mounted || useScrollDriven) return;
|
|
|
|
const handleScroll = () => {
|
|
const { scrollTop, scrollHeight, clientHeight } = document.documentElement;
|
|
const total = scrollHeight - clientHeight;
|
|
if (total <= 0) {
|
|
setProgress(0);
|
|
return;
|
|
}
|
|
const value = Math.min(100, Math.max(0, (scrollTop / total) * 100));
|
|
setProgress(value);
|
|
};
|
|
|
|
handleScroll();
|
|
window.addEventListener('scroll', handleScroll, { passive: true });
|
|
return () => window.removeEventListener('scroll', handleScroll);
|
|
}, [mounted, useScrollDriven]);
|
|
|
|
if (!mounted) return null;
|
|
|
|
return createPortal(
|
|
<div className="pointer-events-none fixed inset-x-0 top-0 z-[1200] h-1.5 bg-transparent">
|
|
<div className="relative h-1.5 w-full overflow-visible">
|
|
{useScrollDriven ? (
|
|
<div className="reading-progress-bar-scroll-driven absolute inset-y-0 left-0 w-full origin-left rounded-full bg-gradient-to-r from-[rgba(124,58,237,0.9)] via-[rgba(167,139,250,0.9)] to-[rgba(14,165,233,0.8)] shadow-[0_0_12px_rgba(124,58,237,0.5)]">
|
|
<span
|
|
className="absolute -right-2 top-1/2 h-3 w-3 -translate-y-1/2 rounded-full bg-white/80 blur-[1px] dark:bg-slate-900/80"
|
|
aria-hidden="true"
|
|
/>
|
|
</div>
|
|
) : (
|
|
<div
|
|
className="absolute inset-y-0 left-0 w-full origin-left rounded-full bg-gradient-to-r from-[rgba(124,58,237,0.9)] via-[rgba(167,139,250,0.9)] to-[rgba(14,165,233,0.8)] shadow-[0_0_12px_rgba(124,58,237,0.5)] transition-[transform,opacity] duration-300 ease-out"
|
|
style={{
|
|
transform: `scaleX(${progress / 100})`,
|
|
opacity: progress > 0 ? 1 : 0
|
|
}}
|
|
>
|
|
<span
|
|
className="absolute -right-2 top-1/2 h-3 w-3 -translate-y-1/2 rounded-full bg-white/80 blur-[1px] dark:bg-slate-900/80"
|
|
aria-hidden="true"
|
|
/>
|
|
</div>
|
|
)}
|
|
<span
|
|
className="absolute inset-x-0 top-2 h-px bg-gradient-to-r from-transparent via-blue-200/40 to-transparent blur-sm dark:via-blue-900/30"
|
|
aria-hidden="true"
|
|
/>
|
|
</div>
|
|
</div>,
|
|
document.body
|
|
);
|
|
}
|