# Chromacast — Animated Card for React

> Palette-thief media carousel: each slide is downsampled to 32×32 and clustered (seeded k-means, k = 3) into its dominant colors, and the whole room behind the card eases to them as a drifting mesh of three blurred blobs. The outgoing card tilts back and slides away while the next one rises; caption and control ink auto-pick black or white by contrast. Arrows, dots, swipe, ←/→/Home/End, autoplay that pauses on hover, focus and offscreen, next/prev/goTo handle, seeded procedural plates. Reduced motion: crossfade with instant recolor.

- Page: https://crucibleui.com/components/cards/chromacast
- Category: [cards](https://crucibleui.com/components/cards)
- Tier: pro (one-time purchase, see https://crucibleui.com/pricing)
- Engine: canvas
- npm dependencies: motion

## Install

```bash
npx shadcn@latest add @crucible/chromacast
```

Pro install requires adding the token-bearing `@crucible` registry to components.json (issued at https://crucibleui.com/account after purchase).

Import from `@/components/crucible/chromacast`.

## Props (`ChromacastProps`)

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `ref?` | `React.Ref<ChromacastHandle>` | — | React 19 ref-as-prop → {@link ChromacastHandle}. |
| `items?` | `ChromacastItem[]` | — | Slides. Omit for five seeded procedural plates with very different palettes. |
| `autoplay?` | `number \| false` | `5200` | Autoplay interval in ms, or `false`. Pauses while hovered, while keyboard focus is inside, offscreen, on hidden tabs and under reduced motion. |
| `index?` | `number` | — | Controlled active slide. Pair with `onIndexChange`. |
| `defaultIndex?` | `number` | `0` | Initial slide when uncontrolled. |
| `onIndexChange?` | `(index: number) => void` | — | Fires with the requested slide index whenever navigation happens. |
| `intensity?` | `number` | `0.9` | Strength of the color-cast backdrop, 0 (plain dark room) – 1 (full cast). |
| `speed?` | `number` | `1` | Drift speed multiplier for the backdrop blobs. 0 holds them still. |
| `colorDuration?` | `number` | `1100` | Duration of the room's color change in ms. |
| `arrows?` | `boolean` | `true` | Show the previous/next arrow buttons. |
| `dots?` | `boolean` | `true` | Show the dot pager. |
| `seed?` | `number` | `11` | Seed for the procedural plates, palette clustering and blob drift. |
| `paused?` | `boolean` | `false` | Freeze drift and autoplay. Navigation still works. |

Also accepts: `Omit<React.ComponentPropsWithoutRef<"section">, "children" | "onChange">`.

## Usage example

```tsx
import { Chromacast } from "@/components/crucible/chromacast";

export default function ChromacastDemo() {
  return (
    <div className="relative isolate flex h-full min-h-[360px] w-full items-center justify-center overflow-hidden rounded-xl bg-neutral-950">
      <div className="relative z-10 flex h-full w-full">
        <Chromacast className="h-full min-h-[480px] w-full rounded-xl pt-14" />
        <p className="pointer-events-none absolute top-4 left-1/2 -translate-x-1/2 rounded-full bg-black/30 px-3 py-1 text-center text-xs whitespace-nowrap text-white/80 backdrop-blur-md">
          Swipe or use the arrows — the room changes color.
        </p>
      </div>
    </div>
  );
}
```

## Accessibility & performance

Honors `prefers-reduced-motion` with a designed static frame or fade (never a blank box) and passes `className` through. Pauses offscreen and on hidden tabs, clamps device pixel ratio, and tears down its GL/canvas context on unmount.