feat: set mask percentage to the marquee-cards

src/app/features/home-feature/home-feature.component.html

@@ -8,9 +8,9 @@
   <app-marquee-cards
     class="absolute top-[30%] -translate-y-1/2 left-0 right-0 animate-fade"
   />
-  <app-marquee-line-rotation
+  <!-- <app-marquee-line-rotation
     class="absolute bottom-0 left-0 right-0 overflow-hidden"
-  />
+  /> -->
   <app-marquee-words
     class="absolute top-0 left-4 bottom-0 animate-fade-right"
   />

src/app/shared/components/marquee-cards/marquee-cards.component.html

@@ -1,3 +1,8 @@
-<ngx-fast-marquee direction="right" [speed]="100" [pauseOnHover]="true">
+<ngx-fast-marquee
+  direction="right"
+  [speed]="100"
+  [pauseOnHover]="true"
+  [maskPercentage]="40"
+>
   <app-profile-card class="mx-4" />
 </ngx-fast-marquee>

src/app/shared/components/marquee-line-rotation/marquee-line-rotation.component.html

@@ -1,5 +1,35 @@
-<div class="h-[30vh] border border-zinc-400"></div>
+<div class="h-[30vh]"></div>
 <div
-  class="absolute bottom-0 right-0 w-[40vw] h-[30vh] bg-slate-50 overflow-hidden"
+  class="absolute bottom-0 right-0 w-[40vw] h-[30vh] bg-neutral-700"
   style="clip-path: polygon(80% 0, 100% 0%, 100% 100%, 0% 100%)"
-></div>
+>
+  <div
+    class="absolute inset-0 bg-zinc-900 overflow-hidden"
+    style="
+      clip-path: polygon(
+        calc(80% + 4px) 10px,
+        calc(100% - 10px) 10px,
+        calc(100% - 10px) calc(100% - 10px),
+        32px calc(100% - 10px)
+      );
+    "
+  >
+    <ngx-fast-marquee class="absolute left-0 right-0 bottom-0" [speed]="200">
+      <div class="px-4">Item</div>
+      <div class="px-4">Item</div>
+      <div class="px-4">Item</div>
+      <div class="px-4">Item</div>
+      <div class="px-4">Item</div>
+      <div class="px-4">Item</div>
+      <div class="px-4">Item</div>
+      <div class="px-4">Item</div>
+      <div class="px-4">Item</div>
+      <div class="px-4">Item</div>
+      <div class="px-4">Item</div>
+      <div class="px-4">Item</div>
+      <div class="px-4">Item</div>
+      <div class="px-4">Item</div>
+      <div class="px-4">Item</div>
+    </ngx-fast-marquee>
+  </div>
+</div>

src/app/shared/components/marquee-line-rotation/marquee-line-rotation.component.ts

@@ -1,10 +1,11 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { NgxFastMarqueeModule } from '@ngx-fast-marquee';
 
 @Component({
   selector: 'app-marquee-line-rotation',
   standalone: true,
-  imports: [CommonModule],
+  imports: [CommonModule, NgxFastMarqueeModule],
   templateUrl: './marquee-line-rotation.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })