Skip to content

Component 041Carousels

Character Deck Slider

A white character card stacks anime portraits into a vertical deck: the active card blooms into color while neighbors fade to grayscale above and below.

  • React
  • Tailwind CSS
  • TypeScript
Use the round up/down buttons, click a peeking card or a pagination line, swipe the deck vertically, or focus it and use the arrow keys.
Loading preview…
Live interactive preview

Quick start

Make it yours.

Save character-deck-slider.tsx in your components folder, then import it below. Requires React and Tailwind CSS.

TSXapp/page.tsx
import CharacterDeckSlider from "@/components/ui/character-deck-slider";

export default function CharactersPage() {
  return <CharacterDeckSlider />;
}

Behind the interaction

The details that make it work.

Designed to explore, ready to adapt.

A deck with depth

Five card positions scale, shift, and desaturate together on one smooth cubic-bezier curve, so every step feels physical.

Every way to browse

Buttons, pagination lines, peeking-card clicks, vertical swipe, and arrow keys all move the same deck, with a polite live announcement.

Bring your own cast

Typed items, an onChange callback, optional looping, and embedded default artwork keep the copied file ready to use.

Keep exploring

More from the lab.

View all components
Carousels / 053

Classic Microcars

An editorial tour of three classic microcars, with sliding cutouts, condensed typography, and an inset photographic archive.

Carousels / 049

Chrome Profile Carousel

Four personal browser worlds turn in 3D, with portraits, saved places, products, and bookmarks layered over matching colors.