feat: scroll mask

Signed-off-by: Innei <i@innei.in>
Innei · Jul 16, 2024 · 00a6921 · 00a6921
1 parent f1197ef
commit 00a6921
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 47 deletions.
diff --git a/src/components/ui/code-highlighter/shiki/ShikiWrapper.tsx b/src/components/ui/code-highlighter/shiki/ShikiWrapper.tsx
@@ -77,6 +77,7 @@ export const ShikiHighLighterWrapper = forwardRef<
 
   const [isCollapsed, setIsCollapsed] = useState(shouldCollapsed)
   const [isOverflow, setIsOverflow] = useState(false)
+
   useEffect(() => {
     if (!shouldCollapsed) {
       return
@@ -88,6 +89,7 @@ export const ShikiHighLighterWrapper = forwardRef<
     const windowHeight = getViewport().h
     const halfWindowHeight = windowHeight / 2
     const $elScrollHeight = $el.scrollHeight
+
     if ($elScrollHeight >= halfWindowHeight) {
       setIsOverflow(true)
 
@@ -145,7 +147,7 @@ export const ShikiHighLighterWrapper = forwardRef<
         <MotionButtonBase
           onClick={handleCopy}
           className={clsx(
-            'center absolute right-2 top-2 z-[3] flex text-xs',
+            'absolute right-2 top-2 z-[3] flex text-xs center',
             'rounded-md border border-accent/5 bg-accent/80 p-1.5 text-white backdrop-blur duration-200',
             'opacity-0 group-hover:opacity-100',
             filename && '!top-12',
@@ -199,7 +201,8 @@ export const ShikiHighLighterWrapper = forwardRef<
           {isOverflow && isCollapsed && (
             <div
               className={`absolute inset-x-0 bottom-0 flex justify-center py-2 duration-200 ${
-                ['mask-both-lg', 'mask-b-lg'].includes(maskClassName)
+                maskClassName.includes('mask-both') ||
+                maskClassName.includes('mask-b')
                   ? ''
                   : 'pointer-events-none opacity-0'
               }`}

diff --git a/src/hooks/shared/use-mask-scrollarea.ts b/src/hooks/shared/use-mask-scrollarea.ts
@@ -79,6 +79,7 @@ export const useMaskScrollArea = <T extends HTMLElement = HTMLElement>({
     containerRef,
     canScroll
       ? clsx(
+          'scroller',
           isScrollToBottom && 'mask-t',
           isScrollToTop && 'mask-b',
           !isScrollToBottom && !isScrollToTop && 'mask-both',

diff --git a/src/styles/layer.css b/src/styles/layer.css
@@ -11,51 +11,6 @@
     @apply border-zinc-900/10 dark:border-zinc-700;
   }
 
-  .mask-both {
-    mask-image: linear-gradient(
-      rgba(255, 255, 255, 0) 0%,
-      rgb(255, 255, 255) 20px,
-      rgb(255, 255, 255) calc(100% - 20px),
-      rgba(255, 255, 255, 0) 100%
-    );
-  }
-  .mask-both-lg {
-    mask-image: linear-gradient(
-      rgba(255, 255, 255, 0) 0%,
-      rgb(255, 255, 255) 50px,
-      rgb(255, 255, 255) calc(100% - 50px),
-      rgba(255, 255, 255, 0) 100%
-    );
-  }
-
-  .mask-b {
-    mask-image: linear-gradient(
-      rgb(255, 255, 255) calc(100% - 20px),
-      rgba(255, 255, 255, 0) 100%
-    );
-  }
-
-  .mask-b-lg {
-    mask-image: linear-gradient(
-      rgb(255, 255, 255) calc(100% - 50px),
-      rgba(255, 255, 255, 0) 100%
-    );
-  }
-
-  .mask-t {
-    mask-image: linear-gradient(
-      rgba(255, 255, 255, 0) 0%,
-      rgb(255, 255, 255) 20px
-    );
-  }
-
-  .mask-t-lg {
-    mask-image: linear-gradient(
-      rgba(255, 255, 255, 0) 0%,
-      rgb(255, 255, 255) 50px
-    );
-  }
-
   .cover-mask-b {
     mask-image: linear-gradient(180deg, #fff -17.19%, #00000000 92.43%);
   }

diff --git a/src/styles/theme.css b/src/styles/theme.css
@@ -43,3 +43,47 @@ html[data-theme='dark'] .shiki span {
   font-weight: var(--shiki-dark-font-weight) !important;
   text-decoration: var(--shiki-dark-text-decoration) !important;
 }
+/* https://stackoverflow.com/questions/10826784/make-html5-video-poster-be-same-size-as-video-itself */
+video.fit {
+  --video-width: 426;
+  --video-height: 240;
+  aspect-ratio: var(--video-width) / var(--video-height);
+  width: 100%;
+  height: auto;
+  object-fit: cover;
+}
+
+.scroller {
+  --mask-size: 48px;
+  padding: 0;
+  background: transparent;
+  mask: linear-gradient(white, transparent) 50% 0 / 100% 0 no-repeat,
+    linear-gradient(white, white) 50% 50% / 100% 100% no-repeat,
+    linear-gradient(transparent, white) 50% 100% / 100% 100px no-repeat;
+  mask-composite: exclude;
+  mask-size: 100% calc((var(--scroll-progress-top) / 100) * 100px), 100% 100%,
+    100% calc((100 - (100 * (var(--scroll-progress-bottom) / 100))) * 1px);
+}
+
+@supports (animation-timeline: scroll()) {
+  .scroller {
+    mask: linear-gradient(white, transparent) 50% 0 / 100% 0 no-repeat,
+      linear-gradient(white, white) 50% 50% / 100% 100% no-repeat,
+      linear-gradient(transparent, white) 50% 100% / 100% 100px no-repeat;
+    mask-composite: exclude;
+    animation: mask-up both linear, mask-down both linear;
+    animation-timeline: scroll(self);
+    animation-range: 0 2rem, calc(100% - 2rem) 100%;
+  }
+}
+@keyframes mask-up {
+  100% {
+    mask-size: 100% 100px, 100% 100%, 100% 100px;
+  }
+}
+@keyframes mask-down {
+  100% {
+    mask-size: 100% 100px, 100% 100%, 100% 0;
+  }
+}
+