DocsComponentsBlog
Star us
Docs

Fibonacci Lines

A component that creates lines using fibonacci numbers

Installation

Run the following command

It will create a new file fibonacci-lines.tsx inside the components/animata/container directory.

mkdir -p components/animata/container && touch components/animata/container/fibonacci-lines.tsx

Paste the code

Open the newly created file and paste the following code:

import { cn } from "@/lib/utils";
 
function fibonacci(n: number): number {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
}
 
export default function FibonacciLines({
  reverse,
  className,
  children,
  ...props
}: { reverse?: boolean } & React.HTMLAttributes<HTMLDivElement>) {
  return (
    <div
      className={cn("flex w-full", className, {
        "flex-col-reverse": reverse,
        "flex-col": !reverse,
      })}
      {...props}
    >
      {Array.from({ length: 10 }).map((_, i) => (
        <div
          key={i}
          style={{
            opacity: (i + 1) * 0.1,
            marginTop: fibonacci(i) + 2,
          }}
          className="w-full"
        >
          <div className="h-px w-full bg-foreground/10" />
        </div>
      ))}
      {children}
    </div>
  );
}

Credits

Built by hari

Edit this page on GitHub
Cursor TrackerMarquee