Infinite Ribbon

Text 524

About

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Infinite Ribbon to your project and fits it to your theme.

Code

How Infinite Ribbon is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

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

export function InfiniteRibbonPreview() {
  return (
    <>
      <InfiniteRibbon className="absolute" duration={42} rotation={5}>
        Craft crisp dashboards, lively landing pages, and polished product flows
        with components that feel ready from the first click.
      </InfiniteRibbon>
      <InfiniteRibbon duration={42} reverse={true} rotation={-5}>
        Craft crisp dashboards, lively landing pages, and polished product flows
        with components that feel ready from the first click.
      </InfiniteRibbon>
    </>
  );
}

export default InfiniteRibbonPreview