Arc Reel | a1ui

Demo

OpenAI

ElevenLabs

Anthropic

Google

Mistral AI

DeepSeek

Runway

Cohere

xAI

Drag left or right. Use the arrows or scrub the line below to move through the providers.

Installation

pnpm dlx shadcn@latest add https://ui.arjayby1.xyz/r/arc-reel.json

Code

import { ArcReel } from "@/components/ui/arc-reel";

const providers = [
  { id: "openai", name: "OpenAI" },
  { id: "anthropic", name: "Anthropic" },
  { id: "google", name: "Google" },
  { id: "elevenlabs", name: "ElevenLabs" },
  { id: "mistral", name: "Mistral AI" },
  { id: "deepseek", name: "DeepSeek" },
  { id: "runway", name: "Runway" },
  { id: "cohere", name: "Cohere" },
  { id: "xai", name: "xAI" },
];

export function Providers() {
  return <ArcReel items={providers} initialIndex={2} ariaLabel="AI providers" />;
}

API reference

Prop	Type	Default	Purpose
`items`	`ArcReelItem[]`	Required	Cards in display order. An empty array renders nothing.
`initialIndex`	`number`	`0`	Starting card, clamped to the available items.
`ariaLabel`	`string`	`"Arc Reel"`	Accessible name for the carousel.
`className`	`string`	None	Sets layout constraints such as width or placement.
`style`	`CSSProperties`	None	Overrides the reel's CSS variables.

Each item needs a unique id and a name. Optional logo content replaces the visible name. Optional artwork content fills the square behind it while the name stays centered. Every provider in the demo has a unique generated monochrome image with a soft overlay to keep the names readable. Demo images are separate from the installable component; pass your own images through artwork.

Cards line the inside of a sphere with the viewer at its center. The middle sits farther away, while the sides face inward and grow larger as they wrap toward the viewer. The perspective adapts to the available width.

Drag with a mouse or swipe on a touchscreen to move through the cards. The reel coasts freely on release, and the marker tracks its position. The arrows move one card at a time, and the line between them is a draggable scrubber with eased movement. Cards loop continuously in both directions, including when dragging across the first or last provider. Focus the cards to use Left and Right to keep looping, or Home and End to choose the first and last providers. The scrubber selects a provider within the current cycle.

The component uses Embla for dragging and momentum. It repeats short lists as needed to fill the viewport, while exposing each provider once to assistive technology. A single card stays centered with navigation disabled. It responds to resizing and item changes, and removes settling animation when reduced motion is requested. Installation includes embla-carousel-react.

The reel inherits the project's background, foreground, card, and border colors and uses monospace labels. Override --arc-reel-background, --arc-reel-frame, --arc-reel-image, --arc-reel-border, --arc-reel-foreground, --arc-reel-muted, and --arc-reel-accent to change the palette. --arc-reel-card-width and --arc-reel-gap control card sizing and spacing.