Components / KATAYABURI / Carousel Ring

Carousel Ring beta

A merry-go-round of cards in real 3D: eight panels riding a ring that never stops turning.

Preview

Hover to stop the ride and read a card.

<div class="k-ring" role="img" aria-label="A rotating 3D ring of eight part cards">
  <div class="k-ring-in" aria-hidden="true">
    <div class="k-ring-p" style="transform:rotateY(0deg) translateZ(158px)"><b>Meteors</b><span>A seeded night sky</span></div>
    <div class="k-ring-p" style="transform:rotateY(45deg) translateZ(158px)"><b>Dock</b><span>Tiles that swell</span></div>
    <div class="k-ring-p" style="transform:rotateY(90deg) translateZ(158px)"><b>QR Code</b><span>Zero-dependency</span></div>
    <div class="k-ring-p" style="transform:rotateY(135deg) translateZ(158px)"><b>Kanban</b><span>Cards that drag</span></div>
    <div class="k-ring-p" style="transform:rotateY(180deg) translateZ(158px)"><b>Aurora</b><span>Light, drifting</span></div>
    <div class="k-ring-p" style="transform:rotateY(225deg) translateZ(158px)"><b>Sidebar</b><span>Two widths</span></div>
    <div class="k-ring-p" style="transform:rotateY(270deg) translateZ(158px)"><b>Calendar</b><span>Freed at last</span></div>
    <div class="k-ring-p" style="transform:rotateY(315deg) translateZ(158px)"><b>Orbit</b><span>Rings in rings</span></div>
  </div>
</div>
<p style="font-size:12.5px;color:var(--k-ink-3);margin-top:9px">Hover to stop the ride and read a card.</p>
/* KATA Carousel Ring — KATAYABURI. A merry-go-round of cards. */
.k-ring{position:relative;width:100%;background:var(--k-zinc-950);border-radius:14px;overflow:hidden;height:252px;perspective:950px;font-family:var(--k-font)}
.k-ring-in{position:absolute;left:50%;top:50%;width:104px;height:128px;margin:-64px 0 0 -52px;transform-style:preserve-3d;animation:k-ring-spin 26s linear infinite}
.k-ring:hover .k-ring-in{animation-play-state:paused}
.k-ring-p{position:absolute;inset:0;background:var(--k-zinc-900);border:1px solid var(--k-zinc-700);border-radius:13px;color:var(--k-on-color);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:10px;backface-visibility:hidden}
.k-ring-p b{font-size:14.5px;font-weight:650}
.k-ring-p span{font-size:11px;color:var(--k-zinc-400);line-height:1.5}
@keyframes k-ring-spin{from{transform:rotateY(0)}to{transform:rotateY(-360deg)}}
@media (prefers-reduced-motion:reduce){.k-ring-in{animation:none}}

Installation

CLI

node kata-ui.mjs add carousel-ring

Writes the part’s CSS into your project. New to the CLI? See the CLI doc.

Manual

  1. Load tokens.css once, before any part.
  2. Copy the CSS tab into your stylesheet.
  3. Copy the HTML where it belongs.

Usage

Eight panels on a preserve-3d ring, one spin keyframe, perspective on the stage — the whole illusion is geometry. Hover pauses the ride so a panel can actually be read, which separates a carousel from a rumor. Put the parts, the plans, or the team on the horses.

Accessibility

The ring is a rotating picture of a list: name the list in the figure’s label and keep a static version reachable on the page. Rotation stops on hover and entirely under prefers-reduced-motion, leaving the front panel facing the reader.

Anatomy

The public surface of this part, read from its own source. Class names are the API — the CSS tab above is the full contract.

.k-ringclass
.k-ring-inclass
.k-ring-pclass
aria-labelARIA
aria-hiddenARIA

Related parts

Bounce Letters beta

A headline whose letters hop when touched — and do the wave when you click.

lettersbouncetextheadlineplayful

Confetti Cannon beta

A button that fires confetti out of both corners of its stage. You already pressed it twice.

confetticelebrationcanvasbuttonparty

Fireworks beta

Click the night and it blooms: rockets, bursts and falling sparks on one canvas.

fireworkscanvascelebrationnightinteractive

Goo Cursor beta

A slime that follows the cursor: blobs with surface tension, courtesy of an SVG goo filter.

goocursorslimefiltertrail
Previous
Bounce Letters