tidy up numbers

src/app/(website)/components/Hero/ScrollingNumbers.tsx

@@ -5,12 +5,12 @@ import { letters } from "./letters";
 
 export default function ScrollingNumbers({ numbers }: { numbers: string[][] }) {
   return (
-    <div className="absolute top-0 h-full w-full z-0 opacity-15 overflow-clip">
+    <div className="absolute top-0 h-full w-full z-0 opacity-50 overflow-clip">
       <div className="h-full w-full flex gap-4 skew-24 scale-150">
         {numbers.map((col, i) => (
           <NumberCol col={col} key={i} />
         ))}
-        <div className="absolute w-full h-full mask-b-from-20% bg-black skew"></div>
+        <div className="absolute w-full h-full mask-b-from-0 bg-black skew"></div>
       </div>
     </div>
   );
@@ -19,13 +19,12 @@ export default function ScrollingNumbers({ numbers }: { numbers: string[][] }) {
 const NumberCol = ({ col }: { col: string[] }) => {
   const range = [0, -100];
   const speed = Math.log(letters.indexOf(col[0]) + 10) * 100;
-
   return (
     <motion.div
       initial={{
         translateY: range[0] + "vh",
       }}
-      animate={{ translateY: range[1] + "vh" }}
+      whileInView={{ translateY: range[1] + "vh" }}
       transition={{
         type: "tween",
         duration: speed + 10,
@@ -35,7 +34,7 @@ const NumberCol = ({ col }: { col: string[] }) => {
       className="flex-1 flex flex-col items-center"
     >
       {col.map((num, j) => (
-        <div key={j} className="text-accent-300 text-3xl">
+        <div key={j} className="text-accent-600 text-3xl">
           {num}
         </div>
       ))}

src/app/(website)/components/Hero/letters.ts

@@ -5,26 +5,6 @@ export const letters = [
   "d",
   "e",
   "f",
-  // "g",
-  // "h",
-  // "i",
-  // "j",
-  // "k",
-  // "l",
-  // "m",
-  // "n",
-  // "o",
-  // "p",
-  // "q",
-  // "r",
-  // "s",
-  // "t",
-  // "u",
-  // "v",
-  // "w",
-  // "x",
-  // "y",
-  // "z",
   "0",
   "1",
   "2",

src/app/(website)/page.tsx

@@ -19,7 +19,7 @@ export default async function Home() {
     <div className="">
       <div className="h-screen pt-[var(--header-height)] flex flex-col items-center justify-end text-white pb-[10vh] relative">
         <ScrollingNumbers numbers={randomNumbers} />
-        <h1 className="text-8xl max-w-6xl">{titleGroup.title}</h1>
+        <h1 className="text-8xl max-w-6xl z-10">{titleGroup.title}</h1>
       </div>
       <div className="h-screen bg-accent-700">hello</div>
     </div>