Ring Tower

Preview

Installation

pnpm dlx shadcn@latest add @23rd/ring-tower

Or from the public GitHub registry:

pnpm dlx shadcn@latest add radiumcoders/23rd.dev/ring-tower

Installs three alongside the component.

Usage

Pin it inside a relatively positioned section with a height. The canvas is transparent, so give the section a background. Each band leans a quarter turn from the last, so the stack zig-zags past the edges of the frame.

"use client"

import { RingTower } from "@/components/ui/ring-tower"

const bands = ["/bands/0.jpg", "/bands/1.jpg", "/bands/2.jpg"]

export function Hero() {
  return (
    <section className="relative isolate h-svh overflow-hidden bg-black">
      <RingTower images={bands} />
      <div className="pointer-events-none absolute inset-x-0 bottom-0 h-1/2 bg-linear-to-t from-black to-transparent" />
    </section>
  )
}

Images are drawn side by side at one height and repeated in whole tiles around each band, then cropped top and bottom to keep their proportions. Images on another origin need CORS headers, or they are skipped. With no images, or if none load, the bands show a plain green grid.

Every band in step, like the original:

<RingTower images={bands} parallax={0} />

Props