Tangle Footer

Five nested circular text rings — concentric semicircle loops with smooth marquee copy on slim ribbons. Theme-aware light and dark.

Five concentric rings as an upper semicircle — outer diameter spans the parent width (max-w-7xl) when height is left at the default (half width). A shorter height scales the nest down so the arches stay complete. Rings rotate for a continuous marquee. Colors follow the site theme unless you override them.

Tangle Footer

Props

Stage

#EFEAE2

Ribbon

#1A1916

Text

#EFEAE2

Height280

Seed23

Installation

pnpm dlx shadcn@latest add @23rd/tangle-footer

Or install straight from the public GitHub source registry:

pnpm dlx shadcn@latest add radiumcoders/23rd.dev/tangle-footer

Usage

Wrap in max-w-7xl (or any width constraint). The outer semicircle fills that width; pass phrases via lines (one per ring).

"use client"

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

export function SiteFooter() {
  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>
  )
}

Props

Prop	Type	Default
`lines`	`string[]`	built-in phrases
`ribbon`	`string`	theme (`#141414` / `#E8E4DC`)
`textColor`	`string`	theme (`#F4F0E8` / `#161616`)
`background`	`string`	theme (`#EFEAE2` / `#121210`)
`height`	`number`	half of measured width (semicircle)
`seed`	`number`	`23`
`label`	`string`	`Site footer`
`className`	`string`	—