style: smooth video edges

safe-global · Jul 8, 2024 · e57d154 · e57d154
1 parent 164cb1e
commit e57d154
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 7 deletions.
diff --git a/src/components/GasStation/Hero/index.tsx b/src/components/GasStation/Hero/index.tsx
@@ -1,11 +1,13 @@
 import type { BaseBlock } from '@/components/Home/types'
 import Slider from '@/components/GasStation/Slider'
-import css from './styles.module.css'
 import { Button, Typography } from '@mui/material'
+import clsx from 'clsx'
+import css from './styles.module.css'
 
 const Hero = ({ title, text, link }: BaseBlock) => {
   return (
     <div className={css.videoWrapper}>
+      <div className={css.gradientBase} />
       <video autoPlay muted playsInline loop poster="/images/GasStation/gas-station.png" className={css.video}>
         <source src="/videos/GasStation/gas-station.webm" type="video/webm" />
         <source src="/videos/GasStation/gas-station.mp4" type="video/mp4" />
@@ -27,7 +29,7 @@ const Hero = ({ title, text, link }: BaseBlock) => {
           </Button>
         )}
       </div>
-      <div className={css.gradient} />
+      <div className={clsx(css.gradientBase, css.gradientFlipped)} />
     </div>
   )
 }

diff --git a/src/components/GasStation/Hero/styles.module.css b/src/components/GasStation/Hero/styles.module.css
@@ -1,5 +1,6 @@
 .videoWrapper {
   position: relative;
+  z-index: -1;
 }
 
 .video {
@@ -16,17 +17,24 @@
 }
 
 @media (min-width: 900px) {
-  .gradient {
+  .gradientBase {
     position: absolute;
-    width: 138px;
+    width: 94px;
     top: 0;
-    right: 0;
-    bottom: 39px;
+    bottom: 38px;
+    left: 0;
     background: linear-gradient(270deg, rgba(18, 19, 18, 0) 0%, var(--mui-palette-background-default) 100%);
-    transform: scaleX(-1.005); /* prevent 1px gap glitch */
     z-index: 1;
   }
 
+  .gradientFlipped {
+    left: auto;
+    right: 0;
+    bottom: 38px;
+    width: 138px;
+    transform: scaleX(-1);
+  }
+
   .videoWrapper {
     margin-top: calc(-1 * var(--header-height));
   }