Chromacast
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.
The preview is live. The source is Pro.
One purchase, lifetime access: every pro component's source, CLI install with your own registry token, and all future drops.
Installation
CLI
npx shadcn@latest add @crucible/chromacastManual — install dependencies, then copy the source
npm install motionProps
| 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 all props of Omit<React.ComponentPropsWithoutRef<"section">, "children" | "onChange"> — they pass through to the underlying element. | |||
Honors prefers-reduced-motion with a designed static fallback, pauses offscreen and on hidden tabs, and passes className through.