diff --git a/src/components/CalendarView.vue b/src/components/CalendarView.vue index 87957af..9c1a168 100644 --- a/src/components/CalendarView.vue +++ b/src/components/CalendarView.vue @@ -46,6 +46,26 @@ const viewportHeight = ref(600) const rowHeight = ref(64) const rowProbe = ref(null) let rowProbeObserver = null + +// Scrolling blur effect +const blurAmount = ref(0) // pixels +let _lastBlurPos = 0 +let _blurFrame = null + +function _updateMotionBlur() { + const pos = scrollTop.value || 0 + if (_lastBlurPos) { + blurAmount.value = 0.5 * Math.abs(pos - _lastBlurPos) + } + _lastBlurPos = pos + _blurFrame = requestAnimationFrame(_updateMotionBlur) +} + +const viewportBlurStyle = computed(() => { + return blurAmount.value > 0 + ? { filter: 'url(#cal-vert-blur)', willChange: 'filter' } + : { filter: 'none' } +}) const baseDate = computed(() => new Date(1970, 0, 4 + calendarStore.config.first_day)) const selection = ref({ startDate: null, dayCount: 0 }) const isDragging = ref(false) @@ -387,6 +407,10 @@ onMounted(() => { onBeforeUnmount(() => { clearInterval(timer) }) + + // Start motion blur loop + _lastBlurPos = scrollTop.value || 0 + _blurFrame = requestAnimationFrame(_updateMotionBlur) }) onBeforeUnmount(() => { @@ -403,6 +427,7 @@ onBeforeUnmount(() => { } } document.removeEventListener('pointerlockchange', handlePointerLockChange) + if (_blurFrame) cancelAnimationFrame(_blurFrame) }) const handleDayMouseDown = (d) => { @@ -506,6 +531,15 @@ window.addEventListener('resize', () => {