44 lines
1.2 KiB
TypeScript
44 lines
1.2 KiB
TypeScript
"use client";
|
|
|
|
import { motion } from "motion/react";
|
|
import { letters } from "./letters";
|
|
|
|
export default function ScrollingNumbers({ numbers }: { numbers: string[][] }) {
|
|
return (
|
|
<div className="absolute top-0 h-full w-full z-0 opacity-50 pointer-events-none">
|
|
<div className="h-full w-full flex gap-4 skew-24 scale-150 overflow-hidden">
|
|
{numbers.map((col, i) => (
|
|
<NumberCol col={col} key={i} />
|
|
))}
|
|
<div className="absolute w-full h-full mask-b-from-0 bg-black"></div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
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",
|
|
}}
|
|
whileInView={{ translateY: range[1] + "vh" }}
|
|
transition={{
|
|
type: "tween",
|
|
duration: speed + 10,
|
|
repeat: Infinity,
|
|
repeatType: "reverse",
|
|
}}
|
|
className="flex-1 flex flex-col items-center"
|
|
>
|
|
{col.map((num, j) => (
|
|
<div key={j} className="text-accent-800 text-8xl">
|
|
{num}
|
|
</div>
|
|
))}
|
|
</motion.div>
|
|
);
|
|
};
|