Getting Started
Components
TweenCommand Palette
Search for a command to run...
TweenSearch for a command to run...
( N )
Digital Folio 25
Menu
OR
13
LV
88
ZN
21
TH
47
VX
77
"use client"
import { CardRingReveal } from "@/registry/tween/card-ring-reveal"
export function CardRingRevealDemo() {
return <CardRingReveal />
}
import { CardRingReveal } from "@/components/ui/card-ring-reveal"<CardRingReveal
images={[
"/card-1.jpg",
"/card-2.jpg",
"/card-3.jpg",
"/card-4.jpg",
"/card-5.jpg",
"/card-6.jpg",
"/card-7.jpg",
"/card-8.jpg",
]}
faces={[
{ code: "OR", number: "13" },
{ code: "LV", number: "88" },
{ code: "ZN", number: "21" },
{ code: "TH", number: "47" },
{ code: "VX", number: "77" },
]}
navCenter="Digital Folio 25"
/>On mount, eight intro cards are positioned tangentially around a circle (radius derived from the component box) and scale up one by one on a crr-hop ease, then scale back to nothing. Five outro cards stacked at the first ring position fade in, rise, and the lead card flips on its Y axis to reveal its back-face photo while all five fan out to evenly distributed X positions and settle to rest. The nav then slides down and the footer logo reveals by sliding up inside its clip and scaling from a tenth to full size. The X spread is recomputed from the component's own getBoundingClientRect() (not the window) so it scales inside the embedded preview, and a debounced resize listener keeps the fan aligned. When prefers-reduced-motion: reduce is set, the component skips the animation and renders its final resting state — fanned cards, visible nav, and revealed logo — immediately. Colors are theme-adaptive: the surface and text default to the background/foreground tokens (legible in both light and dark docs modes) and the footer logo is tinted with currentColor; pass background/foreground to override.
| Prop | Type | Default | Description |
|---|---|---|---|
images | string[] | 8 defaults | Eight ring images; the first also becomes the flip card's back face. |
imageAlt | string | "" | Alt text applied to every card image. |
logo | string | default | Footer logo SVG, rendered as a theme-tinted mask. |
faces | CardRingFace[] | 5 defaults | Front faces ({ code, number }) for the fanned outro cards. |
navBrand | React.ReactNode | "( N )" | Brand glyph shown top-left in the nav. |
navCenter | React.ReactNode | "Digital Folio 25" | Centered nav label. |
navMenu | React.ReactNode | "Menu" | Right-aligned nav label. |
radius | number | 225 | Ring radius in px on wide (>= 900px) containers. |
radiusMobile | number | 150 | Ring radius in px on narrow containers. |
background | string | var(--background) | Surface color; defaults to the theme surface token. |
foreground | string | var(--foreground) | Text / logo color; defaults to the theme foreground token. |
className | string | — | Extra classes on the outer container. |