Skip to content

Component 049Carousels

Chrome Profile Carousel

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

  • React
  • Tailwind CSS
  • TypeScript
Choose a profile, swipe, or use the arrow keys.
Loading preview…
Live interactive preview

Quick start

Make it yours.

Save chrome-profile-carousel.tsx in your components folder, then import it below. Requires React and Tailwind CSS.

TSXapp/page.tsx
import ChromeProfileCarousel from "@/components/ui/chrome-profile-carousel";

export default function Page() {
  return <ChromeProfileCarousel />;
}

Behind the interaction

The details that make it work.

Designed to explore, ready to adapt.

Four personal worlds

Original reference portraits, shopping cards, places, and bookmarks float above blue, coral, yellow, and green panels.

A turn with depth

Perspective rotation, outgoing and incoming layers, and palette transitions follow the supplied motion reference.

Ready to make your own

Custom profile data, autoplay controls, layer callbacks, keyboard navigation, swipe, and reduced-motion support.

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 / 041

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.