Infinite Ribbon

import { InfiniteRibbon } from "@/components/ui/infinite-ribbon"

export function InfiniteRibbonDemo() {
  return (
    <div className="relative flex h-[350px] w-full items-center justify-center overflow-hidden">
      <InfiniteRibbon rotation={5} className="absolute">
        Build fast, responsive, and beautiful interfaces with ready-to-use
        components. Designed for developers who demand the best.
      </InfiniteRibbon>
      <InfiniteRibbon reverse={true} rotation={-5}>
        Build fast, responsive, and beautiful interfaces with ready-to-use
        components. Designed for developers who demand the best.
      </InfiniteRibbon>
    </div>
  )
}

import { InfiniteRibbon } from "@/components/ui/infinite-ribbon"

export function InfiniteRibbonDemoBis() {
  return (
    <div className="flex h-[350px] w-full flex-col items-center justify-center gap-10 overflow-hidden">
      <InfiniteRibbon>
        Build fast, responsive, and beautiful interfaces with ready-to-use
        components. Designed for developers who demand the best.
      </InfiniteRibbon>
      <InfiniteRibbon reverse={true}>
        Build fast, responsive, and beautiful interfaces with ready-to-use
        components. Designed for developers who demand the best.
      </InfiniteRibbon>
    </div>
  )
}