Tangle Footer

Footers 40

About

An animated footer made of nested circular SVG text ribbons that loop marquee-style copy along curved paths, with theme-aware light and dark colors.

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

Code

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

Usage.tsx

"use client";

import { TangleFooter } from "@/components/ui/tangle-footer";

export default function TangleFooterDemo() {
  return (
    <div className="mx-auto w-full max-w-7xl">
      <TangleFooter
        lines={[
          "Ship something opinionated — less boilerplate, clearer decisions.",
          "Knows what's going on. Can you check in with them and see what's next.",
          "The new timeline should be ready by Friday, although it's probably going to slip.",
        ]}
      />
    </div>
  );
}